This tutorial is broken down into several sections. The first section provides the key concepts about HATS and HATS applications. The next sections cover the basic steps to implement a HATS application using a publicly available host system and test it using the WebSphere test server that is built-into WebSphere Studio. Then a customization section is provided that covers the steps to customize the application and the steps to build and use a macro with the application. At the end are the steps to assemble the HATS application and then install it and run it on a WebSphere Application server.
Screen recognition criteria
When you start the workbench, you see a single window. One perspective can be displayed per workbench window. A perspective contains views, like the Navigator, and editors. More than one perspective can be open, but only one can be viewed at any one time.
At the far left of the workbench window is a shortcut bar that allows you to open new perspectives and move between perspectives that are already open. The name of the active perspective displays in the title of the window, and the shortcut bar contains icons associated with the active perspective.
Figure 2. WebSphere Studio workbench
The HATS perspective includes two main areas:
The next sections are step-by-step instruction on how to build a HATS application and then step you through customizing several screens and applying transformations. As part of the project a macro will be created in the HATS studio to use with a screen recognition event.
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: "jkdemo" 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 Simple1.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. Expand
the folders and examine the files that the studio built for the project.
Overview - The Overview folder shows you summary information for your project. It shows general information, customization settings and connection settings in this one view. Click on the Connection Settings Tab
Connection Settings - The Connection Settings section shows you the specific connection parameters for the project, Host name, Port, Type, Code page and Screen size. Click on the Advanced Connection Settings tab
Advanced Connection Settings - The Advanced Connection settings tab is where you would specify advanced connection settings. Notice the Enable print support check box. This is where you would configure the application to support printing. You can also configure optional, advanced connection setting parameters and values here. Click on the Template tab.
Template - The Template tab allows you to select a default template. Here you could change the default template for the application. There are several templates provided that can be selected as the default template, each of which can be further customized. Click on Text Replacement tab
Text Replacement - The Text Replacement tab allows you to replace host screen text with your own text. This will apply to the whole application. Click on Event Priority tab
Event Priority - The Event Priority tab lets you prioritize your screen customizations. The higher priority events would be at the top of the list. Click on Customization Settings tab
General -The General tab lets you configure default component and widget rendering settings. Also this is where you define keyboard and keypad support. Click on the Source tab
Source - All the projects settings are stored in the project source XML file.
1. Highlight your project in the HATS Project View if not already selected.
2. From the Welcome to HATS page, in the Create your first project section click on Preview your HATS project using the Run on Server.
3. Your application will be published to the internal test server. Then the WebSphere Test server will be loaded within the WebSphere Studio and a Server perspective will come up with a browser that will load automatically the URL needed to start the application. You should see the WebSphere messages in the Console view at the bottom of the workbench. This may take a minute. Once the browser completes loading, the user should see the Sign On screen in the browser.
4. You can now interact with the application in real time and test it, navigating through the screens and see how the default template for the application is being applied to the host screens.
5. On the Sign On page, enter a userid and password to sign on to the
ISERIESD OS/400 application
Userid: user4boats
Password: password
Press the enter key on the
keyboard or click on the ENTER button on the browser page
6. The application will run and should update the browser page with the OS/400 Main Menu screen or the Display Messages screen.
7. If the Display Messages page comes up, just press the enter key once again or click on the ENTER button again on the browser page and they next page should be the OS/400 Main Menu page.
8. On the OS/400 Main Menu page enter: "strqm" without the quotes on the command line below the menu and press the ENTER key.
9. On the next screen enter "3" in the input field on the page, without the quotes and press the ENTER key.
10. On the next screen enter "whidemo" in the library input field without the quotes and press the ENTER key.
11. On the next screen, in the OPT column, click on the drop down list next to the JK_INVENTORY table. Select Display table. Note: This screen has been transformed as a AS/400 subfile screen by default with HATS.
12. On the next screen just press the Enter key.
13. You should see a list of sports items in the database on this screen. This is the ending screen for the application. You can press the PgDn key to scroll the database of items. We will customize the application in the next section.
14. Click on the PF3 key or the Exit link to exit out of the application.
15. Continue clicking on PF3 key or the Exit link to exit until you are back on the OS/400 Main Menu screen.
16. On the OS/400 Main Menu screen. Type in a "90" without the quotes in the command line area and press or click on the ENTER key. This will log you out of the application.
17. The web page should now be back to the Sign On screen.
18. When finished testing with Run on Server, you can close the browser by clicking on the browser tab and then click back to the HATS perspective on the far left side of the workbench.
This has demonstrated the Run on Server capability of WebSphere Studio when using a HATS application. This has also demonstrated to you a HATS application with a basic configuration and a default transformation applied to every screen, and how you would navigate through the application using WebSphere Studio Run on Server. The application could be assembled now as is and deployed to a WebSphere application server for users to run.
1. With the HATS perspective opened, highlight you project in the HATS Project View.
2. Right click on the mouse and select Open Terminal. This will open the HATS Host Terminal to the Sign On screen of the iSeriesd host application.
3. On the Sign On page, enter a userid and password to sign on to the
ISERIESD OS/400 application
Userid: user4boats
Password: password
Press the enter key on the
keyboard or click on the Enter key.
4. The application will run and it should be on the OS/400 Main Menu screen or the Display Messages screen.
5. If the Display Messages page comes up, just press the enter key once again and the next screen should be the OS/400 Main Menu screen.
6. On the OS/400 Main Menu screen type: "strqm" without the quotes on the command line below the menu and press the ENTER key.
7. The DB2 Query Manager for AS/400 screen will come up. On the toolbar at the top click on the Create HATS Screen Customization wizard.
8. Enter a screen customization name or accept the prefilled name of DB2_Query_Manger_for_AS_400. All description fields are optional so you can enter one if you desire, and click Next.
9. On the Select Screen Recognition Criteria panel, in the Select a screen section "Use the terminal screen" should be checked. A box should be already drawn around the middle top of the screen. Leave the "Strings" option checked and in the String Position section change the radio button selection to "at a specified position". Click Next.
Figure 4. DB2 Query Manager for AS/400 screen recognition criteria
Figure 5. DB2 Query Manager for AS/400 screen recognition criteria
10. The Select Actions panel will open. Leave the check box for "Apply a transformation" checked. The "Create new transformation" radio button should be checked and the DB2_Query_Manager_for_AS_400.jsp in the window. Leave the template set at: (default template) and click Finish.
Figure 6. Select Actions
11. The Insert Host Component - Screen Region panel will open. Check the "Highlight input fields" check box at the bottom of this panel. Notice the blue highlighted field at the bottom of the screen under the word "Selection". With the left button held down on the mouse, draw a box around the menu choices on the screen. Notice in the Selection area that the screen coordinates are filled in automatically. Click Next.
Figure 7. Insert Host Component - Screen Region Panel
12. On the Rendering Option panel, click on Components: Selection list and Widgets: Button table. Click on the Full page preview button. This allows you to view the page as it would show in a browser window. Close the Preview. Click Finish.
Figure 8. Rendering Option panel
13. The DB2_Query_Manager_for_AS_400.jsp should now be opened in the HTML editor. In the source view, notice that in between the HATS:Form tag is the HATS:Component SelectionListExtract. Also notice the tag <HATS:HostKeypad/>. This is the tag to provide the default keypad to the JSP. Close the DB2_Query_Manager_for_AS_400.jsp in the HTML editor, and click on Yes to Save Resource panel to save your changes.
Figure 9. DB2_Query_Manager_for_AS_400.jsp
14. In the HATS Project View, double-click on the DB2_Query_Manager_for_AS_400 under the Screen Customizations folder. This will open the DB2_Query_Manager_for_AS_400.evnt. We will be adding an additional screen recognition requirement. Click on the Screen Recognition Criteria tab at the bottom. Check the Cursor position check box and enter in the Row: 21 and in the Column enter: 7. Then close the DB2_Query_Manager_for_AS_400.evnt and Save the resource.
Figure 10. Adding an additional screen recognition requirement to DB2_Query_Manager_for_AS_400.evnt
15. Restore the HATS Host Terminal window. From the DB2 Query Manager for AS/400 screen enter a 3 in the Selection area command line and press the Enter key. Note: you may need to click inside the terminal window to get the cursor control back. The Specify Collection or Library pop-up screen will open up in the center of the screen. Notice the cursor is at row 12, column 41, we will use this to uniquely identify this screen in the next step.
16. Click on Create HATS Screen Customization wizard. The Screen Customization name and description panel will open. The prefilled screen name this time will be the same as the previous screen but this time will have a "_1" on the end, so it would look like this " DB2_Query_Manager_for_AS_400_1". Click Next. The Select Screen Recognition panel will open with a yellow broken line around a top portion of the screen. Move the box to around the "Type choice press enter text" as shown in the figure. Change the Sting Position to "At a specified position" and also check the Cursor position check box. Click Next.
Figure 11. Screen recognition criteria for the prefilled name of DB2_Query_Manager_for_AS_400_1
screen (Specify_Collection_or_Library pop-up screen)
17. On the Select Actions panel leave everything as shown. You should see DB2_Query_Manager_for_AS_400_1.jsp next to the Create new transformation selection. Click Finish.
Figure 12. Select Actions for the DB2_Query_Manager_for_AS_400_1.jsp
18. The Screen Region panel will open. Verify that the "Specify Collection or Library" pop-up screen is displayed. Check Highlight input fields. Draw a box around the area shown in the figure below and click Next.
Figure 13. Screen Region for DB2_Query_Manager_for_AS_400_1 screen
19. The Rendering Option panel will open. Select Component to be: Field and Widget to be: Field. Click Finish. Examine the DB2_Query_Manager_for_AS_400_1.jsp in the HTML editor. Notice that your HATS Component and Widget were added to the page. Close and Save the resource.
20. Restore the HATS Host Terminal window. In the Library field type: "whidemo" and press Enter.
21. The Work with Query Manager Tables screen should appear. Move the cursor down to the OPT field just left of JK_INVENTORY, where the cursor is pointing to in the figure and type a "5" in the OPT field and press Enter.
Figure 14. JK_INVENTORY library location on screen
22. The Find Data in Query Manager Table should appear. We want to create a macro now. In the HATS Terminal at the top are the macro buttons. Click the Record Macro button. The Record a Macro panel will open. You can give the macro a name or accept the default and click Finish. Now back in the HATS terminal you should still be on the "Find Data in Query Manager Table" screen. Press the Enter key once and the next screen will be the "Display Report" screen with a list of items. Stop recording by clicking the Stop Macro icon.
Figure 15. Find Data in Query Manager Table screen to start recording
macro
23. On the "Display Report" screen click the Create HATS Screen Customization wizard. Accept the prefilled name of Display_Report and click Next. Note: You may need to highlight/select the HATS project folder before you can click Next.
24. The Select Screen Recognition Criteria panel will open. Move the yellow dotted line so that it is just around the Display Report text at the top of the screen. Click the String Position option of "At a specified position" and click Next.
25. The Select Actions panel will open. Leave everything as shown. You should see the Display_Report.jsp next to the Create new transformation section. Click Finish.
26. The Insert Host Component - Screen Region panel will open. With the mouse draw a box around the entire list of items on the screen as shown in the figure and click Next.
Figure 16. Screen Region - selecting the items to render in web page
27. The Rendering Option panel will open. Select Visual Table for the Component and select Table for the Widget. Click on the Full page preview button to preview what it will look like in the web page and then close the preview and click Finish. The Display_Report.jsp will be open in the HTML editor window now. Close the Display_Report.jsp, and save the resource. Close the DB2_Query_Manager_for_AS_400_1.jsp and save the resource.
28. Now you need to add a screen customization for the "Find Data in Query Manager Table" screen so that the macro will run that you recorded earlier when this screen is recognized. To do this requires that we be on the "Find Data in Query Manager Table" screen.
29. Restore the HATS terminal. You will need exit out of the application and then navigate back to the "Find Data in Query Manager Table" screen. Refer to the previous navigation steps in the previous section if needed. Do this and when you are on that screen then start the Create HATS Screen Customization wizard. Keep the prefilled name and provide an optional description if you desire and click Next. Note: You may need to highlight your project folder before clicking Next.
Figure 17. Find Data in Query Manager Table screen
30. On the Select Screen Recognition Criteria panel, keep the defaults and click Next. When the Select Action panel comes up, uncheck the " apply Transformation check box and check the "Play a macro" check box at the bottom of the panel. Click Finish.
Figure 18. Select Action - checking Play a macro check box
31. Double click on the Find_Data_in_Query_Manager_Table.evnt in the Screen Customizations folder. Verify that play macro: Yes and Apply transformation: No. Close the Find_Data_in_Query_Manager_Table.evnt. Close the HATS Terminal. Save your application.
32. Now you can test your customized application by running on the server in the studio to test. Refer to the instructions described above in the Run on Server section if you need help running on the server. You may need to stop and restart the test server from the Servers perspective in the WebSphere Studio. Notice that when you run the application that the "Work with Query Manager Tables" screen will be transformed as a AS/400 subfile presentation in the web page. Check to see that the macro that you recorded is being run when the Find Data in Query Manager Table screen is recognized. After this screen is recognized the macro will run as an action that is associated with that screen recognition event. The macro in this case is providing the keyboard control of pressing the ENTER key to get to the Display Report screen where the database table results are presented to the user. This is verified by the application presenting you with the Display_Report screen as the next screen after the Work_with_Query_Manager_Tables screen (the subfiles screen) when running the application.
Figure 19. AS/400 subfiles screen (Work_with_Query_Manager_Tables screen)
rendered in the browser from the HATS application
Figure 20. Display_Report screen rendered in browser by the JK_Enterprises
HATS application
1. From the Welcome to HATS page click on the Assemble link in the Prepare your project for production section.
2. The EAR Export panel will come up. Specify the HATS.EAR for the resource to export. Provide the path to the installableapps directory, if you have WebSphere on the same workstation as the WebSphere Studio. Provide a file name for the application files and click Finish. If the WebSphere Application Server is not on the same machine that the WebSphere Studio is installed on then copy this file containing the HATS.EAR with the applcations to the installalableapps directory on the WebSphere application server where you want to run the application.
3. Then use the Install Enterprise Application Wizard from the WebSphere Application Server Administrative Console to install the HATS.EAR application onto the WebSphere / HATS server just like you would install any other EAR application.
5. Then provide the end user with the URL to the application. Use the webmodulename for the HATS application in the URL.