• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Taking themes to the next level
 

Taking themes to the next level

on

  • 1,456 views

 

Statistics

Views

Total Views
1,456
Views on SlideShare
1,456
Embed Views
0

Actions

Likes
0
Downloads
31
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Taking themes to the next level Taking themes to the next level Presentation Transcript

    • 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
    • An example before we dive in...
    • Zooming in a bit...
    • Let's examine the source code Notice anything missing?
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • What is a Theme?
      • Design element category (Resources Themes) added in Domino 8.5
      • XML file with a root element of “theme”
      • Can be global to a server or local to an NSF
        • Server includes several default themes
      • Defines runtime page modification
        • Resource inclusion (JavaScript / CSS)
        • Component attribute manipulation
    • Pre-installed themes
      • webstandard (default theme)
      • notes
      • oneui
        • oneuiv2 (supersedes oneui)
        • oneuiv2_gold
        • oneuiv2_green
        • oneuiv2_metal
        • oneuiv2_red
    • Pre-installed themes
      • These default themes are located in [domino root]/xsp/nsf/themes/ NOTE: not in the data folder
      • Add your own server-wide themes by adding them to the same folder
      • This allows all applications on the same server to use or extend a common custom theme
    • The simplest possible example
      • This theme does nothing, but is still valid
      • For a theme to be useful, it must contribute:
        • Resources to be added to the page, or:
        • Properties to be applied to matching controls
      • Themes can also extend another Theme:
    • Example of a descendant Theme
    • Selecting a Theme
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • How are Themes typically used?
      • Enforced inclusion of stylesheets and libraries
        • Standard frameworks (e.g. Dojo, Blueprint CSS)
        • Corporate design standards (acme.css)
        • Application-specific resources (myApp.css)
      • Enforced addition of component attributes
        • style (e.g. font-family: arial; font-size: 9pt;)
        • styleClass (e.g. xspTableCell)
    • Examples of resource inclusion
    • Examples of resource inclusion
    • Examples of resource inclusion
    • Examples of component modification
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • How do Themes actually work?
      • Themes are like “server-side CSS”
      • Applied during the JSF render phase
      • Resources injected into the component tree
      • Components matched by default or custom ID
      • Each XPage component instance is a bean
        • Every attribute has a “getter” method
        • Every attribute has a “setter” method
    • Theoretical example Equivalent to: view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
    • This works for any property...
      • pageTitle
      • var
      • rows
      • partialRefresh
      • ...value
      Almost any property that is not read-only can be set via a Theme.
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • Apply default control properties
    • Apply default control properties
    • Apply custom control properties
    • Apply custom control properties
    • BONUS SLIDE! Managed bean...
    • BONUS SLIDE! Managed bean...
    • Revisiting the end result
    • Revisiting the end result
    • Keep your Themes clean
      • Typical Themes list each resource separately
      • Requires a minimum of 4 lines for each
      • Themes support an abbreviated syntax
      • This syntax allows one additional feature:
        • Inclusion of server-side JavaScript libraries
    • Keep your Themes clean
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • Automatic performance boost
      • JSF defines 6 page lifecycle phases
      • Themes are applied during the final phase
      • By default all applied component properties simply ignore the model
      • Themes are also cached
      • 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
    • Limitations
      • Due to the late binding, not everything can be defined in a Theme:
        • Value (iterated collection) of a repeat control
        • Page load bindings ( ${} ) like component id
      • Server-side SSJS libraries included via a Theme are available in the afterPageLoad event but not the beforePageLoad
      • “ Passthru” HTML components can not be modified via Themes
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • 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
    • Agenda
      • What is a Theme?
      • How are Themes typically used?
      • How do Themes actually work?
      • Going beyond the typical to...
        • Keep your XPage markup clean
        • Enhance application performance
        • Maintain device-targeted user interfaces
        • Streamline team development
    • Streamline team development
      • Thorough use of Themes facilitates a three-tier distribution of effort:
        • Advanced developers maintain script libraries and managed beans
        • Mid-level developers maintain Themes, defining how components utilize native and custom API's
        • Novices stick to “drag and drop”: add a component to the page, specify the appropriate themeId... done.
    • Easy to document for novices
      • Specification can just be a three-column table:
        • Purpose (copyright statement, corporate logo, home link)
        • Component type (computed field, image, link)
        • Theme Id
      • A novice can choose from the defined components, speeding up the process and reducing duplication of effort
    • The End
      • Heeft u nog vragen?
      • Avez-vous des questions?
      • Haben Sie Fragen?
      • ...any questions?
      Disclaimer: if any of the above phrases are complete nonsense, blame Google Translate.