XPages Workshop: Customizing OneUI
-
Upload
michael-mcgarel -
Category
Technology
-
view
5.241 -
download
10
description
Transcript of 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: [email protected]
Roy RumanerBlog (http://rrumaner.blogspot.com)Twitter (@rrumaner)Email: [email protected]
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