Embed Size (px)
DESCRIPTION
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.
Citation preview
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
