Scenario

Although you have improved the Web user interface so that the green-screen style is not as apparent as it is after basic WebFacing conversion, you can still add extra refinements to your Web pages. I will show you how you can do this with the WebFacing Tool style properties.

Start the WebFacing Style Properties Dialog

First, you will use the WebFacing style properties dialog to tailor your Web user interface.

You will apply changes to the window layout of your screens, thus changing the subfile appearance, and you will enhance the command key push button appearance.

• Start WebSphere Development Studio Client and open the WebFacing perspective, if it is not up and running already.

• In the WebFacing Projects view, right-click your wflabxx project.

• Select Properties from the pop-up menu.

The project properties dialog opens as shown in Figure 9.1.

Figure 9.1: The WebFacing project properties dialog

• Under Style in the tree view on the left side of the dialog, select Window.

The window properties page opens on the right pane of the dialog as shown in Figure 9.2.

Figure 9.2: Window properties page

• Select Title in the combination box at the top of the page.

In the Foreground group box,

• Click the push button to the right of the Color combination box.

In the color selection dialog,

• Click Yellow.

• Click the OK push button in the color selection dialog.

Back in the Foreground group box,

• Click the push button to the right of the Font combination box.

In the Font dialog,

• Select font Comic Sans MS, size 16.

• Click the OK push button in the Font dialog.

In the Background group box,

• Click the push button to the right of the Color combination box.

In the color selection dialog,

• Click Green .

• Click the OK push button in the color selection dialog.

Back in the window properties page,

• Select Body in the combination box at the top of the page as shown in Figure 9.3.

  
  Figure 9.3: Window properties page with Body selection

In the Border color combination box at the bottom of the page,

• Click the push button to the right of the combination box.

In the color selection dialog,

• Select Blue .

• Click the OK push button in the color selection dialog.

Changing the Appearance of the Subfile

• Back in the properties dialog, under Style in the tree view on the left side, select Subfile .

The subfile properties page opens on the right pane of the dialog, as shown in Figure 9.4.

Figure 9.4: Subfile properties page

• Select Subfile record - odd row in the combination box at the top of the page.

In the Background group box,

• Click the push button to the right of the Color combination box.

In the Color chooser dialog,

• Select a light yellow color.

Tip  

If you are interested in the hex value of certain colors as they are used in the style classes, the Color chooser displays the hex values. In Figure 9.5, the hex value is FFFFCC.

Figure 9.5: Color chooser for WebFacing properties

• Click the OK push button in the Color chooser dialog.

Back on the properties dialog,

• Select Subfile record - even row in the combination box at the top of the page, as shown in Figure 9.6.

  
  Figure 9.6: Properties page for subfile even rows

In the Background group box,

• Click the push button to the right of the Color combination box.

In the Color chooser dialog,

• Select a light green color.

• Click the OK push button.

Now at run time the odd and even records will be displayed with different background colors.

Next, you will customize the appearance of the command key push buttons .

Customizing the Appearance of Command Keys

Return to the left side of the properties dialog. Under Style in the tree view,

• Select Command keys .

The command keys properties page opens on the right pane of the dialog, as shown in Figure 9.7.

Figure 9.7: Command keys properties page

In the Foreground box, change the color for all three states of the buttons:

• Default

• Rollover

• Button down

Your customizations are complete.

• Click the OK push button in the properties dialog.

Running the Web Application

Now you can see the new look of your application.

• Right-click your wflabxx project.

• Select Run on Server from the pop-up menu.

• Run the application.

• Click Prompt .

The application window in Figure 9.8 shows different colors, and the subfile records are also colored. The command key push buttons change color, depending on the state they are in.

Figure 9.8: New window and subfile styles applied