Your SlideShare is downloading. ×
Taking themes to the next level
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Taking themes to the next level

1,205
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,205
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 (Resources Themes) 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
  • 23. Pre-installed themes
    • These default themes are located in [domino root]/xsp/nsf/themes/ NOTE: not in 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... Almost any property that 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 of server-side JavaScript 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 provides full control over 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.