UI branding in the web UI framework

The Web UI Framework allows you to change the UI branding to your own brand name, including company logos. You can use the Ext JS Plugins to customize the look and feel.

You can also change the theme and other items. A sample application can be divided into the following two parts:
  • Themes
  • Layout

Themes

All of the themes used in the Web UI Framework use CSS files that can be overridden by:

  • Putting the overridden entries in a directory. A custom CSS file can be placed anywhere.

    Use the IncludeCSS tag to override the CSS file. The IncludeCSS tag supports a locale. Use the localized file of the CSS for the corresponding locale. The localized file can then be used to override the CSS.

    Example:
    <scuitag:includeCSS path="/sfs/resources/default/css/sfs-core.css" />
  • Using the post authentication implementation (ISCUIPostAuthenticationProvider).

Layout

This is a sample layout that can be used as a starting point by an application. You can choose to design your own custom layout, but this type of layout structure is recommended.

The screen layout can be divided into five different parts as shown below.

A sample screen for an airline management system, with five parts
Table 1. Screen layout
Section of Screen Layout Diagram Screen Layout Part Description
A Header Consists of application name, company logo, static links, logged-in user's information, and a background image.
B Menu The Web UI Framework provides the capability to include menu in a screen. Users can call a JavaScript function by passing the ID of the HTML element where the menu should be rendered. The menu entries are fetched from getUserHierarchy API for the logged-in user.
C Page Header Consists of page title and one or more panels.
D Page or Screen Consists of one or more panels.
E Footer Consists of static links and copyright information.