1. XPages OneUIv2 Theme Deep Dive Lance Spellman | President, WorkFlow Studios

3. Discussion Database Demo

4. Trying different out-of-the-box themes

5. Extending themes with your changes

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:

10. Preview the database http://127.0.0.1/discussion.nsf

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

16. Can be application specific

17. Can even be XPage specific

18. Dissecting a theme, finding all the files on the server

20. Preview the page

21. Ouch!

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

27. Make a copy of it named xsp.properties

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?!?

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.

40. oneuiv2.theme (previewed in 8.5.1 and supported in 8.5.2)

43. In the list of themes, “blue” is one of them

44. Open it and see that it extends oneuiv2

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

50. Use Firebug to select the navigator element

51. Find out what element it is, and what styles are being applied to it

56. Lets you try out different settings and tweak without code change/save/refresh

58. Change the filename in the pasted version to custom.css

60. The resources are read in order

61. With our class definition read last, it will take precedence over earlier definition

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”

66. Notice that we only overwrote the 1 property we were interested in. The other definitions for the class remain intact

68. For the text of the menu items, changed them to black

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

78. Change the name to button.cool

79. Change the styleClass value to coolButton

80. Save

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

85. We create a new theme called WFS

86. Extend “blue”

88. Move the resource definition for custom.css from the blue theme and put it in the new WFS theme

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

98. In the WFS theme, replace the Control definition name from coolButton to Button.Cancel

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?

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.