Using the Struts Framework with WebSphere Studio V5 -- Part 1: Using Struts with Tiles

The Tiles framework enhances component-based design for Web UI development, and it works well in combination with the Struts framework. You can easily use the Tiles and Struts frameworks with WebSphere Studio to significantly reduce development time and maintenance costs for your Web development projects.

Share:

Colin Yu (coliny@ca.ibm.com), Software Developers, IBM

Colin Yu is a software developer on WebSphere Studio Application Developer at the IBM Toronto Lab. Colin received a Bachelor of Engineering degree in 1995 and a Master of Applied Science degree from the University of Waterloo, Ontario in 2000. Colin is an IBM Certified Enterprise Developer and Systems Expert on WebSphere Application Server, and an IBM Certified Solution Developer on WebSphere Studio Application Developer and VisualAge for Java.



Jane Fung (jcyfung@ca.ibm.com), Software Developers, IBM

Jane Fung works with the WebSphere Studio Application Developer Integration Edition tools development team. Jane earned a Bachelor of Applied Science degree in Electrical Engineering at the University of Waterloo, Ontario, and is a Sun Java 2 Certified Programmer.



19 November 2003

Introduction

Struts is one of the best-known open-source embodiments of the Model-View-Controller (MVC) framework, which provides a convenient way for modular applications to cleanly separate logic, presentation, and data. Java™Server Pages (JSP) typically plays the View role in the MVC framework, which generates a dynamic user interface (UI) based on business logic and data.

The Tiles framework, on the other hand, enhances the component-based design and template concepts in Web UI design. It helps developers decouple and reuse Web UI components. In addition, the Tiles template and inheritance features enable you to give Web applications a consistent look and feel with minimal effort.

IBM ® WebSphere® Studio Application Developer Version 5 (hereafter called Application Developer) has built-in tools and run-time support for Struts 1.02 and 1.1 (beta 2). The Tiles framework is included in the Struts 1.1 distribution. Tiles can be used without Struts, or integrated with the Struts framework in order to support advanced features.

This article assumes that you have basic knowledge of Struts and the Struts tools in Application Developer. If you'd like some basic information on this topic, see Writing a Simple Struts Application using WebSphere Studio V5.


The need to reuse Web UI components

In order to better understand how Web UI components can be reused, start by looking at the two Web pages (JSPs) below in Figures 1 and 2:

Figure 1. IBM Solutions Page
IBM Solutions Page
Figure 2. IBM News Page
IBM News Page

As you can see, these two pages have many UI components in common - the header, the left navigation bar, and the footer. You could create these two pages separately without sharing any components, with each JSP responsible for its own layout and with a duplicate header, left navigation bar, and footer. Of course, this solution is highly inefficient, because changes to a common UI component, such as the left navigation bar, requires that you change every single related page.

In the above example, a lot of HTML and JSP code are duplicated and the UI components are tightly coupled. It is well known in software engineering that tightly coupled components result in high maintenance costs. A better solution is to decouple the UI components (header, navigation, footer, and body) and reuse them in different pages.

The <jsp:include> tag provides one solution for reusing Web UI components. With the <jsp:include> tag, the Solutions page and the News page could be composed by four JSPs, as shown in Figures 3 and 4:

Figure 3. Solutions.jsp
Solutions.jsp
Figure 4. News.jsp
News.jsp

The JSP code for the Solutions page is shown in Example 1 and the JSP code for News page is shown in Example 2:

Example 1. Solutions.jsp with JSP include tag (SimpleJSPWeb)
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
	<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
	</TR>
	<TR>
	<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top"> <jsp:include page="/Fragment-Solutions.jsp" /></TD> <TR> <TD colspan="2"><jsp:include page="/Footer.jsp" /></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

Example 2. News.jsp with JSP include tag (SimpleJSPWeb)

<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
	<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
	</TR>
	<TR>
	<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top"> <jsp:include page="/Fragment-News.jsp" /></TD> <TR> <TD colspan="2"><jsp:include page="/Footer.jsp" /></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

The sample code for Solutions.jsp and News.jsp are located in the SimpleJSPWeb project in the StrutsTiles.zip download file. After you download and unzip StrutsTiles.zip, import the EAR file into a workspace:

  • In the Workbench menu, select File => Import => EAR file.
  • Click on Browse to select the EAR file.
  • Enter StrutsTiles as the project name.

To run any of the samples:

  • Right-click on News.jsp or Solutions.jsp and select Run on Server.

The Tiles insert tag provides the same funtionality as the JSP include tag. The following JSP code mirrors the JSP include solution using the Tiles insert tag:

Example 3. Solutions.jsp with tiles insert tag (SimpleTilesWeb)

<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
		<TD colspan="2">
		<tiles:insert page="/Header.jsp" flush="true"/>
		</TD>
	</TR>
	<TR>
		<TD width="20%" valign="top">
		<tiles:insert page="/Navigation.jsp" flush="true"/>
		</TD>
		<TD width="80%" valign="top">
		<tiles:insert page="/Fragment-Solutions.jsp" flush="true" />
		</TD>
	</TR>
	<TR>
		<TD colspan="2">
		<tiles:insert page="/Footer.jsp" flush="true"/>
		</TD>
	</TR>
	</TBODY>
	</TABLE>
</BODY>
</HTML>

Example 4. News.jsp with tiles insert tag (SimpleTilesWeb)

<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
		<TD colspan="2">
		<tiles:insert page="/Header.jsp" flush="true"/>
		</TD>
	</TR>
	<TR>
		<TD width="20%" valign="top">
		<tiles:insert page="/Navigation.jsp" flush="true"/>
		</TD>
		<TD width="80%" valign="top">
		<tiles:insert page="/Fragment-News.jsp" flush="true" />
		</TD>
	</TR>
	<TR>
		<TD colspan="2">
		<tiles:insert page="/Footer.jsp" flush="true"/>
		</TD>
	</TR>
	</TBODY>
	</TABLE>
</BODY>
</HTML>

Both the JSP include tag and the Tiles insert tag decouple the Web UI components. Changes to an individual UI component, such as the header, only require changes to the page responsible for that component, such as Header.jsp. Other pages are unchanged. The code for Examples 3 and 4 is located in SimpleTilesWeb.

However, if the layout of the Web applicationÂ’s UI needs to changes from Figure 5 to Figure 6, where the body component could be either fragment-Solutions.jsp or fragment-News.jsp, how many pages do you need to modify in the above example? You can easily tell that you have to change Solutions.jsp and News.jsp. If you have N pages with the same layout, you will have to modify all N pages. Therefore, with only a JSP include tag or Tiles insert tag, the layout of the Web application UI is still tightly coupled with each JSP. We need to find a way to further decouple the layout from the JSPs.

Figure 5Figure 6

Creating a template with Tiles

The new challenge is to find a convenient way to switch the Web UI from one layout to another. The Tiles template feature meets this requirement.

What is a Tiles template?

A Tiles template is a generic layout that does not contain any actual content. It contains attributes that are placeholders that enable things such as page URI and string value to be inserted later. Content pages like News.jsp and Solutions.jsp can reference the template and insert the page URI through the attributes.

To create a template page, you use Tiles insert tags. Unlike the insert tag in Example 3, the insert tag in a Tiles template has only one attribute named attribute, which will become the placeholder for the JSP page URI insertion. The template code to create the header placeholder is <tiles:insert attribute="header" />.

The template defines a common layout of Web UI components that concrete pages can reference. The following JSP code is a sample template using Tiles:

Example 5. Layout.jsp is a Tiles Template (TemplatingTilesWeb)

<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
	<TD colspan="2"><tiles:insert attribute="header"/></TD>
	</TR>
	<TR>
	<TD width="20%" valign="top"><tiles:insert attribute="navigation"/></TD>
	<TD width="80%" valign="top"><tiles:insert attribute="body"/></TD>
	</TR>
	<TR>
	<TD colspan="2"><tiles:insert attribute="footer"/></TD>
	</TR>
	</TBODY>
	</TABLE>
</BODY>
</HTML>

After a template is defined, it cannot be used on its own. An actual JSP page has to reference the template and provide page URI for the attributes. The line <tiles:insert page="/Layout.jsp"flush="true"> is used to reference the template.

The concrete JSP pages will delegate the layout composition to the template Layout.jsp. They need to specify the page implementation names for the attribute using the Tiles put tag. The code <tiles:put name="header" value="/Header.jsp"/> inserts the page /Header.jsp into the attribute named header. Here is JSP code for Solutions.jsp and News.jsp that uses the Tiles template feature:

Example 6. Solutions.jsp with the Tiles template feature (TemplatingTilesWeb)

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body" value="/Fragment-Solutions.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>

Example 7. News.jsp with the Tiles template feature (TemplatingTilesWeb)

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body" value="/Fragment-News.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>

The code for Examples 5, 6, and 7 are located in TemplatingTilesWeb.

If you want to change the layout from Figure 5 to Figure 6, all you need to do is to modify the template Layout.jsp as in Example 8, without touching concrete pages such as Solutions.jsp and News.jsp. Compared to modifying N pages when a template is not used, using the Tiles template feature can significantly reduce maintenance costs.

Example 8. Change the template to create a new layout

<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
	<TABLE border="0">
	<TBODY>
	<TR>
	<TD colspan="2"><tiles:insert attribute="header"/></TD>
	</TR>
	<TR>
	<TD width="80%" valign="top"><tiles:insert attribute="body"/></TD>
	<TD width="20%" valign="top"><tiles:insert attribute="navigation"/></TD>
	</TR>
	<TR>
	<TD colspan="2"><tiles:insert attribute="footer"/></TD>
	</TR>
	</TBODY>
	</TABLE>
</BODY>
</HTML>

Using Tiles with Struts

A Web application using the Struts framework typically has multiple Action classes, each of which represents some business logic processing. The Action class delegates the response to a client using the logical name defined in a struts-config.xml file. For example, the following code shows that an Action instance delegates the response to the clients using the JSP's logical name, either success or failure, based on the execution status. This MVC design pattern decouples the presentation layer from the business logic layer:

Example 9. Using Struts action forward

if (Status == OK)
	ActionForward forward = mapping.findForward("success");
else
	ActionForward forward = mapping.findForward("failure");

return (forward);

The logical name used in the Struts action forward is a great opportunity for integrating Struts and Tiles. Using the Tiles template feature, the concrete JSP pages don't contain any HTML code, but instead pure Tiles tags to insert the template and map the logical view components to their implementations. The Tiles framework lets you group the concrete pages into a XML file with definition names that can be mapped to the logic names used by the Struts action forward. The six steps below will help you understand this process. A step-by-step tutorial Hands-on with Tiles inheritance and Struts later in this article details the steps for using Struts with Tiles.

  1. Group the concrete Web pages (Solutions.jsp and News.jsp) into an XML file in the WEB-INF folder of the Web project forwardDefinition.xml. After the grouping, there are no longer any concrete pages such as Solutions.jsp or News.jsp. Instead, they are defined with logical names such as solutionsDef and newsDef, as shown in Example 10:

    Example 10. forwardDefinition.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE tiles-definitions PUBLIC
    "-//Apache Software Foundation//DTD Tiles Configuration//EN"
    "http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
    
    <tiles-definitions>
    	<definition name="solutionsDef" path="/Layout.jsp">
    	  <put name="header" value="/Header.jsp"/>
    	  <put name="navigation" value="/Navigation.jsp"/>
    	  <put name="body" value="/Fragment-Solutions.jsp"/>
    	  <put name="footer" value="/Footer.jsp"/>
    	</definition>
    	<definition name="newsDef" path="/Layout.jsp">
    	  <put name="header" value="/Header.jsp"/>
    	  <put name="navigation" value="/Navigation.jsp"/>
    	  <put name="body" value="/Fragment-News.jsp"/>
    	  <put name="footer" value="/Footer.jsp"/>
    	</definition>
    </tiles-definitions>
  2. Modify struts-config.xml from the XML source and add the following code to enable the Tiles plug-in for the Struts framework. Application Developer may show validation errors after you enable the plug-in, but you can ignore the errors.

    Example 11. New segment in struts-config.xml

    <plug-in className="org.apache.struts.tiles.TilesPlugin" >
        <set-property property="definitions-config"
    	                 value="/WEB-INF/forwardDefinition.xml"/>
        <set-property property="moduleAware" value="true" />
        <set-property property="definitions-parser-validate" value="true" />
    </plug-in>
  3. Modify Web.xml and create an additional initialization parameter for ActionServlet, as shown in Figure 7 below. The name of the parameter is definitions-config, and the value is the location of the XML file defined in Step 1, /WEB-INF/forwardDefinition.xml.
    Figure 7. Modifying Web Deployment Descriptor to add definitions-config as initialization variable
    Modifying Web Deployment Descriptor to add definitions-config as initialization variable

    If you look at the XML source of Web.xml, you will see that the XML segment in Example 12 will be added into it:

    Example 12. New segment in Web.xml

    <init-param>
    	<param-name>definitions-config</param-name>
    	<param-value>/WEB-INF/forwardDefinition.xml</param-value>
    </init-param>
  4. Create an Action class, for example SolutionAction, with the following code:

    Example 13. SolutionAction

    package struts.tiles.sample;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts.action.Action;
    import org.apache.struts.action.ActionError;
    import org.apache.struts.action.ActionErrors;
    import org.apache.struts.action.ActionForm;
    import org.apache.struts.action.ActionForward;
    import org.apache.struts.action.ActionMapping;
    
    public class SolutionsAction extends Action {
    
    	public SolutionsAction() {
    
    		super();
    
    	}
    	public ActionForward execute(
    		ActionMapping mapping,
    		ActionForm form,
    		HttpServletRequest request,
    		HttpServletResponse response)
    		throws Exception {
    
    		ActionForward forward = mapping.findForward("success");
    		return (forward);
    
    	}
    }
  5. Open the struts-config.xml file in the editor and you should see an Action Path named /solutions. Add a new forward to the /solutions Action Path. Name it success and make the Path solutionsDef, which was defined in forwardDefinition.xml in Step 1.
    Figure 8. struts-config.xml
    struts-config.xml
  6. The sample code is implemented in StrutsTilesWeb. You may invoke the solutions action by pointing your browser at http://localhost:9080/StrutsTilesWeb/solutions.do. The result should be the same as Solutions.jsp.

Later in the article, Hands-on with Tiles inheritance and Struts details a step-by-step tutorial for this section.


Tiles inheritance

With the Tiles template feature, the layout has been decoupled from individual pages. One problem remains: if the footer implementation page has been changed from Footer.jsp to Footer-New.jsp, you still have to change the footer attribute values in the individual page (without Struts) or XML definition (with Struts) to the new JSP name. We need a higher level of decoupling, and the Tiles inheritance feature provides a solution.

In the definition configuration file, forwardDefinition.xml, the definition for solutionsDef and newsDef look similar. They both have a header, a navigation bar, and a footer pointing to a fixed JSP. Tiles has an advanced feature to enable inheritance between definitions. Therefore, you can define a base definition that specifies the common mapping, and then let other definitions, such as solutionsDef and newsDef inherit from the base definition and specify any custom mappings. The following code shows how to enable definition inheritance for the definition configuration file, forwardDefinition.xml:

Example 14. forwardDefinition.xml with inheritance

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration//EN"
       "http://jakarta.apache.org/struts/dtds/tiles-config.dtd">

<tiles-definitions>
  <definition name="baseDef" path="/Layout.jsp">
    <put name="header" value="/Header.jsp"/>
    <put name="navigation" value="/Navigation.jsp"/>
    <put name="body" value=""/>
    <put name="footer" value="/Footer.jsp"/>
  </definition>

  <definition name="solutionsDef" extends="baseDef">
    <put name="body" value="/Fragment-Solutions.jsp"/>
  </definition>

  <definition name="newsDef" extends="baseDef">
    <put name="body" value="/Fragment-News.jsp"/>
  </definition>
</tiles-definitions>

You can use the same URL as in the previous section to invoke Struts actions. Using the Tiles inheritance feature eliminates duplicate XML code in the definition file. This solution saves time, especially when many pages in a Web application share common components. Moreover, if you want to change the footer implementation from Footer.jsp to Footer-New.jsp, you just need to make one modification in the baseDef without touching the other definitions, as in Example 15. The Tiles inheritance feature further decouples the definitions and reduces maintenance costs.

Example 15. Change the footer implementation

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration//EN"
       "http://jakarta.apache.org/struts/dtds/tiles-config.dtd">

<tiles-definitions>
  <definition name="baseDef" path="/Layout.jsp">
    <put name="header" value="/Header.jsp"/>
    <put name="navigation" value="/Navigation.jsp"/>
    <put name="body" value=""/>
    <put name="footer" value="/Footer-New.jsp"/>
  </definition>
  <definition name="solutionsDef" extends="baseDef">
    <put name="body" value="/Fragment-Solutions.jsp"/>
  </definition>
  <definition name="newsDef" extends="baseDef">
    <put name="body" value="/Fragment-News.jsp"/>
  </definition>
</tiles-definitions>

The sample code is located in InheritanceTilesWeb.


Hands-on with Tiles Inheritance and Struts

This section will guide you through the creation and use of Tiles inheritance with Struts.

Start WebSphere Studio V5:

  1. Go to the Windows&reg; Start menu.
  2. Select Programs => IBM WebSphere Studio => Application Developer 5.0.

Create a 1.3 EAR project without the EJB client or Web:

  1. Select File => New => Project => J2EE => Enterprise Application Project. Click Next.
  2. Select Create 1.3 J2EE Enterprise Application Project. Click Next.
  3. Uncheck all three subprojects: Application Client project, EJB project, and Web project.
  4. Enter StrutsTilesTutorialEAR for the project name.
  5. Click Finish.

Create a Web project and add Struts support:

  1. Select File => New => Projects => Web => Web Project. Click Next.
  2. Enter StrutsTilesTutorialWeb for the Web project.
  3. Select the Add Struts support checkbox. Click Next.
  4. Select Existing Enterprise Application Project.
  5. Browse for the newly created EAR project. Click Next twice.
  6. In the Struts Setting page, Select Override default settings and choose 1.1 (Beta 2) for Application Developer V5 GM or 1.1 (Beta 3) for V5.01.
  7. Click Finish.

Create the following JSP files: Header.jsp, Footer.jsp, Navigation.jsp, Fragment-News.jsp, and Fragment-Solutions.jsp:

  1. In the Web perspective, right-click on the /Web Content folder under the Web project.
  2. Select New => JSP File.
  3. Enter Header as the file name. Click Finish.
  4. Edit the Header.jsp page and change the content to Header instead of "Place Header.jspÂ’s content here" for a cleaner look. Save and close the file.
  5. Repeat the same steps for:
    • Footer.jsp
    • Navigation.jsp
    • Fragment-Solutions.jsp
    • Fragment-News.jsp

      In the editor for Fragment-News.jsp, change to the Source page and add the bolded code into the <BODY>:
      <BODY>
      <P>Fragment-News</P>
      <% String name = request.getParameter("name");
      if (name != null) { %>
      Welcome, <%=name%>
      <% } %>
      </BODY>

Create Layout.jsp:

  1. In the Web Perspective, right-click on the /Web Content folder under the Web project.
  2. Select New => JSP File.
  3. Enter Layout as the file name. Click Next.
  4. Click on Add Tag Libraries.
  5. Select the checkbox for /WEB-INF/struts-tiles.tld
  6. Enter tiles as the Prefix.
  7. Click OK.
  8. Click Finish.
  9. Copy the following code into the <body> of Layout.jsp. Save and close the file.
	<h1><tiles:insert attribute="title"/></h1>
	<TABLE border="1" width="400" cellpadding="5" ID="Table31">
	<TBODY>
	  <TR>
	  <TD colspan="2" align="center"><tiles:insert attribute="header"/></TD>
	  </TR>
	  <TR>
	  <TD valign="top" width="20%"  bgcolor="00ff00" align="center">
	  <tiles:insert attribute="navigation"/></TD>
	  <TD valign="top" width="80%"  bgcolor="ffff00" align="center">
	  <tiles:insert attribute="body"/>
	  </TD>
	  <TR>
	  <TD colspan="2" align="center"><tiles:insert attribute="footer"/></TD>
	  </TR>
	</TBODY>
	</TABLE>

Create forwardDefinition.xml:

  1. In the Web Perspective, right-click on the /Web Content/WEB-INF folder under the Web project.
  2. Select New => Other => XML => XML. Click Next.
  3. Select Create XML from scratch. Click Next.
  4. Enter forwardDefinition.xml as the file name. Click Finish.
  5. In the XML editor, switch to the Source tab.
  6. Replace the existing code in the editor with the code below. Save and close the editor.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration//EN"
       "http://jakarta.apache.org/struts/dtds/tiles-config.dtd">

<tiles-definitions>
  <definition name="baseDef" path="/Layout.jsp">
    <put name="header" value="/Header.jsp"/>
    <put name="navigation" value="/Navigation.jsp"/>
    <put name="body" value=""/>
    <put name="footer" value="/Footer.jsp"/>
  </definition>
  <definition name="solutionsDef" extends="baseDef">
    <put name="title" value="Solutions" type="string"/>
    <put name="body" value="/Fragment-Solutions.jsp"/>
  </definition>
  <definition name="newsDef" extends="baseDef">
    <put name="title" value="News" type="string"/>
    <put name="body" value="/Fragment-News.jsp"/>
  </definition>
</tiles-definitions>

Create an Action class named NewsAction under the /Java Source folder:

  1. In the Web Perspective, right-click on the /Java Source folder under the Web project.
  2. Select New => Other => Web. Expand Web => Struts => Action Class. Click Next.
  3. Enter struts.tiles.sample as the Java Package name.
  4. Enter NewsAction as the class Name. Click Next.
  5. In the Forwards section, click Add to add a forwards with Name success and Path newsDef.
  6. Click Finish. Ignore the warning saying newsDef is not a valid path.
  7. Add the bolded code below into the editor. Save and close the file.
    	public ActionForward execute(
    		ActionMapping mapping,
    		ActionForm form,
    		HttpServletRequest request,
    		HttpServletResponse response)
    		throws Exception {
    
    		ActionErrors errors = new ActionErrors();
    		ActionForward forward = new ActionForward();
    		// return value
    
    		try {
    
    			// do something here
    			forward = mapping.findForward("success");
    			return (forward);
    
    
    		} catch (Exception e) {
    
    			// Report the error using the appropriate name and ID.
    			errors.add("name", new ActionError("id"));
    
    		}

Create another Action class named SolutionsAction under the /Java source folder:

  1. In the Web Perspective, right-click on the /Java Source folder under the Web project.
  2. Select New => Other => Web. Expand Web => Struts => Action Class. Click Next.
  3. Enter struts.tiles.sample as the Java Package name.
  4. Enter SolutionsAction as the class Name. Click Next.
  5. In the Forwards section, click Add to add a forwards with Name success and Path solutionsDef.
  6. Click Finish. Ignore the warning saying newsDef is not a valid path.
  7. Add the bolded code below into the editor. Save and close the file.
    	public ActionForward execute(
    		ActionMapping mapping,
    		ActionForm form,
    		HttpServletRequest request,
    		HttpServletResponse response)
    		throws Exception {
    
    		ActionErrors errors = new ActionErrors();
    		ActionForward forward = new ActionForward();
    		// return value
    
    		try {
    
    			// do something here
    			forward = mapping.findForward("success");
    			return (forward);
    
    		} catch (Exception e) {
    
    			// Report the error using the appropriate name and ID.
    			errors.add("name", new ActionError("id"));
    
    		}

Enable the Struts Tiles plug-in:

  1. In the Web perspective, expand /Web Content/WEB-INF and double-click on struts-config.xml to open to the Struts configuration editor.
  2. Switch to the XML Source page and add the following section right before the </struts-config> close tag.
    <plug-in className="org.apache.struts.tiles.TilesPlugin" >
        <set-property property="definitions-config"
    	                 value="/WEB-INF/forwardDefinition.xml"/>
        <set-property property="moduleAware" value="true" />
        <set-property property="definitions-parser-validate" value="true" />
    </plug-in>
  3. Save and Close the file.
  4. Double click on web.xml to open it to the Web Deployment Descriptor.
  5. In the Servlet page, select action.
  6. In the Initialization section, click on Add.
  7. Enter definitions-config as the Name and /WEB-INF/forwardDefinition.xml as the Value.
  8. Save and Close the file.
Figure 9. Web Deployment Descriptor web.xml
Web Deployment Descriptor web.xml

Create a WebSphere Test Environment server:

  1. In the Workbench, select File => New => Other => Server => Server and Server Configuration. Click Next.
  2. Enter server1 as the name.
  3. Select WebSphere Version 5.0 => Test Environment.
  4. Click Finish.

Add the EAR to the server and start the server:

  1. In the Server Perspective –- Server Configuration view, expand until you see server1. Right click on server1 and select Add => StrutsTilesTutorialEAR.
  2. In the Server view, right-click on server1 and select Start.

Point your browser to http://localhost:9080/StrutsTilesTutorialWeb/solutions.do to see the pages:

Figure 10. Running solutions.do
Running solutions.do

Try http://localhost:9080/StrutsTilesTutorialWeb/news.do?name=Jane:

Figure 11. Running news.do
Running news.do

If you want to switch the body and navigation around, simply change it in Layout.jsp. Modify Layout.jsp as follows:

   <h1><tiles:insert attribute="title"/></h1>
   <TABLE border="1" width="400" cellpadding="5" ID="Table31">
      <TBODY>
		<TR>
		  <TD colspan="2" align="center"><tiles:insert attribute="header"/></TD>
		</TR>
		<TR>
		  <TD valign="top" width="80%"  bgcolor="ffff00" align="center">
		  <tiles:insert attribute="body"/></TD>
		  <TD valign="top" width="20%"  bgcolor="00ff00" align="center">
		  <tiles:insert attribute="navigation"/></TD>
		<TR>
		  <TD colspan="2" align="center"><tiles:insert attribute="footer"/></TD>
		</TR>
      </TBODY>
   </TABLE>

Run solutions.do and news.do again. Both pages are now using the new layout:

Figure 12. Running news.do
Running news.do

Conclusion

The Tiles framework enhances component-based design for Web UI development, and it works well in combination with the Struts framework. You can easily use the Tiles and Struts frameworks with WebSphere Studio Application Developer to significantly reduce development time and maintenance costs for your Web development projects.


Related information

Apache Struts Tiles User Guide


About the authors

Top of page


Download

DescriptionNameSize
Code sampleStrutsTiles.zip  ( HTTP | FTP )4.9 MB

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=13805
ArticleTitle=Using the Struts Framework with WebSphere Studio V5 -- Part 1: Using Struts with Tiles
publish-date=11192003