Layout

Layout
How can I display several input fields per line ?

To automatically align 2 or more tags per line, the <layout:grid > tag can be used. The following code displays 6 input fields on two lines :

...
<layout:form action="..." styleClass="FORM">
	<layout:grid cols="3">
		<layout:text key="Field 1" property="username1"/>
		<layout:text key="Field 2" property="username2"/>		
		<layout:text key="Field 3" property="username3"/>
		<layout:text key="Field 4" property="username4"/>
		<layout:text key="Field 5" property="username5"/>
		<layout:text key="Field 6" property="username6"/>								
	</layout:grid>
</layout:form>
How can I display a list in the left part of the screen and input fields on the right ?

The <layout:row> and <layout:column> tags can be used to display components in rows and columns. The following code displays a list on the left and input fields on the right :

...
<layout:form action="..." styleClass="FORM">
	<layout:row>
		<layout:collection name="users" styleClass="FORM">
			<layout:collectionItem title="users.login" property="login"/>
			<layout:collectionItem title="users.firstname" property="firstname"/>
			<layout:collectionItem title="users.lastname" property="lastname"/>
			<layout:collectionItem title="users.society" property="society"/>
		</layout:collection>
		<layout:column>
			<layout:text key="Field 1" property="username1"/>
			<layout:text key="Field 2" property="username2"/>		
			<layout:text key="Field 3" property="username3"/>
		</layout:column>
	</layout:row>
</layout:form>
...	
How can I insert an empty block or an empty line ?

The <layout:space> tag insert an empty block. The following code uses the previous examples, and displays:

  • A list in the top left part of the screen;
  • 3 fields in the top right part of the screen;
  • An empty line between the top and bottom parts
  • 5 inpout fields on 2 lines in the bottom, the field on the last line being centered
...
<layout:form action="..." styleClass="FORM">
	<layout:grid cols="2">
		<layout:collection name="users" styleClass="FORM" length="3">
			<layout:collectionItem title="users.login" property="login"/>
			<layout:collectionItem title="users.firstname" property="firstname"/>
			<layout:collectionItem title="users.lastname" property="lastname"/>
			<layout:collectionItem title="users.society" property="society"/>
		</layout:collection>
		<layout:column>
			<layout:text key="Field 1" property="username"/>
			<layout:text key="Field 2" property="username"/>
			<layout:text key="Field 3" property="username"/>
		</layout:column>
	</layout:grid>
	<layout:space/>
	<layout:grid cols="3">
		<layout:text key="Field 6" property="username"/>
		<layout:text key="Field 7" property="username"/>
		<layout:text key="Field 8" property="username"/>
		<layout:space/>
		<layout:text key="Field 9" property="username"/>
		<layout:space/>
	</layout:grid>
</layout:form>
...
How can I insert HTML code inside a Struts-Layout tag ?

Only the <layout:collectionItem> and <layout:text> (and its variant) support nesting of HTML code. For other tags, the HTML code must be nested inside an extra <layout:cell> tag, like in the following example. Nesting HTML code directly into a form, panel, grid, tab or other Struts-Layout tags is not supported.

...
<layout:grid>
	<layout:text key="a.key" property="aProperty"/>
	<layout:cell>Any HTML code</layout:cell>
	...
</layout:grid>
...		
		
Where can I see the layout examples running ?
here