1. MONTREAL JUNE 30, JULY 1ST AND 2ND 2012
D2W Branding
Using jQuery ThemeRoller
developed by Farrukh Ijaz
Senior Software Engineer at Fuego Digital Media

2. jQuery ThemeRoller
• D2W - DirectToWeb
• D2W Rule Engine & D2W Templates and “Looks”
• “Looks” available in WebObjects and Wonder
• Why another “Look”?
• jQuery ThemeRoller Component Model
• jQuery ThemeRoller D2W Templates
• Features inherited from jQuery UI
• Create your own jQuery ThemeRoller component
• Setting up the application to use themes
• Showcase Live Sites
• Q&A

3. D2W - DirectToWeb
• A Java based Web Application Development
Framework
• Transforms Data Model into fully functional UI
based rules
• Consists of Rules Engine, set of D2W
Templates and D2W Components
• Requires minimum or no code

4. D2W Rule Engine
• One of the main components of Direct To Web
• Using Rules (*.d2wmodel) and the Rule
Engine, the user interface is dynamically
constructed
• The Rule consists a condition (LHS) and
assignment (RHS)
• Rules that are prioritized by setting priority
and qualification

5. D2W Templates
• Templates that are used to generate user
interface
• Page level templates such as D2WListPage,
D2WEditPage, D2WSelectPage, ...
• Property level templates such as
D2WEditString, D2WEditDate,
D2WEditToManyRelationship, ...
• Page level templates are usually assigned for
specific task such as
D2WEditPage for task = ‘edit’,
D2WSelectPage for task = ‘select’

6. D2W Templates and “Looks”
• Templates are assigned by setting specific properties in the Rules
file
• templateNameForListPage, templateNameForEditPage,
templateNameForSelectPage, ...
• Usually they are packaged in a separate framework for reusability
with rules with higher priority defined to assign these templates and
optionally bound with a property called “look” e.g.
• 100: *true* => look = ‘fuego’
• 100 : look = 'fuego' => templateNameForListPage =
"FDNEUListPage"
• WO developers are already using ERModernLook, ERDivaLook,
ERNeutralLook, AjaxLook, R2D2W
• Among these looks, ERModernLook is the latest one and is
becoming the standard WOLips project template

7. Why a different set of templates?
• Legacy apps developed over the period of 7
years simply can’t be switched to modern
look
• All the apps are based on custom templates
that inherit specific interfaces to work with
Fuego’s customized MVC
• Client complaints about the ugly design of the
old look
• Client requests for branded look to fit well in
their portal environment

8. Neutral Look

9. Fuego’s Modification to Neutral Look

10. jQuery ThemeRoller Templates
• Complete renovation of all the templates using jQuery UI
components and themes
• Branding UI is just a matter of generating a new theme using jQuery
ThemeRoller app and drop it in the application’s web resources
folder. (http://jqueryui.com/themeroller)
• Graphics designers can easily generate them using client branding
colours without any WO knowledge
• Additional features such as:
• Additional branch buttons in the header of the component
• Collapsible components
• Draggable components (in progress)
• It’s not just the HTML change, it’s a complete component

11. Select Page “Client-1 Theme”

12. Select Page “Client-2 Theme”

13. Edit Page “Client-1 Theme”

14. Edit Page “Client-2 Theme”

15. Grouping Edit Page “Client-1 Theme”

16. Grouping Edit Page “Client-2 Theme”

17. jQuery ThemeRoller Component Model
Complete hierarchy of foundation components
JQueryComponent
JQueryCustomComponent JQueryStatelessComponent
JQueryCustomStatelessComponent JQueryView JQueryLayout
JQueryIcon JQueryLinkButton JQueryHeader JQueryContainer JQueryFooter JQueryMessage JQueryGridLayout JQueryBorderLayout
JQuerySubmitButton

18. jQuery ThemeRoller Component Model
• The jQuery ThemeRoller component model
consists of reusable components
• They all can be used in composition to build
other custom components
• All D2W templates reuse these components so
change in the core components is reflected
across all the templates

19. JQueryIcon, JQueryLinkButton / JQuerySubmitButton
<wo:JQueryIcon icon="pencil" />
<wo:JQueryLinkButton icon = "disk" text = "Save" />
<wo:JQueryLinkButton icon = "cancel" text = "Cancel" />
<span class = "jq-buttonset">
<wo:JQuerySubmitButton icon = "disk" text = "Save" />
<wo:JQueryLinkButton icon = "cancel" text = "Cancel" />
</span>

20. JQueryMessage
<wo:JQueryMessage message = "Hello World!" />
<wo:JQueryMessage type="error" icon="alert" message =
"Houston! We've a problem." />
<wo:JQueryMessage type="highlight" icon="info" message =
"The file has been uploaded successfully!" />

21. JQueryView and JQueryGridLayout
<wo:JQueryView cssClass = "ui-state-default" padding = "5px" corner = "all"
maxWidth = "500px">
<wo:JQueryGridLayout rows = "3" cols = "3" prefix = "grid" debug =
"true" />
</wo:JQueryView>
<wo:JQueryView cssClass = "ui-state-default" padding = "5px" corner = "all"
maxWidth = "500px">
<wo:JQueryGridLayout rows = "1" cols = "1,*,1" prefix = "grid">
<wo:ERXWOTemplate templateName = "grid_1_1">
<wo:JQueryLinkButton text = "Button 1" />
</wo:ERXWOTemplate>
<wo:ERXWOTemplate templateName = "grid_1_3">
<wo:JQueryLinkButton icon = "close" />
</wo:ERXWOTemplate>
</wo:JQueryGridLayout>
</wo:JQueryView>

22. JQueryCustomComponent
<wo:JQueryCustomComponent debug = "$true" />
<wo:JQueryCustomComponent maxWidth = "500px" contentPadding = "10px"
shouldShowTopBar = "$false" shouldShowFooter = "$false" heading = "My First Component"
shouldShowMinMaxButton = "$true">
<wo:ERXWOTemplate templateName = "rightHeaderButtons">
<wo:JQueryLinkButton icon = "close" />
</wo:ERXWOTemplate>
<wo:ERXWOTemplate templateName = "content"> Test content </wo:ERXWOTemplate>
<wo:ERXWOTemplate templateName = "bottomBar">
<wo:JQuerySubmitButton text = "Save" />
<wo:JQueryLinkButton text = "Cancel" />
</wo:ERXWOTemplate>
</wo:JQueryCustomComponent>

23. Setting up the application to use themes
Include in <head> of PageWrapper:
<wo:JQueryResources themeroller = "$true" theme =
"themename" uniform = "$true" />
Assign class to <body> same as theme name:
<body class = "themename">

24. Live Application
+
Klok+D2W Integration

25. Q&A
MONTREAL JUNE 30, JULY 1ST AND 2ND 2012
Q&A