To programming with Efw, it is required to import several .js files and .css files into JSP because of JQuery and JQuery UI.
You can use the Efw Tag to make the importing easy.
...
<%@ taglib prefix="efw" uri="efw" %>
<head>
...
<efw:Client baseurl="/appfolder" /> //efw:client or efw:CLIENT
...
</head>
Name | Required | Default | Description |
baseurl | No | "." | The web application base url. If your page is not in the base folder, it is must. |
It will be more easy using Part tag to include a common page part made by JSP in your own JSP.
<%@ taglib prefix="efw" uri="efw" %>
<body>
...
<efw:Part path="part.jsp" param1="####" param2="####" /> //or efw:part , efw:PART
...
</body>
You can get the params in the part jsp by request.getAttribute like the next.
<%=request.getAttribute("param1")%>
<%=request.getAttribute("param2")%>
ElFinder is a famous file manager for web. We made a customized version from elFinder 2.1,
and included it into Efw as a tag. It must be used after the Client tag for jQuery and jQuery UI including.
<%@ taglib prefix="efw" uri="efw" %>
<head>
<efw:Client/>
</head>
<body>
<efw:elFinder id="elFinder1" home="homefolder" height="400" width="800" lang="en" readonly="false" /> //or efw:elfinder , efw:Elfinder , efw:ELFINDER
</body>
Name | Required | Default | Description |
id | Yes | | The identity of the elFinder tag. You can use it as the instance of the elFinder. |
home | No | "" | A relative path to the storage folder(/WEB-INF/storage). You can set the properties file to change the storage folder to your own folder. |
height | No | "400" | The height of elFinder tag. The unit is "px". |
width | No | "auto" | The width of elFinder tag. The unit is "px". |
lang | No | "en" | The language of elFinder tag. |
readonly | No | "false" | The elFinder tag is for reference or not. |
protected | No | "false" | The elFinder tag is protected or not. If it is true, "setHome" method and "setReadOnly" method calling will be ignored. |
Calling | Returning | Description |
id . setHome ( path ) | void | To set the home attribute. |
id . setHeight ( height ) | void | To set the height attribute. |
id . setWidth ( width ) | void | To set the width attribute. |
id . setReadOnly ( readonly ) | void | To set the readonly attribute. |
JQuery UI Signature is a famous handwritten sign tool for web.We made a customized version from jQuery UI Signature 1.1.2,
and included it into Efw as a tag. It must be used after the Client tag for jQuery and jQuery UI including.
<%@ taglib prefix="efw" uri="efw" %>
<head>
<efw:Client/>
</head>
<body>
<efw:Signature id="signature1" width="400" height="200" /> //or efw:signature , efw:SIGNATURE
</body>
Name | Required | Default | Description |
id | Yes | | The identity of the Signature tag. |
height | No | "200" | The height of Signature tag. The unit is "px". |
width | No | "400" | The width of Signature tag. The unit is "px". |
A hidden input with the id same to the signature tag will be created to contain the image data.
var data = $("#signature1").val();
CKEditor is a famous rich text editor for web. We made a customized version from CKEditor 4.6.2,
and included it into Efw as a tag. It must be used after the Client tag for jQuery and jQuery UI including.
<%@ taglib prefix="efw" uri="efw" %>
<head>
<efw:Client/>
</head>
<body>
<efw:CKEditor id="ckeditor1" width="800" height="300" readonly="false" lang="ja" pattern="standard" /> //or efw:ckeditor , efw:CKeditor , efw:Ckeditor , efw:ckEditor
</body>
Name | Required | Default | Description |
id | Yes | | The identity of the CKEditor tag. |
pattern | No | "standard" | The pattern of the CKEditor tag. [ basic | standard | full ]. |
height | No | "400" | The height of CKEditor tag. The unit is "px". |
width | No | "auto" | The width of CKEditor tag. The unit is "px". |
lang | No | "" | The language of CKEditor tag. It will detect the language automatically by default. |
readonly | No | "false" | The CKEditor tag is for reference or not. |
Calling | Returning | Description |
id . setPattern ( path ) | void | To set the pattern attribute. |
id . setHeight ( height ) | void | To set the height attribute. |
id . setWidth ( width ) | void | To set the width attribute. |
id . setReadOnly ( readonly ) | void | To set the readonly attribute. |
A hidden input with the id same to the CKEditor tag will be created to contain the CKEditor data.
var data = $("#ckeditor1").val();
Google charts API is a famous html5 chart tool for web. We made several templates to use it more easier,
and included them into Efw as a tag. It must be used after the Client tag for jQuery and jQuery UI including.
<%@ taglib prefix="efw" uri="efw" %>
<head>
<efw:Client/>
<script>
function func1(options){
//alert(JSON.stringify(options));//to show the options as string.
options.options.vAxis.ticks=[100,1000000];// it will be preferential to param data-ticks
}
</script>
</head>
<body>
<efw:Chart id="char1" data="chart1_data" type="column" width="400" height="250" version="45.2" setoptions="func1" /> //or efw:chart , efw:CHART
<table border=1 id="chart1_data" data-format="#,##0百万円" data-legend="bottom" data-ticks="100,1000000">
<caption>会社業績</caption>
<tr><th>年度</th><th data-color="red">売上高</th><th data-color="green">営業利益</th><th data-color="blue">経常利益</th></tr>
<tr><td>2004 年</td><td>1,000百万円</td><td>400百万円</td><td>380百万円</td></tr>
...
</table>
</body>
Name | Required | Default | Description |
id | Yes | | The identity of the Chart tag. |
data | Yes | | The id of a data table to the Chart tag. |
type | Yes | | The type of the Chart tag. [ column | stackedcolumn | line | pie | donut | bar | stackedbar | area | stackedarea | scatter ]. |
height | No | "400" | The height of Chart tag. The unit is "px". |
width | No | "auto" | The width of Chart tag. The unit is "px". |
version | No | "current" | The version of Google Chart. |
setoptions | No | | The name of the customize function to set option params for google chart. |
data-format | No | | The format of the data.If it is defined, the tooltip of the data will be formated. |
data-legend | No | | The position of the legend.[ none | left | right | top | bottom ] |
data-color | No | | The color of the item. To set it with RGB or color name. |
data-ticks | No | | The gradations of the chart. |
Calling | Returning | Description |
id . draw ( ) | void | To draw the chart again. |
id . setType ( type ) | void | To set the type attribute. |
id . setHeight ( height ) | void | To set the height attribute. |
id . setWidth ( width ) | void | To set the width attribute. |