XPages Workshop: Customizing OneUI

Customizing

OneUI by Mike McGarel & Roy Rumaner

AD110: XPages Workshop

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

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

OneUIv2.1 Button Code

Source 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 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 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.

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

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

Time toCustomize!

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=openDocument&name=Responsive%20Website)

Contact Us

Mike McGarelBlog (http://www.bleedyellow.com/blogs/McGarelGramming/)Twitter (@mmcgarel)Email: mcgarelgramming@gmail.com

Roy RumanerBlog (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 sameWe’re glad you cameWe’re glad you came