XPages OneUIv2 Theme Deep Dive

Uploaded on

A lab session from WorkFlow Studios for working with the OneUIv2 theme and how to dive into it to make changes for your corporate theme.

A lab session from WorkFlow Studios for working with the OneUIv2 theme and how to dive into it to make changes for your corporate theme.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. XPages OneUIv2 Theme Deep Dive Lance Spellman | President, WorkFlow Studios
  • 2. Agenda
    • What's an Xpages theme?
    • 3. Discussion Database Demo
    • 4. Trying different out-of-the-box themes
    • 5. Extending themes with your changes
  • 6. What's an XPages theme?
    • Themes are powerful design elements that control overall layout of Domino web applications. With themes, you can give all your web applications a consistent look and feel, and include corporate branding.
    • 7. Themes are much more than styles. They can include various style sheets and can also override/ specify individual control's look and feel. For example, in a theme you can specify a particular style class for all submit buttons in your application.
    • 8. And last but not least: you can define multiple themes within an application, and then simple switch between themes via the application properties:
  • 9. Discussion Database Demo
    • The 8.5.2 Discussion template is based on the OneUIv2 theme
    • 10. Preview the database
    • 11. In Application Properties in Domino Designer, go to the XPages tab
    • 12. By default, the Application Theme is “blue”
    • 13. Try changing to “red” and reloading the page
  • 14. Discussion Db Theme Choices
  • 15. Theme Options
    • Can be server-wide by specifying a server default
    • 16. Can be application specific
    • 17. Can even be XPage specific
    • 18. Dissecting a theme, finding all the files on the server
  • 19. Using Server Default Theme
    • For Discussion Db, change theme to “Server Default”
    • 20. Preview the page
    • 21. Ouch!
  • 22. Server Default: Where does it get set?
    • The server looks for an xsp.properties file in dataproperties directory
    • 23. If found, it looks for the entry xsp.theme.web
    • 24. If blank, it looks for the entry xsp.theme
    • 25. If the xsp.properties file doesn't exist, or the entries don't exist, then the webstandard theme is applied as shown below
  • 26. Set a theme for Server Default
    • In dataproperties there is a xsp.properties.sample file
    • 27. Make a copy of it named xsp.properties
    • 28. Edit the file and uncomment the #xsp.theme=webstandard to
      • xsp.theme=oneuiv2
    • Save the file
    • 29. Tell http quit on the server console
    • 30. After http's shutdown, issue load http on the server console
    • 31. Preview the page again
  • 32. Results...not so good?!?
  • 33. Look at the source
    • Theme was applied, the appropriate css files are shown as loading
    • 34. The screen background is blue, so oneuiv2 is doing something
    • 35. Why doesn't the rest of the page look better?
    • 36. Theme extensions
    • 37. This database originally was set to use the “blue” theme and it worked with that. “blue” extends oneuiv2, apparently in a big way.
  • 38. Before looking at “blue” theme...
    • Let's identify where the domino server is getting oneuiv2 and webstandard themes from
    • 39. Look in the dominoxspnsfthemes directory
      • There you find all the .theme documents including
        • oneui.theme (8.5 and 8.5.1)
        • 40. oneuiv2.theme (previewed in 8.5.1 and supported in 8.5.2)
        • 41. webstandard.theme
    • Open the oneuiv2.theme with Wordpad
      • Resources are declared there with paths like
        • /.ibmxpress/domino/oneuiv2/base/core.css
    • The /.ibmxpress/domino directory is mapped by the Domino server to
      • datadominohtml directory
    • Under the html directory is the oneuiv2 folder with all the CSS files
  • 42. Where's the Blue theme?
    • Go to Resources and Themes within the database
    • 43. In the list of themes, “blue” is one of them
    • 44. Open it and see that it extends oneuiv2
  • 45. Dissecting the Blue Theme
    • Change to Design mode
    • 46. <theme extends=”oneuiv2”>
    • 47. In addition to all the resources provided by oneuiv2, there are additional resources provided by the “blue” theme
    • 48. The blue.css file referenced here is found in the Resources -> Stylesheets folder of the application
  • 49. Change the Navigator colors
    • I like the “blue” theme, but I really don't like the green navigator
    • 50. Use Firebug to select the navigator element
    • 51. Find out what element it is, and what styles are being applied to it
    • 52. The green box turns out to be an element with this class
      • .xspPanelNavigationMenuTop
  • 53.  
  • 54. Make the Navigation Box Pretty
    • Well, beauty's in the eye of the beholder, right?
    • 55. Before going and changing any code anywhere, try it in Firebug first
      • Helps verify you are working with the right element
      • 56. Lets you try out different settings and tweak without code change/save/refresh
  • 57. Add a New Resource to the Blue Theme
    • Copy the first resource section and paste it in BELOW
    • 58. Change the filename in the pasted version to custom.css
    • 59. Why below?
      • We are going to overwrite some class definitions
      • 60. The resources are read in order
      • 61. With our class definition read last, it will take precedence over earlier definition
  • 62. Create a new Custom.css file
    • In Resources -> Stylesheets, create new Stylesheet
    • 63. Name it custom.css per the resource definition we just added
    • 64. For the classes we identified in Firebug, we create our “re-definition”
    • 65. The navigation box was class .xspPanelNavigationMenuTop
      • Here's how we redefined it
      • 66. Notice that we only overwrote the 1 property we were interested in. The other definitions for the class remain intact
  • 67. Other Class Overrides
    • For the Menu Items and Selected Menu Items, made the background and border red
    • 68. For the text of the menu items, changed them to black
  • 69. Redefining controls
    • In the theme file, you can also define a default class for a control
    • 70. For example, if we wanted all the buttons to have a certain appearance
      • Could overwrite the css class
      • 71. Could define a different css class altogether for the control
    • We've done the first, let's try the second
    • 72. Open the Custom Control “actionsBar”
    • 73. Select the “New Topic” button
    • 74. Go to the Style tab
    • 75. For the Theme field, type “button.cool”
    • 76. Save and go back to the “blue” theme file
  • 77. Adding a Control Definition
    • In the blue theme, there are lots of control definitions. Copy one and paste at the end of the file (but before the ending </theme>)
    • 78. Change the name to button.cool
    • 79. Change the styleClass value to coolButton
    • 80. Save
  • 81. Update custom.css for coolButton
    • In the custom.css file, we now need a class definition for coolButton
    • 82. To be really big and Web 2.0, we'll make a big green button
    • 83. Here's the class definition we came up with and what it looks like
  • 84. Refactor and create our own theme
    • Instead of mucking up the existing themes and css, we'll extend
    • 85. We create a new theme called WFS
    • 86. Extend “blue”
  • 87. Move custom.css from the blue theme
    • We want to leave the blue theme in it's pristine state, so any mods we'd made there, we're moving out.
    • 88. Move the resource definition for custom.css from the blue theme and put it in the new WFS theme
  • 89. Move control definition
    • Take the button.cool control definition from the blue theme over to the WFS theme
  • 90. Get rid of custom theme id
    • To make the theme transferable with no code changes to the base app, we need to get rid of theme id of button.cool on the “New Topic” button that we added earlier
  • 91. How to determine a control's theme id
    • We can apply our cool button style globally to all buttons of this type in the application by changing the styleClass definition for the existing button controls
    • 92. This requires that we know what the control's theme id is
    • 93. Some are relatively easy to determine and some aren't
    • 94. You can use code to get the component's StyleKitFamily
    • 95. Put the value in a scope variable
    • 96. Put a computed field on the page bound to the scope variable to reveal it
  • 97. Defining styleClass for Button.Cancel
    • After previewing the page, it turns out the “New Topic” button has a theme id of Button.Cancel
    • 98. In the WFS theme, replace the Control definition name from coolButton to Button.Cancel
  • 99. Theme Independence Achieved!
    • We've set Blue theme back to its original state
    • 100. We've setup a new theme, WFS, that defines a custom stylesheet
    • 101. We have a new styleClass definition for all buttons that are of type Button.Cancel
    • 102. We have a custom.css stylesheet that contains the coolbutton style changes
    • 103. We now have another theme choice for our application
    • 104. Set the application property theme choice to WFS
    • 105. We can choose between themes at the application property level and go back and forth without any other changes needed to the application
  • 106. Questions?
  • 107. Resources
    • There's a lot of great information on the XPages Blog
    • 108. By searching for all items with tag of theme, there are 5 good articles available
      • http://xpagesblog.com/xpages-blog/tag/themes
    • Lotus User Interface documentation
      • http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm
    • Article in the Domino wiki
      • http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Create_a_website_layout
    • My Delicious bookmarks
      • http://www.delicious.com/lspellman/xpages+themes
  • 109. Legal Disclaimers
    • © WorkFlow Studios 2010. All Rights Reserved.
    • 110. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. WorkFlow Studios shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from WorkFlow Studios or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
    • 111. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
    • 112. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both.
    • 113. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
    • 114. Dissemination or reuse of this presentation is allowed provided full attribution to WorkFlow Studios is made by retaining the title slide and this legal disclaimer slide in their original form.