AGENDA:
-
Why should I learn site mesh.
-
Site mesh ???.
-
Learn an example.
-
Back ground architec…(sorry i forgot the spelling
) -
Want to think beyond….
-
Decorator mapping
-
In line decorators
-
Contents blocks
-
Tips
If you are designing a web page
Generally you will be having a menu on top, some stuff on left side of the page and some content on the center and a footer part telling about u r company.
Same design will be there for almost all the pages….
Designers role….he will be designing the pages in dream weaver or what ever tool he want to use and he will be giving us a dump.
It is all developers work now….
If u r
-
copying and pasting the pages , u r on the worst track.
-
Using JSP includes , it is bad because Pages will Fragile, Strongly coupled and increasingly complex.
-
XSLT:OK, Flexible, but hard to debug,difficult to learn and you cant view it with out the pipe.
-
SITE-MESH: GOOD, SIMPLE, DECOUPLED, SCALABLE , FLEXIBLE.
Basically site-mesh is
Open Source J2EE page layout and decoration engine
Interpretation of GoF decorator pattern for web applications
Analogy: Swing look & feel changer
Core values:
Simplicity, Speed & Flexibility
Implemented as a Servlet 2.3 request filter
Requires Servlet 2.3 compatible server
Runs on all recent J2EE servers
Typical request (without SiteMesh):
Request with Site Mesh filter deployed:
Did u understand my bla bla bla….:-) that’s k wait for a while will make u clear……first read the below.
Site Mesh was built upon the Java Servlet 2.3 API. It is a web-page layout system and web-application integration system to aid in creating large sites consisting of many pages for which a consistent look/feel, navigation, and layout scheme is required. It intercepts requests to any static or dynamically generated HTML page requested through the web-server, parses the page, obtains properties, and data from the content, and generates an appropriate final page with modifications to the original. It is ideally suited for Java based sites (particularly JSP) but can be dropped into any existing site that uses a Servlet engine including static, CGI, PHP, and Cold Fusion generated pages
Now Installation process:
Careful – it’s complicated…
Copy sitemesh-2.x.jar to the WEB-INF/lib/ directory of your web-app
download tld’s and paste them in tld folder under web-inf
down load from following web-site
Install and map the filter in WEB-INF/web.xml:
(Adjust these web.xml settings as per your project.)
|
<filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>
<taglib> <taglib-uri>sitemesh-page</taglib-uri> <taglib-location> /WEB-INF/tld/sitemesh-page.tld </taglib-location> </taglib> <taglib> <taglib-uri>sitemesh-decorator</taglib-uri> <taglib-location> /WEB-INF/tld/sitemesh-decorator.tld </taglib-location> </taglib>
|
Set a decorator.xml page as shown below in WEB-INF folder
|
<?xml version=“1.0″ encoding=“ISO-8859-1″?>
<decorators defaultdir=“/WEB-INF/decorators”>
<excludes> <pattern>/stylesheet/*</pattern> <pattern>/js/*</pattern> <pattern>/images/*</pattern> </excludes>
<!– pages will be decorated here –> <decorator name=“panel” page=“panel.jsp” />
</decorators> |
Architecture of Site-Mesh
Ok now installation is done….simply follow the steps as I say’
Take one page say its name is main.jsp now divide this page into parts lets say header.jsp, leftside.jsp, center.jsp and footer.jsp
after dividing the page….just mark the places where these sub pages are suppose to be for eg:
(this is just an example)
Main page looks like this after it is divided:
| <html><head></head><body><table width=”100%” height=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ class=”mainTblBorder”><tr><td valign=”top”><table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″><tr><td height=”76″><!–header.jsp–></td>
</tr> <tr> <td height=”176″> <!–leftside.jsp–> </td> </tr> <tr> <td height=”5″ bgcolor=”#820913″><img src=”images/spacer1.gif” width=”4″ height=”4″></td> </tr> <tr> <td height=”12″><img src=”images/spacer1.gif” width=”3″ height=”12″></td> </tr> <tr> <td valign=”top”><table width=”99%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> <tr> <td> <!–center.jsp–> </td> </tr> <tr> <td><img src=”images/spacer1.gif” width=”9″ height=”8″></td> </tr> <tr> <td></td> </tr> <tr> <td style=”padding-top:10px;”> <!–footer.jsp–> </td> </tr> </table></td> </tr> </table></td> </tr> </table> <img src=”images/img3.jpg” width=”303″ height=”191″> </body> </html> |
Now main theme is….. in most of the cases menu, left and footer do not change only center part will be changing….if that is the case then why should we load full page every time…..we can configure it and make things happen right….
lets says there are three menus as menu1 menu2 menu3
Think practically three clicks, three different center pages…if site-mesh is not there…all the three pages should be configured with rest of the sub pages….If site mesh is there only center pages will be configured to what decorator page it is suppose to loaded.
Now see how does site-mesh work exactly
Include following tags in the main.jsp page
|
<%@taglib prefix=“decorator” uri=“http://www.opensymphony.com/sitemesh/decorator” %>
<%@taglib prefix=“page” uri=“http://www.opensymphony.com/sitemesh/page” %> |
Main page is divided and a skeleton has been taken out as I have shown above….now just call the sub pages with the following tag and place where they are suppose to be….do it for header page left and footer pages except center page I will tell you why…
|
<page:applyDecorator page=“/WEB-INF/pages/header.jsp” name=“panel” />
<page:applyDecorator page=“/WEB-INF/pages/leftside.jsp” name=“panel” />
<page:applyDecorator page=“/WEB-INF/pages/footer.jsp” name=“panel” /> |
Now why did I leave the center page because that is the page which is suppose to be changed on every click right…so insert the following for the center.jsp
| <decorator:body /> |
Now configure the center.jsp in decorator.xml as follows
(place it in the place where I mentioned in decorator .xml)
|
<decorator name=“mainDecorator” page=“main.jsp”> <pattern>/center.jsp</pattern> </decorator> |
Center page should have the following tag which says…In what decorator this page has to be loaded.
| <meta name=“mainDecorator” content=“main”> |
In the above configuration decorator name is used to identify in which decorator page it has to be loaded. In this case center.jsp page will be loaded in main.jsp decorator.
Now main page will be loaded with header.jsp , leftside.jsp, footer.jsp and center.jsp
on second click same page will be loaded with center1.jsp(off course page should be there)
on third click same page will be loaded with center2.jsp(off course page should be there)
All you should do is configure in these pages and decorator.xml…. simple but powerful
how does this basically work ???……let me say….
when any page is called it will first check the decorator name in that respective page,
next it will check that match name in the decorator.xml and load the page into that respective decorator page.
So, if 10 different pages are there same decorator name will go for all the pages.
(For the first time you will feel what the HELL is this…”i can simply include the pages instead of doing all these stuff”….but but but my dear friend if you understand this concept….work will be easy and intresting….this helps you in learning how exactly a configuration works in web based application….and very very few around you will be knowing this tech….so be….UNIQUE)
