elstar IT

Last month I wrote a small blog about the Power of Themes. To me the must start of a XPages project.

A themes is in the basic just a XML file, like many other files in a XPages application. So when you are forget a XML tag to close properly you will be prompt when you build the application with malformed error.

Extending themes

The first tag in the Theme file is the <theme> tag, and as you can see, you can extend other themes in this tag. This is a very usefull, becuase you can benefit from other themes and don’t need to write all the theme components.

[dropshadowbox align=”none” effect=”lifted-both” width=”250px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]<theme extends=“Bootstrap3.2.0”>[/dropshadowbox]

Resources

Another nice thing about themes is to be a central place to declare all your ‘external’ resources, like css, javascript files. But also meta tags you need across you entire application

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<resources>

        <metaData>

            <name>viewport</name>

            <content>width=device-width, initial-scale=1.0</content>

        </metaData>

    </resources>

<resource>

        <content-type>text/css</content-type>

        <href>libs/fontawesome/css/font-awesome.min.css</href>

</resource>

[/dropshadowbox]

Expression Language

In the Themes you can also use Expression Language, so you can benefit from other Java resources in the XPages application. One nice example is the favicon, which is stored in a configuration file or application title

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control override=“false”>

        <name>ViewRoot</name>

        <property>

            <name>pageTitle</name>

            <value>#{javascript:database.getTitle();}</value>

        </property>

        <property>

            <name>pageIcon</name>

            <value>#{javascript:configBean.getFaviconURL()}</value>

        </property>

</control>

[/dropshadowbox]

Components

In the Theme you can override existing components of the XPages runtime, with you own style or properties. For a list of available components, navigate to the <Notes program>xsp\nsf\themes directory. Inside this folder you will fin all themes used by the XPages runtime. Open it will you preferred text editor and start searching for you component. There is comments above the components, so it is not that difficult to find the desired component.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control>

        <name>DataTable.ViewPanel</name>

        <property>

            <name>dataTableStyleClass</name>

            <value>table table-hover</value>

        </property>

</control>

[/dropshadowbox]

In the above example I override the style of the ViewPanel Table class to meet the style of Bootstrap of tables. As you can see, it is only a few lines of code, but all the view panels in the XPages application will behave like a Bootstrap table with hover colouring.

Theme Id

Theme Id’s is another powerful functionality of Themes. In a Theme you specify a theme id component. Give it a unique name. Best way to follow the way IBM is using, so you will later understand the use of the theme component.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<!– Primary Button –>

<control>

        <name>Button.Primary</name>

        <property>

            <name>styleClass</name>

            <value>btn btn-primary</value>

        </property>

</control>

[/dropshadowbox]

Inside the application to assign this theme name as ThemeId to a component and on runtime the button will behave as primary Bootstrap button.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<xp:button id=“buttonSave” themeId=“Button.Primary”>

</xp:button>

[/dropshadowbox]

Advanced power

In my application I am using bootstrap to make it responsive. One of the not so nice components that needs some love to meet the Bootstrap look and feel is the Pager.

I have created a custom Java renderer, which convert the standard Pager.

In the Theme I specify the component who will use the Renderer.

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control>

        <name>Pager</name>

        <property>

          <name>rendererType</name>

          <value>nl.elstarit.renderers.type.BootstrapPagerRenderer</value>

        </property>

      </control>

[/dropshadowbox]

The RenderType is pointing to a Renderkit component I created in the Faces-config.xml, which is pointing to the actual Java Class who do the magic

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<!– Bootstrap render pager –>

  <render-kit>

    <renderer>

      <component-family>com.ibm.xsp.Pager</component-family>

      <renderer-type>nl.elstarit.renderers.type.BootstrapPagerRenderer</renderer-type>

      <renderer-class>nl.elstarit.renderers.BootstrapPagerRenderer</renderer-class>

    </renderer>

  </render-kit>

[/dropshadowbox]

When the page is rendered the pager looks now like this.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

I hope this will help to understand the power of Themes. Almost everything configured in one place.