Exercise 6.1: Changing the rules for highlighted fields

During this exercise you will use the Style Properties dialog in the IBM WebFacing Tool to tailor your Web user interface. You will change the rules for highlighted fields in the 5250 panels so they appear more visible in the Web user interface. The style for highlighted fields will be altered so at runtime the text font will be different and a larger font size will be applied.

To change the rules for highlighted fields:

  1. Start the workbench of the product and open the WebFacing perspective, if it is not up and running already.
    WebFacing project with popup menu
  2. Right-click the wflabxx project.
  3. Click Properties on the pop-up menu.

    The WebFacing project properties dialog opens.
    WebFacing project properties

  4. Under Style in the left pane of the Properties for wflabxx, click DDS Field Display Attributes.

    In the right pane of the Properties for wflabxx, the DDS Field Display Attributes pane opens.
    DDS field display properties

  5. Click the .. push button to the right of the High intensity field.

    The Font dialog opens.
    Font dialog

  6. Under the Font list, select Comic Sans MS.
  7. Under the Font style list, select Bold.
  8. Under Size, select 16.
    Note:
    Don't try to change the color in this dialog, the color setting doesn't work, later in this module you will see how to change the color.

    This changes the font size and appearance for parts that have the high intensity attribute active.

  9. Click OK on the Font dialog.
  10. On the Properties page, click OK.

Checking the new style

Let's check the new style in your application.

To check the new style:

  1. Right-click index.jsp in the WebFacing Projects view.
  2. Click Run > Run on Server on the pop-up menu.
  3. Go to the browser pane and click the Order Entry link.

    You will see the first screen of your application.

    Note:
    See the different font and font size of some of the text; these are the highlighted areas of your 5250 screen.
  4. Prompt for the customer.

    The customer selection screen has highlighted text and this text should show in font Comic Sans MS and size 16.
    New highlight attribute mapping and non-CUA command key description

    Note:
    If the text is still showing the old fonts, most likely the browser has cached the page and you need to close the browser window, and restart the application. This will bring up a new instance of the browser without cached content.
  5. The Font dialog has a bug that makes it impossible to change the Font colors directly. Next you see how to directly change WebFacing style classes.

You have started the Style Properties dialog, changed the DDS Field Display Attributes and checked the new style and now you are ready to begin Exercise 6.2: Changing styles directly.