Taking themes to the next level

1,737 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,737
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taking themes to the next level

  1. 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. 2. An example before we dive in...
  3. 3. Zooming in a bit...
  4. 4. Let's examine the source code Notice anything missing?
  5. 5. Agenda <ul><li>What is a Theme?
  6. 6. How are Themes typically used?
  7. 7. How do Themes actually work?
  8. 8. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  9. 9. Enhance application performance
  10. 10. Maintain device-targeted user interfaces
  11. 11. Streamline team development </li></ul></ul>
  12. 12. What is a Theme? <ul><li>Design element category (Resources Themes) added in Domino 8.5
  13. 13. XML file with a root element of “theme”
  14. 14. Can be global to a server or local to an NSF </li><ul><li>Server includes several default themes </li></ul><li>Defines runtime page modification </li><ul><li>Resource inclusion (JavaScript / CSS)
  15. 15. Component attribute manipulation </li></ul></ul>
  16. 16. Pre-installed themes <ul><li>webstandard (default theme)
  17. 17. notes
  18. 18. oneui </li><ul><li>oneuiv2 (supersedes oneui)
  19. 19. oneuiv2_gold
  20. 20. oneuiv2_green
  21. 21. oneuiv2_metal
  22. 22. oneuiv2_red </li></ul></ul>
  23. 23. Pre-installed themes <ul><li>These default themes are located in [domino root]/xsp/nsf/themes/ NOTE: not in the data folder
  24. 24. Add your own server-wide themes by adding them to the same folder
  25. 25. This allows all applications on the same server to use or extend a common custom theme </li></ul>
  26. 26. The simplest possible example <ul><li>This theme does nothing, but is still valid
  27. 27. For a theme to be useful, it must contribute: </li><ul><li>Resources to be added to the page, or:
  28. 28. Properties to be applied to matching controls </li></ul><li>Themes can also extend another Theme: </li></ul>
  29. 29. Example of a descendant Theme
  30. 30. Selecting a Theme
  31. 31. Agenda <ul><li>What is a Theme?
  32. 32. How are Themes typically used?
  33. 33. How do Themes actually work?
  34. 34. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  35. 35. Enhance application performance
  36. 36. Maintain device-targeted user interfaces
  37. 37. Streamline team development </li></ul></ul>
  38. 38. How are Themes typically used? <ul><li>Enforced inclusion of stylesheets and libraries </li><ul><li>Standard frameworks (e.g. Dojo, Blueprint CSS)
  39. 39. Corporate design standards (acme.css)
  40. 40. Application-specific resources (myApp.css) </li></ul><li>Enforced addition of component attributes </li><ul><li>style (e.g. font-family: arial; font-size: 9pt;)
  41. 41. styleClass (e.g. xspTableCell) </li></ul></ul>
  42. 42. Examples of resource inclusion
  43. 43. Examples of resource inclusion
  44. 44. Examples of resource inclusion
  45. 45. Examples of component modification
  46. 46. Agenda <ul><li>What is a Theme?
  47. 47. How are Themes typically used?
  48. 48. How do Themes actually work?
  49. 49. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  50. 50. Enhance application performance
  51. 51. Maintain device-targeted user interfaces
  52. 52. Streamline team development </li></ul></ul>
  53. 53. How do Themes actually work? <ul><li>Themes are like “server-side CSS”
  54. 54. Applied during the JSF render phase
  55. 55. Resources injected into the component tree
  56. 56. Components matched by default or custom ID
  57. 57. Each XPage component instance is a bean </li><ul><li>Every attribute has a “getter” method
  58. 58. Every attribute has a “setter” method </li></ul></ul>
  59. 59. Theoretical example Equivalent to: view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
  60. 60. This works for any property... <ul><li>pageTitle
  61. 61. var
  62. 62. rows
  63. 63. partialRefresh
  64. 64. ...value </li></ul>Almost any property that is not read-only can be set via a Theme.
  65. 65. Agenda <ul><li>What is a Theme?
  66. 66. How are Themes typically used?
  67. 67. How do Themes actually work?
  68. 68. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  69. 69. Enhance application performance
  70. 70. Maintain device-targeted user interfaces
  71. 71. Streamline team development </li></ul></ul>
  72. 72. Apply default control properties
  73. 73. Apply default control properties
  74. 74. Apply custom control properties
  75. 75. Apply custom control properties
  76. 76. BONUS SLIDE! Managed bean...
  77. 77. BONUS SLIDE! Managed bean...
  78. 78. Revisiting the end result
  79. 79. Revisiting the end result
  80. 80. Keep your Themes clean <ul><li>Typical Themes list each resource separately
  81. 81. Requires a minimum of 4 lines for each
  82. 82. Themes support an abbreviated syntax
  83. 83. This syntax allows one additional feature: </li><ul><li>Inclusion of server-side JavaScript libraries </li></ul></ul>
  84. 84. Keep your Themes clean
  85. 85. Agenda <ul><li>What is a Theme?
  86. 86. How are Themes typically used?
  87. 87. How do Themes actually work?
  88. 88. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  89. 89. Enhance application performance
  90. 90. Maintain device-targeted user interfaces
  91. 91. Streamline team development </li></ul></ul>
  92. 92. Automatic performance boost <ul><li>JSF defines 6 page lifecycle phases
  93. 93. Themes are applied during the final phase
  94. 94. By default all applied component properties simply ignore the model
  95. 95. Themes are also cached
  96. 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 </li></ul>
  97. 97. Limitations <ul><li>Due to the late binding, not everything can be defined in a Theme: </li><ul><li>Value (iterated collection) of a repeat control
  98. 98. Page load bindings ( ${} ) like component id </li></ul><li>Server-side SSJS libraries included via a Theme are available in the afterPageLoad event but not the beforePageLoad
  99. 99. “ Passthru” HTML components can not be modified via Themes </li></ul>
  100. 100. Agenda <ul><li>What is a Theme?
  101. 101. How are Themes typically used?
  102. 102. How do Themes actually work?
  103. 103. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  104. 104. Enhance application performance
  105. 105. Maintain device-targeted user interfaces
  106. 106. Streamline team development </li></ul></ul>
  107. 107. Various approaches for mobile <ul><li>Load different stylesheets based on user agent </li><ul><li>Just as webstandard loads CSS specific to Firefox, Safari, IE, etc., we can load CSS specific to iPod, iPad, Android........ </li></ul><li>Set rendererType property of key components to invoke an entirely different render kit </li><ul><li>Not for the faint of heart, but provides full control over the markup sent to the device </li></ul></ul>
  108. 108. Agenda <ul><li>What is a Theme?
  109. 109. How are Themes typically used?
  110. 110. How do Themes actually work?
  111. 111. Going beyond the typical to... </li><ul><li>Keep your XPage markup clean
  112. 112. Enhance application performance
  113. 113. Maintain device-targeted user interfaces
  114. 114. Streamline team development </li></ul></ul>
  115. 115. Streamline team development <ul><li>Thorough use of Themes facilitates a three-tier distribution of effort: </li><ul><li>Advanced developers maintain script libraries and managed beans
  116. 116. Mid-level developers maintain Themes, defining how components utilize native and custom API's
  117. 117. Novices stick to “drag and drop”: add a component to the page, specify the appropriate themeId... done. </li></ul></ul>
  118. 118. Easy to document for novices <ul><li>Specification can just be a three-column table: </li><ul><li>Purpose (copyright statement, corporate logo, home link)
  119. 119. Component type (computed field, image, link)
  120. 120. Theme Id </li></ul><li>A novice can choose from the defined components, speeding up the process and reducing duplication of effort </li></ul>
  121. 121. The End <ul><li>Heeft u nog vragen?
  122. 122. Avez-vous des questions?
  123. 123. Haben Sie Fragen?
  124. 124. ...any questions? </li></ul>Disclaimer: if any of the above phrases are complete nonsense, blame Google Translate.

×