Simple tutorial

Introduction

In this section, we will discover how to build a simple page containing a form, two input fields and a list. This page will allow the user to find people living in a specified city and having a specified name.

Here is a screenshot of the page:

And here is the code (19 lines, no HTML tags):

 1<layout:html>
 2    <layout:form action="myAction" styleClass="FORM">
 3        <layout:row>
 4            <layout:column>
 5                <layout:text key="search.name" property="name" styleClass="FIELD"/>
 6                <layout:text key="search.town" property="town" styleClass="FIELD"/>
 7                <layout:submit>
 8                    <layout:message key="search.submit"/>
 9                </layout:submit>
10            </layout:column>
11            <layout:collection name="list" styleClass="ARRAY">
12                <layout:collectionItem title="person.firstname" property="firstname"/>
13                <layout:collectionItem title="person.lastname" property="lastname"/>
14                <layout:collectionItem title="person.street" property="street"/>
15                <layout:collectionItem title="person.town" property="town"/>
16            </layout:collection>
17        </layout:row>
18    </layout:form>
19</layout:html>

Now, let's have a first look at the struts-layout tags.

Step 1 - the input fields

There are two text input fields on the page. With struts-layout we write:

 1<layout:html>
 2    <layout:form action="myAction" styleClass="FORM">
 3        <layout:text key="search.name" property="name" styleClass="FIELD"/>
 4        <layout:text key="search.town" property="town" styleClass="FIELD"/>
 5        <layout:submit>
 6            <layout:message key="search.submit"/>
 7        </layout:submit>
 8    </layout:form>
 9</layout:html>

which displays as:

Struts-Layout automatically generates the HTML table, rows and cells to format the page. The fonts, colors and alignement are specified in a css file. Struts-layout do also much more:

Any ActionError associated with a field is displayed just under the field. Example:

A red start is displayed next to the fields indicated as "required" (with the attribute isRequired="true"). Example:
Input fields can be displayed as read-only or read-write as a function of the form display mode (create, edit or inspect).
struts-layout also includes password, textarea, radio buttons, checkbox, select, date (with popup javascript calendar) tags.
If you want to specify the title of the page, or include additional javascript you can still use the usual HTML tags, provided you still use the <layout:skin tag>:

 1<html>
 2<head>
 3    <layout:skin/>
 4    ...
 5</head>
 6<body>
 7    <layout:form action="myAction" styleClass="FORM">
 8        <layout:text key="search.name" property="name" styleClass="FIELD"/>
 9        <layout:text key="search.town" property="town" styleClass="FIELD"/>
10        <layout:submit>
11            <layout:message key="search.submit"/>
12            </layout:submit>
13    </layout:form>
14</body>
15</html>

Step 2 - Displaying the list

Now that we know how to display the form and the input fields, we are going to add a list displaying the result of the search. The two struts-layout tags <layout:collection> and <layout:collectionItem> will be used.

  • <layout:collection> is used to specify the collection source of the displayed data and works in a way similar to the <logic:iterate> tag.
  • <layout:collectionItem> adds a column with the specified title and bean property to the displayed list.

So, let's suppose that when the user hits the submit button, the same page is displayed again, but that a Java collection is available in the request scope under the name "list". This collection contains Person objects having firstname, lastname, street and town properties. Here is how to display them:

 1<layout:html>
 2    <layout:form action="myAction" styleClass="FORM">
 3        <layout:text key="search.name" property="name" styleClass="FIELD"/>
 4        <layout:text key="search.town" property="town" styleClass="FIELD"/>
 5        <layout:submit>
 6            <layout:message key="search.submit"/>
 7        </layout:submit>
 8        <layout:collection name="list" styleClass="ARRAY">
 9            <layout:collectionItem title="person.firstname" property="firstname"/>
10            <layout:collectionItem title="person.lastname" property="lastname"/>
11            <layout:collectionItem title="person.street" property="street"/>
12            <layout:collectionItem title="person.town" property="town"/>
13        </layout:collection>
14    </layout:form>
15</layout:html>

We have just added the collection tags after the submit button. Here is the result:

The collection tags also enables:

  • selection of one or many elements in a list
  • ability to edit of one or many column(s)
  • sorting on the server or on the client side
  • paging
  • color alternance
  • emphasizing of elements matching specific properties

Just have a look at the examples.

Step 3 - Setting the layout

We haven't specified any layout up to this point, and we've seen that if we just put struts-layout tags one after another, each tag is displayed on a new line. Now, we're going to display the list on the right of the input fields.

To tell struts-layout to display a component on the right of the previous, we can use the <layout:row> tag. The following code displays all the components on the same line:

 1<layout:html>
 2    <layout:form action="myAction" styleClass="FORM">
 3        <layout:row>
 4            <layout:text key="search.name" property="name" styleClass="FIELD"/>
 5            <layout:text key="search.town" property="town" styleClass="FIELD"/>
 6            <layout:submit>
 7                <layout:message key="search.submit"/>
 8            </layout:submit>
 9            <layout:collection name="list" styleClass="ARRAY">
10                <layout:collectionItem title="person.firstname" property="firstname"/>
11                <layout:collectionItem title="person.lastname" property="lastname"/>
12                <layout:collectionItem title="person.street" property="street"/>
13                <layout:collectionItem title="person.town" property="town"/>
14            </layout:collection>
15        </layout:row>
16    </layout:form>
17</layout:html>

Result:

To display the input field in a column, we're going to add a <layout:column> tag:

 1<layout:html>
 2    <layout:form action="myAction" styleClass="FORM">
 3        <layout:row>
 4            <layout:column>
 5                <layout:text key="search.name" property="name" styleClass="FIELD"/>
 6                <layout:text key="search.town" property="town" styleClass="FIELD"/>
 7                <layout:submit>
 8                    <layout:message key="search.submit"/>
 9                </layout:submit>
10            </layout:column>
11            <layout:collection name="list" styleClass="ARRAY">
12                <layout:collectionItem title="person.firstname" property="firstname"/>
13                <layout:collectionItem title="person.lastname" property="lastname"/>
14                <layout:collectionItem title="person.street" property="street"/>
15                <layout:collectionItem title="person.town" property="town"/>
16            </layout:collection>
17        </layout:row>
18    </layout:form>
19</layout:html>

Result:

Struts-Layout also includes a space tag to insert an empty cell, and a grid tag which puts its inner tags in a table having the specified number of columns

Next

Struts-layout not only enables the page designer to display forms and lists, but also menus and treeviews. Discover all the struts-layout tags (and attributes) by reading the documentation.

tutorial.jpg (265.8 kB) Frédéric ESNAULT, 02/28/2012 10:45 am

fields.jpg (5.6 kB) Frédéric ESNAULT, 02/28/2012 10:48 am

error.gif (1.4 kB) Frédéric ESNAULT, 02/28/2012 10:48 am

required.gif (1.2 kB) Frédéric ESNAULT, 02/28/2012 10:48 am

collection2.jpg (17 kB) Frédéric ESNAULT, 02/28/2012 10:52 am

row.jpg (20.5 kB) Frédéric ESNAULT, 02/28/2012 10:59 am