Scenario | Understanding the IBM WebFacing Tool: A Guided Tour (IBM Illustrated Guide series)

You want to change how the WebFacing Tool maps some of the display attributes to colors and text styles. To give the Web user interface a better look, you need to change the default WebFacing style rules that govern how certain 5250 parts are displayed in a browser. In this chapter, you will learn how to change the style rules for highlighted fields.

Invoking the Properties Style Dialog

In this exercise, you will use the WebFacing Tool's Properties Style dialog to tailor your Web user interface. You will change the style rules for highlighted fields in the 5250 panels so that the font is larger in the Web user interface.

Start WebSphere Development Studio Client and open the WebFacing perspective, if it is not up and running already (see Figure 7.1).

Figure 7.1: WebFacing project with pop-up menu
Right-click your wflabxx project.
Select Properties from the pop-up menu.

The WebFacing project Properties dialog opens as shown in Figure 7.2.

Figure 7.2: WebFacing project properties

Under Style in the tree view at the left side of the dialog, click DDS field display attributes, as shown in Figure 7.2.

The DDS field display attributes page opens on the right side of the dialog as shown in Figure 7.3.

Figure 7.3: DDS field display properties

Click the push button to the right of the High intensity combination box.

The Font dialog opens as shown in Figure 7.4.

Figure 7.4: Font dialog

In the Font box, select Comic Sans MS.
In the Font style box, select Bold.
In the Size box, select 16. This changes the font size and appearance for parts that have the high-intensity attribute active.

Tip
Do not try to change the color in this dialog because the color settings here are not applied. Later in this chapter I will show you how to change the color .
Click the OK push button.

Running the Web Application

Let's check the new style in your application:

Right-click your wflabxx project in the WebFacing Projects list.
Select Run on Server from the pop-up menu.
Go to the browser pane and click the Order Entry link.

You will see the first screen of your application. Notice the different font and font size of the text; these are the highlighted areas of your 5250 screen.

Execute the prompt for the customer. The customer selection screen contains highlighted text and this text displays in font Comic Sans Serif at size 16, as shown in Figure 7.5.

Figure 7.5: New highlight attribute mapping and non-CUA command key description

Tip	If the text still displays in the old fonts, most likely the browser has cached the page. You need to close the browser window and restart the application. This will invoke a new instance of the browser without cached content.

Unfortunately, the Font dialog contains a bug that hinders you from using the dialog to change the font colors. Therefore, I will show you how to directly change WebFacing style classes.

Changing Styles Directly

In addition to working with properties in the WebFacing project, you can change the applied styles directly in the Cascading Style Sheet .css file that the WebFacing Tool uses. I will explain where to find this file in the WebFacing Project structure and how to navigate inside the file. In Chapter 17, I explain how to create your own style sheet classes and use them in a WebFaced user interface.

Locating the Cascading Style Sheet File

In the WebFacing perspective, switch to the Navigator view.

Click the Navigator tab as shown in Figure 7.6.

Figure 7.6: The Navigator tab in the WebFacing perspective

In the Navigator view,

Locate the apparea.css file in the WebFacing project as shown in Figure 7.7. This file is located in the following directory hierarchy:
```
 wflabxx/Web Content/styles/apparea/ 
```
Figure 7.7: Navigator view with apparea.css file

Tip
For Version 4.0 users, the directory structure is slightly different:
```
 wflabxx/webApplication/styles/apparea/ 
```
Double-click on the apparea.css file icon in the tree view to open an editor for this file.

Changing the WebFacing Highlighted Style Class

The editor dialog displays and shows the style source.

Scroll down the source file until you reach the .wf_hi class as shown in Figure 7.8.

Figure 7.8: Editor dialog with apparea.css source located at the .wf_hi class

You can see the changes from the previous exercise applied here. The WebFacing Tool created style sheet classes for the different 5250 parts and attribute combinations. These items are stored here.

Each of the lines starting with a dot contains a style class name. The statements inside the curly brackets after the style class name describe the attributes of the class itself. For this WebFacing .css file, the class names are self-describing . For example, .wf_hi defines how a part that has the highlighted attribute active is displayed in the browser, and .wf_cs describes the column separator.

You can change the display characteristics for any of the 5250 attributes. For example, to change the color attribute of the highlighted class, complete the following steps:

Position the cursor at the end of the last line of the .wf_hi class before the ending curly (}) bracket , as shown in Figure 7.8.
Press the Enter key to insert a line.
Insert the color attribute you want to use, for example,
```
 color:  #ffff99  ; 
```
as shown in Figure 7.9.

Figure 7.9: Highlighted class color changed

Tip
Do not forget the semicolon at the end of the item to delimit the line.
Save the change by clicking the save button in the workbench.

For Version 5.0 users, a nice feature is available in the Style sheet editor. You can view the changes you have made to a class directly in the editor without actually invoking the page and showing it in a browser. Look at the right side of the workbench beside the editor as shown in Figure 7.10.

Figure 7.10: Style change example in Style sheet editor

If you are wondering what color is represented by the hex code ffff99, you can find out easily. You can see on a small sample to the right how the text appears after you apply the style.

Look into the area underneath the editor in the workbench as shown in Figure 7.11.

Figure 7.11: Color tab example

Select a color from the color palette.

The corresponding hex number appears in the dialog as shown in Figure 7.11.

Tip
Instead of a hex number you could use a color name such as yellow to set a color for a style class.

To see the changes you have made to the interface, run the application again.

Running the Web Application

Close the Style sheet editor and the browser if they are still open.

Close all open editors or views by clicking the X in the right upper corner of each one.

Now you can check the new style attribute in your application:

In the WebFacing perspective, right-click your wflabxx project in the WebFacing Projects list, or Navigator view.
Select Run on Server from the pop-up menu.
Go to the browser pane and click on the Order Entry link.

You will see the first screen of your application. Notice the different color of the text in the highlighted areas of your 5250 screen.

Execute the prompt for the customer. The customer selection screen shows the same changed attribute. Remember that style changes are applied to all screens of the application as shown in Figure 7.12.

Figure 7.12: New color attribute applied to highlighted style class

Tip	If the text is still showing the old colors, most likely the browser has cached the page. You need to close the browser window and restart the application. This will invoke a new instance of the browser without cached content.

You might not have noticed it before, but there is still a command key description at the bottom of the customer selection window as shown in the circle in Figure 7.12. As you may have guessed, you will fix this in the next exercise.