Scenario


You want to improve the user interface generated by the WebFacing Tool. In particular, you want to improve the customer selection subfile. Currently, the Web user interface you use to select a record from this subfile does not behave the way you would like, because you need to key a 1 into the options column to select a record. This mimics exactly how the green screen works. However, you would like it to behave more like a Web user interface, where you select an item by clicking on a link.

When you use Web settings in CODE Designer, you enhance the user interface but you do not change the underlying function of the application. I will show you how to use Web settings capabilities in CODE Designer to make the necessary modifications.

You will change the second column in the customer selection subfile, which contains the customer name, from a simple text output field to a link. When the user clicks on this new customer name link, the correct information is sent to your program. You might ask, what is the correct information? What is your program expecting? It is expecting a 1 in the subfile Options field for the selected customer record. The WebFacing conversion will add logic to the user interface, so that the Options field is filled with a 1 and the Enter key event is invoked when the user clicks the link.

Accessing DDS Display File Source

Since you will use the WebFacing perspective to invoke CODE Designer, you begin this exercise using Development Studio Client in the WebFacing perspective.

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

In the WebFacing perspective, make sure that you are in the WebFacing Projects view and not the Navigator view (as indicated by the tabs at the bottom of the view ”see Figure 6.1).

click to expand
Figure 6.1: Pop-up menu for DDS source member
  • Expand your project in the tree-view by clicking on the plus sign (+) beside the wflabxx WebFacing project icon, as shown in Figure 6.1.

Complete the following steps to open CODE Designer:

  • Expand the DDS folder.

  • Right-click the SLTCUSTD source member inside the DDS folder.

  • Select the Open With option from the pop-up menu

  • Select the CODE Designer option from the submenu.

Figure 6.1 shows the menu structure.

CODE Designer loads the DDS member (this might take a few moments). CODE Designer opens and displays your DDS member (Figure 6.2):

click to expand
Figure 6.2: CODE Designer select group SCREEN1
  • Select the SCREEN1 tab on the notebook. The arrow in Figure 6.2 points to the tab.

You should now see a dialog similar to Figure 6.3:

click to expand
Figure 6.3: CODE Designer

As you can see, you are working with the green-screen image in CODE Designer. Do you recognize the screen? It is the customer selection list. This is the screen I want you to change so that it looks more like a Web page to the end user after WebFacing conversion.

  • Click the second column of the first row in the subfile (the Customer name field) as shown in Figure 6.4.

    click to expand
    Figure 6.4: Selecting the subfile's second column

Applying Web Settings

Work with the notebook underneath the design window, and locate the Web Settings tab as shown in Figure 6.4.

  • Select the Web Settings tab by clicking it.

The Web Settings page in the CODE Designer window should look similar to Figure 6.5.

click to expand
Figure 6.5: Web settings list for CUSTOMER field
  • On the Web Settings page, locate the list that shows the different Web settings available for the CUSTOMER field.

If some of the Web settings are missing,

  • Scroll down to the bottom of the list and select Create hyperlink (see Figure 6.6).

    click to expand
    Figure 6.6: Web settings for the hyperlink

  • Select the Create hyperlink check box to the right of the list.

  • Select the Action hyperlink radio button.

  • Select the Position cursor to the field check box.

  • From the combination box underneath, select the &{OPT} value.

  • Change the string value in the Enter data combination box to 1. This indicates that you want the application to enter a 1 in the Options field when the user clicks the hyperlink.

  • Select the Submit check box.

  • Select the Function key radio button.

  • Select Enter from the Function key combination box.

Just to review, the information you specified will change your application user interface (upon WebFacing reconversion) in the following ways:

  • The Customer name cells in the subfile are generated so that they appear as links in the browser window.

  • At run time, when the link is clicked, a 1 is placed in the Options field. Also, a submit request is initiated to generate the equivalent of pressing the Enter key.

The basic task I wanted you to accomplish is complete, but the user interface now has an Option column that does not belong there. Also, the instructions on the page about how to select a customer are incorrect. Before you test this new feature, I want you to fix these inconsistencies with Web settings as well.

Hiding the Options Column

On the design pane, you need to select the Options field to indicate that you want to work with it.

  • Click the Opt column on the first record in the subfile to select it, as shown in Figure 6.7.

    click to expand
    Figure 6.7: Web Settings Visibility page

On the Web Settings page,

  • Click Visibility in the Web Settings list box.

  • Select the Hide field radio button.

Now this column in the subfile will be hidden.

Hiding the Opt Heading

You need to hide the heading for the Options field. Because the heading is located in the subfile control record, and not the subfile record, you need to give focus to a different record format in the design screen.

It might seem confusing that two record formats display in this view instead of one. To clear up this confusion, let me explain more about CODE Designer's features. When you use your iSeries green-screen interface, the screens are normally composed of multiple record formats, which are assembled by the RPG or COBOL program to present the real screen to your end user. For working in the design stage, CODE Designer has added the notion of a group to make it easier for you to understand how the screens you create from record formats will look at run time. A group resembles the run-time grouping of record formats for you at development time. You can assemble several record formats in a group, essentially mimicking what happens at run time with your record formats.

In this sample, I have already assembled the following three record formats into a group called SCREEN 1:

  • CUSTSFL

  • CUSTCTL

  • SLTCUST

To view a list of record formats belonging to a group, expand the combination box at the top of the design window as shown in Figure 6.8.

click to expand
Figure 6.8: Group SCREEN1 and list of record formats

Only one record format in a group is active at any time. The active record format name is listed in the top field of the combination box. Also, all parts of the active record format are shown in regular density in the design window, but the inactive record format content is dimmed. You see this effect very clearly in Figure 6.8.

Until now you have been working with the subfile record format CUSTSFL, but now you need to clean up the subfile control record format CUSTCTL and make it the active record format. In other words, you need to give the record format focus .

To shift focus to another record format,

  • At the top of the design pane, click the arrow , as shown in Figure 6.9, until CUSTCTL has focus.

    click to expand
    Figure 6.9: CODE Designer switching record formats in a group

The top pane of the design window is now highlighted, and the bottom one has only half the intensity. As mentioned before, the highlighted area is the one you can work with. Figure 6.10 shows the subfile control record in focus. You need to clean up the subfile control record format, beginning with hiding the Opt heading.

click to expand
Figure 6.10: Subfile control record format in focus
  • On the design pane, select the Opt Customer constant.

  • On the Web Settings page, select Appearance and Text from the list box.

  • Select the Hide characters check box.

  • Specify 1 in the From field.

  • Specify 3 in the To field.

Hiding the Select Instruction

Now you need to remove the instructions on the panel that guide the user to put a 1 into the Options field. You do not have to give focus to a different record format since this constant is also located in the CUSTCTL record format.

On the design page in CODE Designer (Figure 6.11),

click to expand
Figure 6.11: Using the Visibility Web setting to hide a constant
  • Select the constant 1=Select in the design area.

On the Web Settings page,

  • Select Visibility from the list box.

  • Select the Hide field radio button.

Changing the Instruction (Type Choices, Press Enter)

You need to add new instructions for the WebFaced page, so that the end user knows to click the link to select a customer. Note that you cannot just change the 5250 constant, because you might still use this screen in a 5250 environment. You have to use Web settings to apply this change to the Web user interface only. Complete the following steps to change the instructional text:

  • Select the instruction constant Type choices, press Enter on the design page, as shown in Figure 6.12.

    click to expand
    Figure 6.12: Changing the instructions with Web settings

On the Web Settings page,

  • Select Appearance and Text from the list box.

  • Select the Override constant text check box, and type the following new text in the field to the right of the check box: Click on link to select.

Now all Web settings are in place and you can save the source and reconvert this DDS member.

Closing CODE Designer and Reconverting the DDS Member

  • Click the X button at the top right corner of the CODE Designer window.

  • Specify Yes to save when prompted.

You are finished with CODE Designer.

  • Go back to the WebFacing perspective in the Development Studio Client workbench (Figure 6.13).

    click to expand
    Figure 6.13: WebFacing Projects view, pop-up menu for DDS source member

  • Select your wflabxx project in the WebFacing Projects view.

  • If you cannot see the DDS folder as part of the wflabxx project, expand the project by clicking on the plus sign (+) in front of its icon.

  • Expand the DDS folder, if it is not expanded already, to show all members in this folder.

  • Select the member SLTCUSTD (the one you just changed).

  • Right-click the SLTCUSTD member icon.

  • Select Convert from the pop-up menu.

Only this member will be converted. A conversion report displays when the conversion is finished. Now you can test the new user interface.

Running the Web Application

To verify the new user interface in your application,

  • Right-click your wflabxx project in the WebFacing Projects view.

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

  • Go to the browser pane and click the Order Entry Application link.

You will see the first screen of your application; nothing has changed there.

  • Click the Prompt push button, or press function key 4.

As shown in Figure 6.14, the customer selection window appears and the Customer fields display as links. Also notice that the text is changed and the Option column is no longer visible.

click to expand
Figure 6.14: Customer selection window with links
  • Select a customer from the list by clicking on the link.

  • Go through the same steps as in Chapter 2.




Understanding the IBM WebFacing Tool. A Guided Tour
Understanding the IBM WebFacing Tool: A Guided Tour (IBM Illustrated Guide series)
ISBN: 1931182094
EAN: 2147483647
Year: 2003
Pages: 153

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net