tiles - colorado software summit
TRANSCRIPT
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 1
Tiles: Creating a Highly Flexible, Dynamic Web SiteHermod OpstvedtChief ArchitectDen norske Bank
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 2
Tiles: Creating a Highly Flexible, Dynamic Web Site
First there was just JSPsHTML and a lot of intermingled JavaScript.
Then came custom tags.A lot less intermingled JavaScript.
And StrutsMore custom tags.Even less JavaScript.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 3
Tiles: Creating a Highly Flexible, Dynamic Web Site
And finally Tiles.Some new Custom TagsJavaScript can (and should) be completely avoided.
So much for history – let's start with the basics.
All files are included on the CD!
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 4
Tiles: Creating a Highly Flexible, Dynamic Web Site
What is then Tiles ?The idea behind Tiles is that a Web page actually consists of (normally) more than one distinct part, literally dividing the page into frames of information pieces – or Tiles. Each one of these again can be a candidate for reuse on any other Web page within a site. Also, within a Web site, keeping consistency with regards to look and feel is essential.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 5
Tiles: Creating a Highly Flexible, Dynamic Web Site
What is then Tiles ?It is a subproject of the Jakarta Struts project.Originally conceived by Cedric Dumoulin (http://www.lifl.fr/~dumoulin/tiles).Tiles Request processor (Struts plugin).Template JSP file(s)XML definition file(s).Taglibrary (part of struts.jar) + tiles.tld.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 6
Tiles: Creating a Highly Flexible, Dynamic Web Site
How does it work ?A request processor receives the request for some URI. We have already told the system what types of requests should be processed by this request processor.The request processor looks through the various definitions we have defined to find the one in question.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 7
Tiles: Creating a Highly Flexible, Dynamic Web Site
How does it work ?It then uses that definition to assemble a page using a template jsp file to position them.In this process it also will initialize a proper context, etc.The various Tiles (jsp fragments/HTML pages) then output into the response in the order defined by the definition and template jsp file.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 8
Tiles: Creating a Highly Flexible, Dynamic Web Site
What makes up a Web page ?
Header
MenuContent area
Footer
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 9
Tiles: Creating a Highly Flexible, Dynamic Web Site
What makes up a Web page ?Header• Tells who we are.• Does not change during a session.
Menu• Gives the user choices of things to do/look at.• Does not change frequently during a session.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 10
Tiles: Creating a Highly Flexible, Dynamic Web Site
What makes up a Web page ?Content area• Provides information to the user.• Constantly changes during a session.
Footer• Provides some more static information.• Does not change frequently during a session.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 11
Tiles: Creating a Highly Flexible, Dynamic Web Site
What makes up a Web page ?This means that ¾ of the parts of our Web page is fairly constant, and does not require change often.Absolutely a candidate for breaking up into reusable parts.Combine with Cascading Style Sheets (CSS) to further isolate effects of changes.How do we go about doing that ?
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 12
Tiles: Creating a Highly Flexible, Dynamic Web Site
Tiles 101 - How do we go about doing that ?Option 1 :• Use a master page that we start with every time we
want to provide some new content. Has all the static parts on it.
Advantages: Hardly any.Disadvantages: Maintenance becomes a problem as our site grows. A change to, for instance, the header requires working through all our pages and changing the header part of each one of them.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 13
Tiles: Creating a Highly Flexible, Dynamic Web Site
Tiles 101 - How do we go about doing that ?Option 2 :• Create jsp parts of the static stuff. Create a master
page that uses jsp:include of the jsp parts. We then use this master page as a starting point. (Struts templating)
Advantages: Not so vulnerable to changes to the static parts.Disadvantages: Requires two pages for each new content. One with the content, and one which includes it. Also, a change in layout means working through all the pages to keep consistency.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 14
Tiles: Creating a Highly Flexible, Dynamic Web Site
How do we go about doing that ?Option 3 :• Use Tiles.
Advantages: Immune to changes (Very loose coupling). Requires only one page to be created for each new content – The content itself.Disadvantages: I don't see any (Negligible performance hit).
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 15
Tiles: Creating a Highly Flexible, Dynamic Web Site
Setting up Tiles.Start with a scratch Struts project.Open your web.xml file and add :
<taglib><taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri><taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 16
Tiles: Creating a Highly Flexible, Dynamic Web Site
Setting up Tiles.Open your struts-config.xml file and add at the bottom :
<!-- ========== Tiles plug-in setting settings =================== --><!-- Here we specified the tiles plug-in. This plug-in registers appropriate Request Processor --><plug-in className="org.apache.struts.tiles.TilesPlugin">
<set-property property="definitions-config" value="WEB-INF/tiles-defs.xml"/>
<set-property property="definitions-debug" value="2"/><set-property property="definitions-parser-details" value="2"/><set-property property="definitions-parser-validate" value="true"/><set-property property="moduleAware" value="false" />
</plug-in>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 17
Tiles: Creating a Highly Flexible, Dynamic Web Site
Setting up Tiles.Create a file called tiles-defs.xml and a tiles-defs_AA.xml for each locale you plan to support and place them in the WEB-INF directory.• tiles-defs.xml – Default locale.• tiles-defs_EN.xml – English locale.• tile-defs_FR.xml – French locale.
This is where your page definitions will go.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 18
Tiles: Creating a Highly Flexible, Dynamic Web Site
Setting up Tiles.Add references to these definitions in your struts action definitions, as you would with regular jsp/html files.Ex :
<action path="/sample1/index" forward="site.page.main.sample1" unknown="true" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 19
Tiles: Creating a Highly Flexible, Dynamic Web Site
How do we create a Tiles page definition?In the tiles-defs.xml file, we add a root node called "tiles-definitions":• <tiles-definitions>• </tiles-definitions>
To the root node we add children nodes called "definitions":• <definition name="xxx" path="yyy">• </definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 20
Tiles: Creating a Highly Flexible, Dynamic Web SiteTo the "definition" node we add a "put" child :• <put name="aaa" value="zzz"/>.
So a complete tiles-defs.xml file with one page definition containing to parts would look something like this:
<tiles-definitions><definition name="xxx" path="yyy">
<put name="aaa" value="zzz"/>. <put name="bbb" value="ddd"/>.
</definition></tiles-definitions>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 21
Tiles: Creating a Highly Flexible, Dynamic Web Site
The complete syntax tiles-defs.dtd – part 1<?xml version="1.0" encoding="ISO-8859-1"?><!ELEMENT component-definitions (definition+)><!ELEMENT tiles-definitions (definition+)><!ELEMENT definition (put*, putList*)><!ATTLIST definition
name CDATA #REQUIREDpage CDATA #IMPLIEDpath CDATA #IMPLIEDextends CDATA #IMPLIEDrole CDATA #IMPLIEDtemplate CDATA #IMPLIEDcontrollerClass CDATA #IMPLIEDcontrollerUrl CDATA #IMPLIED
><!ELEMENT put (#PCDATA)><!ATTLIST put
name CDATA #REQUIREDvalue CDATA #IMPLIEDtype (string | page | template | definition) #IMPLIEDcontent CDATA #IMPLIEDdirect (true | false) #IMPLIED
>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 22
Tiles: Creating a Highly Flexible, Dynamic Web Site1
The complete syntax tiles-defs.dtd – part 2
<!ELEMENT putList ( (add* | item* | bean* | putList*)+) ><!ATTLIST putList
name CDATA #REQUIRED><!ELEMENT putListElements (add | item | bean)>
<!ELEMENT add (#PCDATA)><!ATTLIST add
value CDATA #IMPLIEDtype (string | page | template | definition) #IMPLIEDcontent CDATA #IMPLIEDdirect (true | false) #IMPLIED
>
<!ELEMENT bean (#PCDATA)><!ATTLIST bean
classtype CDATA #REQUIRED>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 23
Tiles: Creating a Highly Flexible, Dynamic Web Site
The complete syntax tiles-defs.dtd – part 3<!ELEMENT item (#PCDATA)><!ATTLIST item
value CDATA #REQUIREDlink CDATA #REQUIREDclasstype CDATA #IMPLIEDicon CDATA #IMPLIEDtooltip CDATA #IMPLIED(target CDATA #IMPLIED)
>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 24
Tiles: Creating a Highly Flexible, Dynamic Web Site
So let's go ahead and create some sample Web pages that are based on Tiles.
In this lesson we will focus on a very simple page that only contains a header and a body part – hence two tiles. We will then evolve this page further on in next samples.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 25
Tiles: Creating a Highly Flexible, Dynamic Web Site
Our first Tiles Web page will have a title tile and a body tile and look like this:
Title
Body
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 26
Tiles: Creating a Highly Flexible, Dynamic Web Site
The parts it is made up of :In the struts-config.xml we add a way of referencing it
<!-- Action Mappings --><action-mappings>
<action path="/sample1/index" forward="site.page.main.sample1" unknown="true" /> </action-mappings>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 27
Tiles: Creating a Highly Flexible, Dynamic Web Site
The parts it is made up of :In the tiles-defs.xml we define the parts (tiles) that its made of
<tiles-definitions><!-- Master definition Sample 1-->
<!-- Main page layout used as a root for other pages defintion. --><definition name="site.mainLayout.sample1" path="/jsp/sample1/master.jsp">
<put name="top" value="/jsp/title.jsp"/><put name="content" value="/jsp/blank.jsp"/>
</definition>
<definition name="site.page.main.sample1" extends="site.mainLayout.sample1"><put name="content" value="/jsp/sample1/content/frontpage.jsp"/></definition>
</tiles-definitions>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 28
Tiles: Creating a Highly Flexible, Dynamic Web Site
/jsp/sample1/master.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><html:html><HEAD><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %><META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><META http-equiv="Content-Style-Type" content="text/css"><LINK href="../../theme/Master.css" rel="stylesheet" type="text/css"><TITLE><bean:message key="index.title" /></TITLE></TITLE><html:base/></HEAD>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 29
Tiles: Creating a Highly Flexible, Dynamic Web Site
/jsp/sample1/master.jsp<BODY><TABLE class="template"><THEAD class="bottomborder"><TR><TH class="template"><tiles:get name="top" flush="true"/></TH></TR><TR><TH><HR/></TH></TR></THEAD><TBODY><TR><TD class="template"><tiles:get name="content" flush="true"/></TD></TR></TBODY></TABLE></BODY></html:html>
Tiles definitions found in tiles-defs.xml (put)
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 30
Tiles: Creating a Highly Flexible, Dynamic Web Site
/jsp/sample1/title.jsp<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><H1><bean:message key="index.title" /></H1>
/jsp/sample1/content/frontpage.jsp<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><P class="frontpage"><bean:message key="frontpage.bodytext" /></P>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 31
Tiles: Creating a Highly Flexible, Dynamic Web Site
Now lets extend it by adding a footer. It will now look like this :
Title
Body
Footer
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 32
Tiles: Creating a Highly Flexible, Dynamic Web Site
The parts :struts-config.xml• Added :
<action path="/sample2/index" forward="site.page.main.sample2" unknown="true" />
tiles-defs.xml• Added :
<!-- =========================================================--><!-- Master definition Sample 2--><!-- =========================================================--><!-- Main page layout used as a root for other pages defintion. --><definition name="site.mainLayout.sample2" path="/jsp/sample2/master.jsp">
<put name="top" value="/jsp/title.jsp"/><put name="content" value="/jsp/blank.jsp"/><put name="footer" value="/jsp/footer.jsp"/>
</definition><definition name="site.page.main.sample2" extends="site.mainLayout.sample2">
<put name="content" value="/jsp/sample2/content/frontpage.jsp"/></definition>
Our new tile
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 33
Tiles: Creating a Highly Flexible, Dynamic Web Site
/jsp/sample2/master.jspAdded at end of TABLE body of master.jsp from sample1:
<TFOOT><TR><TH><HR/></TH></TR><TR><TD class="template"><tiles:get name="footer" flush="true"/></TD></TR></TFOOT>
/jsp/sample2/footer.jsp<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><P class="footer"><bean:message key="footer.text" /></P>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 34
Tiles: Creating a Highly Flexible, Dynamic Web Site
So let's create a new Web page with a different content. It will look like this :
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 35
Tiles: Creating a Highly Flexible, Dynamic Web Site
All we have to do now is create a new content body content page -/jsp/sample2/frontpage2.jsp:
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><TABLE><TBODY><TR><TD colspan="2"><bean:message key="frontpage.bodytext2" /></TD></TR><TR><TD><IMG src="http://www.softwaresummit.com/graphics/lake2.jpg"></TD><TD><IMG src="http://www.softwaresummit.com/graphics/confcntr3.jpg"></TD><TD></TD></TR></TBODY></TABLE>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 36
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we need to create a new definition in the tiles-defs.xml file:
<definition name="site.page.page2.sample2" extends="site.mainLayout.sample2"><put name="content" value="/jsp/sample2/content/frontpage2.jsp"/>
</definition>
And finally a means of accessing it through a Struts action – so add the following line to the struts-config.xml (action-mappings section):
<action path="/sample2/page2" forward="site.page.page2.sample2" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 37
Tiles: Creating a Highly Flexible, Dynamic Web Site
So as you have seen, adding new pages to our site means:
Focus on the new content only.No need to worry about consistency in look and feel between Web pages.
So now that we have become "experts" let's move on and "stack 'em up"
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 38
Tiles: Creating a Highly Flexible, Dynamic Web Site
Using Layouts.Often we want to combine several smaller content parts into one Web page.In Tiles we can do this by using what we call "Layouts".This means composing a content body using several smaller content bodies.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 39
Tiles: Creating a Highly Flexible, Dynamic Web Site
Using Layouts.There are three types of Layouts :• Vertical layout.• Horizontal layout.• Combination of the above.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 40
Tiles: Creating a Highly Flexible, Dynamic Web Site
Vertical layout :Header
Footer
Content area
Content 1
Content 2
Content 3
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 41
Tiles: Creating a Highly Flexible, Dynamic Web Site
Horizontal layoutHeader
Footer
Content area
Content 1 Content 2 Content 3
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 42
Tiles: Creating a Highly Flexible, Dynamic Web Site
CombinedHeader
Footer
Content area
Content 1
Content 2
Content 3
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 43
Tiles: Creating a Highly Flexible, Dynamic Web Site
Using layouts means :Defining a put-list in the tiles-defs.xml file.Creating a jsp page that formats the tiles the way we want (vertical/horizontal/both).Rearranging the tiles simply means changing the order they appear in in the tiles-defs.xml file.Adding/removing tiles is also just a matter of changing the tiles-defs.xml.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 44
Tiles: Creating a Highly Flexible, Dynamic Web Site
Lets first define which tiles (.jsp files) we want to appear in our layout.This is done using the putlist element to build a list of tiles to use in tiles-defs.xml.
<definition name="site.page.sample3.body" path="/jsp/sample3/vlayout.jsp"><put name="numCols" value="1"/><putList name="list">
<add value="/jsp/sample2/content/frontpage.jsp"/><add value="/jsp/sample2/content/frontpage.jsp"/><add value="/jsp/sample3/content/lastpart.jsp"/>
</putList></definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 45
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we need to create a template jsp file to describe how we want the tiles laid out and formatted./jsp/sample3/vlayout.jsp
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ page import="java.util.Iterator"%><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><tiles:importAttribute /><tiles:useAttribute id="list" name="list" classname="java.util.List" /><%
Iterator i=list.iterator(); while( i.hasNext() ) {
String name=(String)i.next(); %>
<tiles:insert name="<%=name%>" flush="true" /><% }%>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 46
Tiles: Creating a Highly Flexible, Dynamic Web Site
The only new content we are adding is /jsp/sample3/content/laspart.jsp :
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><P class="frontpage"><bean:message key="lastpart.bodytext" /></P>
Then we need to define the struts action to reference it, so we add to struts-config.xml
<action path="/sample3/index" forward="site.page.main.sample3" />
Then we define it in tiles-defs.xml<definition name="site.page.main.sample3" extends="site.mainLayout.sample3">
<put name="content" value="site.page.sample3.body" /></definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 47
Tiles: Creating a Highly Flexible, Dynamic Web Site
This then gives us the following Web page
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 48
Tiles: Creating a Highly Flexible, Dynamic Web Site
Doing a horizontal layout (columns).First we create a template file to format for us.
<%@ page import="org.apache.struts.tiles.ComponentContext"%><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><tiles:useAttribute id="numColsStr" name="numCols" classname="java.lang.String" /><TABLE><TBODY><TR><%int numCols = Integer.parseInt(numColsStr);ComponentContext context = ComponentContext.getContext( request );for( int i=0; i<numCols; i++ )
{java.util.List list=(java.util.List) context.getAttribute( "list" + i );pageContext.setAttribute("list", list );if(list==null) System.out.println( "list is empty for " + i );
%>Cont…
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 49
Tiles: Creating a Highly Flexible, Dynamic Web Site
Doing a horizontal layout (columns).Cont..<TD VALIGN="top">
<tiles:insert page="/jsp/sample3/vlayout.jsp" flush="true" ><tiles:put name="list" beanName="list" beanScope="page" />
</tiles:insert></TD><%}%></TR></TBODY></TABLE>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 50
Tiles: Creating a Highly Flexible, Dynamic Web Site
Doing a horizontal layout (columns).Then we define three new column bodies. /jsp/sample3/content/colbody1.jsp
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><TABLE><THEAD><TR><TH class="columnhead"><bean:message key="column2.heading1"/></TH></TR></THEAD><TBODY><TR><TD class="columnbody"><bean:message key="column2.body1"/></TD></TR></TBODY></TABLE>
The other two are the same except for texts
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 51
Tiles: Creating a Highly Flexible, Dynamic Web Site
Doing a horizontal layout (columns).Then we define the contents of the Web page body in tiles-defs.xml file
<definition name="site.page.column.sample3" extends="site.mainLayout.sample3"><put name="content" value="site.page.sample3.colbody" />
</definition><definition name="site.page.sample3.colbody" path="/jsp/sample3/hlayout.jsp">
<put name="numCols" value="2" /><putList name="list0">
<add value="/jsp/sample2/content/frontpage.jsp" /><add value="/jsp/sample2/content/frontpage2.jsp" /><add value="/jsp/sample3/content/lastpart.jsp" />
</putList><putList name="list1">
<add value="/jsp/sample3/content/col2body1.jsp" /><add value="/jsp/sample3/content/col2body2.jsp" /><add value="/jsp/sample3/content/col2body3.jsp" />
</putList></definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 52
Tiles: Creating a Highly Flexible, Dynamic Web Site
Finally we add a way of accessing it in the struts-config.xml.
<action path="/sample3/columns" forward="site.page.column.sample3" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 53
Tiles: Creating a Highly Flexible, Dynamic Web Site
This gives us the following page
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 54
Tiles: Creating a Highly Flexible, Dynamic Web Site
Adding a flexible menuTo add a Tiles based menu to our Web site we build on the vertical layout, but we use the "Item" element in the "Putlist" instead.Lets create a menu on the left side of the Web page, so that we can access the samples we have build so far.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 55
Tiles: Creating a Highly Flexible, Dynamic Web Site
First we define what goes into the menu in the tiles-defs.xml:
<definition name="site.menu.sample3" path="/jsp/sample3/submenulayout.jsp"><putList name="list">
<add value="sample1.menu" /><add value="sample2.menu" /><add value="sample3.menu" />
</putList></definition>
<definition name="sample1.menu" path="/jsp/sample3/submenu.jsp "><put name="title" value="Sample 1" /><putList name="items">
<item link="/sample1/index.do" value="First page" /></putList>
</definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 56
Tiles: Creating a Highly Flexible, Dynamic Web Site
First we define what goes into the menu in the tiles-defs.xml.
<definition name="sample2.menu" path="/jsp/sample3/submenu.jsp "><put name="title" value="Sample 2" /><putList name="items">
<item link="/sample2/index.do" value="First page" /><item link="/sample2/page2.do" value="Second page" />
</putList></definition>
<definition name="sample3.menu" path="/jsp/sample3/submenu.jsp "><put name="title" value="Sample 3" /><putList name="items">
<item link="/sample3/index.do" value="First page" /><item link="/sample3/columns.do" value="Second page" /><item link="/sample3/menus.do" value="Third page" />
</putList></definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 57
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we create the page that builds the menu – "/jsp/sample3/submenulayout.jsp".
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ page import="java.util.Iterator"%><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %><%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><tiles:importAttribute /><tiles:useAttribute id="menulist" name="list" classname="java.util.List" /><% Iterator i=menulist.iterator();
while( i.hasNext() ) {
String menu=(String)i.next();%>
<tiles:insert name="<%=menu%>" flush="true" /><%
}%>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 58
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we create the page that formats the menu content – "/jsp/sample3/submenu.jsp"
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ page import="java.util.Iterator" %><%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><tiles:importAttribute /><TABLE class="submenu">
<logic:present name="title"><TR>
<TH colspan="2" class="submenu"><tiles:getAsString name="title" /></TH></TR></logic:present><logic:iterate id="item" name="items" type="org.apache.struts.tiles.beans.MenuItem">
<%String link=item.getLink(); String target="new"; if(link.startsWith("/") ){ link=request.getContextPath() + link; target=""; } %>
<TR><TD colspan="2" class="submenu">
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 59
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we create the page that formats the menu content – "/jsp/sample3/submenu.jsp"
<LI><A href="<%=link%>"title='<bean:write name="item" property="tooltip" scope="page" ignore="true"/>'target='<%=target%>'><logic:notPresent name="item" property="icon"><%=item.getValue()%>
</logic:notPresent><logic:present name="item" property="icon"><%
String icon=item.getIcon(); if(icon.startsWith("/") ) icon=request.getContextPath() + icon;
%><IMG src='<%=request.getContextPath()%><bean:write name="item" property="icon" scope="page"/>' alt='<bean:write name="item" property="tooltip" scope="page" ignore="true"/>' />
</logic:present></A></LI></TD></TR></logic:iterate></TABLE>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 60
Tiles: Creating a Highly Flexible, Dynamic Web Site
Then we create a new master template using our previous template, so that the menu tile will be there –"/jsp/sample3/master2.jsp"
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 61
Tiles: Creating a Highly Flexible, Dynamic Web Site
Change the <TABLE> part to :<TABLE class="template">
<THEAD class="bottomborder"><TR>
<TH colspan="2"class="template"><tiles:get name="top" flush="true"/></TH></TR><TR>
<TH colspan="2"><HR/></TH></TR>
</THEAD><TBODY>
<TR><TD class="menu"><tiles:get name="menu" flush="true"/></TD><TD class="template"><tiles:get name="content" flush="true"/></TD>
</TR></TBODY><TFOOT>
<TR><TH colspan="2"><HR/></TH>
</TR><TR>
<TD colspan="2" class="template"><tiles:get name="footer" flush="true"/></TD></TR>
</TFOOT></TABLE>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 62
Tiles: Creating a Highly Flexible, Dynamic Web Site
And finally we add an entry to the struts-config.xml file so that we can access the new page.
<action path="/sample3/menus" forward="site.page.menu.sample3" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 63
Tiles: Creating a Highly Flexible, Dynamic Web Site
Which gives us the following page
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 64
Tiles: Creating a Highly Flexible, Dynamic Web Site
InternationalizationTo support localized messages.To render a different layout/content.• Different colors have different meaning in various
cultures.• May not want to show some information in a specific
language because it's irrelevant.
Other motivations.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 65
Tiles: Creating a Highly Flexible, Dynamic Web Site
Let's create a localized version of our pages that have Spanish text and where the order of things are switched, and use a different color/font scheme.
All we have to do is create a new tiles-defs_ES.xml, which will refer to different definitions.And a new Struts resource file which will have the translated texts and a different stylesheet.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 66
Tiles: Creating a Highly Flexible, Dynamic Web Site
We will use the last page we created, and put the menu on the right-hand side.
Create a new master template –"jsp/sample4/master3.jsp"• Reorder the layout.• Refers to a different style sheet.
Create a new tiles-defs_ES.xml file that has the new definitions - only change is the reference to the new master template.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 67
Tiles: Creating a Highly Flexible, Dynamic Web Site
When we now access the page with a Spanish locale, we get :
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 68
Tiles: Creating a Highly Flexible, Dynamic Web Site
Advanced TilesThe TilesAction.• Workflow type applications.• Data-driven applications.
The Tiles Controller.• Adding logic to Tiles.
Adding security.• Using roles in the definitions file.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 69
Tiles: Creating a Highly Flexible, Dynamic Web Site
TilesAction class.TilesAction is a subclass of the Struts Action class.Has an execute method with an extra parameter in the method signature.The extra parameter carries the Tiles context –The information about how to compose the Web page.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 70
Tiles: Creating a Highly Flexible, Dynamic Web Site
A workflow type sample.Start is: a car arrives at a garage.End is: car leaves garage.Total Chain of work:
11 3
2
Arrive at garage Check brakes Check engine
5
Fix brakes Fix engine
Wash car
6
Leave garage
7
Pay bill
4
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 71
Tiles: Creating a Highly Flexible, Dynamic Web Site
A workflow type sample. First we add a way of accessing the start in Struts-config.xml
<action path="/sample5/index" forward="site.page.workflow.sample5" />
Then define the main content page in tiles-defs.xml.
<definition name="site.page.workflow.sample5" extends="site.mainLayout.sample3" controllerUrl="/sample5/wfaction.do"><put name="content" value="site.page.step1" />
</definition>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 72
Tiles: Creating a Highly Flexible, Dynamic Web Site
A workflow type sample.Then we add definitions for the various steps in the tiles-defs.xml file.
<definition name="site.page.workflow.sample5" extends="site.mainLayout.sample2"><put name="content" value="site.start.sample5" />
</definition>
<definition name="site.page.control.sample5" extends="site.page.workflow.sample5" controllerUrl="/sample5/wfaction.do" />
<definition name="site.start.sample5" path="/jsp/sample5/content/startbody.jsp" /><definition name="site.step1.sample5" path="/jsp/sample5/content/step1body.jsp" /><definition name="site.step2.sample5" path="/jsp/sample5/content/step2body.jsp" /><definition name="site.step3.sample5" path="/jsp/sample5/content/step3body.jsp" /><definition name="site.step4.sample5" path="/jsp/sample5/content/step4body.jsp" /><definition name="site.step5.sample5" path="/jsp/sample5/content/step5body.jsp" /><definition name="site.step6.sample5" path="/jsp/sample5/content/step6body.jsp" /><definition name="site.finish.sample5" path="/jsp/sample5/content/finishbody.jsp" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 73
Tiles: Creating a Highly Flexible, Dynamic Web Site
A workflow type sample.The main page will be called each time and decide which content will be rendered.
Lets run it…
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 74
Tiles: Creating a Highly Flexible, Dynamic Web Site
The Tiles ControllerSometimes you have Tiles that you use in different places within your site that displays some sort of dynamic content besides the session dependant data. Instead of coding the functionality in each Struts Action that backs the particular page, you can associate a controller with the particular tile.It can then actually become a self-contained component if you want.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 75
Tiles: Creating a Highly Flexible, Dynamic Web Site
The Tiles Controller – An exampleLet's add a random number to the footer of our Web site.It will change on every page and on each call to a page.First we add an entry to access it in struts-config.xml
<action path="/sample6/index" forward="site.page.main.sample6" />
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 76
Tiles: Creating a Highly Flexible, Dynamic Web Site
The Tiles Controller – An exampleThen we add the definitions to tiles-defs.xml
<definition name="site.page.main.sample6" extends="site.mainLayout.sample2"><put name="footer" value="site.page.footer.sample6" />
</definition>
<definition name="site.page.footer.sample6" path="/jsp/sample6/footer.jsp" controllerClass="no.dnb.ee.css2003.tiles.controllers.FavoriteNumberGenerator"/>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 77
Tiles: Creating a Highly Flexible, Dynamic Web SiteThen we alter the footer.jsp
<%@ page errorPage="/jsp/error.jsp" session="true"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %><%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %><tiles:importAttribute /><tiles:useAttribute id="favoriteNumber" name="favorite" scope="page"
/><TABLE><TBODY>
<TR><TH colspan="2"><DIV class="footer"><bean:message key="footer.text"
/></DIV></TH>
</TR><TR>
<TD><bean:message key="favorite.number" /></TD><TD><bean:write name="favoriteNumber" /></TD>
</TR></TBODY>
</TABLE>
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 78
Tiles: Creating a Highly Flexible, Dynamic Web Site
The Tiles Controller – An exampleThen we create the controller
public class FavoriteNumberGenerator implements Controller{
private static Random random = new Random();public void perform(ComponentContext tileContext, HttpServletRequest request,
HttpServletResponse response, ServletContext servletContext)throws ServletException, IOException
{tileContext.putAttribute("favorite", new Integer(random.nextInt()));
}}
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 79
Tiles: Creating a Highly Flexible, Dynamic Web Site
The Tiles Controller – An example
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 80
Tiles: Creating a Highly Flexible, Dynamic Web Site
Adding securityIf you want a particular content to only be available to authenticated user, you use the "role" attribute of the definition element:
<definition name="site.step2.sample5" path="/jsp/sample5/step2body.jsp" role="admin"/>
This will have the effect that only users matching that role will have that content rendered on the page.This can be useful in, for instance, menus.
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 81
Tiles: Creating a Highly Flexible, Dynamic Web Site
Questions
Colorado Software Summit: October 26 – 31, 2003 © Copyright 2003, Den norske Bank
Hermod Opstvedt — Tiles: Creating a Highly Flexible, Dynamic Web Site Page 82
Tiles: Creating a Highly Flexible, Dynamic Web Site
References and resources :Struts (Tiles) : http://jakarta.apache.org/struts/index.htmlOld Tiles site : http://www.lifl.fr/~dumoulin/tiles/