XPages OneUIv2 Theme Deep Dive


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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

XPages OneUIv2 Theme Deep Dive

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