The panel tag is a basic tag that creates a container for text etc. For example, the content of the <form> tag is displayed in a panel.
The HTML code is generated by a class implementing the panel interface. There are now two panel interface implementations: a simple default one that only uses tables (fr.improve.struts.taglib.layout.util.BasicPanel) , and another one that uses images (fr.improve.struts.taglib.layout.util.ImagePanel) The class to use can be specified by setting the value of the panel.class property of the skin properties file to the name of the panel implementation class.
<layout:panel styleClass="FORM" key="title"> <layout:message key="line1"/> <layout:message key="line2"/> </layout:panel>
Result(using default panel class)
<layout:panel name="panel1" expandable="true" expanded="true" key="Informations personnelles 1"
styleClass="FORM" model="fieldsValueTable">
<layout:text key="Nom" property="nom" mode="E,E,I" styleClass="LabelText" />
<layout:text key="Prénom" property="prenom" mode="E,E,I" styleClass="LabelText" />
<layout:text key="Identifiant" property="identifiant" mode="E,E,I" styleClass="LabelText" />
<layout:text key="Fonction" property="fonction" mode="E,E,I" styleClass="LabelText" />
<layout:text key="Centre de coût" property="centre" mode="E,E,I" styleClass="LabelText" />
</layout:panel>
Result(using default panel class)
The ImagePanel class allows to use images for the border of the panel. Here is an example with rounded corner:
The name of the images must be specified in the struts-layout skin property file. This file must contains the path to the following image keys:
It is possible to use different properties file in function of the skin and the css style class. The site http://www.application-servers.com uses the ImagePanel with different .properties file. Check the skin page for more information about the configuration file.
Starting with struts-layout 0.5 it is possible to nest panels and collections in panels without adding extra HTML code.
Example :
<%@page import="fr.improve.struts.webapp.layout.example.User,java.util.Vector" %>
<%@taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
<% Vector v = new Vector();
User user = new User();
user.setFullName("John Smith");
user.setUsername("jsmith");
user.setFromAddress("jsmith@mail.yahoo.com");
user.setReplyToAddress("jsmith@mail.yahoo.com");
User user2 = new User();
user2.setFullName("Jean Durand");
user2.setUsername("jdurand");
user2.setFromAddress("jdurand@mail.hotmail.fr");
user2.setReplyToAddress("jdurand@mail.yahoo.com");
v.add(user); v.add(user2); pageContext.setAttribute("users", v);
%>
<layout:html>
<layout:form action="registration.do" styleClass="FORM" key="Main form">
<layout:panel styleClass="FORM" key="Nested panel" width="100%" align="center">
<layout:panel styleClass="FORM" key="Nested panel" width="100%" align="center">
<layout:text key="property1" property="action" styleClass="FIELD"/>
<layout:text key="property2" property="action" styleClass="FIELD"/>
</layout:panel>
<layout:text key="property3" property="action" styleClass="FIELD"/>
</layout:panel>
<layout:collection name="users" styleClass="FORM" align="center" width="100%">
<layout:collectionItem title="Name" property="fullName"/>
<layout:collectionItem title="Login" property="username"/>
<layout:collectionItem title="Login" property="username"/>
<layout:collectionItem title="From address" property="fromAddress"/>
<layout:collectionItem title="Reply toaddress" property="replyToAddress"/>
</layout:collection>
</layout:form>
</layout:html>
Result. (space between the lines can be set using css properties)
| Attribute Name | Description |
|---|---|
| arg0, arg1, arg2, arg3, arg4 | Optional parametric replacement values. [EL ] |
| align | Set the alignment of the panel. Default is center |
| key | Key of the message to use as the panel title |
| mode | Set the display mode of the panel. Format is X,Y,Z where X is the create mode, Y edit mode and Z the inspect mode. Allowed values are N (not displayed) E (editable) and I (read-only, same as editable now). |
| styleClass | Css class to use to display this panel |
| width | Width of the panel |
| expandable | Optional parameter. True to add collapsible effect, false for standard panel.The default value is initialized at false. |
| expanded | Optional parameter. Specifies that the panel should initially be collapsed or expanded.The default value is initialized at true. |
| type | Optional parameter. Describes a type for your switch. Possible values are image, checkbox, link . Default value is image. |
| openedImage | Optional parameter. Describes an image for the panel in the visible state. |
| closedImage | Optional parameter. Describes an image for the panel in the non-visible state. |
Render a form. A form looks like a panel, but includes an html form tag. Nested tags can be layout, collection or input field tags. If the form action is a DispatchAction, the default parameter value can be set by specifying the reqCode (request code) attribute. This value can be changed by setting the reqCode attribute of the nested submit buttons.
The form display mode can be set by using FormUtils.setFormDisplayMode(HttpServletRequest in_request, ActionForm in_form, int in_mode)
All input tags support a mode attribut which can take the following values: X,Y,Z. X is the field display mode in creation mode, Y in edit mode and Z in inspect mode. The authorizied values are E (edit), I (inspect, the field value is sent as part of the form date), N (not displayed), H (hidden)
| Attribute Name | Description |
|---|---|
| acceptCharset | Charset accepted (as Struts <html:form> tag) |
| focus | Initial focus fo the form [EL] |
| key | Key of the message to use as the form title. The suffix ".edit", ".create" or ".inspect" is aumatically added at the end of the key in function of the form mode and if the resulting key exist in the message resource. |
| reqCode | value of the action parameter for Action subclassing DispatchAction. |
| styleClass | css class to use to display this form |
| onkeypress | allow you to call a Javascript function |
| scheme | allow to generate an absolute action URL with the specified scheme (http/https) [EL] |
Example :
<%@taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
<% User user = new User();
user.setFullName("John Smith");
user.setUsername("jsmith");
user.setFromAddress("jsmith@mail.yahoo.com");
user.setReplyToAddress("jsmith@mail.yahoo.com");
pageContext.setAttribute("user", v);
%>
<script language="javaScript">
function showAlert(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3)
targ = targ.parentNode;
if (targ.type=="text"){
alert ("You have pressed key N° " + event.keyCode);
}
}
}
</script>
<layout:html>
<layout:form action="registration.do" styleClass="FORM" onkeypress="showAlert" key="Main form">
<layout:collection name="user" styleClass="FORM" align="center" width="100%">
<layout:collectionItem title="Name" property="fullName"/>
<layout:collectionItem title="Login" property="username"/>
<layout:collectionItem title="Login" property="username"/>
<layout:collectionItem title="From address" property="fromAddress"/>
<layout:collectionItem title="Reply toaddress" property="replyToAddress"/>
</layout:collection>
</layout:form>
</layout:html>
The popup tag can be used to create a modal popup panel. The popup must be opened and closed by Javascript.
| Attribute Name | Description |
|---|---|
| arg0, arg1, arg2, arg3, arg4 | Optional parametric replacement values. [EL] |
| key | Key of the message to use as the panel title |
| styleClass | css class to use to display this panel |
| styleId | Javascript id of this panel |
<body>
<layout:button onclick="openStrutsLayoutPopup('myPopup');">Open the popup</layout:button>
<layout:popup styleClass="PANEL" styleId="myPopup">
<layout:message key="some.message.key"/>
<layout:button onclick="closeStrutsLayoutPopup('myPopup');">OK</layout:button>
</layout:popup>
</body>