D2W Branding Using jQuery ThemeRoller
- 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