Exercise 6.2: Changing styles directly

Before you begin, you must complete Exercise 6.1: Changing the rules for highlighted fields.

Instead of working with properties in the WebFacing project you can also change the styles being applied directly in the Cascading Style Sheet (.css) file that WebFacing uses. In this exercise you see where this file is located in the WebFacing Project structure and how to find your way around in this file.

To locate the Cascading Style Sheet file:

  1. Click the Navigator tab to switch to the Navigator view.


    The Navigator tab in the WebFacing perspective

  2. Locate the apparea.css file in the WebFacing project.
    Navigator view with apparea.css file

    It is located in the following directory hierarchy: wflabxx\WebContent\webfacing\styles\apparea\

  3. Double-click the apparea.css file icon in the Navigator view, to open an editor for this file.

    Next you change the WebFacing highlighted style class.

    The editor dialog will open and show the style source.

  4. Scroll down the source file until you reach the .wf-hi class.
    Editor dialog with apparea.css source located at the wf_hi class

    You'll notice your changes from the previous exercise are applied here. The WebFacing Tool has created style sheet classes for the different 5250 parts and attribute combinations and stored them here. Each of the lines starting with a dot is containing 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 name of the classes are self describing, for example .wf_hi defines how a part that has the highlighted attribute active gets displayed in the browser, wf_cs describes the column separator, etc. You can go in and change the display characteristics for any of the 5250 attributes.

    Next you change the color attribute of the highlighted class.

  5. Position the cursor at the end of the last line of the wf_hi class, before the ending curly (}) bracket.
  6. Press the Enter key to insert a line.
  7. Enter the color attribute you want to use, for example: color: red;
    Highlighted class color changed
    Note:
    Don't forget the semicolon to delimit the line.
  8. Save the change by clicking the Save icon in the workbench.
    Save button

    There is a feature available in the Style sheet editor that allows you to look at the changes you have made to a class directly in the editor without actually invoking the page and showing in a browser.

  9. Look at the left beside the Style sheet editor.
    Style change example in Style sheet editor

    To see the changed user interface, run the application again.

You have located the cascading style sheet file and edited it and now you are ready to begin Exercise 6.3: Testing the changed application.