SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
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




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 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
XPages Workshop: Customizing OneUI
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

Más contenido relacionado

La actualidad más candente

Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityEngage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityJohnny Oldenburger
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension librarydominion
 
Bootstrap4XPages
Bootstrap4XPagesBootstrap4XPages
Bootstrap4XPagesTeamstudio
 
JMP402 Master Class: Managed beans and XPages: Your Time Is Now
JMP402 Master Class: Managed beans and XPages: Your Time Is NowJMP402 Master Class: Managed beans and XPages: Your Time Is Now
JMP402 Master Class: Managed beans and XPages: Your Time Is NowRussell Maher
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPagesTeamstudio
 
Get the best out of Bootstrap with Bootstrap4XPages (AD202)
Get the best out of Bootstrap with Bootstrap4XPages (AD202)Get the best out of Bootstrap with Bootstrap4XPages (AD202)
Get the best out of Bootstrap with Bootstrap4XPages (AD202)Mark Leusink
 
JMP401: Masterclass: XPages Scalability
JMP401: Masterclass: XPages ScalabilityJMP401: Masterclass: XPages Scalability
JMP401: Masterclass: XPages ScalabilityTony McGuckin
 
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityTeamstudio
 
XPages and Java (DanNotes 50th conference, November 2013)
XPages and Java (DanNotes 50th conference, November 2013)XPages and Java (DanNotes 50th conference, November 2013)
XPages and Java (DanNotes 50th conference, November 2013)Per Henrik Lausten
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work EverywhereDoris Chen
 
Zimmertwins Presentation
Zimmertwins PresentationZimmertwins Presentation
Zimmertwins PresentationAshok Modi
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_uDoris Chen
 
JSN Gruve Customization Manual
JSN Gruve Customization ManualJSN Gruve Customization Manual
JSN Gruve Customization ManualJoomlaShine
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampDipen Chaudhary
 
JSN Gruve Configuration Manual
JSN Gruve Configuration ManualJSN Gruve Configuration Manual
JSN Gruve Configuration ManualJoomlaShine
 
MWLUG 2016 : AD117 : Xpages & jQuery DataTables
MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMWLUG 2016 : AD117 : Xpages & jQuery DataTables
MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMichael Smith
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applicationsbeglee
 

La actualidad más candente (20)

Bootstrap4 x pages
Bootstrap4 x pagesBootstrap4 x pages
Bootstrap4 x pages
 
Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityEngage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension library
 
Bootstrap4XPages
Bootstrap4XPagesBootstrap4XPages
Bootstrap4XPages
 
JMP402 Master Class: Managed beans and XPages: Your Time Is Now
JMP402 Master Class: Managed beans and XPages: Your Time Is NowJMP402 Master Class: Managed beans and XPages: Your Time Is Now
JMP402 Master Class: Managed beans and XPages: Your Time Is Now
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPages
 
Get the best out of Bootstrap with Bootstrap4XPages (AD202)
Get the best out of Bootstrap with Bootstrap4XPages (AD202)Get the best out of Bootstrap with Bootstrap4XPages (AD202)
Get the best out of Bootstrap with Bootstrap4XPages (AD202)
 
JMP401: Masterclass: XPages Scalability
JMP401: Masterclass: XPages ScalabilityJMP401: Masterclass: XPages Scalability
JMP401: Masterclass: XPages Scalability
 
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate Usability
 
Drupal
DrupalDrupal
Drupal
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
 
XPages and Java (DanNotes 50th conference, November 2013)
XPages and Java (DanNotes 50th conference, November 2013)XPages and Java (DanNotes 50th conference, November 2013)
XPages and Java (DanNotes 50th conference, November 2013)
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Zimmertwins Presentation
Zimmertwins PresentationZimmertwins Presentation
Zimmertwins Presentation
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
JSN Gruve Customization Manual
JSN Gruve Customization ManualJSN Gruve Customization Manual
JSN Gruve Customization Manual
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal Camp
 
JSN Gruve Configuration Manual
JSN Gruve Configuration ManualJSN Gruve Configuration Manual
JSN Gruve Configuration Manual
 
MWLUG 2016 : AD117 : Xpages & jQuery DataTables
MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMWLUG 2016 : AD117 : Xpages & jQuery DataTables
MWLUG 2016 : AD117 : Xpages & jQuery DataTables
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 

Similar a XPages Workshop: Customizing OneUI

Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Goran Kljajic
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyMarcos Labad
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovementsLiquidHub
 
Drupal Patterms Module
Drupal Patterms ModuleDrupal Patterms Module
Drupal Patterms ModuleChris Bryant
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeOptymizeHireRemoteEn
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDon Day
 
Synapseindia drupal intro 0
Synapseindia drupal intro 0Synapseindia drupal intro 0
Synapseindia drupal intro 0saritasingh19866
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeMediacurrent
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developernariyaravi
 
Getting Started with SharePoint Branding
Getting Started with SharePoint BrandingGetting Started with SharePoint Branding
Getting Started with SharePoint BrandingThomas Daly
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
 
SharePoint 2010 For Developers
SharePoint 2010 For DevelopersSharePoint 2010 For Developers
SharePoint 2010 For DevelopersSparked
 
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And DxlBp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxldominion
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Scott DeLoach
 
Joomla development services by experts fromindia
 Joomla development services by experts fromindia Joomla development services by experts fromindia
Joomla development services by experts fromindiaefisurbhi
 
Drupal Recipe
Drupal RecipeDrupal Recipe
Drupal Recipehernanibf
 

Similar a XPages Workshop: Customizing OneUI (20)

Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovements
 
Drupal Patterms Module
Drupal Patterms ModuleDrupal Patterms Module
Drupal Patterms Module
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | Optymize
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
 
Synapseindia drupal intro 0
Synapseindia drupal intro 0Synapseindia drupal intro 0
Synapseindia drupal intro 0
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
 
Dreaweaver cs5
Dreaweaver cs5Dreaweaver cs5
Dreaweaver cs5
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
Getting Started with SharePoint Branding
Getting Started with SharePoint BrandingGetting Started with SharePoint Branding
Getting Started with SharePoint Branding
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
SharePoint 2010 For Developers
SharePoint 2010 For DevelopersSharePoint 2010 For Developers
SharePoint 2010 For Developers
 
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And DxlBp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
 
Joomla development services by experts fromindia
 Joomla development services by experts fromindia Joomla development services by experts fromindia
Joomla development services by experts fromindia
 
Front end frameworks
Front end frameworksFront end frameworks
Front end frameworks
 
Drupal distribution
Drupal distributionDrupal distribution
Drupal distribution
 
Drupal Recipe
Drupal RecipeDrupal Recipe
Drupal Recipe
 

Más de Michael McGarel

Extreme Development: Pair Programming
Extreme Development: Pair ProgrammingExtreme Development: Pair Programming
Extreme Development: Pair ProgrammingMichael McGarel
 
MWLUG2014 AD107 First Java App Tips
MWLUG2014 AD107 First Java App TipsMWLUG2014 AD107 First Java App Tips
MWLUG2014 AD107 First Java App TipsMichael McGarel
 
BP204 It's Not Infernal: Dante's Nine Circles of XPages Heaven
BP204 It's Not Infernal: Dante's Nine Circles of XPages HeavenBP204 It's Not Infernal: Dante's Nine Circles of XPages Heaven
BP204 It's Not Infernal: Dante's Nine Circles of XPages HeavenMichael McGarel
 
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationHow To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationMichael McGarel
 
Two CCs of Layout -- Stat
Two CCs of Layout -- StatTwo CCs of Layout -- Stat
Two CCs of Layout -- StatMichael McGarel
 
XPages - The Ties That Bind
XPages - The Ties That BindXPages - The Ties That Bind
XPages - The Ties That BindMichael McGarel
 
Approaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceApproaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceMichael McGarel
 

Más de Michael McGarel (9)

Next Level Coding
Next Level CodingNext Level Coding
Next Level Coding
 
Object(ive) Thinking
Object(ive) ThinkingObject(ive) Thinking
Object(ive) Thinking
 
Extreme Development: Pair Programming
Extreme Development: Pair ProgrammingExtreme Development: Pair Programming
Extreme Development: Pair Programming
 
MWLUG2014 AD107 First Java App Tips
MWLUG2014 AD107 First Java App TipsMWLUG2014 AD107 First Java App Tips
MWLUG2014 AD107 First Java App Tips
 
BP204 It's Not Infernal: Dante's Nine Circles of XPages Heaven
BP204 It's Not Infernal: Dante's Nine Circles of XPages HeavenBP204 It's Not Infernal: Dante's Nine Circles of XPages Heaven
BP204 It's Not Infernal: Dante's Nine Circles of XPages Heaven
 
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationHow To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages Application
 
Two CCs of Layout -- Stat
Two CCs of Layout -- StatTwo CCs of Layout -- Stat
Two CCs of Layout -- Stat
 
XPages - The Ties That Bind
XPages - The Ties That BindXPages - The Ties That Bind
XPages - The Ties That Bind
 
Approaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceApproaches to Enhancing the User Experience
Approaches to Enhancing the User Experience
 

Último

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Último (20)

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

XPages Workshop: Customizing OneUI

  • 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)
  • 5. Theme Example <theme extends=“webstandard"> <resource> <content-type>text/css</content-type> <href>site.css</href> </resource> </theme>
  • 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)
  • 7. OneUIv2.1 Framework Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/framework.htm
  • 8. OneUIv2.1 Visual Example 1 Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=2colGrid.htm
  • 9. OneUIv2.1 Visual Example 2 Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples/interactive.htm
  • 10. 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
  • 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
  • 13. OneUIv2.1 Components Descriptions Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/overview.htm
  • 14. OneUIv2.1 Buttons Descriptions Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
  • 15. OneUIv2.1 Button Implementation Source page for graphic: http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/buttons.htm
  • 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.
  • 23. 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
  • 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