1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<html>
<head>
<title>Building SiteMesh Decorators</title>
</head>
<body>
<p>Once SiteMesh has been <a href="install.html">installed and
configured</a>, you can begin writing decorators for your web
application.</p>
<h3>Introduction</h3>
Decorators are the pages that "decorate" the original, requested page (the
page that is <a href="flow.html">handed to the SiteMesh filter from the web
container</a>). Most (HTML) decorators are a combination of:
<ul>
<li>meta tags (keywords, description, author)</li>
<li>stylesheet (CSS)</li>
<li>header</li>
<li>navigation</li>
<li>footer</li>
<li>copyright notice</li>
</ul>
First, define what different navigation/layout schemes you need. For
example: Do I need a default decorator (a standard one for all pages)? Do I
have a special layout for the index page? Is the header needed for my
documentation files? Do I need printable version of my website?
<h3>Web Application Structure</h3>
<p>Here is an example structure of a web application. This is not needed for SiteMesh to work.</p>
<table align="center" width="80%" cellpadding="4" style="background: #eeeeee; border: 1 black solid;">
<tr>
<td width="15%"><b><code>/decorators</code></b></td>
<td><p>Directory containing all decorator files (e.g. <code>main.jsp</code>, <code>printable.jsp</code>).</p></td>
</tr>
<tr>
<td width="15%"><b><code>/includes</code></b></td>
<td><p>Directory containing all files to be included into other files (e.g. <code>header.jsp</code>, <code>footer.jsp</code>, <code>copyright.jsp</code>).</p></td>
</tr>
<tr>
<td width="15%"><b><code>/images</code></b></td>
<td><p>Directory containing all images (e.g. <code>background.gif</code>, <code>logo.gif</code>).</p></td>
</tr>
<tr>
<td width="15%"><b><code>/styles</code></b></td>
<td><p>Directory containing all .CSS styles (e.g. <code>ie4.css</code>, <code>ns4.css</code>).</p></td>
</tr>
<tr>
<td width="15%"><b><code>/scripts</code></b></td>
<td><p>Directory containing all scripts (JavaScript, VBScript files).</p></td>
</tr>
</table>
<p>Good practices:</p>
<ul>
<li>Define a stylesheet to use in the entire application and include it using <a href="style.jsp.txt">this script</a>.</li>
<li>Use includes in your decorators (e.g. <code>includes/navigation.jsp</code>, <code>includes/style.jsp</code>).</li>
<li>Try not to refer to the absolute root ("<code>/</code>") path. Use <code><%=request.getContextPath()%>/</code> instead.
This will make life easier when moving your web application under another context path.</li>
<li>Making your decorators compatible with multiple browsers (IE, Mozilla, Opera, ...) will (probably) make your entire application (all decorated pages) compatible.</li>
<li>Be careful when using frames, because decorators may NOT be applied to frames (<a href="api/com/opensymphony/module/sitemesh/mapper/FrameSetDecoratorMapper.html">FrameSetDecoratorMapper</a>).</li>
</ul>
<h3>My First Decorator</h3>
Basically, all you need to know is what <a href="tags.html">decorator tags</a> you can use.
The <a href="tags.html#decorator:title">title</a>, <a href="tags.html#decorator:head">head</a> and <a href="tags.html#decorator:body">body</a> tags are most used.<br>
Here is an example of a decorator (save it as /decorators/main.jsp):
<p>
<code>
1: <%--<br>
2: % This is the main decorator for all SOMECOMPANY INTRANET pages.<br>
3: % It includes standard caching, style sheet, header, footer and copyright notice.<br>
4: --%><br>
5: <b><%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %></b><br>
6: <%@ include file="<a href="cache.jsp.txt">/includes/cache.jsp</a>" %><br>
7: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br>
8: <html><br>
9: <head><br>
10: <title><b><font color="Maroon"><decorator:title default="INTRANET" /></font></b></title><br>
11: <b><font color="Maroon"><decorator:head /></font></b><br>
12: <b><%@ include file="<a href="style.jsp.txt">/includes/style.jsp</a>" %></b><br>
13: </head><br>
14: <body bgcolor="#FFFFFF" background="<%=request.getContextPath()%>/images/bg.gif"><br>
15: <script type="text/javascript">window.status = "Loading: <b><font color="Maroon"><decorator:title default="INTRANET" /></font></b>...";</script><br>
16: <%@ include file="/includes/header.jsp"%><br>
17: <table width="100%" border="0" cellspacing="0" cellpadding="0"><br>
18: <tr><br>
19: <td height="20" nowrap> </td><br>
20: </tr><br>
21: <tr><br>
22: <td width="1%" nowrap> </td><br>
23: <td width="16%" valign="top" nowrap><br>
23: <script type="text/javascript">window.status = "Loading: Navigation...";</script><br>
24: <%@ include file="/includes/navigation.jsp" %><br>
25: </td><br>
26: <td width="2%" nowrap> </td><br>
27: <td valign="top"><br>
28: <br><br>
29: <script type="text/javascript">window.status = "Loading: Document body...";</script><br>
30: <div class="docBody"><b><font color="Maroon"><decorator:body /></font></b></div><br>
31: </td><br>
32: <td width="1%" nowrap> </td><br>
33: </tr><br>
34: </table><br>
35: <br><br>
36: <b><%@ include file="/includes/footer.jsp" %></b><br>
37: <b><%@ include file="/includes/copyright.jsp" %></b><br>
38: <script type="text/javascript">window.status = "Done";</script><br>
39: </body><br>
40: </html><br>
</code>
</p>
<ul>
<li>Line <strong>1-4</strong>:<br>An explanation of the decorator. This way different people working on the decorator are quickly up to speed.</li>
<li>Line <strong>5</strong>:<br>This is needed for the <code>decorator:</code> tags to work (also needed on all pages that work with inline decorators (<a href="tags.html#page:applyDecorator">page:applyDecorator</a>).</li>
<li>Line <strong>6</strong>:<br>Sets the necessary response headers to let the browser cache the page. Omit this line if your application is real dynamic (changing data).</li>
<li>Line <strong>10</strong>:<br>If the requested page doesn't have a title, the default title is used ("INTRANET").</li>
<li>Line <strong>15</strong>:<br>The status bar gets a message when the page is loading.</li>
<li>Line <strong>30</strong>:<br>The entire body of the requested page has the <code>docBody</code> class. This way the navigation and body do not have to have the same font.</li>
</ul>
<p>Now open <code>WEB-INF/decorators.xml</code> with your favorite editor
and let SiteMesh know there is a decorator (with a mapping):</p>
<pre style="border: 1px solid #999999; padding: 5px">
<decorators defaultdir="/decorators">
<decorator name="main" page="<b>main.jsp</b>">
<pattern><b>/*</b></pattern>
</decorator>
</decorators>
</pre>
<p>Now deploy the web application, go to the welcome page, and the main decorator will be applied.</p>
<h3>More examples</h3>
<p>More examples are included with the SiteMesh distribution, under the
<a href="https://sitemesh.dev.java.net/source/browse/sitemesh/src/example-webapp/">src/example-webapp</a> directory.
If the examples don't give you enough to go on, take a look at SiteMesh in action, download the petsoar-app at
<a href="http://www.wiley.com/legacy/compbooks/walnes/">http://www.wiley.com/legacy/compbooks/walnes/</a>.</p>
</body>
</html>
|
