XPages Workshop: Customizing OneUI

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

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
 JavaScript files
 Separates the visual from the functional
 Can inherit from other themes
 Main goal: standardize user interface (UI)

Theme Example
<theme extends=“webstandard">
<resource>
<content-type>text/css</content-type>
<href>site.css</href>
</resource>
</theme>

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)

OneUIv2.1 Framework

Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/framework.htm

OneUIv2.1 Visual Example 1

Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm

OneUIv2.1 Visual Example 2

Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples/interactive.htm

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

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

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

OneUIv2.1 Components Descriptions

Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/overview.htm

OneUIv2.1 Buttons Descriptions

Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm

OneUIv2.1 Button Implementation


OneUIv2.1 Button Code


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
 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;}

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>

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>

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/

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.

References
 Mastering XPages, Chapter 14, “XPages Theming”
 OneUIv2.1 developer documentation
http://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

Browser Tools
 Firefox plugin – Firebug
 Internet Explorer – Developer Tools
 Chrome – Web Developer
 Safari – Develop menu

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)

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

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

XPages Workshop: Customizing OneUI

More Related Content

What's hot (20)

Similar to XPages Workshop: Customizing OneUI (20)

More from Michael McGarel (9)

Recently uploaded (20)

XPages Workshop: Customizing OneUI