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:  

Two new technologies

XPages and Themes are two new technologies that allow Lotus Domino Web application developers to quickly and easily control their Rapid Application Development (RAD) projects, while also allowing developers to extend and completely control the rendered output to the Web browser client. This section provides an introduction to both XPages and Themes specific to the requirements for this tutorial's example project.

Introducing XPages

XPages are a new and extremely powerful design element to IBM Lotus Domino 8.5, and they will be fully used to render the Web client user interface to your example project. Let's review the functional capabilities of XPages specific to your needs for this tutorial.

There are many built-in capabilities provided to the Lotus Domino Web application developer by XPages, but for the purposes of this tutorial you will focus on the following:

  • Inline XHTML in XPages
  • The XPage repeat control
  • The XPage computed field control

Inline XHTML in XPages

I had no idea just how amazing XPages were until I found out that I could use XHTML, inline CSS, and JavaScript in my XPage development efforts through direct construct through the XPage source pane. In Big Brother, you will lean rather heavily on this option in order to illustrate just what XPages bring to a Lotus Domino Web application developer's arsenal.

The ability to add XHTML, CSS, and JavaScript directly to your XPage using the source pane gives you the ability to use alternate markup editors to create user interfaces to your Lotus Domino Web applications. Additionally, this allows you to easily port both existing Web application user interfaces from both Lotus Domino and ancillary Web technologies, or quickly use templated or third-party markup such as, but not limited to, XHTML layout templates and inline JavaScript calls to public JavaScript libraries.

Figure 1 shows the addition of simple HTML markup in combination with an XPage repeat control, as viewed from the XPage source pane.


Figure 1. XPage repeat control
XPage repeat control

The XPage repeat control

You will use the XPage repeat control in combination with a defined view data source to render XHTML tables rows, so you should have at least an elemental understanding of the XPage repeat control.

The XPage repeat control can be compared to a For All in LotusScript, as the contents within the repeat control will be displayed For All items whose condition is met in the defined data source. For the purposes of this tutorial, you will use two repeat controls to render the XHTML generated from the people and locations views.

The XPage computed text control

You will use the XPage computed text control in combination with the repeat control to create the XHTML table rows per NotesDocument from your view data sources. This, combined with the surrounding inline XHTML markup, allows you to render what will appear as embedded views in your Web browser client-user interface.


What are Themes?

You will use Themes, another new and equally powerful design element in Lotus Domino 8.5, to control the rendered CSS and HTML markup generated by your XPages. Let's review Theme development in Lotus Domino Web application development specific to your needs for this tutorial.

XPages (as well as classic Lotus Domino Designer elements such as forms and views) when rendered through the HTTP Task and delivered to a Web browser client will use Lotus Domino-generated markup. In prior releases, you had no ultimate control over what markup was delivered to the browser while using Lotus Domino RAD techniques for Web application development. With Lotus Domino 8.5, you can now use Themes to control various characteristics, and thus the resultant rendered markup, of defined design elements and design element objects.

Simply put, Themes allow you to control exactly what you want to render to the Web browser client. When they are used in combination with XPage design elements, you get a combination of Lotus Domino Web RAD and better control over the on-screen application.


Example theme markup

Those familiar with the XML DTD (Document Type Definition) will immediately see the correlation to Themes in Lotus Domino Web development. In fact, Themes are even written in XML, which is interpreted at runtime to modify rendered content in the Lotus Domino HTTP task.

Listing 1 shows a simple example of Theme markup for adding a custom styleClass to a computed text control.


Listing 1. Theme markup for adding custom styleClass to a computed text control

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

This Theme markup will affect all computed text controls (Text.ComputedField) on XPages (target='xsp'), setting the styleClass property to tablerow.

You can alternately modify an individual or group of defined control objects by creating a ThemeID and applying that ThemeID to the control objects you want to modify.

For example, let's say you want all submit buttons to render with a specific styleClass, as you have CSS applying a unique look to your submit buttons across your application (see listing 2).


Listing 2. All submit buttons render with a specific styleClass

    <control target="xsp" override="true">
        <name>button.action.submit</name>
        <property mode='override'> 
            <name>styleClass</name>
            <value>submitbutton</value>
        </property>
    </control>

Now, in your XPage source, you simply add the ThemeID to the ThemeID property for your control objects (see listing 3).


Listing 3. Add the ThemeID to the ThemeID property

    <xp:button value="Save Changes" id="button1"
        themeId="button.action.submit">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" immediate="false" save="true">
        </xp:eventHandler>
    </xp:button>

When rendered, you now have the following markup sent to the Web browser client (see listing 4).


Listing 4. New markup for the client

No ThemeID applied:

    <button id="view:button1" name="view:button1" 
type="button">Save Changes</button>

"button.action.submit" ThemeID applied:

    <button id="view:button1" class="submitbutton" name="view:button1" 
type="button">Save Changes</button> 

The ability to access global control objects through type or alternately to define a ThemeID gives you the ability to create MetaThemes for your Lotus Domino Web applications and will also greatly assist you in good development standards practices when used properly. Consider this: With a thoroughly defined set of control objects and ThemeIDs, you can easily skin your enterprise applications both for functionality as well as visual standardization.

For a complete list of all XPage control objects try the following:

  1. Using Microsoft Windows Explorer, navigate to your <Lotus Notes Client "Notes" directory>\xsp\nsf\themes.
  2. Create an Operating System (OS) copy of the webstandard.theme file.
  3. Rename your OS copy file to webstandard.xml.
  4. Open webstandard.xml in your preferred XML editor (Notepad, Textpad, Aptana, Eclipse, for example)

The webstandard.theme file contains a list of all XPage control objects, which will enable you to start manipulating the control objects at the global and individual level.


Resources in themes

Themes also allow you to control which resources are added to specified design elements. The following Theme markup in listing 5, for example, will add the main.css style sheet to your XPage design elements.


Listing 5. Adding the main.css style sheet to your XPage design elements

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

Unlike the Theme control objects, which are defined explicitly through control object type or ThemeID, resources can be conditionally rendered through defined logic using the rendered attribute of the resource object. In listing 5, the main.css style sheet will always be rendered as a resource in the design elements using this Theme because the javascript:true condition is always met.

Now that you have a better understanding of both XPages and Themes technologies available to the Lotus Domino Web application developer with the IBM Lotus Notes and Lotus Domino 8.5 Release, it's time to start building the Big Brother example project.

2 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