Recipe14.4.Creating Tabbed Panes

Recipe 14.4. Creating Tabbed Panes

Problem

You want your pages to display as tabbed folders.

Solution

Use the Tiles Tabbed Layout. Example 14-7 shows the JSP page (tabsLayout.jsp) that lays out components in a tabbed fashion.

Example 14-7. Tiles tabbed layout

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %> <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %> <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <%--    Tabs Layout .   This layout allows to render several tiles in a tabs fashion.   @param tabList A list of available tabs. We use MenuItem to    carry data (name, body, icon, ...)   @param selectedIndex Index of default selected tab   @param parameterName Name of parameter carrying selected info in http request. --%> <%--  Use tiles attributes, and declare them as page java variable. These attribute must be passed to the tile.  --%> <tiles:useAttribute name="parameterName" classname="java.lang.String" /> <tiles:useAttribute  name="selectedIndex"   ignore="true" classname="java.lang.String" /> <tiles:useAttribute name="tabList" classname="java.util.List" /> <%   String selectedColor="#98ABC7";   String notSelectedColor="#C0C0C0";      int index = 0; // Loop index   int selectedIndex = 0;     // Check if selected come from request parameter   try {     selectedIndex = Integer.parseInt(selectedIndexStr);     selectedIndex = Integer.parseInt(request.getParameter( parameterName ));     }    catch( java.lang.NumberFormatException ex )     { // do nothing     }   // Check selectedIndex bounds   if( selectedIndex < 0 || selectedIndex >= tabList.size( ) ) selectedIndex = 0;   String selectedBody = ((org.apache.struts.tiles.beans.MenuItem)   tabList.get(selectedIndex)).getLink( ); // Selected body    %> <table border="0"  cellspacing="0" cellpadding="0">   <%-- Draw tabs --%> <tr>   <td width="10">&nbsp;</td>   <td>     <table border="0"  cellspacing="0" cellpadding="5">       <tr> <logic:iterate  name="tabList" type="org.apache.struts.tiles.beans. MenuItem" > <% // compute href   String href = request.getRequestURI( ) + "?"+parameterName + "=" + index;     // Don't add request URI prefix , but let the client compute the      // original URL. This allows to use a Struts action as page URL,      // and perform a forward.     // Bug reported by Don Peterkofsky    //String href = "" + "?"+parameterName + "=" + index;   String color = notSelectedColor;   if( index == selectedIndex )     {     selectedBody = tab.getLink( );     color = selectedColor;     } // enf if   index++; %>   <td bgcolor="<%=color%>">   <a href="<%=href%>" ><%=tab.getValue( )%></a>   </td>   <td width="1" ></td>    </logic:iterate>       </tr>     </table>   </td>   <td width="10" >&nbsp;</td> </tr> <tr>   <td height="5" bgcolor="<%=selectedColor%>" colspan="3" >&nbsp;</td> </tr>     <%-- Draw body --%> <tr>   <td width="10" bgcolor="<%=selectedColor%>">&nbsp;</td>   <td>   <tiles:insert name="<%=selectedBody%>" flush="true" />   </td>   <td width="10" bgcolor="<%=selectedColor%>">&nbsp;</td> </tr>   <tr>   <td height="5" bgcolor="<%=selectedColor%>" colspan="3" >&nbsp;</td> </tr>   </table>

Create a definition in your tiles-defs.xml file that uses this layout such as the following:

<!-- Tiles used for Tabbed pane recipe --> <definition name="example.tabs" path="/layouts/tabsLayout.jsp">     <put name="selectedIndex" value="0"/>     <put name="parameterName" value="selected"/>     <putList name="tabList">         <item value="Page One" link="/pages/pageOne.jsp"              classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>         <item value="Page Two" link="/pages/pageTwo.jsp"              classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>         <item value="Page Three" link="/pages/pageThree.jsp"              classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>     </putList> </definition>

Finally, create a JSP page that inserts the definition:

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <html>     <head>         <title>Tiles Tabbed Panes</title>     </head>     <body>         <tiles:insert definition="example.tabs"/>             </body> </html>

Discussion

Tiles includes a tabbed layout that you can use and customize for your own user interfaces. This layout creates a page that will look something like Figure 14-2.

Figure 14-2. Using Tiles for tabbed panes

When you click on a link on a tab, the tab becomes highlighted and the content associated with that tab is displayed. Tiles uses the URL to determine the page to display as defined in the definition. For example, when you click on the "Page Two" tab, you will see the URL:

http://localhost/jsc-ch14-tiles/tabs_def.jsp?selected=1

Tiles uses the selected request parameter to index into the items specified in the definition. As shown in Figure 14-3, this results in the display of the content from the /pages/pageTwo.jsp page.

Figure 14-3. Tabbed pane after tab selection

You can see the power of Tiles when you combine different Tiles together. For example, you can combine the classic layout defined in mainLayoutDef2 with the tabbed layout using the definitions shown in Example 14-8. In this example, the example.tabs2 definition creates the list of tabs using the putList element. This element contains three item elements that define the tabs. Each item specifies a link attribute. The value of this attribute dictates the page to be displayed when you select the tab. Like most other Tiles definitions, the link attribute accepts a URL to a web resource or a definition name.

Example 14-8. Tiles definition for a tabbed layout

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE tiles-definitions PUBLIC        "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"        "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd"> <tiles-definitions>     <!-- Tiles used for Recipe 14.1, 14.2, and 14.3 -->     <!-- A base Tile -->     <definition name="mainLayoutDef2" path="/layouts/mainLayout.jsp">         <put name="title" value="Struts Cookbook - Chapter 14 : Tiles"/>         <put name="header" value="/common/header.jsp"/>         <put name="navbar" value="/common/navbar2.jsp"/>         <put name="body"   type="string"/>         <put name="news"   value="/common/news.html"/>         <put name="footer" value="/common/footer.jsp"/>             </definition>     <!-- Extensions of the base mainLayoutDef tile -->     <definition name=".start" extends="mainLayoutDef2">         <put name="title" value="Start Page"/>         <put name="body"  value="/pages/pageStart.jsp"/>     </definition>     <definition name=".pageOne" extends="mainLayoutDef2">         <put name="title" value=" Page One"/>         <put name="body"  value="/pages/pageOne.jsp"/>     </definition>              <definition name=".pageTwo" extends="mainLayoutDef2">         <put name="title" value="Page Two"/>         <put name="body"  value="/pages/pageTwo.jsp"/>     </definition>     <definition name=".pageThree" extends="mainLayoutDef2">         <put name="title" value="Page Three"/>         <put name="body"  value="/pages/pageThree.jsp"/>     </definition>          <!-- Tabbed layout that uses nested components -->     <definition name="example.tabs2" path="/layouts/tabsLayout.jsp">         <put name="selectedIndex" value="0"/>         <put name="parameterName" value="selected"/>         <putList name="tabList">             <item value="Page One" link=".pageOne"                  classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>             <item value="Page Two" link=".pageTwo"                  classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>             <item value="Page Three" link=".pageThree"                  classtype="org.apache.struts.tiles.beans.SimpleMenuItem"/>         </putList>     </definition> </tiles-definitions>

Rendering the examples.tabs2 Tiles definition results in a page such as the one in Figure 14-4.