Mike McGarel   Collaborative Solutions Developer at Czarnowski Display Services   Working with Notes/Domino since versio...
Roy Rumaner Principal, Rumaner Consulting Working with Notes/Domino since v2.0? (anyone remember OS2?)
What is an XPages Theme? Design element Contains resources for entire application, for example:    style sheets    Jav...
Theme Example<theme extends=“webstandard">  <resource>     <content-type>text/css</content-type>     <href>site.css</href>...
What is OneUI?   IBM’s common look and feel for Web and mobile applications   Big benefit: OneUI takes care of browser i...
OneUIv2.1 FrameworkSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/framework.htm
OneUIv2.1 Visual Example 1Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?con...
OneUIv2.1 Visual Example 2Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples/interac...
OneUIv2.1 Available Themes   oneuiv2.1   oneuiv2.1_blue   oneuiv2.1_gen1   oneuiv2.1_gold   oneuiv2.1_green   oneuiv...
OneUIv2.1 Red Theme ExampleSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?co...
OneUIv2.1 Green Theme ExampleSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?...
OneUIv2.1 Components DescriptionsSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/component...
OneUIv2.1 Buttons DescriptionsSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/b...
OneUIv2.1 Button ImplementationSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/...
OneUIv2.1 Button CodeSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
Style Sheet Design element Separate file to standardize formatting Contains style classes
Style Classes   Preset formatting   Designated with a dot “.”   Can apply globally or to specific design elements   Ex...
Why Use Style Classes? More efficient than inline styles (for you and browser) Inline usage example:  <xp:span style=“co...
Applying Style Classes Property of design element For XPages, it’s “styleClass” not “class” as in HTML  XPages example: ...
CSS – Display Precedence “CSS” stands for “Cascading Style Sheets” Last file loaded wins Important exception: !importan...
Core Control FormattingExample that changes Submit button background to blue:  <control override=“true”>      <name>Button...
References Mastering XPages, Chapter 14, “XPages Theming” OneUIv2.1 developer documentationhttp://infolib.lotus.com/reso...
Browser Tools   Firefox plugin – Firebug   Internet Explorer – Developer Tools   Chrome – Web Developer   Safari – Dev...
Final Thoughts   Theme can be a resource for a group of applications   Can extend OneUI to build your own corporate them...
Contact UsMike McGarelBlog (http://www.bleedyellow.com/blogs/McGarelGramming/)Twitter (@mmcgarel)Email: mcgarelgramming@gm...
Thank You For AttendingThe authors appreciate any feedback or comments you care to give.               Your universe will ...
MWLUG 2012 AD110 Presentation
MWLUG 2012 AD110 Presentation
Upcoming SlideShare
Loading in...5
×

MWLUG 2012 AD110 Presentation

658

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
658
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
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: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/framework.htm
  7. 7. OneUIv2.1 Visual Example 1Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm
  8. 8. OneUIv2.1 Visual Example 2Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples/interactive.htm
  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: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm&theme=red
  11. 11. OneUIv2.1 Green Theme ExampleSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm&theme=green
  12. 12. OneUIv2.1 Components DescriptionsSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/overview.htm
  13. 13. OneUIv2.1 Buttons DescriptionsSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
  14. 14. OneUIv2.1 Button ImplementationSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
  15. 15. OneUIv2.1 Button CodeSource page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
  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: http://www.htmldog.com/guides/cssadvanced/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 documentationhttp://infolib.lotus.com/resources/oneui/2.1/docPublic/components/overview.htm Themes page on Notes/Domino Application Development Wiki:http://www-10.lotus.com/ldd/ddwiki.nsf/dx/5.1_Themes
  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 (http://twitter.github.com/bootstrap/)  Blueprint (http://www.blueprintcss.org)  Responsive Layout on OpenNTF.org (http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocu ment&name=Responsive%20Website)
  25. 25. Contact UsMike McGarelBlog (http://www.bleedyellow.com/blogs/McGarelGramming/)Twitter (@mmcgarel)Email: mcgarelgramming@gmail.comRoy RumanerBlog (http://rrumaner.blogspot.com)Twitter (@rrumaner)Email: rrumaner@gmail.com
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×