Portlet Factory, Version 6.1.2

 

Themes and user interface control

 

+

Search Tips   |   Advanced Search

 

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
• 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 WPF are stored in...

WEB-INF\factory\themes

Bundled project themes...

• wpfbase.uitheme
• green.uitheme
• blue.uitheme

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
• Model theme support
• Builder input theme support

 

Project-level theme support

Theme support within a project is defined by the property bowstreet.themeFile in...

WEB-INF\config\cluster.properties

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 & 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 which 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 & 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 WPF 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) 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 builder

  The Theme builder changes the theme and therefore the HTML base pages, HTML templates, and styles just within a model.

• Change a theme property for a project

  You can change a property for the default theme of a project.

• Create a theme file

  You can create a theme file to provide your own custom look for your application.

• Set the global theme

  You can set a single property to specify a theme file to be used within a project.

• Indirect references to theme property data

  You can directly enter an indirect reference in the reference chooser to provide access to theme properties data.

Parent topic: Overview: creating pages and forms