1. Introduction

IBM WebSphere Application Server Enterprise Process Choreographer provides a ready-to-use Web user interface based on JSPs and servlets. The interface allows users to access business-process applications. You can use this Web interface as is or adapt it to fit your needs.

Typically, user interfaces for business-process applications often require customization, for example, adapting the user interface to fit a corporate look and feel.

This article is one of a series of articles that provide step-by-step instructions and examples to help you customize and extend the Process Choreographer Web Client. It describes the components of the Web Client user interface and gives an overview of how you can adapt the look and feel of the Web Client, for example, to fit your corporate user interface guidelines.

The following articles are available:

• Part 1: Adapting the look and feel
• Part 2: Managing user-defined worklists
• Part 3: Defining business-process specific JSPs

Back to top

2. Overview of the Web Client user interface

This section gives an overview of the components of the user interface and how they are implemented.

2.1. Layout

Figure 1 shows the layout of the Web Client user interface:

The header and the navigation panes are always displayed. They are generated by Header.jsp and Navigation.jsp. Other JSPs use the <jsp:include page=xxx> tag to reference them. The information shown in the content pane depends on the JSP that is used to generate the page.

2.2. Implementation of the layout

The layout of the Web Client is implemented with HTML tables. Each page consists of the main table and the Header.jsp pane. Figure 2 shows an overview of the page implementation:

The main table has one row and one column and includes the Navigation.jsp pane. It also provides a table cell for the page content. Depending on the content, this cell can also contain tables, forms, and labels. Figure 3 shows the HTML template for the page layout:

Cascading style sheets are used in the HTML template to specify the style properties of each HTML element. This style sheet (dwc.css) can be found in the %WEBSPHERE_HOME%\installedApps\%NODE_NAME%\BPEContainer.ear\bpewebclient.war\css directory.

Back to top

3. Modifying the look and feel

This section describes how you can easily adapt the look and feel of the Web Client without writing new JSPs. You can:

• Modify the header
• Modify the style sheet

3.1. Modifying the header

The Header.jsp is always displayed in the Web Client. The default Header.jsp contains logos, images, and a link to the WebSphere Application Server Enterprise InfoCenter. You can modify this JSP or replace it with your own user-defined header. For example, you can modify the Header.jsp so that it contains a header image only.

3.2. Modifying the style sheet

The style sheet that comes with the Web Client contains styles for the following HTML elements:

• h3
• h4
• p
• a
• th
• td

This file also contains classes, mainly for table and table-cell elements. You can modify the styles specified in dwc.css, for example, to use other font sizes or styles, modify table-header styles, or change the background color.

About the author

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• 1. Introduction
• 2. Overview of the Web Client user interface
• 3. Modifying the look and feel
• About the author
• Comments

Next steps from IBM

• Try: WebSphere Application Server
• Webcast: Using Rational Application Developer with WebSphere Application Server to increase productivity
• Briefing: Building SOA solutions and managing the service lifecycle
• Buy: WebSphere Application Server

My developerWorks community

Dig deeper into WebSphere on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers