Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

developerWorks Community:

  • Close [x]

XPages, Themes, and Mashups in Domino Web Application Development

Creating the Big Brother mashup application

Summary:  XPages and Themes are two new technologies available to Lotus Domino Web application developers with the release of IBM Lotus Notes and Lotus Domino 8.5. They provide more flexibility and greater control over what is delivered to the Web browser client screen than any previous release. XPages leverages a new JavaServer Face rendering engine while Themes allows even further control to manipulate the content -- from CSS declarations to XML markup rendering -- that is displayed. In this tutorial, you will use both XPages and Themes to create an enterprise-class salesforce tracking and task assignment Lotus Domino Web application. To further showcase the advanced capabilities of the technologies available to Lotus Domino Web application developers, the example for this tutorial is a mashup application featuring functional OpenStreetMap and GeoCoder integration.

Date:  16 Dec 2008
Level:  Intermediate

Activity:  58 views
Comments:  

Working with Themes for Lotus Domino design elements

In this section, you will take your existing project and use Themes to both streamline and future-proof your mashup application. By using Themes to structure the markup used in your build project, you will allow for easier maintenance and control of the applied CSS and generated XML for each XPage in your application.

Working with Themes

A Theme is a defined XML object and attribute overwrite rendering template. Themes can be used to conditionally include Lotus Domino design resources like stylesheets and script libraries or to define or extend attributes for XPage controls. They can additionally be used to extend existing Themes, which allows Lotus Domino Web application developers to apply rulesets defining when, for example, a given XPage computed field control will render in the Web browser client with a styleClass of xspTextComputedField or simply CFD.

You'll start by creating a new Theme in Big Brother, and you'll use that to include a main.css stylesheet in your index.xsp XPage (see figure 20).


Figure 20. New Theme Dialog - Creating your xhtml_voodoo Theme
New Theme Dialog - Creating your xhtml_voodoo Theme

Your Theme, which you will name xhtml_voodoo, can be applied as the default Theme for design elements in your example application.

To apply the xhtml_voodoo Theme as the default, you can simply open the application properties from Lotus Domino Designer and select it (see figure 21).


Figure 21. Application Properties - Default Theme Definition
Application Properties - Default Theme Definition

From your xhtml_voodoo Theme, you will add both the inclusion of the main.css stylesheet as well as a styleClass definition for computed field controls with the following Theme markup (see listing 12).


Listing 12. Defining xhtml_voodoo

<theme>

    <resource rendered="#{javascript:true}">
        <content-type>text/css</content-type>
        <href>/main.css</href>
    </resource>

    <control target="xsp" override="true">
        <name>Text.ComputedField</name>
        <property mode='override'> 
            <name>styleClass</name>
            <value>tablerow</value>
        </property>
    </control>
    
</theme>

The first thing that you will notice is the inclusion of the main.css stylesheet resource. This declaration uses the rendered attribute to control how the defined stylesheet includes when the XPage is processed through the Lotus Domino HTTP server. In this case, you will want your stylesheet to always render, so you've used javascript:true, which is a condition that will always be met. You could alternately use the rendered attribute in combination with the JavaScript Expression Language to define more conditional rendering logic.

The next Theme declaration is your override of the computed field control for XPages. Here you use the control object's target attribute to define the affected design elements. The declaration of xsp states that this applies to all XPages that use this Theme.

The inclusion of the control object's override attribute declares that the following control will act as the absolute definition for the given control object, overwriting any built-in or previously defined object attributes.

The Name is used as an absolute or global handle on a given control; either through reserved name usage or through custom, developer-defined names.

NOTE: For a complete list of all XPage reserved name control objects, open webstandard.theme with your preferred XML editor. This file is located in <Notes Client Installation Directory>\xsp\nsf\themes cirectory on any local machine where Lotus Domino Designer 8.5 is installed.

Using custom, developer-defined names for Control object declarations in Themes can be the functional equivalent to defining cross-HTML element class names. Themes can be used to manipulate given object attributes such as styleClass just as CSS can be used to modify the visual rendering of HTML elements such as display and background-color.

These custom, developer-defined names for control objects are referred to as ThemeIDs. To set a given XPage Control object's ThemeID do the following:

  1. Highlight/select the given Control object (see figure 22).


    Figure 22. Assigning a ThemeID to an XPage Computed Field Control
    Assigning a ThemeID to an XPage Computed Field Control

  2. In the Object Properties pane, through the Style section, define the ThemeID directly through the Theme field, either through static text or by using the JavaScript Expression Language.
  3. Define a new control object definition for your ThemeID (see listing 13).


    Listing 13. Defining a new control object definition
    
        <control>
            <name>tablerow</name>
            <property mode='override'> 
                <name>styleClass</name>
                <value>tablerow</value>
            </property>
        </control>
    

When rendered, any XPage control object whose ThemeID is tablerow will render with the styleClass of tablerow, or when rendered through the Lotus Domino HTTP server, the affected HTML elements will render with a tablerow Class attribute.

Your simple xhtml_voodoo Theme shows the start of how you can take XPages, which are already extremely powerful tools for the Lotus Domino Web developer, and extend them even further to conditionally apply resources, specific and global control attributes. Themes allow Lotus Domino Web developers to use the RAD techniques with complete control over the rendered output.

6 of 10 | Previous | Next

Comments



static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=359309
TutorialTitle=XPages, Themes, and Mashups in Domino Web Application Development
publish-date=12162008