wcd session 20

8/10/2019 WCD Session 20

1/21

Slide 1 of 21Ver. 1.0

Web Component Development With Servlet and JSP Technologies

In this session, you will learn to:

Describe how to build web page layouts from reusable

presentation components

Include JSP segments

Develop layouts using the Struts Tiles framework

Objectives


2/21



Complex Page Layouts


3/21



Complex Page Layouts (Contd.)

Use a hidden table to construct your layout:


4/21



Presentation Segment Overview

A segment can be any text file that contains static HTML or

dynamic JSP technology code:1

2

3

4

5

6 Dukes Soccer League,

2000-

7

Note: Segments should not contain html, head, or body

tags.


5/21



Organizing Presentation Segments

You should isolate your reusable segments.


6/21



Content pages can be anywhere in the web application.

If stored with other content (such as images), the content

segments can be accessed directly from a client browser.

You can protect content from direct access by a browser by

storing the segments under the WEB-INF directory.

Organizing Presentation Segments (Contd.)


7/21Slide 7 of 21Ver. 1.0


Including JSP Page Segments

There are two techniques for including presentation segments in

your main JSP pages:

The includedirective

The jsp:includestandard action




Using the include Directive

The includedirective lets you include a segment into the

text of the main JSP page at translation time.

Syntax:

Example:

75

76

77

78

79




Using the jsp:include Standard Action

The jsp:includeaction lets you include a segment into

the text of the HTTP response at runtime.

Syntax:

Example:

36

37

38

39

40


10/21Slide 10 of 21Ver. 1.0


Using the jsp:param Standard Action


11/21Slide 11 of 21Ver. 1.0


The jsp:includeaction can take dynamically specified

parameters using the jsp.paramstandard action.

For example, in the Soccer League home page:

24

25

26

27

28

Using the jsp:param Standard Action (Contd.)


12/21Slide 12 of 21Ver. 1.0


The subTitleparameter is attached to the request object.

12

13

14 ${bannerTitle}

15

1617

18

19

20 ${param.subTitle}

21

22

Using the jsp:param Standard Action (Contd.)


13/21Slide 13 of 21Ver. 1.0


The basic idea of Tiles is to have a single (or small number)

of layout files, rather than duplicating the layout code from

one page to another.

Views call the layout file.

The layout file provides the layout and dynamically includes

information provided by the views.

Developing Layouts Using Struts Tiles


14/21Slide 14 of 21Ver. 1.0


1

3

5

6 7

8

9

10 Dukes Soccer League:

11

12

13

14

The layoutPage.jsp Page


15/21Slide 15 of 21Ver. 1.0


15

1617 1819

20 22 2324 25 26 27 28 29 30 31 3233

The layoutPage.jsp Page (Contd.)


16/21Slide 16 of 21Ver. 1.0


3435 3637 38 39 40

41 4243 44 46 47 48

49 50 5152 53



17/21Slide 17 of 21Ver. 1.0


54 5556 57 58 5960

61 62 63 64 6566 6768

6970 71



18/21Slide 18 of 21Ver. 1.0


View pages can include the layout page, passing

information as Tiles variables.

For example, the Registration Thank You page is:1

34

5

6

7

The variables subTitle and body provide content.

Other views would provide different content.

Tiles Layout


19/21Slide 19 of 21Ver. 1.0


Content Body

Content files are segments that provide only the content you

want to have in that part of the layout.

1

2

3

4 Thank you, ${sessionScope.player.name}, forregistering for

5 the ${sessionScope.league.title} league.

6


20/21Slide 20 of 21Ver. 1.0


Demo: Building Reusable Web Presentation Components

Demo: Building Reusable Web Presentation Components


21/21Slid 21 f 21V 1 0


In this session, you learned:

Most modern web sites use graphically rich layouts.

Graphically rich layouts include a lot of bulky HTML code to

structure the hidden tables that create the page layout.

The Tiles framework can help organize the layout code into a

separate, easily maintained file.

The layout file then includes various presentation segments.

Some segments are reusable components, such as banners and

navigation menus.

Some segments are the actual body content of the page.

Summary (Contd.)

wcd session 20

Documents