Taking themes to the next level
-
Upload
dominion -
Category
Technology
-
view
1.248 -
download
1
Transcript of 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?
32. How are Themes typically used? 33. How do Themes actually work? 34. Going beyond the typical to...
- Keep your XPage markup clean
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?
47. How are Themes typically used? 48. How do Themes actually work? 49. Going beyond the typical to...
- Keep your XPage markup clean
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?
66. How are Themes typically used? 67. How do Themes actually work? 68. Going beyond the typical to...
- Keep your XPage markup clean
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?
86. How are Themes typically used? 87. How do Themes actually work? 88. Going beyond the typical to...
- Keep your XPage markup clean
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?
101. How are Themes typically used? 102. How do Themes actually work? 103. Going beyond the typical to...
- Keep your XPage markup clean
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?
109. How are Themes typically used? 110. How do Themes actually work? 111. Going beyond the typical to...
- Keep your XPage markup clean
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.