StrutsTiles Mazyan
StrutsTiles Mazyan
1
Topics
● Evolution of Web page layout technologies
– 4 different generations
● Tiles framework
– Layout (template)
– Screen definitions (definitions)
– Tiles tag library
– Internationalization
– Multi-channels
– Configuration
2
Evolution of Web Page
Layout Technology
(Before we talk about
Tiles Framework)
3
Presentation Needs of Web
Application
● Common look and feel among all pages
– Common layout with common header, footer,
menus, forms, copyright, promotions, etc.
● Easy maintenance
– You don't want hard-code layout in each page
– Single place to go for changing layout is desirable
● Separation of layout from content
– Layout and contents should be able to change
without affecting each other
4
Layout versus Content
header
body1
menu
content
<table width='610'>
<tr valign='top'><td><jsp:include page='sidebar.jsp'/></td>
<td><table>
<tr><td><jsp:include page='header.html'/></td></tr>
<tr><td><jsp:include page='chapter.jsp'/></td></tr>
<tr><td><jsp:include page='footer.jsp'/></td></tr>
</table>
</td>
</tr>
</table>
</body></html>
10
nd
Issues with the 2 Gen.: JSP
pages with JSP include directives
● The layout is still mixed with contents
– Each display page explicitly specifies where
header.jsp goes and where footer.jsp goes (hard-
coded layout)
● Every display page has to have the same
statements in the same order
– If layout scheme needs to be changed, every
display page has to be changed
● Reason for 3rd generation approach:
Template
11
The 3rd Generation:
Template
12
What is a Template?
● Template is a JSP page that uses JSP custom
tag library to describe the layout of a page
without specifying contents
● The template acts as a layout definition for
what the pages of an application will look like
(layout-wise), without specifying the content
● Content is inserted into the template page
during runtime
● Several display pages use the same template
– display page x = common template + contents x
13
Why Template?
● Separation of Layout from content
– Content and layout can change without interfering
each other
● A common template is shared by many
display pages
– A single place to change when layout change is
required
● Template provides consistent look and feel
without having to hard-code it in every page
14
Example Display Page Using a
Template
<%@ taglib URI='/WEB-INF/struts-template.tld' prefix='template' %>
<template:insert template='/defaultTemplate.jsp'>
<template:put name='title' content='Java Passion' direct='true'/>
<template:put name='header' content='/header.html'/>
<template:put name='sidebar' content='/sidebar.jsp'/>
<template:put name='content' content='/introduction.html'/>
<template:put name='footer' content='/footer.html'/>
</template:insert>
15
Tiles Framework
16
What is Tiles Framework?
● Tiles framework allows building pages by
assembling reusable Tiles
● A display page can be built by assembling
a header, a footer, a menu and a body Tiles
17
Tiles Framework
● Superset of Template
– Tiles framework supports template functionality
● Tiles framework use a term “Layout” for a template
– Support parameter passing
● Extra features over Template
– Screen definitions
– Dynamic page building
– Reuse of Tiles
– Internationalization
– Multi-channels
18
What is a Tile?
● Each Tile (header, menu, body, ...) is a JSP
page and can itself be built by assembling
other Tiles
● Using Tiles can be compared as using Java
methods:
– You need to define the Tiles (the method body),
and then you can "call" this body anywhere you
want, passing it some parameters
– In Tiles, parameters are called "attributes" in order
to avoid confusion with the request parameters
19
Tiles Framework:
Pieces That Make up
A Tiles Application
(without using
Definitions yet)
20
Pieces that make up Tiles App
● Layout page
– Define a common layout
– Layout specify attributes as filler's
– ex: classLayout.jsp
● Display pages
– Use a particular layouy page for layout
– Specify parameter pages for actual contents
– ex: templateNoDef.jsp
● Parameter pages
– Provides actual contents
– Shared among display pages
– ex: footer.jsp 21
Tiles Framework:
Layout (Template)
22
Layout (Page)
● Serves same purpose as Template
– It is a JSP file
● Common layouts are defined once and reused
across many different projects
– Provides a common look and feel
● Layout
● Style
24
Pre-built Layouts from Tiles
Framework
● Classic layout
– header, left menu, body, footer
● Menu layout
– menu with links
● Vertical box layout
– a list of tiles in a vertical column
● Columns layout
● Center layout
● Tabs layout
25
Classic Layout (classicLayout.jsp)
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
</HEAD>
26
Classic Layout (classicLayout.jsp)
<body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264"
vlink="#023264">
<table border="0" width="100%" cellspacing="5">
<tr>
<td colspan="2"><tiles:insert attribute="header" /></td>
</tr>
<tr>
<td width="140" valign="top">
<tiles:insert attribute='menu'/>
</td>
<td valign="top" align="left">
<tiles:insert attribute='body' />
</td>
</tr>
<tr>
<td colspan="2">
<tiles:insert attribute="footer" />
</td>
</tr>
</table>
</body>
27
</html>
Tiles Framework:
Display Page
28
Passing Parameter Pages to Layout
Layout
<%-- Insert a layout rendering requested tiles. --%>
<tiles:insert page="/layouts/classicLayout.jsp" flush="true">
<tiles:put name="title" value="Tiles Basic Page" />
<tiles:put name="header" value="/tiles/common/header.jsp" />
<tiles:put name="footer" value="/tiles/common/footer.jsp" />
<tiles:put name="menu" value="/tiles/simpleMenu.jsp" />
<tiles:put name="body" value="/tiles/body.jsp" />
</tiles:insert>
parameter pages
30
templateNoDef.jsp: Display Page
31
myOwnDisplayPage.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
Parameter page
32
myOwnDisplayPage.jsp
33
Tiles Framework:
Parameter Pages
34
Parameter Pages
35
body.jsp (from tiles-blank-struts1-1
example)
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
36
simpleMenu.jsp (from tiles-blank-
struts1-1 example)
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
37
Tiles Framework:
Screen Definitions
38
Why Definitions?
● Without definitions (in scheme shown
previously), in each of display pages, there
is redundant code that specifies commonly
used contents
– In the following two slides, there are two display
pages (templateNoDef.jsp and templateNoDef2.jsp)
– There are redundant code (header, footer) between
the two
– With large number of display pages, replacing, for
example, a header with a different one could be a
chore since you have to change them all
39
templateNoDef.jsp as display page #1
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
40
templateNoDef2.jsp as display page #2
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
41
What is a Screen Definition?
● Advanced form of layout management
– Definitions provide an inheritance mechanism
● Definitions can take place :
– in a centralized xml file (tiles-def.xml)
– directly in jsp page
● You can use a defintion (i.e.
mycompany.com.mytilesdefinition) instead
of a JSP page (my.page.jsp)
– This will provide contents in fully “layed out” format
42
Definitions Can be Inherited
● A definition can extend another one, overload
some attributes, add new attributes
– This allows the declaration of a "master" definition
declaring the common layout, header, menu and
footer
– All other definitions extend this master layout
thereby making it possible to change the entire
site look & feel simply by changing the master
definition.
43
Tiles Framework:
Pieces That Make up
A Tiles-based Page
(using Definitions )
44
Pieces that make up Tiles Page
● Definitions
● Layouts
● Display pages
● Parameter pages
45
Tiles Framework:
Tiles Definitions File
46
Where to Create Definitions?
● In a JSP page or an XML configuration file
● If you create an XML configuration file
– Tiles Definition File
– Usually as /WEB-INF/tiles-def.xml
● specified in Plugin configuration
– Contains all the definitions for the entire
application
47
Tiles Definition File (WEB-INF/tiles-def.xml)
From tiles-blank-struts1-1 Sample Code
<tiles-definitions>
49
How Tiles Definition is Used:
index.html of struts-tiles-blank Sample code
50
Tiles Definition File (WEB-INF/tiles-def.xml)
From tiles-blank-struts1-1 Sample Code
51
<tiles:putList> tag
● Declare a list that will be pass as attribute
to tile
● List elements are added using the tag 'add'
● Can only be used inside 'insert' or
'definition' tag
52
Tiles Definition File (WEB-INF/tiles-def.xml)
From tiles-blank-struts1-1 Sample Code
54
Tiles Definition File (WEB-INF/tiles-def.xml)
From tiles-blank-struts1-1 Sample Code
<!-- Another Menu description
A menu has a title and a set of entries rendered as links.
Add new entry to add new links in menu.-->
56
Tiles Framework:
Best Practice Guidelines
57
Tiles Best Practice Guidelines
● How to structure the Development tree?
● Where to use Tiles framework?
● Steps for building Tiles based application
58
How to structure Development
Tree?
● See development tree structure of the tiles-
documentation sample application
● Layouts
– Have all layouts under its own directory, i.e.
./web/layouts
● Tiles
– Have all tiles (parameter pages) under its own
directory - i.e. ./web/tiles
– Under tiles directory, have the commonly used
tiles under ./web/tiles/common directory
59
How to structure Development
Tree?
● Definitions
– Have definition names to follow hierarchical name
space
– Example
<!-- Main definition as a root for other definitions -->
<definition name="site.mainLayout" path="/layouts/classicLayout.jsp">
<put name="title" value="Tiles Blank Site" />
...
</definition>
61
Where to Use Tiles Framework?
● Wherever you place your normal JSP page
can be replaced with Tiles definition
● Tiles definition provides fully laid out page
contents
62
Where to use Tiles Framework?
● Instead of including JSP page
– <jsp:include page=”my.jsp” />
● Use Tiles definition
– <%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
– <tiles:insert definition="my.definition" flush="true" />
63
Suggested Steps for building Tiles-
based Application (Review)
● Create layouts
– See if existing layouts meet the need
– If not, see if new layouts can be created using the
existing ones
● Create Definitions in /WEB-INF/tiles-def.xml
– See if existing definitions meet the need
● Create Tiles (parameter pages)
– See if existing tiles meet the need
● Create Display pages
64
Tiles Framework:
Tiles Tag Library
65
Tags in Tiles Tag Library
● insert
● put
● definition
● getAsString
● get
● add
● importAttribute
● useAttribute
● putList
● initComponentDefinitions
66
<tiles:insert> tag
● In a Layout tile
– Prescribes where the content will go using
attribute attribute
– example: <tiles:insert attribute='menu'/>
● In a non-layout tile
– Retrieves a layout using page attriute
– example: <tiles:insert
page="/layouts/classicLayout.jsp" flush="true">
67
classicLayout.jsp as Layout tile
<body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264"
vlink="#023264">
<table border="0" width="100%" cellspacing="5">
<tr>
<td colspan="2"><tiles:insert attribute="header" /></td>
</tr>
<tr>
<td width="140" valign="top">
<tiles:insert attribute='menu'/>
</td>
<td valign="top" align="left">
<tiles:insert attribute='body' />
</td>
</tr>
<tr>
<td colspan="2">
<tiles:insert attribute="footer" />
</td>
</tr>
</table>
</body> 68
templateNoDef.jsp as non-Layout tile
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
69
<tiles:put> tag
● Define an attribute to pass to
tile/component/template
● Can only be used inside 'insert' or
'definition' tag
● Value (or content) is specified using
attribute 'value' (or 'content'), or using the
tag body
70
Tiles Framework:
Tiles & Struts
71
Using Tiles Framework with Struts
● Use the Tiles plug-in to enable Tiles definitions
● This plug-in creates the definition factory and
passes it a configuration object populated with
parameters
● Parameters can be specified in the web.xml file or
as plug-in parameters
● The plug-in first reads parameters from web.xml,
and then overloads them with the ones found in
the plug-in
● All parameters are optional and can be omitted
72
Definition of a Tiles Plug-in
in the struts-config.xml
<!-- ========== Tiles plug-in setting settings =================== -->
<!-- Here we specified the tiles plug-in.
This plug-in register appropriate Request Processor -->
<!-- <controller
processorClass="org.apache.struts.tiles.TilesRequestProcessor" /> -->
73
How a Definition can be used as
Forward in Struts
● Tile definition can be used as Struts
forward (instead of URLs)
● In struts-config.xml file
<global-forwards>
<forward name=”success”
path=”site.mainLayout” />
</global-forwards>
74
Tiles Framework:
Internationalization
75
Internationalization
● It is possible to load different Tiles
according to the user's Locale
● A mechanism similar to Java properties
files is used for definition files: you can
have one definition file per Locale, the
appropriate definition is loaded according to
the current Locale
– tiles-definitions-en.xml
– tiles-definitions-de.xml
76
Tiles Framework:
Multi-channels
77
Multi-Channels
● It is possible to load different Tiles
according to a key stored e.g. in session
context
● The key could hold e.g. user privileges,
browser type, ...
● A mechanism similar to Java properties
files is used for definition files: you can
have one definition file per key, the
appropriate definition is loaded according to
the key
78
Tiles Framework:
How to configure
Tiles framework with
Struts
79
Things to Configure
● Configure WEB-INF/web.xml file
<taglib>
<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>
81
Inserting a Tile
● Inserting the body, or calling it, is done with
the tag <tiles:insert ...> anywhere in a JSP
page
● Insertion can also be done by specifying a
definition name as the path of a Struts
forward or as input, forward or include
attributes of a Struts action
– This is Struts/Tiles integration and the level of
integration is possible with other frameworks
82
Example: Inserting a JSP Page
● This example inserts the specified page in
place of the tag
<tiles:insert page="/layouts/commonLayout.jsp" flush="true" />
● The page attribute is any valid URL pointing to
a resource inside the current site
83
Example: Inserting a Tile passing
some attributes
● This example inserts the specified page,
passing it the attributes.
<tiles:insert page="/layouts/classicLayout.jsp" flush="true">
<tiles:put name="title" value="Page Title" />
<tiles:put name="header" value="/common/header.jsp" />
<tiles:put name="footer" value="/common/footer.jsp" />
<tiles:put name="menu" value="/common/menu.jsp" />
<tiles:put name="body" value="/tiles/mainBody.jsp" />
</tiles:insert>
● Attributes are stored in a Tiles context which
is passed to the inserted page and can then
be accessed by their names 84
Example: Inserting a Tile by an
attribute
● This inserts the Tiles referenced by the
attribute "menu" value.
<tiles:insert attribute='menu' />
● The specified attribute value is first retrieved
from current Tile's context, and then the value
is used as a page target to insert.
85
Dynamic Page Building
● Tiles are gathered dynamically during page
reload – Dynamic page building
● It is possible to change any attributes:
layout, list of Tiles in portal, list of menu
items, ...
86
Reuse of Tiles
● If well defined, a Tile can be reused in
different locations
● Dynamic attributes are used to
parameterize Tiles
● It is possible to define libraries of reusable
Tiles
● Build a page by assembling predefined
components, give them appropriate
parameters
87
How Definitions are Used
● Insertion of a Tiles body can be associated to
a logical name in what Tiles calls a "definition"
● A definition contains a logical name, a page
used as body and some attribute values.
● The definition declaration doesn't insert the
associated Tiles body. It just associates it with
the name.
● A definition name can be used anywhere
insertion of a Tiles body can occur.
● The associated Tiles body is then inserted
with associated attributes.
88