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 extends="/WEB-INF/factory/themes/">
<DataPage_StyleSheetOverride>/factory/html_templates/gridtable_blue.css</DataPage_StyleSheetOverride>
<ViewAndForm_ViewPageStyleSheetOverride>/factory/html_templates/gridtable_blue.css</ViewAndForm_ViewPageStyleSheetOverride>
<ViewAndForm_HighlighterBackground>#60A1EA</ViewAndForm_HighlighterBackground>
<ViewAndForm_HighlighterForeground>#FFFFFF</ViewAndForm_HighlighterForeground>
<InputForm_StyleSheetOverride>/factory/html_templates/gridtable_blue.css</InputForm_StyleSheetOverride>
<PagingLinks_BasePage>/factory/pages/paging/data_paging_links_blue.html</PagingLinks_BasePage>
.......
</Theme>
Theme support is provided on multiple levels.
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 file.
bowstreet.themeFile=/WEB-INF/factory/themes/blue.uitheme
You enable use of the theme support by setting the
Use Theme input in the following builders.
Data Page
Input Form
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 and
green.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