OpenSymphony SiteMesh

Июль 22, 2022

Содержание

2. Who am I? Mike Cannon-Brookes OpenSymphony Project - www.opensymphony.com Atlassian Software Systems - www.atlassian.com CONFLUENCE Thought
3. Agenda The Problem What is SiteMesh? A Simple Example How does it work? Advanced techniques Decorator
4. WEB-APP DECORATION THE PROBLEM
5. Your form looks like this… 20 lines of simple focused HTML Simple to maintain Developer can
6. Your boss wants it to look like… 300 lines of complex HTML Developers must find 20
7. The Decoration Problem Separating content & presentation is hard! Every web application needs to do it.
8. Decoration Example
9. Decoration Example Header Navigation Information Downloads Login News Search
10. Decoration Examples Typical decorations: Headers Footers Navigation elements People forget: Panels within a single page Agent
11. SOLUTIONS TYPICAL
12. Solutions Copy & paste VERY BAD: Fire your developer. JSP includes BAD: Fragile, strongly coupled and
13. SITEMESH? WHAT IS
14. SiteMesh is… Open Source J2EE page layout and decoration engine www.opensymphony.com/sitemesh Interpretation of GoF decorator pattern
15. Web Container Where does it fit? Implemented as a Servlet 2.3 request filter Requires Servlet 2.3
16. Web Container Where does it fit? Request with SiteMesh filter deployed: Web App 2. Generate page
17. EXAMPLE A SIMPLE
18. Simple Example Install SiteMesh Write a simple JSP page Write a JSP decorator Adds a heading
19. Installation Careful - it’s complicated… Copy sitemesh-2.x.jar to the WEB-INF/lib/ directory of your web-app Install and
20. Write Simple Page About JavaBlogs JavaBlogs aggregates the blogs of Java bloggers.
21. Write simple decorator java.blogs - "> Section: MyDecorator.jsp
22. Map decorator Let’s simply map this to decorator to all URLs. Basic URL mapping is done
23. The Result java.blogs - About JavaBlogs About JavaBlogs Section: About JavaBlogs aggregates the blogs of Java
24. CONFUSED! I’M STILL
25. 4 ways to think about SiteMesh Decoupling is a good thing SiteMesh decouples page decoration Agile,
26. SiteMesh is… clean. Clean, logical separation of content vs presentation Content - JSP file Decorator -
27. SiteMesh is… friendly! Decorators written in your favourite templating language Usually JSP but also Velocity, FreeMarker.
28. What is a decorator? Decorator decides where the parsed fields are inserted into the final page
29. Usage By Large App ATLASSIAN JIRA is a large web app we build. A good example
30. IT WORK?! HOW DOES
31. How it works… Result (HTML) 1. 4. Content (HTML fragment) Content Source (JSP, Perl, PHP, HTML
32. 1. Server renders HTML Keep your HTML simple, without any decoration. Example rendered HTML: About JavaBlogs
33. 2. SiteMesh parses HTML Turns your HTML into a map of fields Title and body extracted
34. 3. SiteMesh selects decorator Effectively uses a sequence of rules (DecoratorMapper objects) to select a decorator
35. 4. Merge content & decorator Resulting code is plain HTML again Example result: java.blogs - About
36. TECHNIQUES ADVANCED
37. How is the decorator chosen? A stack of DecoratorMappers are consulted in sequence to find a
38. Packaged Mappers SiteMesh Page Frameset Printable Language Client OS Config User Agent Parameter Robot — Uses
39. ConfigDecoratorMapper Most frequently used mapper, matches on URL patterns Example of configuration (decorators.xml): /* /admin.jsp /*/admin/*
40. Inline decorators SiteMesh can also decorate ‘panels’ within a web page Called ‘inline decorators’ Useful for
41. Example Inline decorator Note: looks just like a normal decorator Only no etc Defined in decorators.xml
42. Inline Decorator Usage ... This site is not legally binding in any way. All rights reserved.
43. Inline Decorator Screenshot
44. Inline Components Inline decorators can create complex ‘view components’ Useful for coarse-grained view components We use
45. jiraform.jsp PARAMETERS: (all are optional) action - the URI to submit this form too submitName -
46. JIRA form screenshot
47. JIRA form decorator " method=" " name=" " onsubmit=" " ENCTYPE="multipart/form-data" > . . . (draw
48. JIRA form usage CreateIssue.jspa >> list="allowedProjects" listKey="'long('id')'” listValue="'string('name')'" >
49. Content Blocks For passing parameters and HTML directly to the decorator Warning: increases coupling! Useful where
50. Content Block Example Anything inside a tag is a content block. SiteMesh will strip these blocks
51. Content Block Decorator ... #if ($page.getProperty("page.breadcrumbs")) Location: $page.getProperty("page.breadcrumbs") #end ... mydecorator.vmd We display breadcrumb block only
52. Tips & Tricks Group decorators into /decorators Helps developers differentiate presentation from content Don’t be afraid
54. Скачать презентацию

Слайд 2

Who am I?
Mike Cannon-Brookes
OpenSymphony Project - www.opensymphony.com
Atlassian Software Systems - www.atlassian.com

CONFLUENCE

Thought sharing for your team.

JIRA

Tracking knowledge projects.

WebWork 2 / XWork
OSWorkflow
SiteMesh
OSCache

Слайд 3

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

Слайд 4

WEB-APP DECORATION
THE PROBLEM

Слайд 5

Your form looks like this…
20 lines of simple focused HTML
Simple to

maintain
Developer can instantly see all form elements and their purpose

Слайд 6

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!

Слайд 7

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…

Слайд 8

Decoration Example

Слайд 9

Decoration Example
Header
Navigation
Information
Downloads
Login
News
Search

Слайд 10

Decoration Examples
Typical decorations:
Headers
Footers
Navigation elements
People forget:
Panels within a single page
Agent

specific versions (eg cell phones)
Printable versions

Слайд 11

SOLUTIONS
TYPICAL

Слайд 12

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 can’t view it without the ‘pipe’.
SiteMesh
GOOD: Simple, decoupled, scalable, flexible.

Слайд 13

SITEMESH?
WHAT IS

Слайд 14

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

Слайд 15

Web Container
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):

1. Incoming request

Web App
2. Generate
decorated page
(Servlet, JSP, Perl,
PHP, HTML etc)

3. Return result

Слайд 16

Web Container
Where does it fit?
Request with SiteMesh filter deployed:
Web App
2. Generate

page
(Servlet, JSP, Perl,
PHP, HTML etc)

1. Incoming request

5. Return result

SiteMesh
Filter
3. Get
Decorator
4. Decorate
page

Слайд 17

EXAMPLE
A SIMPLE

Слайд 18

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

Слайд 19

Installation
Careful - it’s complicated…
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:

sitemesh
com...sitemesh...PageFilter

sitemesh
/*

Слайд 20

Write Simple Page

About JavaBlogs

JavaBlogs aggregates the blogs of

Java bloggers.

Слайд 21

Write simple decorator
<%@ taglib uri= "sitemesh-decorator" prefix="dec" %>

java.blogs - <dec:title />

rel="stylesheet" href="/styles/site.css">

">

Section:

MyDecorator.jsp

Слайд 22

Map decorator
Let’s simply map this to decorator to all URLs.
Basic URL

mapping is done in /WEB-INF/decorators.xml

Слайд 23

The Result

java.blogs - About JavaBlogs

About JavaBlogs

Section: About

JavaBlogs

aggregates the blogs of Java bloggers.

Слайд 24

CONFUSED!
I’M STILL

Слайд 25

4 ways to think about SiteMesh
Decoupling is a good thing
SiteMesh decouples

page decoration
Agile, not fragile, page decoration!
Moving files doesn’t break anything
‘AOP for page decoration’
Pages themselves need know nothing of their decoration
Separation of concerns
Designers vs developers in large teams
Naïve to think Model 2 solves this problem

Слайд 26

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

Слайд 27

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.
Doesn’t alter your URL structure

Слайд 28

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 pre-inserted context variables
Decorators can use includes themselves
eg copyright information that is on all pages

Слайд 29

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!
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

Слайд 30

IT WORK?!
HOW DOES

Слайд 31

How it works…
Result
(HTML)
1.
4.
Content
(HTML
fragment)
Content
Source
(JSP, Perl, PHP, HTML etc)
Field Map
2.
SiteMesh
Presentation
(Decorator -
JSP)
Decorator
Mappers
3.
Server

renders HTML.
SiteMesh parses HTML,
Selects decorator,
Merges content & decorator.

Слайд 32

1. Server renders HTML
Keep your HTML simple, without any decoration.
Example rendered

HTML:

About JavaBlogs

JavaBlogs aggregates the blogs of Java bloggers.

Слайд 33

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:

Слайд 34

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:

Слайд 35

4. Merge content & decorator
Resulting code is plain HTML again
Example result:

java.blogs</div></h2><div class="slides-content">- About JavaBlogs

About JavaBlogs

Section: About

JavaBlogs aggregates the blogs of Java bloggers.

Слайд 36

TECHNIQUES
ADVANCED

Слайд 37

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

Слайд 38

Packaged Mappers
SiteMesh
Page
Frameset
Printable
Language
Client OS
Config
User Agent
Parameter
Robot
— Uses page specified meta tag
— Handles framed

sites

— For making printable versions

— Select based on user language

— Choose based on client operating system

— Handles different browser types

— Serve web robots specific decorators

— Select based on specific request parameters

— DEFAULT: Config file and URL patterns…

Слайд 39

ConfigDecoratorMapper
Most frequently used mapper, matches on URL patterns
Example of configuration (decorators.xml):

name="main" page="/decorators/main.jsp">

/admin.jsp

/*/admin/*

/styles/*.jsp

Слайд 40

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
Let’s look at an example…

Слайд 41

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

Note:

looks just like a normal decorator
Only no etc
Defined in decorators.xml as normal
Let’s see how we use it…

MyPanelDecorator.jsp

Слайд 42

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

Note: uses a different SiteMesh tag library
Here we decorate:
Another page - login.jsp
An inline HTML fragment

Слайд 43

Inline Decorator Screenshot

Слайд 44

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)

Слайд 45

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

Слайд 46

JIRA form screenshot

Слайд 47

JIRA form decorator

<% 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 %>

<% } %>
. . .
<% } %>

. . .

jiraform.jsp

Слайд 48

JIRA form usage

CreateIssue.jspa

name="'common.forms.next'" />>>

Слайд 49

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 doesn’t exist
Let’s look at an example…

Слайд 50

Content Block Example
Anything inside a tag is a content

block.
SiteMesh will strip these blocks from the page body, putting them into the fields map.

...

Dashboard >
Administration >
$action.getText("action.name")

...

mypage.vm

Слайд 51

Content Block Decorator
...
#if ($page.getProperty("page.breadcrumbs"))

Location:
$page.getProperty("page.breadcrumbs")

#end
...
mydecorator.vmd
We display breadcrumb block only

if it exists in the page being decorated.

Слайд 52

Tips & Tricks
Group decorators into /decorators
Helps developers differentiate presentation from content
Don’t

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
Let’s the designers be complex, simple = less mistakes

OpenSymphony SiteMesh

Содержание

Who am I?Mike Cannon-BrookesOpenSymphony Project - www.opensymphony.comAtlassian Software Systems - www.atlassian.com

AgendaThe ProblemWhat is SiteMesh?A Simple ExampleHow does it work?Advanced techniquesDecorator mappers Inline

WEB-APP DECORATIONTHE PROBLEM

Your form looks like this…20 lines of simple focused HTMLSimple to

Your boss wants it to look like…300 lines of complex HTMLDevelopers

The Decoration ProblemSeparating content & presentation is hard!Every web application needs

Decoration Example

Decoration ExampleHeaderNavigationInformationDownloadsLoginNewsSearch

Decoration ExamplesTypical decorations: HeadersFootersNavigation elementsPeople forget: Panels within a single pageAgent

SOLUTIONSTYPICAL

SolutionsCopy & paste VERY BAD: Fire your developer.JSP includes BAD: Fragile,

SITEMESH?WHAT IS

SiteMesh is…Open Source J2EE page layout and decoration enginewww.opensymphony.com/sitemeshInterpretation of GoF

Web ContainerWhere does it fit?Implemented as a Servlet 2.3 request filterRequires

Web ContainerWhere does it fit?Request with SiteMesh filter deployed:Web App2. Generate

EXAMPLEA SIMPLE

Simple ExampleInstall SiteMeshWrite a simple JSP pageWrite a JSP decoratorAdds a

InstallationCareful - it’s complicated…Copy sitemesh-2.x.jar to the WEB-INF/lib/ directory of your

Write Simple Page About JavaBlogs JavaBlogs aggregates the blogs of

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

Map decoratorLet’s simply map this to decorator to all URLs.Basic URL

The Result java.blogs - About JavaBlogs About JavaBlogs Section: About JavaBlogs

About JavaBlogs

CONFUSED!I’M STILL

4 ways to think about SiteMeshDecoupling is a good thingSiteMesh decouples

SiteMesh is… clean.Clean, logical separation of content vs presentationContent - JSP

SiteMesh is… friendly!Decorators written in your favourite templating languageUsually JSP but

What is a decorator?Decorator decides where the parsed fields are inserted

Usage By Large AppATLASSIAN JIRA is a large web app we

IT WORK?!HOW DOES

How it works…Result(HTML)1.4.Content(HTML fragment)ContentSource(JSP, Perl, PHP, HTML etc)Field Map2.SiteMeshPresentation(Decorator - JSP)DecoratorMappers3.Server

1. Server renders HTMLKeep your HTML simple, without any decoration.Example rendered

2. SiteMesh parses HTMLTurns your HTML into a map of fieldsTitle

3. SiteMesh selects decoratorEffectively uses a sequence of rules (DecoratorMapper objects)

4. Merge content & decoratorResulting code is plain HTML againExample result: java.blogs</div></h2><div class="slides-content">- About JavaBlogs About JavaBlogs Section: About JavaBlogs aggregates the blogs of Java bloggers.