Introduction to IBM Rational HATS For IBM System i (5250)

Introduction to IBM Rational HATS For IBM System i (5250) Introduction to IBM Rational HATS 1

Lab instructions This lab teaches you how to use IBM Rational HATS to create a Web application capable of transforming your 5250 applications. You will learn how to create a HATS project, bypass the sign on screen with a simple macro, customize the main menu screen, and combine and show data from multiple screens. Please report any issues or problems with this lab to Will Smythe (smythew@us.ibm.com). Learning objectives Use the HATS Toolkit to create a HATS Web project Customize a HATS template Record a simple sign on macro Transform a menu screen Combine data from multiple screens and display it to the user Total time: 2 hours Skill level Introductory Audience Programmer Requirements IBM Rational Application Developer 7.0.0.5 (or above) IBM Rational Host Access Transformation Services (HATS) 7.1 (or above) Internet connection Prerequisites Basic IDE skills Basic understanding of terminal applications Conventions used in this lab Bold font for user interface controls Mono-spaced font for user input and code blocks Italic font for variable names and glossary terms Introduction to IBM Rational HATS 2

Creating a HATS project 1. Click Start > Programs > IBM Software Development Platform > IBM Rational HATS 7.1 > HATS Toolkit 7.1 to start the HATS toolkit. 2. When prompted for a workspace directory, type c:\myworkspaces\myhatslabs and click OK. 3. Once the Host Access Transformation Services perspective loads, click the Create HATS Project button on the HATS toolbar. 4. In the Name field, type myhats5250 5. Select the Web deployment option. 6. In the Target Server field, select WebSphere Application Server v6.0. If this server is not available, select v5.1 or v6.1. 7. In the Enterprise Application project field, type myhats5250.ear 8. Click Next. The Connection Settings panel enables you to setup the connection to your 3270 or 5250 system. Note: Before proceeding, please check with your lab instructor (if applicable) for updated connection settings. Introduction to IBM Rational HATS 3

9. In the Host name field, type iseriesd.demos.ibm.com (unless your instructor provides an alternate host to connect to). 10. In the Type drop-down, select 5250. 11. Accept the default values for the Port, Code page, and Screen size. 12. Click Next. You will see the Project Theme panel. A theme controls the basic appearance and behavior characteristics for the application. For example, you can select the Classic terminal emulator theme to enable emulatorlike features, such as automatic field advance, in your application by default. 13. Select the Standard theme option. 14. Click Next. You will see the Default Template panel. A template controls the basic layout and style (such as color and font) of the application. 15. From the list of templates, select Sports.jsp. 16. Click Finish. After a few minutes, the new project will appear in the HATS Projects view and the Project Settings editor for the project will open. Caution: There is a known issue that sometimes causes WebSphere Application Server not to start. Because you will use this server later in the tutorial to test your application, please take the opportunity now to fix this problem on your system by following the steps below. 17. Open the Servers view tab at the bottom of the workbench window, select WebSphere Application Server v6.1 (or v7.0), right-click and select Open. Introduction to IBM Rational HATS 4

18. In the Server section, select the SOAP (Designed to be more firewall compatible) radio button. Click File > Save to save the server configuration. 19. Close the server configuration editor window. 20. Click the X on the settings tab to close this editor for now. You will review the settings in this editor later in the lab. In the HATS project view, notice your project including all of its folders. You will be looking into these folders as you go through this tutorial. Testing the project 21. In the HATS Projects view right-click on your project folder and select Debug on Server. Introduction to IBM Rational HATS 5

22. Click Yes when prompted to show the display terminal. The display terminal window appears whenever a connection is established to your system. It allows you to see the actual green screens HATS is transforming. 23. Select the Choose an existing server option. 24. Select WebSphere Application Server v6.1 or 7.0 from the server list. 25. Check the Set server as project default checkbox. 26. Click Finish. It will take a few minutes for the server to start. In the Web Browser view, you will see your HATS project running live with your host system. This is the HATS default transformation for your host system. As you go through this tutorial, you will learn how to change some of the project settings that affect the default transformation as well as create custom transformations for several screens. 27. To maximize the Web Browser, double-click on the Web Browser tab. Restore it by double-clicking it again. If you want to signon to the iseriesd server, use userid ATDEMO, password DEMO4YOU Introduction to IBM Rational HATS 6

28. Click one of the links in the left panel of the template. Click the back button to get back to your HATS application. Later you will learn how to modify the template. 29. Notice at the bottom left of the host screen the five buttons starting with the Reset button. This is the application keypad. Also, notice at the bottom of the host screen there are no buttons for host keys visible. This is because the host keypad is not displayed by default (with the Standard theme). Finally notice the Operator Instruction Area (OIA). Later you will learn how to change these global project settings. Also notice the host display terminal that shows the actual host screen that HATS is transforming. The end user would never see this screen. It is displayed because you requested it, in an earlier step above, and it can be used to help you debug your HATS application. Introduction to IBM Rational HATS 7

Working with the template and stylesheets 30. Switch to the HATS Projects view. 31. Expand the Web Content > Templates folder. 32. Double-click the template you selected as your default (Sports.jsp) to open it. This will open the template in the Page Designer editor. Notice at the bottom of the editor view the Design, Source, and Preview tabs. The Design view is a WYSIWYG editor, the Source view enables you to modify the JSP source of your template, and the Preview view shows a preview of your template. You can make your changes in either the Design or Source views. 33. In the Design view, change the company name by clicking on the text, My Company, and typing whatever company name you wish. This example uses JK Enterprises. 34. In a similar manner change any other text you wish. For example, change the other occurrences of My Company. Introduction to IBM Rational HATS 8

35. Next make a change to one of the links on the template. Select a link, for example, the Home Page link, and then click the Properties tab that is displayed at the bottom of the workbench. 36. Change the URL to some other site you know, such as www.ibm.com, and for Target select New Window. This will open the URL in a different browser window or tab. 37. Click the Source tab and change the stylesheet for the template to one that will use a white background. On the LINK statements change tantheme.css to whitetheme.css and reversevideotan.css to reversevideowhite.css. 38. When you have finished making changes to your template, close the editor view by clicking the X on the JSP tab. Click Yes when asked if you want to save your changes. Changing project settings 39. In the HATS Projects view, double-click Project Settings to open the project settings editor for your project. Introduction to IBM Rational HATS 9

The Project Settings editor enables you to modify project-level settings. For example, you can select a different template or theme, modify the default rendering rules, show the host keypad, and more. 40. Click the Rendering tab. The Rendering tab allows you to modify default rendering rules, create global rules, modify project-level component and widget settings, and alter the host and application keypads. 41. In the left panel, expand the list of Components. These are the components that HATS can recognize on a host screen and the default rules for recognizing them. For example, notice the default rules for how HATS will recognize an area of the screen to represent a function key. HATS also provides components to detect menu options as well as subfiles. Introduction to IBM Rational HATS 10

When you are done looking at the various components, expand the list of widgets that can be used to render a graphical view of a host component. Notice the default settings for the Drop-down (data-entry) widget. You will use this widget later in this tutorial. 42. When you are finished looking at the various Widgets, click the Application Keypad node. Earlier in this tutorial you saw the application keypad. Here you can change what keys to display and whether to display keys as buttons or links. 43. Uncheck Turn Keyboard On/Off so that this key will not appear on the application keypad. Introduction to IBM Rational HATS 11

44. Click the Host Keypad section. Notice that by default the host keypad is not displayed. Here is where you can tell HATS to display the host keypad and what keys to include. For this tutorial, use the default to not show the host keypad. 45. Click Operator Information Area. This area is used to configure the Operator Information Area, or OIA, that is typically displayed below the transformed host screen. In this lab we will leave it on. 46. Close the Project Settings View by clicking on the X and click Yes to save your changes when prompted. Testing template and project settings changes 47. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad. Warning: sometimes WebSphere Application Server will attempt to republish your application and fail. If this happens, you will see a 500 error in the Web browser. To correct this problem, open the Servers Introduction to IBM Rational HATS 12

view at the bottom of the workbench view, select your WebSphere Application Server, right-click and select Restart > Debug. 48. If you see a disconnect page, click Restart. Notice that the Turn Keyboard On/Off key is no longer displayed on the application keypad and that the background is now white. 49. Click the link you changed in the template. Notice that the new site opened in a new window. 50. Close the browser window that appeared. Screen Customizations Introduction to IBM Rational HATS 13

This section will teach you how to customize a host screen using HATS. A screen customization is designed to perform a set of actions when a host screen is recognized. It includes a set of criteria for matching host screens and the actions to take when the host screen matches these criteria. Typically a screen customization has a single Apply action. An Apply action tells HATS to use a JSP/HTML page to transform the screen. In this section you will learn how to create a screen customization for the sign on screen that display a simple transformation. This transformation will have a button that will automate sign on to the system. Creating a screen capture 1. In the HATS Projects view, select your project, right-click and select Open Host Terminal > Main. The Host Terminal will open and you will see the Sign On screen. 2. Click the Create Screen Capture button on the toolbar. 3. In the Name field, type signon and click Finish. Recording a macro A HATS macro is a script that drives screen interactions. Macros can be played either by clicking a button or automatically when a screen from the host is recognized. Macros can also be called from a Web Introduction to IBM Rational HATS 14

service. In this case you will record a macro that will sign on the user with a generic user name. Of course, if the application required that a user sign on with a unique user name, you would not use this type of macro. For this tutorial you are using a generic user profile that has been set up to allow read only access to a subset of the applications and transactions on the host. Caution: This tutorial assumes the Display Program Messages screen appears after the Sign On screen and before the Main Menu screen. In order to make sure this happens you must start a separate telnet session using the same user name and password. Follow the instructions below to do this: 1. From your desktop, click the Start button and select Run. 2. In the Open field, type telnet iseriesd.demos.ibm.com 3. Click OK. You will see a telnet window: Note: Before proceeding, please use the userid and password below or ask your lab instructor (if applicable) for the user name and password to use 4. Type ATDEMO and press the TAB key. 5. Type DEMO4YOU and press the ENTER key. If the userid doesn t work, get the current user name and password for the IBM i demo system from: http://websphere.dfw.ibm.com/atdemo/atdemo_help.html You should now be at the Main Menu or a Display Program Messages screen. If you are at a Display Program Messages Screen, press the ENTER key. 1. Switch back to the HATS Host Terminal window. Introduction to IBM Rational HATS 15

2. To start recording the macro, click the Record Macro button on the toolbar. 3. In the Name field, type signon. 4. Click Finish. For the first screen in a macro, HATS asks you to define its screen recognition. 5. In the Screen Name field, type signon. 6. Select the Within a rectangular region option (this tells HATS to look for the selected text within the roped off area.) 7. Click Finish. The Host Terminal is now in record mode. This means that every keystroke you make (in the terminal area) is recorded in the macro. Introduction to IBM Rational HATS 16

8. In the User field, type ATDEMO (your cursor should already be positioned in this field). 9. Press the TAB key to advance to the next field. 10. In the Password field, type DEMO4YOU. 11. Press the ENTER key. 12. On the Display Program Messages screen, click the Define Screen Recognition Criteria button on the toolbar. You should now see the Select Screen Recognition Criteria panel. 13. In the Screen Name field, type displaymessages. 14. With your mouse, rope off (select) just the title, Display Program Messages, at the top of the screen. 15. Select the At a specified position option. 16. Click Finish. 17. On the Display Program Messages screen, press the ENTER key. 18. On the Main Menu screen click Define Screen Recognition Criteria. Introduction to IBM Rational HATS 17

You should now see the Select Screen Recognition Criteria panel. 19. In the Screen Name field, type mainmenu. 20. With your mouse draw a box around the MAIN text at the top of the screen. 21. Select the At a specified position option and click Finish. 22. On the Main Menu screen from the toolbar click Stop Macro 23. On the Define the exit screen of the macro panel click Finish. Next you will edit the macro to handle the case when the Display Programs Messages screen does not appear. 24. In the Macro Navigator panel, right-click on the Next Screens folder under the Sign On screen node and select Edit. Introduction to IBM Rational HATS 18

25. Under Available Screen, select the entry for the mainmenu screen and click the button to move it under Next Screens. 26. Click OK. Notice in the Macro Navigator that after the Sign On screen the macro will look for either the displaymessages screen or the mainmenu screen. This will allow your macro to work regardless of whether or not the Display Program Messages screen appears after the Sign On screen. 27. Click the Save Macro button on the toolbar. Introduction to IBM Rational HATS 19

28. Navigate the terminal session back to the Sign On screen in the terminal window. Do this by typing 90 in the Selection or command field on the host screen and pressing ENTER. 29. Once the session is on the Sign On screen, from the Host Terminal toolbar click the Play Macro button to test the macro. The macro should navigate the session to the Main Menu. 30. Click the Disconnect button on the toolbar to disconnect the terminal session. 31. Close the Host Terminal window. Creating a screen customization for the Sign On screen You previously created a screen capture for the Sign On screen. You also created a macro to automate sign on to the system. Next you will create a screen customization for this screen. A screen customization consists of how to recognize the screen and then what actions to perform once the screen is recognized. Notice in the Screen Captures folder there is a screen capture for the Sign On screen. Introduction to IBM Rational HATS 20

32. Double-click the Sign On screen capture file to open it. 33. Click the Preview tab at the bottom of the editor window. You will see how HATS will transform the screen. At this point you will see the default transformation for the screen. 34. Click the Host Screen tab at the bottom to switch back to the screen capture. 35. Click the New Screen Customization button on the editor toolbar. 36. Accept the supplied screen customization name of signon and click Next Introduction to IBM Rational HATS 21

37. The first task in creating a screen customization is to tell HATS how to recognize the screen. On the Select Screen Recognition Criteria panel, accept the default recognition criteria and click Next 38. After you tell HATS how to recognize the screen, you have to tell HATS what to do once the screen is recognized. On the Select Actions panel you will see that you can apply a transformation, which means to display the screen to the end user in a transformed way. Also, you can tell HATS to play a macro or perform advanced actions when this screen is recognized. In this case, check the Apply a transformation checkbox and click Finish. Introduction to IBM Rational HATS 22

HATS will create a new screen customization and a blank transformation. You could have selected a different transformation pattern on the previous wizard panel, such as the pattern to prefill the new transformation with all fields on the screen. This approach would allow you to start with a basic rendering of the screen and then move fields around and/or remove fields you don t want the user to see. Creating a transformation for the Sign On screen After a few minutes, HATS will open the new transformation in the Page Designer tool and show the Insert Host Component wizard. This wizard is used to add parts of the screen to the Web page. You will learn how to use this wizard later in the tutorial. 39. For now, click Cancel. Notice in the HATS Projects view that there are now entries for the Sign On screen in both the Screen Customization and the Web Content > Transformations folders. Also notice the transformation for the Sign On screen, signon.jsp, is displayed in the editor view. You will create a transformed look for the Sign On screen. 40. From the Palette view, expand HTML Tags drawer, and select the Text Cell tool. Note: if the Palette view is not open, select Window > Show View > Palette. Introduction to IBM Rational HATS 23

41. Move your mouse to the gray area of the transformation, click and hold the left mouse button near the upper left of the gray area and drag your mouse as shown below: 42. Let go of the mouse button to create the area. 43. In the new text area, type JK Products. 44. Select the text you just typed using your mouse. 45. In Properties view at the bottom of the workbench window, click the Align Horizontal Center button to center the text. 46. Select the text again in the design area. 47. Click the Increase Font Size button to increase the size of the text. 48. Next you will add a button that will play the signon macro. First, click anywhere on the free layout area to take focus away from the text cell you just added. From the toolbar select HATS Tools > Insert Macro Key. Introduction to IBM Rational HATS 24

49. On the Insert Macro panel check the signon macro and click OK. 50. Draw and drop the button below the text area (create an area that is about the same width as the text area you created previously). 51. Select the button by clicking it. 52. Click Text tab in the Properties view. 53. Click the Align Horizontal Center button to center the button. 54. Click the signon button again. 55. In the input tab of the Properties view, type SignOn in the Label field. This will give the button a friendlier caption. Introduction to IBM Rational HATS 25

56. You have now finished with the transformation for the Sign On screen. Close the editor by clicking the X and click Yes to save changes. 57. From the screen capture view click on the Preview tab. Here you will see a preview of how HATS will transform this screen using the transformation you just created. Introduction to IBM Rational HATS 26

58. Close the screen capture view by clicking on the X. Testing the transformation 59. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad. Note: If you see the disconnected screen, click Restart. 60. Notice your transformed Sign On screen. Restore the host display terminal window if you want to see the macro play through the host screens. Click on the SignOn button to play the signon macro. The signon macro plays, signs on using the supplied userid and password, recognizes whether or not the Display Program Messages is displayed and navigates to the Main Menu screen. Introduction to IBM Rational HATS 27

Customizing the Main Menu screen In this exercise you will learn how to create a screen customization for the Main Menu screen. Although this tutorial shows creating a screen capture before creating a screen customization, there is a button on the Host Terminal toolbar to create a screen customization directly from the current host screen displayed on the terminal. 1. In the HATS Projects view, select your project, right- click and select Open Terminal > Main. 2. On the Sign On screen, fill in the user name and password fields (with ATDEMO/DEMO4YOU) and press the ENTER key. 3. On the Display Program Messages screen, press the ENTER key. You should now be at the Main Menu screen. 4. To create a screen capture, click the Create Screen Capture icon 5. In the Capture a Screen panel name this screen capture, mainmenu, and click Finish. 6. Disconnect and close the Host Terminal window. Introduction to IBM Rational HATS 28

Creating a screen customization for the Main Menu screen You have already saved a screen capture for the Main Menu screen. Next you will create a screen customization for this screen. 7. Switch back to the workbench window. 8. Notice that in the Screen Captures folder in the HATS Projects view you now have a screen capture for the mainmenu screen. Double-click the mainmenu screen capture to open its editor. 9. Click the New Screen Customization button on the editor toolbar. 10. Accept the supplied screen customization name of mainmenu and click Next Introduction to IBM Rational HATS 29

11. On the Select Screen Recognition Criteria panel, with your cursor draw a box around MAIN at the top left corner of the screen. Check At a specified position, and click Next. 12. Check the Apply a transformation checkbox and click Finish. Creating a transformation for the Main Menu screen 13. Once the editor for the Main Menu transformation loads, click the Cancel button to close the Insert Host Component wizard. You will learn how to use this wizard later. 14. Now you will create a transformed look for the mainmenu screen. Start by putting some instructional text on the screen. From the Palette view, select Text Cell and drag and drop it onto the Free Layout Tables area in the Design view of your page. 15. After you have dropped the text cell onto the JSP, position the cell on the JSP using the Properties tab and the values shown below for Top, Left, Width, and Height. Introduction to IBM Rational HATS 30

16. Type the following text: Select application and click Enter into the text cell. 17. Select the text with your mouse. 18. Using the Properties tab, align the text and/or increase its size. Next you will add a drop-down and a host key button. This example shows inserting these HATS components into a table. Inserting them into a table is not required but helps with aligning the components with each other. Start by selecting Table from HTML Tags drawer of the Palette and dragging it to the free layout area. 19. Set the table to be 1 row with 2 columns and click OK. Introduction to IBM Rational HATS 31

Select the cell containing the table and set its location as shown below. 20. Then select the Text tab and center the table within the cell. 21. Now you will insert a HATS host component into the first cell of the table. Using your left mouse button, position the cursor inside the first cell. Introduction to IBM Rational HATS 32

22. From the toolbar select HATS Tools > Insert Host Component. Another method of inserting a host component is to drag and drop it from the HATS Components listed on the Palette. In the Select Screen Region panel, you can select an area of the host screen to transform. 23. If not already checked, check the Highlight fields Input check box. After you do this, you will notice that the Selection or command field at the bottom of the screen is an input field. This is where the end user can enter an application name or command. In this case, you will create a list of applications from which your end users can select. 24. Rope off the first row of the command input field. Make sure you select an area that is long enough to contain the longest string we use in this lab, at least 5 characters. Introduction to IBM Rational HATS 33

25. Click Next. You should see the Rendering Options panel. This is where you tell HATS what host component to use for this area of the screen and the widget into which it will be transformed. Notice when you click on each component that different widget options are displayed. 26. Select the Input field component. Notice that by default the component includes the caption for the input field, which in this case is ===>. In this example, you do not want to include the caption. To change this, click the Component Settings button. 27. Uncheck Use project defaults, then uncheck Extract field caption, then click OK. 28. From the Widgets list, select the Drop-down (data entry) widget. 29. Click the Widget Settings button. This panel allows you to change the settings for this widget. Introduction to IBM Rational HATS 34

30. Uncheck Use project defaults to override the project level defaults (which are defined in the Project Settings editor). 31. Check the Fill from string checkbox. 32. In the List items box type, Boats=boats;JK=strqm;Sign Off=90. HATS will use these values to populate the drop-down. It will use the text before the equal sign as the text to show in the drop-down and will use the text after the equal sign as the text to insert into the command field. For example, selecting JK from the drop-down will cause strqm to be inserted into the command field. You can also populate a HATS drop-down from an indexed global variable, which is comparable to an array or a list. This array can be populated from a table in a database or from a flat file, for example. It can also be populated from a set of values on a green screen. Notice the style classes. You can find how these classes are defined in the template and stylesheets for the project. 33. Click OK 34. Back on the Rendering Options panel under Widget Preview you can now see what your widget will look like. Click Finish Next, you will add a button that when clicked will pass the Enter key back to the host. 35. Position the cursor in the second cell of your table. 36. Select HATS Tools > Insert Host Keypad > Individual Key on the main menu bar. Introduction to IBM Rational HATS 35

37. On the Insert Host Key panel check the Enter key. 38. Click OK. 39. Select the Enter button and set its style on the Properties > Text tab to HostPFKey as shown below. 40. If you would like to change the label on the Enter button, you can do so on the Properties > Input tab. 41. You have now finished with the transformation for the Main Menu screen. Close the editor by clicking the X and click Yes to save changes. Introduction to IBM Rational HATS 36

42. From the screen capture view click the Preview tab. Here you see a preview of how HATS will transform this screen using the transformation you just created. 43. Close the screen capture view by clicking on the X. Testing the transformation Introduction to IBM Rational HATS 37

44. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad. 45. Notice the transformed Main Menu screen. Select JK and click the Enter button to execute the strqm command. The strqm command is executed. You should see the DB2 Query Manager screen. Combining and showing data from multiple screens In this section you will learn how to create a macro that extracts data from multiple tabular screens. Although HATS provides other facilities for doing this, including a screen combination wizard that provides for interaction by the user on the data, this tutorial will show how to do this using a macro since the data is read-only (i.e. the user cannot interact with it). Recording the macro 1. In the HATS Projects view, right-click on your project and select Open Host Terminal > main 2. Click the drop-down arrow next to the Play Macro button on the toolbar and select signon from the menu. This will cause the signon macro to play (which will navigate you to the Main Menu). 3. Type strqm in the Command field and press the ENTER key. Introduction to IBM Rational HATS 38

4. Click the Record Macro button on the Host Terminal toolbar. 5. In the Name field, type getinventoryinformation. 6. Click Finish. You will see the Define Screen Recognition Criteria wizard. 7. Accept the default screen name (Screen1) and screen recognition criteria and click Finish. The Host Terminal is now recording every key stroke and command and storing them in your macro. 8. Type 3 in the Selection field and press the ENTER key. 9. Type WHIDEMO in the Library field and press the ENTER key. 10. Find the JK_INV table in the list. In the first input field (under the Opt) column in the same row as JK_INV, type a 5 and press ENTER. 11. On the Find Data in Query Manager Table screen press the ENTER key. This will cause a table of records to be displayed. You should now be at the Display Report screen. You will now learn how to record a looped macro that loops through the screens and collects the data. 12. Click the Record a Loop button on the toolbar. Introduction to IBM Rational HATS 39

HATS will show a wizard at the bottom of the terminal window. This wizard directs you on how to record the loop. 13. Click Next in the wizard to define the screen recognition criteria for this screen. 14. In the Define Screen Recognition Criteria panel, rope off the text Display Report at the top of the screen. This tells HATS to identify this screen using this text. 15. Accept the default screen name and click Finish. The wizard now asks you to perform the actions you want to perform for each iteration of the loop. In this scenario, you will extract data and send the PAGE DOWN key. 16. Using your mouse, rope off the data in the tab as shown below: Introduction to IBM Rational HATS 40

17. Click the Add Extract Action on the toolbar. An extract action is used in a macro to pull data off the screen and store in a variable or display to the user. 18. In the Name field, type inventorytable. 19. Click the Extract this region as a table option since we want to extract the entire region as a table with multiple columns. Introduction to IBM Rational HATS 41

20. Click Next to define the columns of the table. 21. Click Column1 in the list and type Number in the Column name field. 22. Click Column2 in the list and type Name in the Column name field. 23. Click Column3 in the list and type Inventory in the Column name field. 24. Hold the CTRL key on your keyboard and click Column4, Column5, and Column6 in the list (so all three are selected). Click the Merge button to combine the columns into one column. 25. With Column4 selected in the list, type Description in the Column name field. 26. Click Finish to create the extract action. 27. Press the PAGE DOWN key to advance the table. 28. In the loop wizard area at the bottom of the terminal, click the Next button. This tells HATS you are done defining the actions to perform for each loop iteration. 29. Select the End when a unique screen is recognized option. This tells HATS to loop until it reaches a screen you select. 30. Click Next in the loop wizard. HATS will indicate to you that recording is paused. This gives you the opportunity to navigate (without recording) to the last screen of the table. Introduction to IBM Rational HATS 42

31. Press the PAGE DOWN key until you see the word Bottom instead of More at the bottom right of the table. 32. Check the Extract data from the last screen checkbox to indicate you want to extract data from the last screen. 33. Click Next. HATS will ask you to define the screen recognition criteria for the last screen in the loop. 34. Rope off the text Bottom. This tells HATS to identify this screen when this text is found on the screen. 35. Click Finish to save the recognition criteria. 36. Click Finish on the loop wizard since you are done recording the loop. 37. Press F3 to exit out of this screen. 38. Press F3 again. 39. Press F3 again. You should now be back on the Main Menu screen. Introduction to IBM Rational HATS 43

40. Click the Stop Macro button on the toolbar to stop recording the macro. 41. Click Finish on the Define Screen Recognition Criteria wizard to accept the defaults. 42. Click Save Macro on the toolbar to save the macro. You now have a macro that navigates to and collects information from the inventory information screens. You now have to tell HATS when to play it. 43. Type strqm in the Command field to navigate to the DB2 UDB for iseries Query Manager screen (this is where your macro starts from). 44. Click Create HATS Screen Customization on the toolbar. Using a screen customization will allow you to play the macro when this screen is encountered by the user. 45. Accept the default screen customization name and click Next. 46. Accept the default screen recognition criteria and click Next. 47. Uncheck the Apply a transformation checkbox. 48. Check the Play a macro checkbox. 49. In the drop-down select the macro you just created (getinventoryinformation). 50. Click Finish to create the screen customization. Introduction to IBM Rational HATS 44

You now have a screen customization that will play your macro when the DB2 UDB for iseries Query Manager screen is accessed by a user. In this example, this will happen when the user selects JK from the drop-down on the main menu screen. 51. Switch back to the Web Browser view to display your HATS application. Click the Refresh button. After a few moments, HATS will show all screens of the combined table. Although this is a very simple example of how to combine screens using HATS, it is a very powerful function. This example only showed combining read-only data. With HATS you can combine multiple data entry screens by recording a macro that fills in fields on multiple screens using values supplied by a user. Conclusion This concludes the tutorial on creating a HATS Web transformation application. Although only a small set of capabilities were demonstrated, it should be apparent that HATS is a very powerful tool. HATS allows for rapid modernization of green screen applications without any impact to your existing code. Please report any errors in this tutorial to Will Smythe (smythew@us.ibm.com). Introduction to IBM Rational HATS 45