The document discusses taking themes in XPages to the next level by going beyond their typical uses. It describes how themes can be used to keep markup clean, enhance performance, maintain device-targeted interfaces, and streamline team development. Themes allow defining common styles, resources, and component properties that can be shared across applications and servers.

1. Taking Themes to the Next Level Getting More out of XPages... the easy way Tim Tripcony “ XMage” GBS (GROUP Business Software) [email_address] http://xmage.gbs.com

2. An example before we dive in...

3. Zooming in a bit...

4. Let's examine the source code Notice anything missing?

6. How are Themes typically used?

7. How do Themes actually work?

9. Enhance application performance

10. Maintain device-targeted user interfaces

11. Streamline team development

13. XML file with a root element of “theme”

15. Component attribute manipulation

17. notes

19. oneuiv2_gold

20. oneuiv2_green

21. oneuiv2_metal

22. oneuiv2_red

24. Add your own server-wide themes by adding them to the same folder

25. This allows all applications on the same server to use or extend a common custom theme

29. Example of a descendant Theme

30. Selecting a Theme

32. How are Themes typically used?

33. How do Themes actually work?

35. Enhance application performance

36. Maintain device-targeted user interfaces

37. Streamline team development

39. Corporate design standards (acme.css)

41. styleClass (e.g. xspTableCell)

42. Examples of resource inclusion

43. Examples of resource inclusion

44. Examples of resource inclusion

45. Examples of component modification

47. How are Themes typically used?

48. How do Themes actually work?

50. Enhance application performance

51. Maintain device-targeted user interfaces

52. Streamline team development

54. Applied during the JSF render phase

55. Resources injected into the component tree

56. Components matched by default or custom ID

58. Every attribute has a “setter” method

59. Theoretical example Equivalent to: view.setStyleClass(view.getStyleClass() + “ xspView tundra”);

61. var

62. rows

63. partialRefresh

64. ...value Almost any property that is not read-only can be set via a Theme.

66. How are Themes typically used?

67. How do Themes actually work?

69. Enhance application performance

70. Maintain device-targeted user interfaces

71. Streamline team development

72. Apply default control properties

73. Apply default control properties

74. Apply custom control properties

75. Apply custom control properties

76. BONUS SLIDE! Managed bean...

77. BONUS SLIDE! Managed bean...

78. Revisiting the end result

79. Revisiting the end result

81. Requires a minimum of 4 lines for each

82. Themes support an abbreviated syntax

84. Keep your Themes clean

86. How are Themes typically used?

87. How do Themes actually work?

89. Enhance application performance

90. Maintain device-targeted user interfaces

91. Streamline team development

93. Themes are applied during the final phase

94. By default all applied component properties simply ignore the model

95. Themes are also cached

96. Add all these up, and it means the more you define in a theme, the less work the server has to perform to render the page

99. “ Passthru” HTML components can not be modified via Themes

101. How are Themes typically used?

102. How do Themes actually work?

104. Enhance application performance

105. Maintain device-targeted user interfaces

106. Streamline team development

109. How are Themes typically used?

110. How do Themes actually work?

112. Enhance application performance

113. Maintain device-targeted user interfaces

114. Streamline team development

116. Mid-level developers maintain Themes, defining how components utilize native and custom API's

117. Novices stick to “drag and drop”: add a component to the page, specify the appropriate themeId... done.

119. Component type (computed field, image, link)

122. Avez-vous des questions?

123. Haben Sie Fragen?

124. ...any questions? Disclaimer: if any of the above phrases are complete nonsense, blame Google Translate.