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.
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.
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
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.
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’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.
Inside the application to assign this theme name as ThemeId to a component and on runtime the button will behave as primary Bootstrap button.
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.
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
When the page is rendered the pager looks now like this.
I hope this will help to understand the power of Themes. Almost everything configured in one place.by