MONTREAL JUNE 30, JULY 1ST AND 2ND 2012

MONTREAL JUNE 30, JULY 1ST AND 2ND 2012

developed by Farrukh IjazSenior Software Engineer at Fuego Digital Media

D2W BrandingUsing jQuery ThemeRoller

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

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

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

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’

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

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

Neutral Look

Fuego’s Modification to Neutral Look

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

Select Page “Client-1 Theme”

Select Page “Client-2 Theme”

Edit Page “Client-1 Theme”

Edit Page “Client-2 Theme”

Grouping Edit Page “Client-1 Theme”

Grouping Edit Page “Client-2 Theme”

jQuery ThemeRoller Component Model

Complete hierarchy of foundation components

JQueryComponent

JQueryCustomComponent

JQueryCustomStatelessComponent

JQueryStatelessComponent

JQuerySubmitButton

JQueryView JQueryLayout

JQueryGridLayout JQueryBorderLayoutJQueryIcon JQueryLinkButton JQueryHeader JQueryContainer JQueryFooter JQueryMessage

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

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>

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

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>

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>

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

Live Application+

Klok+D2W Integration

Q&A

MONTREAL JUNE 30, JULY 1ST AND 2ND 2012

MONTREAL JUNE 30, JULY 1ST AND 2ND 2012

Q & A