You can use themes to specify and control the appearance of the user interface (UI) in Web applications.
A theme is a collection of style information that can be used to drive builder inputs that provide the application UI in your model. This information can include but is not limited to HTML templates, style sheets (CSS), base pages, highlighting style, and paging style.
The UI-related builder inputs associated with a theme are contained in a simple XML file with the .uitheme
extension. Themes supplied by IBM® WebSphere® Portlet Factory are stored in the WEB-INF\factory\themes
folder. In addition to the default project theme, wpfbase.uitheme
, the green.uitheme
and the blue.uitheme
files are supplied. The following code shows lines from blue.uitheme
Theme support is provided on multiple levels.
- Project-level theme support
- Model theme support
- Builder input theme support
Project-level theme support
Theme support within a project is defined by a single property setting. A default WebSphere Portlet Factory theme can be applied in builders and models in a project. The default theme is specified in the bowstreet.themeFile
property in the cluster.properties
file in WEB-INF\config\
. To specify a different default theme, place a line similar to the following one in the override.properties
file for your project and indicate a different .uitheme
You enable use of the theme support by setting the Use Theme
input in the following builders.
View and Form
With the Use Theme
input enabled in these builders, the base pages, HTML template, and style sheets to use are fetched from values in the theme rather than from inputs specified in the builders. This arrangement lets you centrally change the look of your application without having to edit each of the builders.
Model theme support
In a single model, you can override the theme used by including a Theme builder. The Theme builder overrides the project theme if one was specified or can let you override individual theme-driven inputs for certain builders. The Theme builder also lets you create your own theme file.
Builder input theme support
For UI-related builders other than Data Page, Input Form, and View and Form, you can use an indirect reference to theme property data that you create. For an individual builder input, you can define an element and a related value in the theme file and refer to that definition in the related builder input. For example, for a button image, you define in the theme file an element that specifies the path to the image file and use the indirect reference in the related builder inputs to access the related property data. With this arrangement, you can define a single type of input in one place and refer to it in multiple builders.
Style sheet determination
HTML templates provided by WebSphere Portlet Factory do not refer directly to a style sheet to use but provide a style sheet hint (StyleSheetHint
). The following precedence is used when determining the style sheet to apply in the Web application.
- Builder input
If a UI-related builder like Data Page has a value specified for the Style Sheet Override input, that style sheet is used.
- Theme file
If no Style Sheet Override input is specified and the theme being used has a definition for a CSS for a particular builder, that CSS is used.
- Style sheet hint
If no Style Sheet Override input is specified and theme file value is not specified, the hint in the related HTML template determines the CSS file used.
Themes and style sheets in different portlets
If you intend to use different themes in different portlets on the same portal page, ensure that your themes use unique style sheet class names to avoid collisions. To ensure uniqueness in the different portlets, change all the class style names in the HTML template files, and in the corresponding style sheet. For example, you cannot use the two supplied themes (blue.uitheme
files) in different portlets placed on the same portal page. The themes share a common HTML template and therefore use the same style sheet class names, which will collide.
These class style name changes may have to be done for other base pages and style sheets as well.
Theme control for button styling
You can apply styling for buttons used in a paging builder in web applications. The .uitheme
file can have multiple elements that start with Button_ActionRole_, for example, Button_ActionRole_Submit. These elements specify the name of a CSS class. You can use these elements to apply different styles for buttons. The default role is Default. The blue.uitheme
file has one role class: Button_ActionRole_Default = wpfBlueButton
Parent topic: Changing a theme property for a project