SITEME SH OPENSYMPHONY The best Open Source component

SITEME SH OPENSYMPHONY The best Open Source component

SITEME SH OPENSYMPHONY The best Open Source component youve never heard of Written for The ServerSide Java Symposium - Las Vegas, USA - May 6-8 Who am I? Mike Cannon-Brookes OpenSymphony Project - www.opensymphony.com Atlassian Software Systems - www.atlassian.com JIRA

Tracking knowledge projects. WebWork 2 / XWork OSWorkflow SiteMesh OSCache CONFLUENCE Thought sharing for your team. Agenda

The Problem What is SiteMesh? A Simple Example How does it work? Advanced techniques

Decorator mappers Inline decorators Content blocks Tips & tricks Q&A THE PROBLEM WEB-APP DECORATION Your form looks like this 20 lines of simple focused HTML

Simple to maintain Developer can instantly see all form elements and their purpose Your boss wants it to look like 300 lines of complex HTML Developers must find 20 useful lines among decorative code Much less obvious to developer how the form works! The Decoration Problem Separating content & presentation is hard! Every web application needs to do it. Analogy: Swing look and feel changer Decoration is more than just headers and

footers: See if you can separate the content and presentation in this familiar example Decoration Example Decoration Example Header Search Information Login

Navigation Downloads News Decoration Examples Typical decorations: Headers Footers Navigation elements People forget: Panels within a single page Agent specific versions (eg cell phones)

Printable versions TYPICAL SOLUTIONS Solutions Copy & paste VERY BAD: Fire your developer. JSP includes BAD: Fragile, strongly coupled and increasingly complex

XSLT OK: Flexible, but hard to debug, difficult to learn and you cant view it without the pipe. SiteMesh GOOD: Simple, decoupled, scalable, flexible. WHAT IS SITEMESH? SiteMesh is Open Source J2EE page layout and decoration engine www.opensymphony.com/sitemesh

Interpretation of GoF decorator pattern for web applications Analogy: Swing look & feel changer Core values: Simplicity, Speed & Flexibility Where does it fit? Implemented as a Servlet 2.3 request filter Requires Servlet 2.3 compatible server Runs on all recent J2EE servers Typical request (without SiteMesh):

Web Container 1. Incoming request Browser Web App 2. Generate decorated page 3. Return result (Servlet, JSP, Perl, PHP, HTML etc) Where does it fit?

Request with SiteMesh filter deployed: Web Container 1. Incoming request SiteMesh Filter 3. Get Decorator Browser 5. Return result

4. Decorate page Web App 2. Generate page (Servlet, JSP, Perl, PHP, HTML etc) A SIMPLE EXAMPLE Simple Example Install SiteMesh Write a simple JSP page

Write a JSP decorator Adds a heading Wraps the content in a basic box Map decorator View the result Installation Careful - its complicated 1.

Copy sitemesh-2.x.jar to the WEB-INF/lib/ directory of your web-app Install and map the filter in WEB-INF/web.xml: 2. sitemesh com...sitemesh...PageFilter sitemesh /*

Write Simple Page About JavaBlogs JavaBlogs aggregates the blogs of Java bloggers. Write simple decorator MyDecorator.jsp

<%@ taglib uri= "sitemesh-decorator" prefix="dec" %> java.blogs - <dec:title /> ">

Section:

Map decorator Lets simply map this to decorator to all URLs. Basic URL mapping is done in /WEB-INF/decorators.xml /* The Result java.blogs - About JavaBlogs

About JavaBlogs

Section: About

JavaBlogs aggregates the blogs of Java bloggers.

IM STILL CONFUSED! 4 ways to think about SiteMesh

1. Decoupling is a good thing SiteMesh decouples page decoration 2. Agile, not fragile, page decoration! Moving files doesnt break anything 3. AOP for page decoration Pages themselves need know nothing of their

decoration 4. Separation of concerns Designers vs developers in large teams Nave to think Model 2 solves this problem SiteMesh is clean. Clean, logical separation of content vs presentation Content - JSP file

Decorator - JSP file Pages and decorators are valid HTML files Can be edited with any editor (ie Dreamweaver) Get rid of the ugly half table problem Pages are simpler Removing decoration makes for more simple, focused pages SiteMesh is friendly! Decorators written in your favourite templating language Usually JSP but also Velocity, FreeMarker.

Reuse all of your existing JSP tags etc in a decorator No more includes or XSLT! Decorates any served content JSP, Velocity, PHP, Perl, basic HTML, other servers Plays nicely with any MVC framework WebWork, Tapestry, Spring, Struts. Doesnt alter your URL structure What is a decorator? Decorator decides where the parsed fields are inserted into the final page

Decorators are HTML themselves, either: JSP pages using a SiteMesh tag library or JSP scriptlets Velocity or FreeMarker templates with preinserted context variables Decorators can use includes themselves eg copyright information that is on all pages Usage By Large App ATLASSIAN JIRA is a large web app we build. A good example of SiteMesh used in a large app:

520 JSP files 240 WebWork MVC actions and only 9 page decorators! 1. 2. 3. 4. 5. 6. 7. 8. 9. Main - used by ~90% of pages

Admin - administration layout & navigation Clean - main decorator with no borders No Title - main decorator with no title Front page - specifically for the front page Issue navigator - specifically for the navigator Popup - used by all popup windows, minimal decoration Printable - creates a printable version of any screen Insecure - for all insecure pages HOW DOES IT WORK?! How it works

Content Source (JSP, Perl, PHP, HTML etc) Content (HTML fragment) 1. Field Map 2. 1. Server renders HTML.

2. SiteMesh parses HTML, SiteMesh 3. Selects decorator, 4. Merges content & decorator. 4. 3. Decorator Mappers Presentation (Decorator JSP)

Result (HTML) 1. Server renders HTML Keep your HTML simple, without any decoration. Example rendered HTML: About JavaBlogs JavaBlogs aggregates the blogs of Java bloggers.

2. SiteMesh parses HTML Turns your HTML into a map of fields Title and body extracted from HTML Name spaced fields for body attributes (body.), meta tags (meta.) and specified content blocks (content.). Example fields map: Key

Value title About JavaBlogs meta.section About body JavaBlogs aggregates the blogs of Java blogges

body.bgcolor #ffffff 3. SiteMesh selects decorator Effectively uses a sequence of rules (DecoratorMapper objects) to select a decorator for each request ~10 mappers built in, but you can easily write your own. <%@ taglib uri= "sitemesh-decorator" prefix= dec" %> java.blogs - <dec:title /> ">

Section:

4. Merge content & decorator Resulting code is plain HTML again Example result: java.blogs - About JavaBlogs

About JavaBlogs

Section: About

JavaBlogs aggregates the blogs of Java bloggers.

ADVANCE D TECHNIQUES How is the decorator chosen?

A stack of DecoratorMappers are consulted in sequence to find a decorator Mapper selects decorator for each request using: request meta data fields map application specific information Mapping is decoupled from pages themselves No more fragile statements Packaged Mappers SiteMesh

Page Uses page specified meta tag Frameset Handles framed sites Printable For making printable versions Language

Select based on user language Client OS Choose based on client operating system User Agent Handles different browser types Robot Parameter Config Serve web robots specific decorators Select based on specific request parameters DEFAULT: Config file and URL patterns

ConfigDecoratorMapper Most frequently used mapper, matches on URL patterns Example of configuration (decorators.xml): /* /admin.jsp /*/admin/* /styles/*.jsp

Inline decorators SiteMesh can also decorate panels within a web page Called inline decorators Useful for componentising your view Slightly different to page decorators Inline decorators generate fragments of HTML Lets look at an example

Example Inline decorator MyPanelDecorator.jsp <%@ taglib uri="sitemesh-decorator" prefix="decorator" %>

Note: looks just like a normal decorator Only no etc Defined in decorators.xml as normal Lets see how we use it

Inline Decorator Usage <%@ taglib uri="sitemesh-page" prefix="page" %> ...

This site is not legally binding in any way.
All rights reserved. Elvis has left the building.

...

Note: uses a different SiteMesh tag library Here we decorate: 1. Another page - login.jsp 2. An inline HTML fragment Inline Decorator Screenshot Inline Components Inline decorators can create complex view components Useful for coarse-grained view components We use for fine-grained

Example: all the forms within JIRA Only one decorator - jiraform.jsp! Renders: Form - including title, description and help Submit, cancel and any other buttons Form-level error messages JavaScript options (ie auto-select-first form element) jiraform.jsp

PARAMETERS: (all are optional) action - the URI to submit this form too submitName - the name of the submit button cancelURI - the location to redirect to for the cancel button (no cancel button if this isn't present) buttons - any other buttons to put next to the submit button autoSelectFirst - unless this is present and "false", the first element of the form will be selected automatically using JavaScript title - a title for this form (HTML) notable - if this is specified, JIRA form will not output a border table (HTML) width - the width of the border table (HTML) multipart - if this parameter is present, the form will be a multipart form

helpURL - the URL of a help link related to this form columns - the number of columns the underlying form will have method - the method of the form to submit (get or post) bgcolor - the background color of the table JIRA form screenshot JIRA form decorator jiraform.jsp <% if (p.isPropertySet("action")) { %>

" method="" name="" <% if (p.isPropertySet("onsubmit"))

{ %>onsubmit="" <% } %> <% if (p.isPropertySet("multipart")) { %> ENCTYPE="multipart/form-data"<% } %>> <% } %> <% if (!p.isPropertySet("notable")) { %> . . . (draw table). . . <% } %> <% if (p.isPropertySet("title") && TextUtils.stringSet(p.getProperty("title"))) { %> . . . <% if (p.isPropertySet("helpURL")) { . . . %> <%= helpURLFragment %> <% } %>

. . . <% } %> . . . JIRA form usage CreateIssue.jspa >>

Content Blocks For passing parameters and HTML directly to the decorator Warning: increases coupling!

Useful where some fragment of decoration HTML is more easily generated by page itself Decorator can behave nicely if block doesnt exist Lets look at an example Content Block Example mypage.vm ... Dashboard > Administration > $action.getText("action.name")

... Anything inside a tag is a content block. SiteMesh will strip these blocks from the page body, putting them into the fields map. Content Block Decorator mydecorator.vmd ... #if ($page.getProperty("page.breadcrumbs"))

#end ... We display breadcrumb block only if it exists in the page being decorated. Tips & Tricks Group decorators into /decorators Helps developers differentiate presentation from content Dont be afraid to include If your decorators themselves duplicate code, use an include - in /decorators/includes!

CSS is your friend Easily share styles across page & decorator Keep your view HTML simple Lets the designers be complex, simple = less mistakes More Info / Q&A Where do I find out more? http://www.opensymphony.com/sitemesh Docs, downloads mailing list, CVS etc. My blog - http://blogs.atlassian.com/rebelutionary Chapter of my recent book on real world development with Java OSS technologies

Buy Atlassian JIRA - comes with full source! :) Email me - [email protected] Thank you for listening - questions? Mike Cannon-Brookes ATLASSIAN - www.atlassian.com

Recently Viewed Presentations

  • St Paul PAA Trophy Display Label

    St Paul PAA Trophy Display Label

    2015 Diocese of Columbus - Season and Tournament Champions 8th Grade St. Paul Football Team - Overall record 12-0-0 Eric Nori Devin Hester Tom Brady Cardale Jones JJ Watt Mario Williams Aaron Rodgers Ndamukong Suh Kim Parent Ezekiel Elliott DeMarco...
  • An Inspector Calls Resource Pack Aim: to evaluate

    An Inspector Calls Resource Pack Aim: to evaluate

    Enter: Inspector Goole - investigating suicide of Eva Smith. Birling admits she was a fired employee for being a wage protest ringleader. Birling claims no responsibility for her death. Sheila enters and is questioned - Sheila reveals that she sacked...
  • Buying Your First Home - Miss Ausman&#x27;s Classroom

    Buying Your First Home - Miss Ausman's Classroom

    Quick Facts Homeownership has both advantages & disadvantages. It is not always the best choice at a given time. Buying your first home requires planning & saving. Prepare a checklist to help you shop for a home. Prequalify for a...
  • Range of Motion: 4.1.2

    Range of Motion: 4.1.2

    Movement at a Joint. Depression and elevation. Rotation and circumduction. Flexion and extension (and hyperextension) Abduction and adduction. Plantar flexion and dorsiflexion
  • Cytoplasmic Membrane Systems and Membrane Trafficking

    Cytoplasmic Membrane Systems and Membrane Trafficking

    Protein Sorting & Transport Paths of Protein Trafficking Nuclear Protein Transport Mitochondrial & Chloroplast Transport Experimental Systems Overview of the Cytomembrane System
  • 12.2 Newtons First and Second Laws of Motion

    12.2 Newtons First and Second Laws of Motion

    Aristotle incorrectly proposed that force is required to keep an object moving at constant speed. Aristotle, Galileo, and Newton. ... Mass is a measure of the inertia of an object; weight is a measure of the force of gravity acting...
  • HIPAA at TGH

    HIPAA at TGH

    HIPAA Headline News Stories. Minnesota Health System Fires 32 Employees for snooping in records.In another example of a spectacle that's so intriguing that some health care workers will risk their jobs for a peek, Allina Hospitals and Clinics in Minnesota...
  • COMM301 Cultural Studies - Eastern Mediterranean University

    COMM301 Cultural Studies - Eastern Mediterranean University

    COMM301 Cultural Studies Culture, Power, Class and Inequality New Social Movements and Subcultures