D2W Branding Using jQuery ThemeRoller


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

D2W Branding Using jQuery ThemeRoller

  1. 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. 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. 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. 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. 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. 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. 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. 8. Neutral Look
  9. 9. Fuego’s Modification to Neutral Look
  10. 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. 11. Select Page “Client-1 Theme”
  12. 12. Select Page “Client-2 Theme”
  13. 13. Edit Page “Client-1 Theme”
  14. 14. Edit Page “Client-2 Theme”
  15. 15. Grouping Edit Page “Client-1 Theme”
  16. 16. Grouping Edit Page “Client-2 Theme”
  17. 17. jQuery ThemeRoller Component Model Complete hierarchy of foundation components JQueryComponent JQueryCustomComponent JQueryStatelessComponent JQueryCustomStatelessComponent JQueryView JQueryLayoutJQueryIcon JQueryLinkButton JQueryHeader JQueryContainer JQueryFooter JQueryMessage JQueryGridLayout JQueryBorderLayout JQuerySubmitButton
  18. 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. 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. 20. JQueryMessage<wo:JQueryMessage message = "Hello World!" /><wo:JQueryMessage type="error" icon="alert" message ="Houston! Weve a problem." /><wo:JQueryMessage type="highlight" icon="info" message ="The file has been uploaded successfully!" />
  21. 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. 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. 23. Setting up the application to use themesInclude in <head> of PageWrapper:<wo:JQueryResources themeroller = "$true" theme ="themename" uniform = "$true" />Assign class to <body> same as theme name:<body class = "themename">
  24. 24. Live Application +Klok+D2W Integration
  25. 25. Q&A MONTREAL JUNE 30, JULY 1ST AND 2ND 2012Q&A