Taking themes to the next level

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? 5. Agenda

What is a Theme?

6. How are Themes typically used? 7. How do Themes actually work? 8. Going beyond the typical to...

Keep your XPage markup clean

9. Enhance application performance 10. Maintain device-targeted user interfaces 11. Streamline team development 12. What is a Theme?

Design element category (ResourcesThemes) added in Domino 8.5

13. XML file with a root element of theme 14. Can be global to a server or local to an NSF

Server includes several default themes

Defines runtime page modification

Resource inclusion (JavaScript / CSS)

15. Component attribute manipulation 16. Pre-installed themes

webstandard (default theme)

17. notes 18. oneui

oneuiv2 (supersedes oneui)

19. oneuiv2_gold 20. oneuiv2_green 21. oneuiv2_metal 22. oneuiv2_red 23. Pre-installed themes

These default themes are located in [domino root]/xsp/nsf/themes/ NOTE:notin the data folder

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 26. The simplest possible example

This theme does nothing, but is still valid

27. For a theme to be useful, it must contribute:

Resources to be added to the page, or:

28. Properties to be applied to matching controls Themes can also extend another Theme: 29. Example of a descendant Theme 30. Selecting a Theme 31. Agenda

What is a Theme?

35. Enhance application performance 36. Maintain device-targeted user interfaces 37. Streamline team development 38. How are Themes typically used?

Enforced inclusion of stylesheets and libraries

Standard frameworks (e.g. Dojo, Blueprint CSS)

39. Corporate design standards (acme.css) 40. Application-specific resources (myApp.css) Enforced addition of component attributes

style (e.g. font-family: arial; font-size: 9pt;)

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 46. Agenda

What is a Theme?

50. Enhance application performance 51. Maintain device-targeted user interfaces 52. Streamline team development 53. How do Themes actually work?

Themes are like server-side CSS

54. Applied during the JSF render phase 55. Resources injected into the component tree 56. Components matched by default or custom ID 57. Each XPage component instance is a bean

Every attribute has a getter method

58. Every attribute has a setter method 59. Theoretical example Equivalent to: view.setStyleClass(view.getStyleClass() + xspView tundra); 60. This works for any property...

pageTitle

61. var 62. rows 63. partialRefresh 64. ...value Almost any propertythat is not read-only can be set via a Theme. 65. Agenda

What is a Theme?

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 80. Keep your Themes clean

Typical Themes list each resource separately

81. Requires a minimum of 4 lines for each 82. Themes support an abbreviated syntax 83. This syntax allows one additional feature:

Inclusion ofserver-sideJavaScript libraries

84. Keep your Themes clean 85. Agenda

What is a Theme?

89. Enhance application performance 90. Maintain device-targeted user interfaces 91. Streamline team development 92. Automatic performance boost

JSF defines 6 page lifecycle phases

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 97. Limitations

Due to the late binding, not everything can be defined in a Theme:

Value (iterated collection) of a repeat control

98. Page load bindings ( ${} ) like component id Server-side SSJS libraries included via a Theme are available in the afterPageLoad event but not the beforePageLoad 99. Passthru HTML components can not be modified via Themes 100. Agenda

What is a Theme?

104. Enhance application performance 105. Maintain device-targeted user interfaces 106. Streamline team development 107. Various approaches for mobile

Load different stylesheets based on user agent

Just as webstandard loads CSS specific to Firefox, Safari, IE, etc., we can load CSS specific to iPod, iPad, Android........

Set rendererType property of key components to invoke an entirely different render kit

Not for the faint of heart, but providesfull controlover the markup sent to the device

108. Agenda

What is a Theme?

112. Enhance application performance 113. Maintain device-targeted user interfaces 114. Streamline team development 115. Streamline team development

Thorough use of Themes facilitates a three-tier distribution of effort:

Advanced developers maintain script libraries and managed beans

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. 118. Easy to document for novices

Specification can just be a three-column table:

Purpose (copyright statement, corporate logo, home link)

119. Component type (computed field, image, link) 120. Theme Id A novice can choose from the defined components, speeding up the process and reducing duplication of effort 121. The End

Heeft u nog vragen?

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.

Technology

Taking themes to the next level