Apache Struts: Laying Out Pages with Tiles Struts 1.2 Version Core Servlets & JSP book: www.coreservlets.com More Servlets & JSP book: www.moreservlets.com Servlet/JSP/Struts/JSF Training: courses.coreservlets.com Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press

For live Struts training, please see JSP/servlet/Struts/JSF training courses at http://courses.coreservlets.com/. Taught by the author of Core Servlets and JSP, More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at your organization. Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press

Agenda • Tiles motivations • Tiles basics – – – –

Sketch out desired layout Make template file that represents layout Create JSP pages that define layout pieces Create JSP pages that populate layout

• Handling relative URLs in Tiles – Use html:rewrite

• Using Tiles definitions file

5

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Tiles Motivations • Reuse (not rewrite) repeated sections of pages • Simplify the creation of similar pages • Increase flexibility and ease of maintenance compared to <jsp:include …/>.

6

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Tiles Basics

Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press

Prerequisites • Two entries needed in struts-config.xml ... <set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" /> <set-property property="moduleAware" value="true" />

• These entries already exist in the strutsconfig.xml bundled with struts-blank – No changes or additions required 8

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Tiles Basics 1. Sketch out desired layout –

Do this on paper

2. Make template file that represents layout – – –

Use tiles:insert wherever layout piece goes Use tiles:getAsString wherever changeable text goes To prevent direct access, put template in WEB-INF

3. Create JSP pages that define layout pieces – –

JSP pages containing HTML snippets To prevent direct access, put JSP pages in WEB-INF

4. Create JSP pages that populate layout – – – 9

Use tiles:insert to refer to the layout from #1 above Use tiles:put to specify layout pieces Unless forwarded to, JSP not in WEB-INF

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 1: Sketch Out Desired Layout • Many sites have groups of pages that have a consistent general layout – E.g., our example pages will contain five elements • • • • •

Header Title Menu Body Footer

• Often only one or two parts (e.g., the body) changes from page to page • Helpful to sketch layout on paper

10

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 1: Sketch Out Desired Layout

11

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 2: Make Template File That Represents Layout • Use regular HTML for parts that never change • Declare the Struts tiles tag library – <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• Use tiles:insert to stub out sections that will be filled in by template pieces – – The eventual JSP page will associate a real file with the header attribute

• Use tiles:getAsString to stub out locations that will be replaced by simple text –

• Template file should never be accessed directly – So, put it in WEB-INF to avoid accidental access 12

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 2: Make Template File That Represents Layout • WEB-INF/tiles/layout.jsp

13

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <TITLE>

---

www.coreservlets.com Apache Struts: Laying Out Pages with Tiles

Step 3: Create JSP Pages That Define Layout Pieces • These are regular JSP pages that define portions of an HTML page – Be sure not to repeat tags such as DOCTYPE, HEAD, BODY, etc., that are defined in template file from Step 2

• These pages can themselves be tiles • Pages can use the bean: and html: Struts tags – Layout pieces can access beans that are in request scope

• Layout pieces should never be accessed directly – So, put them in WEB-INF to avoid accidental access

14

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/header.jsp

Header

• WEB-INF/tiles/body1.jsp

Page 1 Body

Blah, blah, blah, blah, blah. Blah, blah, blah, blah, blah.

Yadda, yadda, yadda, yadda. Yadda, yadda, yadda, yadda.

• WEB-INF/tiles/footer.jsp

15

Footer

www.coreservlets.com Apache Struts: Laying Out Pages with Tiles

Step 4: Create JSP Pages That Populate Layout • Declare the Struts tiles tag library <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• Use tiles:insert to refer to the layout defined in Step 2 …

• Use tiles:put to specify the layout pieces that apply to this specific page 16

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Create JSP Pages That Populate Layout • page1.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• page2.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> 17

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Results: page1.jsp

18

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Results: page2.jsp

19

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Handling Relative URLs

Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press

Relative URLs in Page Snippets • Many page elements are referred to with relative URLs – Images – Style sheets – Simple hypertext links

• Page elements cannot be referred to with URLs that are relative to location of layout pieces – Pieces are in WEB-INF, so not directly accessible – Even if not in WEB-INF, client does not see the URL

• Could use URL beginning with a slash – But then you would have to list the Web app prefix

• Could use getContextPath – But then you need scriptlet 21

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Using html:rewrite • Lets you use URLs beginning with slashes – You list path relative to Web application home – System adds Web application prefix (i.e., context path) to the front

• You must import the Struts html: library first – Same tag library as used in the section on form handling

• Examples – From layout page:

– From snippet or layout page:

22

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

The e-boats Application • Online store to sell boats • Uses tiles for pages that have similar layouts – Only title and body changes from page to page

• Uses style sheet to control look and feel • Uses images on multiple pages

23

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 1: Sketch Out Desired Layout • Header • Title • Search menu • Body (No outline)

• Footer

24

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 2: Make Template File That Represents Layout • WEB-INF/tiles/main-layout.jsp <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> <TITLE>

25

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 2: Make Template File That Represents Layout • WEB-INF/tiles/main-layout.jsp (Continued)

---

26

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/header.jsp <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> ...

" CLASS="WHITE"> Home    " CLASS="WHITE"> Products    " CLASS="WHITE"> Services    " CLASS="WHITE"> Contact Us

27

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/search-menu.jsp <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

Search Site

... 28

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/footer.jsp <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> ">Home ">Contact ">Privacy

29

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/body-index.jsp <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

Looking for a hole in the water into which to pour your money? You've come to the right place! We offer a wide selection of reasonably priced boats for everyday use.

Yachts

Starting at a mere 72 million, these entry-level models are perfect for the cost-conscious buyer. Click "> here for details.

Oil Tankers

...

Aircraft Carriers

... 30

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • WEB-INF/tiles/body-yachts.jsp • WEB-INF/tiles/body-tankers.jsp • WEB-INF/tiles/body-carriers.jsp

31

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Create JSP Pages That Populate Layout • index.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

32

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: index.jsp

33

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Create JSP Pages That Populate Layout • yachts.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

34

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: yachts.jsp

35

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Create JSP Pages That Populate Layout • tankers.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

36

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: tankers.jsp

37

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Create JSP Pages That Populate Layout • carriers.jsp (not in WEB-INF) <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

38

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: carriers.jsp

39

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Using Tiles Definitions

Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press

Motivation • Avoiding repetition – In the previous examples, each final JSP page repeated the definition of all elements • Even though only the title and body changed, each final JSP page still had to do tiles:put on the header, search-menu, and footer

• Centralized changes – The locations of the various template pieces are scattered around multiple JSP pages • So, if locations change, multiple files need to be edited

• Usage of config files – Struts philosophy is to put as much as possible in config files and as little as possible in JSP/Java code 41

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Using Definitions: Steps 1. Sketch out desired layout –

Same as before

2. Make template file that represents layout –

Same as before

3. Create JSP pages that define layout pieces –

Same as before

4. Define layouts in WEB-INF/tiles-defs.xml 5. Create JSP pages that use layouts –

Two line JSP pages • •

42

Imports tiles tag library Uses tiles:insert with definition name

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Using Definitions: Key Differences • Define layouts in WEB-INF/tiles-defs.xml – Top-level layouts • <definition name="…" path="/WEB-INF/…/some-layout.jsp">

– Derived layouts • <definition name="…" extends="top-level-layout-name">

• In final JSP page, use definition instead of page for tiles:insert •

• Advantages – Derived layouts need only specify parts that differ from parent layout – Can make changes in a single file – Definitions are in config files, not JSP pages 43

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Redoing e-boats with Tiles Definitions • Same page names • Same look

44

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 1: Sketch Out Desired Layout • Header • Title • Search menu • Body (No outline)

• Footer

45

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 2: Make Template File That Represents Layout • WEB-INF/tiles/main-layout.jsp – No change from previous example <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> <TITLE>

... 46

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 3: Create JSP Pages That Define Layout Pieces • No changes from previous example – – – – – – –

47

WEB-INF/tiles/header.jsp WEB-INF/tiles/search-menu.jsp WEB-INF/tiles/footer.jsp WEB-INF/tiles/body-index.jsp WEB-INF/tiles/body-yachts.jsp WEB-INF/tiles/body-tankers.jsp WEB-INF/tiles/body-carriers.jsp

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Define Layouts in WEB-INF/tiles-defs.xml • General format …

48

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Step 4: Define Layouts in WEB-INF/tiles-defs.xml • Top-Level Definition

49

<definition name=".mainLayout" path="/WEB-INF/tiles/main-layout.jsp"> … www.coreservlets.com Apache Struts: Laying Out Pages with Tiles

Step 4: Define Layouts in WEB-INF/tiles-defs.xml • Derived Definitions

50

… <definition name="index.page" extends=".mainLayout"> <definition name="yachts.page" extends=".mainLayout"> … www.coreservlets.com Apache Struts: Laying Out Pages with Tiles

Step 5: Create JSP Pages That Use Layouts • index.jsp <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• yachts.jsp <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• tankers.jsp <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

• carriers.jsp <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> 51

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: index.jsp

52

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: yachts.jsp

53

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: tankers.jsp

54

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Result: carriers.jsp

55

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Using Definition Names as forward Targets • You can list definition names instead of JSP page locations in forward declarations – Change:

– To:

• If JSP pages are only used as forward targets, you can omit the 2-line JSP pages altogether 56

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Summary • Basic Usage – Sketch out desired layout – Make template file that represents layout – Create JSP pages that define layout pieces • Use html:rewrite to handle relative URLs

– Create JSP pages that populate layout

• Usage with Definition File – – – – –

Sketch out desired layout Make template file that represents layout Create JSP pages that define layout pieces Define layouts in WEB-INF/tiles-defs.xml Create JSP pages that use layouts • Can omit this step and refer to definition names in forward declarations

57

Apache Struts: Laying Out Pages with Tiles

www.coreservlets.com

Questions? Core Servlets & JSP book: www.coreservlets.com More Servlets & JSP book: www.moreservlets.com Servlet/JSP/Struts/JSF Training: courses.coreservlets.com Slides © Marty Hall, http://www.coreservlets.com, books © Sun Microsystems Press