This tutorial will demonstrate how to use a macro to gather host component data and create global variables. After you have built the macro that will obtain the host data you will then create a transformation JSP that will display the data in a drop down list.
1. Launch the HATS Studio by navigating through: Start >> Programs >> IBM WebSphere HATS >> HATS Studio
2. From the Welcome to HATS page , click on launch the Create HATS Project wizard link. The New Project panel will come up.
3. Provide a project name, for example: "jkgvdemo" and enter a description like "iSeries demonstration applications"
4. Leave the check boxes checked (default) and click Next
5. On the Connection Settings panel enter the following below
and click the Next button:
Host name: iseriesd.dfw.ibm.com
Port: 23
Type: 5250
6. Select Default Template panel. Select a default template from the list of provided templates in the drop down list box and click on the Finish button. Note: The screen shots in this tutorial use the Sports.jsp template.
7. The Studio will now build the project files, this may take a few
minutes. When the Studio finishes building the project files the HATS Project
View
will open and you will see the project folders on the left.
1. With the project highlighted in the HATS Project View, right click and select Open Terminal from the list. This will open the terminal window. You will now need to enter a user id and password . In the terminal window type in user: user4boats password: password and press the enter key.
2. The next screen should be the OS/400 Main Menu screen or could possibly be a display messages screen. If the display messages screen appears, press the enter key and the OS/400 Main Menu screen should appear.
3. The OS/400 Main Menu screen is where we will begin the Screen Customizations wizard so we can customize this screen. Notice that this is a menu screen with several choices that can be entered on the command line. You will create a transform JSP that will render the menu as a Selection List - Button Table widget in the next steps and also add an input field for the command line.
4. From the HATS terminal click on the Create HATS Screen Customization wizard. The Screen Customization Name and Destination panel will open.
5. Accept the pre filled screen name and provide an optional description if desired and click Next.
6. The Select Screen Recognition Criteria panel will come up with a screen capture of the OS/400 Main Menu screen. Here is where you will define the screen recognition criteria.
7. Notice that in the Select a screen box is the choices of Use the terminal screen (selected) and a grayed out choice of Use a previously captured screen. HATS Studio has the capability of using previously captured screens to do customizations with. This is great for working remotely because it allows the application developer to work remotely and do screen customizations without being attached to a network accessing the host application in real time. You just need to have previously captured the screens with the HATS built in screen capture tool, then customize on an iterative basis later.
10. The Insert Host Component - Screen Region panel should be open. We want to render the screen menu as a GUI widget on the browser page.
11. The Rendering Option panel will open next, shown below. From here you select what Rendering Option method to use. As you select different options the Component Preview and Widget Preview panels will change and show you how the component will look on the web page.
Figure 3. OS_400_Main_Menu.jsp in HTML editor.
13. Move the blinking cursor on the OS_400_Main_Menu.jsp so that it is located below the HATS:Component tag on the page.
Figure 4. Preview of OS_400_Main_Menu.jsp.
2. Click on the Record Macro button. 
Accept the prefilled macro name, and click Finish.
3. Type in strqm on the command line and press the Enter key. (strqm stands for start query manager)
4. On the next screen type in 3 and press Enter key.
5. On the next screen type in whidemo and press the Enter key.
6. On the next screen press the tab key 5 times ([tab][tab][tab][tab][tab]) so the cursor is in the OPT field next to the JK_CATALOG field and enter a 5 and press the Enter key.
7. On the "Find Data in Query Manager Table" screen enter product_category under the Column field, and tab over to the next field which is Test and enter eq then tab to the next field Value, and enter Animals and press the Enter key.
8. You should now see a list of Animals on the Display Report screen. Click on the Insert Extract button on the top of the display terminal toolbar. Draw a box around the area shown in the image below and enter the names and settings shown in the Insert Extract panel below. Note that you are Extracting this region as a list of strings and saving as global variable and overwriting any existing value with this new value. Make sure you UNCHECK the Show handler checkbox.
Figure 5. First extract of Control numbers and saving as global variables.
(Step 8)
9. Extract the Part_Name field. Draw a box around the area shown in the image below and enter the names and settings shown in the Insert Extract panel below. Note that you are Extracting this region as a list of strings and saving as global variable and overwriting any existing value with this new value. Make sure you UNCHECK the Show handler checkbox. Then press the PgDn button to move to the next screen and go to step 10.
Figure 6. First extract of Part_Names and save to global variables.
(Step 9)
10. Draw a box around the area shown in the image below and enter the names and settings shown in the Insert Extract panel below. Note that you are Extracting this region as a list of strings and saving as global variable and Appending this new value to the end of the existing value. Also note that the Global Variable Name is the same as the first extract for this area of the screen. So we are appending this second extract to the first extract so they are one list of strings. Make sure you UNCHECK the Show handler checkbox.
Figure 7. Second Extract of Control numbers to save to global variables.
(Step 10)
11. Extract the Names on the second screen of results. Draw a box around the area shown in the image below and enter the names and settings shown in the Insert Extract panel below. Note that you are Extracting this region as a list of strings and saving as global variable and Appending this new value to the end of the existing value. Also note that the Global Variable Name is the same as the first extract for this area of the screen. So we are appending this second extract to the first extract so they are one list of strings. Make sure you UNCHECK the Show handler checkbox. When finished press the PgDn key to go to the next Display Report screen and go to step 12.
Figure 8. Second Extract of Part_Names saving to global variables.
(Step 11)
12. Extract the results from the last screen. Draw a box around the area shown in the image below and enter the names and settings shown in the Insert Extract panel below. Note that you are Extracting this region as a list of strings and saving as global variable and Appending this new value to the end of the existing value. Also note that the Global Variable Name is the same as the first extract for this area of the screen. So we are appending this second extract to the first extract so they are one list of strings. Make sure you UNCHECK the Show handler checkbox.
Figure 9. Third extract of control numbers and save to global variable.
(Step 12)
13. Extract the names from the last screen. Draw a box around
the area shown in the image below and enter the names and settings shown
in the Insert Extract panel below. Note that you are Extracting this
region as a list of strings and saving as global variable and
Appending this new value to the end of the existing value. Also note
that the Global Variable Name is the same as the first extract for this
area of the screen. So we are appending this second extract to the
first extract so they are one list of strings. Make sure you UNCHECK
the Show handler checkbox. When finished, stop recording the
macro by clicking on the stop recording button. 
Go to the OS/400 Main Menu screen and playback the macro to verify that
it collects all the data from the screens and presents the 6 different
extracts c1,c2,c3, n1,n2, and n3 in the macro test panel and that each
individual extract is showing all the correct names. Note: you
will not see all of the appended variables in one list of strings until
you Run on Server to test.
Figure 10. Third Extract of Part_Name save to global variable. (Step
13)
Figure 11. Os_400MainMenu.JSP
Figure 12. Os_400MainMenu.JSP Design View
15. Create a Display Report Screen Customization/Transformation. Open the Display Terminal and navigate to the first Display Report screen. Click on the Screen Customization wizard.
Figure 13. Create HATS Screen Customization wizard
16. Accept the prefilled name and click Next.
Figure 14. New Screen Customization
17. Leave Use the terminal screen selected. Draw a box around
the Display Report at the top of the screen. Change the string position
to At a specified position and click Next.
Figure 15. Select Screen Recognition Criteria
18. Leave Apply a transformation selected and click Finish.
Figure 16. Select Actions
19. Draw a box inside the input field for the Control field. Click Next.
Figure 17. DisplayReport Screen Region
20. Add a Component: Input field, Widget: Text input on the Transformation JSP like shown below. Change the Widget settings for the Widget so that they are matching the picture below. Note1: The Widget settings is the little window looking ICON just to the right of the Text input widget entry in the list and above the little looking glass ICON. Click OK. Then Click Finish. The transformation JSP should now be shown in the editor. The Note2: If you named your global variables differently, then add them accordingly. Finish the transformation.
Figure 18. DisplayReport Insert Host Component - Rendering Option
21. Add individual Host Keys to the transformation you just created. Add a F3 key and the Enter key to the page, anywhere on the page.
22. Then add a VisualTableExtract to show the results on the page. This can be done by placing the cursor below the exisiting widget on the DisplayReport JSP and then clicking on HATS Tools from the toolbar and selecting Insert HATS Component. Draw a box around the area shown below and extract to VisualTable widget.
Figure 19. Insert Host Component selection for VisualTableExtract
Figure 20. Insert Host Componet - Rendering Option Visual Table
Figure 21. Preview of DisplayReport JSP
23. Test your application. Verify that you can select one of the items in the drop down list and then click the ENTER button, and verify that it is at the top of the table in the extracted results on the page. Select another item in the drop down list and verify that it is now at the top of the list.
Figure 22. DisplayReport showing with Teddy Bear selected for the
Control field
Copyright: Licensed Materials - Property of IBM
(C) Copyright IBM Corp. 2002 All rights reserved.
U.S. Government Users Restricted Rights -
Use, duplication or disclosure restricted by
GSA ADP Schedule Contract with IBM Corp.