Introduction to IBM Rational HATS For IBM System z (3270)

Introduction to IBM Rational HATS For IBM System z (3270) 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 3270 applications. You will learn how to create a HATS project, bypass the sign on screen with a simple macro, customize the operator instructions screen, and combine and show data from multiple screens. Please report any issues or problems with this lab to Cloud Tsai (cloudt@tw.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 host screens Combine data from multiple screens and display it to the user Total time: 4 hours Skill level Introductory Audience Programmer Requirements IBM Rational Application Developer 8.0 (or above) IBM Rational Host Access Transformation Services (HATS) 8.0 (or above) Internet connection Prerequisites Basic IDE skills Basic understanding of terminal applications Basic HTML knowledge 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 > All Programs > IBM Software Development Platform > IBM Rational HATS V8.0 > HATS Toolkit 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 myhatsdojo3270 5. Select the Web deployment option. 6. In the Target Server field, select WebSphere Application Server v8.0 or WebSphere Application Server v8.0 stub. If this server is not available, select v6.1 or v7.0. 7. In the Enterprise Application project field, type myhatsdojo3270ear 8. Check Use Dojo technology checkbox. 9. Click Next. Introduction to IBM Rational HATS 3

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. Please refer to the following link to get more information: http://hilive.demos.ibm.com/atdemo/atdemo_help.html 10. In the Host name field, type zserveros.demos.ibm.com (unless your instructor provides an alternate host to connect to). 11. In the Type drop-down, select 3270. 12. Accept the default values for the Code page, Screen size, and type 22 for Port field. 13. 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. 14. Select the Standard theme option. 15. Click Next. You will see the Dojo Project Setup panel. The default Dojo version in RAD 8.0.3 is 1.5. You can click the Change these setup options button to change the Dojo version, get Dojo from another project or via CDN. We use the default setting for Dojo in this tutorial. You will see the Default Template panel. A template controls the basic layout and style (such as color and font) of the application. 16. Click Next. Introduction to IBM Rational HATS 4

You will see the Default Template panel. A template controls the basic layout and style (such as color and font) of the application. 17. From the list of templates, select Research.jsp. 18. 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. Note: At this point, and in later steps, you may get different HATS Tips on what to do next. You can disable them if you don t want to see them. Caution: There is an issue that sometimes causes WebSphere Application Server not to start. If you have trouble starting the server later in the tutorial when testing your application, you can fix this problem on your system by following the steps below. 19. Open the Servers view tab at the bottom of the workbench window, select WebSphere Application Server v8.0 (or equivalent), right-click and select Open. Introduction to IBM Rational HATS 5

20. In the Server section, check the Terminate server on workbench shutdown checkbox. Expand the Publishing twistie, and select Never publish automatically. Click File > Save to save the server configuration. 21. Close the server configuration editor window. 22. 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 Introduction to IBM Rational HATS 6

After creating the HATS project, but before doing a run on server or launching the HATS terminal, do the following: 23. Expand the project and Connections in the project view, and double-click the main connection. 24. Switch to the security tab. Check Enable SSL. 25. Choose Import PKCS12 keystore into project, browse to where you save the.p12 file and import it. Note: The hatsdemo.p12 file can be downloaded from http://iseriesd.demos.ibm.com/ 26. Enter the hats4all into the Password field, click the Verify button to check whether the password is correct. 27. Save and close the connection editor. 28. In the HATS Projects view right-click on your project folder and select Debug on Server. Introduction to IBM Rational HATS 7

29. 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. 30. Select the Choose an existing server option. 31. Select WebSphere Application Server v8.0 (or equivalent) from the server list. 32. 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. 33. To maximize the Web Browser, double-click on the Web Browser tab. Restore it by double-clicking it again. Introduction to IBM Rational HATS 8

34. Click one of the links in the top panel of the template. Click the back button to get back to your HATS application. Later you will learn how to modify the template. 35. Notice the following: At the bottom of the host screen the five buttons starting with the Reset button. This is the application keypad. 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). 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 9

Working with the template and stylesheets 36. Switch to the HATS Projects view. 37. Expand the Web Content > Templates folder. 38. Double-click the template you selected as your default (Research.jsp) to open it. Introduction to IBM Rational HATS 10

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. 39. 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. 40. In a similar manner change any other text you wish. 41. 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. Introduction to IBM Rational HATS 11

Changing project settings 42. In the HATS Projects view, double-click Project Settings to open the project settings editor for your project. 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. 43. 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. 44. 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 Selection list. HATS also provides components to detect menu options as well as subfiles. Introduction to IBM Rational HATS 12

When you are done looking at the various components, expand the list of Widgets (Dojo) that can be used to render a graphical view of a host component. Notice the default settings for the Date text box (Dojo) widget. You will use this widget later in this tutorial. Introduction to IBM Rational HATS 13

45. 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. 46. Uncheck Turn Keyboard On/Off so that this key will not appear on the application keypad. Introduction to IBM Rational HATS 14

47. 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. 48. 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. 49. 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 50. 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 view at the bottom of the workbench view, select your WebSphere Application Server, right-click and select Restart in Debug, or for earlier server versions, Restart > Debug. 51. If you see a disconnect page, click Restart. Introduction to IBM Rational HATS 15

Notice that the Turn Keyboard On/Off key is no longer displayed on the application keypad and that the background is now white. Notice that the company name has been changed to JK Enterprises now. Screen Customizations 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. Introduction to IBM Rational HATS 16

The Host Terminal will open and you will see the Welcome to zserveros screen. 2. Click the Create Screen Capture button on the toolbar. 3. In the Name field, type Welcome 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 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. 1. Switch back to the HATS Host Terminal window. 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. Introduction to IBM Rational HATS 17

5. In the Screen Name field, type Welcome. 6. In the Define Screen Recognition Criteria panel, rope off the text WELCOME TO IBM DEMOCENTRAL ZSERVEROS in the middle of the screen. This tells HATS to identify this screen using this text. 7. Select the At a specified position option (this tells HATS to look for the selected text within the roped off area.) 8. 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. 9. For SELECTION, type cicsa. 10. Press the ENTER key. 11. Now, you are on the SignOn to CICS screen. 12. It is a best practice to define proper screen recognition for macro screens. You will do this on the SignOn to CICS screen for practice. On future screens, in the interest of time, this step will be omitted unless required by the tool. Click the Define Screen Recognition Criteria button on the toolbar. Introduction to IBM Rational HATS 18

13. You should now see the Define Screen Recognition panel. In the Screen Name field, type SignOn. The default text recognition criteria for this screen is sufficient. 14. Click Finish. 15. Back in the terminal screen, in the Userid field, type atdemo (your cursor should already be positioned in this field). 16. Press the TAB multiple times to advance to the Password field. 17. In the Password field, type demo4you. 18. Press the ENTER key. 19. On the Sign-on complete screen, type menu to request the menu transaction. Introduction to IBM Rational HATS 19

20. Press the ENTER key. Notice how HATS is keeping track of the terminal screens and recording your keystrokes. 21. You are now on the OPERATOR INSTRUCTIONS screen, which is the final screen of the macro. From the toolbar click Stop Macro. 22. On the Define the exit screen of the macro panel, for the Screen Name field, type OperatorInstructions. 23. Rope off the text OPERATOR INSTRUCTIONS at the top of the screen. 24. Select the At a specified position option (this tells HATS to look for the selected text within the roped off area.) 25. HATS has chosen strict default recognition criteria for the exit screen of the macro. All that is necessary for this screen is text. Uncheck Total number of fields, Number of input fields, and, Cursor Position. Introduction to IBM Rational HATS 20

26. Click Finish. 27. Click the Save Macro button on the toolbar. 28. Navigate the terminal session back to the Welcome screen in the terminal window. Do this by pressing the ESC key which is mapped to the Clear aid key. On the next screen, type cesf logoff and press the ENTER key. 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 OPERATOR INSTRUCTIONS. 30. Click the Disconnect button on the toolbar to disconnect the terminal session. Introduction to IBM Rational HATS 21

31. Close the Host Terminal window. Creating a screen customization for the Welcome screen You previously created a screen capture for the Welcome 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 Welcome screen. 1. Double-click the Welcome screen capture file to open it. Introduction to IBM Rational HATS 22

Note: You can right-click in this window to enable/disable field highlighting. In this picture, all highlighting is enabled. 2. 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. Introduction to IBM Rational HATS 23

3. Click the Host Screen tab at the bottom to switch back to the screen capture. 4. Click the New Screen Customization button on the editor toolbar. 5. Accept the supplied screen customization name of Welcome and click Next Introduction to IBM Rational HATS 24

6. The first task in creating a screen customization is to tell HATS how to recognize the screen. On the Select Screen Recognition Criteria panel, rope off the text WELCOME TO IBM DEMOCENTRAL ZSERVEROS in the middle of the screen. This tells HATS to identify this screen using this text. Note that you may need to click the Show Advanced button at the bottom of the dialog to modify the screen recognition criteria. 7. Select the At a specified position option (this tells HATS to look for the selected text within the roped off area.) 8. 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 25

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 Welcome 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. 9. For now, click Cancel. Notice in the HATS Projects view that there are now entries for the Welcome screen in both the Screen Customization and the Web Content > Transformations folders. Also notice the transformation for the Welcome screen, Welcome.jsp, is displayed in the editor view. You will create a transformed look for the Welcome screen. 10. 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 26

11. Move your mouse to the gray area of the transformation, approximately where the top left corner of the white box below is located. Click and hold the left mouse button and drag your mouse down and to the right to make a rectangle as shown below: 12. Let go of the mouse button to create the area. 13. In the new text area, type JK Accounts. 14. Select the text you just typed using your mouse. 15. In Properties view at the bottom of the workbench window, on the Text tab, click the Align Horizontal Center button to center the text. Introduction to IBM Rational HATS 27

16. Select the text again in the design area. 17. Click the Increase Font Size button to increase the size of the text. 18. 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. 19. On the Insert Macro panel check the signon macro and click OK. Introduction to IBM Rational HATS 28

20. 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). 21. Select the new table cell by clicking it. 22. Click Text tab in the Properties view. 23. Click the Align Horizontal Center button to center the button. 24. Click the signon button to select it. 25. On the input tab of the Properties view, type Sign On in the Label field. This will give the button a friendlier caption. Change the style Class: of the button by using the HostPFKey style, and increase the size of the text on the button by setting Style Properties: to font-size: 12pt Introduction to IBM Rational HATS 29

26. To make the text at the top brown, to match the color of the button, click on the JK Accounts text to select it. Click the font tab of the Properties view, and click the Browse colors button to choose the exact color of the text. Introduction to IBM Rational HATS 30

27. You have now finished with the transformation for the Welcome screen. Close the editor by clicking the X and click Yes to save changes. 28. From the screen capture view click on the Preview tab. Introduction to IBM Rational HATS 31

Here you will see a preview of how HATS will transform this screen using the transformation you just created. Introduction to IBM Rational HATS 32

29. Close the screen capture view by clicking on the X. Testing the transformation 30. 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. 31. Notice your transformed Welcome screen. Restore the host display terminal window if you want to see the macro play through the host screens. Click on the Sign On button to play the signon macro. Introduction to IBM Rational HATS 33

The signon macro plays, signs on using the supplied userid and password, and navigates to the Operator Instructions screen. Customizing the OPERATOR INSTRUCTIONS screen In this exercise you will learn how to create a screen customization for the OPERATOR INSTRUCTIONS 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 HATS Host Terminal > main. Introduction to IBM Rational HATS 34

2. The easiest way to get to the OPERATOR INSTRUCTIONS screen is to play the signon macro. Click on the Play Macro icon on the terminal toolbar, and play the signon macro. You should now be at the OPERATOR INSTRUCTIONS screen. 3. To create a screen capture, click the Create Screen Capture icon 4. In the Capture a Screen panel, name this screen capture OperatorInstructions, and click Finish. Creating a screen customization for the OPERATOR INSTRUCTIONS screen You have already saved a screen capture for the Main Menu screen. Next you will create a screen customization for this screen. 5. 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 OperatorInstructions screen capture to open its editor. Introduction to IBM Rational HATS 35

6. Click the New Screen Customization button on the editor toolbar. 7. Accept the supplied screen customization name of OperatorInstructions and click Next 8. On the Select Screen Recognition Criteria panel, with your cursor draw a box around OPERATOR INSTRUCTIONS in the top middle of the screen. Check At a specified position, and click Next. Introduction to IBM Rational HATS 36

9. Use the defaults of Apply a transformation, with Create new transformation, and click Finish. Creating a transformation for the OPERATOR INSTRUCTIONS screen 10. Once the editor for the OperatorInstructions transformation loads, click the Cancel button to close the Insert Host Component wizard. You will learn how to use this wizard later. 11. Now you will create a transformed look for the OperatorInstructions screen. Start by putting some instructional text on the screen. From the Palette view, open the HTML Tags drawer, and select Text Cell. Introduction to IBM Rational HATS 37

12. Drag and drop the text cell onto the Free Layout Table area in the Design view of your page. 13. Type the following text: Select transaction and customer number and click Enter into the text cell. 14. Select the text with your mouse. 15. Using the Properties tab, align the text, increase its size, and change the color. Next you will add two input fields. 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. Introduction to IBM Rational HATS 38

16. Set the table to be 1 row with 2 columns and click OK. Position the cell containing the table as shown below. Introduction to IBM Rational HATS 39

17. Then select the Text tab and center the table within the cell. 18. 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. 19. 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. 20. If not already checked, check the Highlight fields Input check box. After you do this, you will notice that the ENTER TRANSACTION field at the bottom of the screen is an input field. This is where the end user can enter a transaction. In this case, you will create a list of transactions from which your end users can select. 21. Rope off the first row of the transaction input field. Make sure you select an area that is long enough to contain the 4 character transaction name. Introduction to IBM Rational HATS 40

22. 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. 23. Select the Input field component. Notice that by default the component includes the caption for the input field, which in this case is ENTER TRANSACTION. In this example, you do not want to include the caption. To change this, click the Component Settings button. 24. Uncheck Use project defaults, then uncheck Extract field caption, then click OK. Introduction to IBM Rational HATS 41

25. From the Widgets list, select the Filtering select (Dojo) widget. 26. Click the Widget Settings button. This panel allows you to change the settings for this widget. 27. Uncheck Use project defaults to override the project level defaults (which are defined in the Project Settings editor). 28. Check the Fill from string checkbox. 29. In the List items box type: View=inqy;Browse=brws;Add=adds;Update=updt HATS will use these values to populate the Filtering select widget. It will use the full text to show in the Filtering select widget and will use the text after the equal sign as the text to insert into the command field. For example, selecting View=inqy from the Filtering select widget will cause inqy to be inserted into the command field. 30. Click OK 31. Back on the Rendering Options panel under Widget Preview you can now see what your widget will look like. Click Finish Introduction to IBM Rational HATS 42

Next, you will add an input field to input customer number. 32. Using your left mouse button, position the cursor inside the second cell. 33. 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. 34. If not already checked, check the Highlight fields Input check box. After you do this, you will notice that the NUMBER field at the bottom of the screen is an input field. This is where the end user can enter a customer number. 35. Rope off the first row of the command input field. Make sure you select an area that is long enough to contain the 6 character customer number. 36. Click Next. Introduction to IBM Rational HATS 43

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. 37. Select the Input field component. Notice that by default the component includes the caption for the input field, which in this case is NUMBER. 38. From the Widgets list, select the Text input widget. 39. Click the Widget Settings button. This panel allows you to change the settings for this widget. We will make the text brown. 40. Uncheck Use project defaults to override the project level defaults (which are defined in the Project Settings editor). 41. In the Settings- Text Input dialog, click the Style button. In the New Style dialog, click the Color button, choose Navy, and click OK. 42. Back on the New Style dialog, click OK. Introduction to IBM Rational HATS 44

43. On the Settings- Text Input dialog, click OK. 44. On the Insert Host Component dialog, click the Full page preview button so that you can see a full page preview of the transformation. 45. Verify the full page preview thus far. Introduction to IBM Rational HATS 45

Close the Preview window, and click Finish to close the Insert Host Component dialog. Dojo widgets can work with other non-dojo HATS widgets properly. Next, you will add buttons to: Send the Enter key to the host to perform the chosen transaction. Send the Clear key to the host to exit the transaction. This example shows inserting these host keys 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. 46. Set the table to be 1 row with 2 columns and click OK. Introduction to IBM Rational HATS 46

Position the cell containing the table as shown below. 47. Then select the Text tab and center the table within the cell. 48. Position the cursor in the first cell of your table. 49. Select HATS Tools > Insert Host Keypad > Individual Key on the main menu bar. Introduction to IBM Rational HATS 47

50. On the Insert Host Key panel check the Enter key. 51. Click OK. 52. If you would like to change the label on the Enter button, you can do so on the Properties > Input tab. 53. Position the cursor in the second cell of your table. 54. Select HATS Tools > Insert Host Keypad > Individual Key on the main menu bar. 55. On the Insert Host Key panel check the Clear key. Introduction to IBM Rational HATS 48

56. Click OK. 57. Change the label on the Clear button, by using the Properties > Input tab. 58. You have now finished with the transformation for the OPERATOR INSTRUCTIONS screen. Close the editor by clicking the X and click Yes to save changes. 59. 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. Introduction to IBM Rational HATS 49

60. Close the screen capture view by clicking on the X. Testing the transformation 61. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad. If you get an error page due to inactivity, restart the application to test your changes. Notice the transformed OPERATOR INSTRUCTIONS screen. The Filtering select widget is editable, so users can type in values at runtime. As users type into the input text box, partially matched values from the list are displayed in a drop-down list. User-supplied text that does not match a value in the list is flagged as an error. Filtering select widget does not allow users to submit values not already in the list. Introduction to IBM Rational HATS 50

62. Select updt=update, type 666666 in the NUMBER field and click the Enter button to execute the updt transaction. The updt transaction is executed. You should see the FILE UPDATE screen. Press ESC to continue back to the OPERATOR INSTRUCTIONS screen. Customizing the FILE UPDATE screen Introduction to IBM Rational HATS 51

In this exercise you will learn how to create a screen customization for the FILE UPDATE screen. 1. Switch back to Host Terminal, and you should be at the OPERATOR INSTRUCTIONS screen. Enter UPDT in ENTER TRANSACTION field and 666666 in NUMBER field as shown below. Press Enter key. 2. You should be at the FILE UPDATE screen. Click the drop-down arrow next to the Create HATS Screen Customization button on the Host Terminal toolbar and select New Screen Customization from the menu. Introduction to IBM Rational HATS 52

3. Accept the supplied screen customization name of FileUpdate and click Next. 4. On the Select Screen Recognition Criteria panel, with your cursor draw a box around FILE UPDATE at the top center of the screen. Check At a specified position, and click Next. Introduction to IBM Rational HATS 53

5. Check the Apply a transformation checkbox, select Prepopulated using Fields, and then click Finish. Choosing Prepopulated using Fields here would create a new transformation FileUpdate.jsp prefilled with labels and input fields. You will learn how to customzie FileUpdate.jsp using Dojo-based widgets in the following section. Introduction to IBM Rational HATS 54

6. Disconnect and close the Host Terminal window. Customizing a transformation for the FILE UPDATE screen using Dojo widgets 7. Switch to workbench, you should see FileUpdate.jsp is editable under Page Designer now. Move the cursor to the input field left to PHONE. Right click and select HATS Tools > Edit Host Component. Introduction to IBM Rational HATS 55

8. Click Next in the wizard to select a host component for this region as shown below. Introduction to IBM Rational HATS 56

9. 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. 10. Select the Input field component. Notice that by default the component would extract the field caption automatically. To change this, click the Component Settings button. 11. Uncheck Use project defaults, uncheck Extract field caption, and then click OK. Introduction to IBM Rational HATS 57

12. From the Widgets list, select the Validation text box (Dojo) widget, and click Widget Settings. 13. Uncheck Use project defaults. Enter \d{8} in Regular expression to specify the acceptable format for user-supplied data. Enter 8-digit phone number in Prompt message to define the prompt message that will display when users select the text box. Uncheck Use default invalid message, and enter Invalid value entered in Invalid message to define the message that will show up when users enter invalid message. Click OK. Introduction to IBM Rational HATS 58

14. Under Widget Preview you can now see what your widget will look like. Click Finish. 15. The finish of Edit Host Component wizard will then bring you back to the editor for the FileUpdate.jsp transformation. Under Design view, move the cursor to the input field left to DATE. Right click and select HATS Tools > Edit Host Component. Introduction to IBM Rational HATS 59

16. Click Next in the wizard to select a host component for this region as shown below. Introduction to IBM Rational HATS 60

17. 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. 18. Select the Input field component. Notice that by default the component would extract the field caption automatically. To change this, click the Component Settings button. 19. Uncheck Use project defaults, uncheck Extract field caption, and then click OK. Introduction to IBM Rational HATS 61

20. From the Widgets list, select the Date text box (Dojo) widget, and click Widget Settings. 21. Uncheck Use project defaults. Enter MM/dd/yy in Pattern to specify the pattern HATS uses to correctly format the selected date. Check Restrict earliest selectable date, and enter 01/01/1980 in Date to prevent users from selecting date prior to 1/1/1980. Uncheck Use default invalid message, and enter Wrong date format entered in Invalid message to define the display message when users enter an invalid format of date. Uncheck Use default range message, and enter Don't enter date prior to 1980 in Range message to define the display message when users enter an out-of-range date. Enter Use MM/dd/yy as valid date format in Prompt message to specify the display message when users select the text box. Click OK. Introduction to IBM Rational HATS 62

22. Under Widget Preview you can now see what your widget will look like. Click Finish. Testing the transformation for the FILE UPDATE screen 23. Switch back to the Web Browser view to display your HATS application. Click the Refresh button, and you should see FILE UPDATE screen are now rendering with Dojo-based Validation text box and Date text box as shown below. Introduction to IBM Rational HATS 63

24. Move cursor to the PHONE field that is rendered with Validation text box. The message you defined for Prompt message in step 12 will show up to remind you the correct format for this field. 25. Enter non-8-digit number into PHONE field will prompt the message you defined for Invalid message in step 12 to remind you that an invalid format of input is entered. 26. Move cursor to the DATE field that is rendered with Date text box. The message you defined for Prompt message in step 20 will show up to remind you the correct format for this field and a calendar will appear for you to select the date. Introduction to IBM Rational HATS 64

27. Date prior to 1980 is not selectable in the pop-up calendar. This restriction is set by Restrict earliest selectable date specified in step 20. 28. Manually type any date priot to 1980 into DATE field will prompt the message you defined for Range message in step 20 to remind you that an out-of-range date is entered. Introduction to IBM Rational HATS 65

29. Entering any invalid format of date into DATE field will prompt the message you defined for Invalid message in step 20 to remind you that an invalid format of date is entered. 30. Press Enter to continue back to the OPERATOR INSTRUCTIONS screen. Introduction to IBM Rational HATS 66

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 HATS 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 OPERATOR INSTRUCTIONS screen). 3. Type brws in the TRANSACTION field, 10000 in the NUMBER field, and press the ENTER key. 4. Click the Record Macro button on the Host Terminal toolbar. You will get a Record New Macro or Insert pop up. Click the New button. 5. In the Name field, keep the default of FileBrowse. 6. Click Finish. You will see the Define Screen Recognition Criteria wizard. 7. In the Screen Name field, type FileBrowse. 8. In the Define Screen Recognition Criteria panel, rope off the text FILE BROWSE at the top of the screen. This tells HATS to identify this screen using this text. 9. Select the At a specified position option (this tells HATS to look for the selected text within the roped off area.) 10. Click Finish. Introduction to IBM Rational HATS 67

The Host Terminal is now recording every key stroke and command and storing them in your macro. The FILE BROWSE screen is the first screen of the table. You will now learn how to record a looped macro that loops through the screens and collects the data. 11. Click the Record a Loop button on the toolbar. HATS will show a wizard at the bottom of the terminal window. This wizard directs you on how to record the loop. Introduction to IBM Rational HATS 68

12. Click Next in the wizard to define the screen recognition criteria for this screen. 13. In the Define Screen Recognition Criteria panel, HATS uses the screen recognition you defined previously. 14. Accept the settings 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 F1 to page forward. 15. Using your mouse, rope off the data in the table as shown below: 16. 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. 17. In the Name field, type customertable. 18. Notice the Handle Macro Extract section. This is where you specify how a macro extract will be handled. In this case, Show handler is selected. This means that the specified Handler page, default.jsp, will be shown when the macro extracts text from the host screen. Note that as an advanced exercise, you could create your own, custom macro handler page. 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 69

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 Balance in the Column name field. 24. Click Finish to create the extract action. 25. Press the F1 key to advance the table. Introduction to IBM Rational HATS 70

26. 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. 27. Select the End when a unique screen is recognized option. This tells HATS to loop until it reaches a screen you select. 28. 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. 29. Press the F1 key until you see the word HI-END OF FILE at the bottom of the table. 30. Check the Extract data from the last screen checkbox to indicate you want to extract data from the last screen. 31. Click Next. HATS will ask you to define the screen recognition criteria for the last screen in the loop. 32. Rope off the text HI-END OF FILE. This tells HATS to identify this screen when this text is found on the screen. Introduction to IBM Rational HATS 71

33. Click Finish to save the recognition criteria. 34. Click Finish on the loop wizard since you are done recording the loop. 35. Press ESC to exit out of this screen. 36. You should now be back on the OPERATOR INSTRUCTIONS screen. 37. Click the Stop Macro button on the toolbar to stop recording the macro. 38. Click Finish on the Define Screen Recognition Criteria wizard to accept the defaults. 39. 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 can test your macro in the HATS terminal, or continue on to tell HATS when to play it. 40. Type brws in the TRANSACTION field, 10000 in the NUMBER field, and press the ENTER key (this is where your macro starts from). 41. 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. 42. Accept the default screen customization name and click Next. 43. You will see the Define Screen Recognition Criteria wizard. 44. In the Screen Recognition Criteria panel, rope off the text FILE BROWSE at the top of the screen. This tells HATS to identify this screen using this text. 45. Select the At a specified position option (this tells HATS to look for the selected text within the roped off area.) Introduction to IBM Rational HATS 72

46. Click Next. 47. Now you will define the actions that will occur when this screen is recognized. Uncheck the Apply a transformation checkbox. 48. Check the Play a macro checkbox. 49. In the drop-down select the macro you just created (FileBrowse). 50. Click Finish to create the screen customization. You now have a screen customization that will play your macro when the FILE BROWSE screen is accessed by a user. In this example, this will happen when the user selects Browse from the drop-down on the main menu screen, and enters a customer account number that is within the range of existing account numbers. Introduction to IBM Rational HATS 73

51. Switch back to the Web Browser view to display your HATS application. Choose the Browse transaction, and enter a customer number of 100000. Click the ENTER 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. Note: There are some considerations about HATS web transformation. Please refer to: https://www.ibm.com/support/docview.wss?rs=3441&uid=swg27019102 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. What s more, the numerous useful Dojo widgets can enhance the user interface of your web application. You can create highly themeable, functional forms, layouts, and much more usings Dojo widgets. Please report any errors in this tutorial to Cloud Tsai (cloudt@tw.ibm.com) Introduction to IBM Rational HATS 74