MWLUG 2012 AD110 Presentation


Published on

XPages presentation given at MWLUG 2012 by myself and Mike McGarel on using Themes and CSS with OneUI.

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

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

No notes for slide

MWLUG 2012 AD110 Presentation

  1. 1. Mike McGarel Collaborative Solutions Developer at Czarnowski Display Services Working with Notes/Domino since version 4.6 Working on the Web for over 12 years Involved with community projects: Blogger Open (at Lotusphere), SkiLUG and MWLUG
  2. 2. Roy Rumaner Principal, Rumaner Consulting Working with Notes/Domino since v2.0? (anyone remember OS2?)
  3. 3. What is an XPages Theme? Design element Contains resources for entire application, for example:  style sheets  JavaScript files Separates the visual from the functional Can inherit from other themes Main goal: standardize user interface (UI)
  4. 4. Theme Example<theme extends=“webstandard"> <resource> <content-type>text/css</content-type> <href>site.css</href> </resource></theme>
  5. 5. What is OneUI? IBM’s common look and feel for Web and mobile applications Big benefit: OneUI takes care of browser incompatibilities Evolving, currently version 2.1 More than just visual (e.g. design patterns)
  6. 6. OneUIv2.1 FrameworkSource page for graphic:
  7. 7. OneUIv2.1 Visual Example 1Source page for graphic:
  8. 8. OneUIv2.1 Visual Example 2Source page for graphic:
  9. 9. OneUIv2.1 Available Themes oneuiv2.1 oneuiv2.1_blue oneuiv2.1_gen1 oneuiv2.1_gold oneuiv2.1_green oneuiv2.1_onyx oneuiv2.1_orange oneuiv2.1_pink oneuiv2.1_purple oneuiv2.1_red oneuiv2.1_silver
  10. 10. OneUIv2.1 Red Theme ExampleSource page for graphic:
  11. 11. OneUIv2.1 Green Theme ExampleSource page for graphic:
  12. 12. OneUIv2.1 Components DescriptionsSource page for graphic:
  13. 13. OneUIv2.1 Buttons DescriptionsSource page for graphic:
  14. 14. OneUIv2.1 Button ImplementationSource page for graphic:
  15. 15. OneUIv2.1 Button CodeSource page for graphic:
  16. 16. Style Sheet Design element Separate file to standardize formatting Contains style classes
  17. 17. Style Classes Preset formatting Designated with a dot “.” Can apply globally or to specific design elements Examples Global: .bigbox {border:6px solid #0000FF; padding:18px;} Specific: td.bigbox {background-color: blue; color: #FFF;} More specific: table.contactTable td.bigbox {font-weight: bold;}
  18. 18. Why Use Style Classes? More efficient than inline styles (for you and browser) Inline usage example: <xp:span style=“color:red;”>MWLUG</xp:span> Class example: .corporate {color:red;} Usage: <xp:span styleClass=“corporate”>MWLUG</xp:span>
  19. 19. Applying Style Classes Property of design element For XPages, it’s “styleClass” not “class” as in HTML XPages example: <xp:span styleClass=“title”>MWLUG</xp:span> Standard HTML example: <span class=“title”>MWLUG</span> Element can have more than one class <xp:span styleClass=“title corporate”>MWLUG</xp:span>
  20. 20. CSS – Display Precedence “CSS” stands for “Cascading Style Sheets” Last file loaded wins Important exception: !important  td.corporate {color:blue !important;} Rule of specificity  table.itemTable th {background-color:#EFEFEF;} Inline styles win More information on specificity:
  21. 21. Core Control FormattingExample that changes Submit button background to blue: <control override=“true”> <name>Button.Submit</name> <property> <name>style</name> <value>background-color: blue;</value> </property> </control> Note: The override=“true” setting replaces the existing style.
  22. 22. References Mastering XPages, Chapter 14, “XPages Theming” OneUIv2.1 developer documentation Themes page on Notes/Domino Application Development Wiki:
  23. 23. Browser Tools Firefox plugin – Firebug Internet Explorer – Developer Tools Chrome – Web Developer Safari – Develop menu
  24. 24. Final Thoughts Theme can be a resource for a group of applications Can extend OneUI to build your own corporate theme Very useful with Extension Library controls Caveat: Themes are loaded last!  Theme JS functions are not available during the page load Use these tools to explore and customize other frameworks Examples:  Twitter Bootstrap (  Blueprint (  Responsive Layout on ( ment&name=Responsive%20Website)
  25. 25. Contact UsMike McGarelBlog ( (@mmcgarel)Email: mcgarelgramming@gmail.comRoy RumanerBlog ( (@rrumaner)Email:
  26. 26. Thank You For AttendingThe authors appreciate any feedback or comments you care to give. Your universe will never be the same We’re glad you came We’re glad you came