This is from Roy Rumaner's and my workshop at the 2012 Midwest Lotus User Group conference (MWLUG). The workshop instructions and accompanying text files can be found on my blog post at http://www.bleedyellow.com/blogs/McGarelGramming/entry/mwlug_2012_workshop_customizing_oneui?lang=en_us.
2. 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
3. Roy Rumaner
Principal, Rumaner Consulting
Working with Notes/Domino since v2.0? (anyone remember OS2?)
4. 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)
6. 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)
11. OneUIv2.1 Red Theme Example
Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm&theme=red
12. OneUIv2.1 Green Theme Example
Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm&theme=green
16. OneUIv2.1 Button Code
Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
17. Style Sheet
Design element
Separate file to standardize formatting
Contains style classes
18. 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;}
19. 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>
20. 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>
21. 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/
22. Core Control Formatting
Example 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.
24. Browser Tools
Firefox plugin – Firebug
Internet Explorer – Developer Tools
Chrome – Web Developer
Safari – Develop menu
26. 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)
27. Contact Us
Mike McGarel
Blog (http://www.bleedyellow.com/blogs/McGarelGramming/)
Twitter (@mmcgarel)
Email: mcgarelgramming@gmail.com
Roy Rumaner
Blog (http://rrumaner.blogspot.com)
Twitter (@rrumaner)
Email: rrumaner@gmail.com
28. Thank You For Attending
The 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