IBM WebSphere Host Access Transformation Services (HATS) V5

Tutorial Module 3

Customizing HATS Applications

Abstract

This tutorial is designed for anyone who wants to learn how to customize HATS applications. The tutorial is in the form of a lab exercise to a live publicly available host application. This module will cover some customization steps and how to apply different actions based upon recognized screen events. This will demonstrate the rules based engine that is part of HATS and how transformations are applied to screens depending upon certain events.

Assumptions / Requirements

It is assumed that the user has already installed WebSphere Studio 5.1 and the HATS Studio v5 software on a supported platform. The platform requirements were covered in the HATS Tutorial - Module 1. It is also assumed that a network connection can be made to the publicly accessible IBM Demonstration iSeries host at:

Host name: iseriesd.dfw.ibm.com, port: 23, type: 5250

Connectivity to this host can be tested by using any TN5250 emulator configured for the settings above. A WebSphere application server that meets the requirements for HATS needs to be available if you want to deploy the HATS application to a production WebSphere server. It is assumed that you are already familiar with the WebSphere application server console.

Topics covered on this tutorial

Review of basic HATS Application steps
Customizing screens using Screen Customization Wizard
Testing the customized application

Review Basic HATS Application Steps

You can reuse the previously configured HATS application for Module 2 for this tutorial. If you have a previously configured HATS application that you want to use from Module 2, then skip to the next section and start from there. Otherwise follow these steps prior to starting the next section.

1. Launch the HATS Studio

Start > Programs > IBM WebSphere HATS > HATS Studio

2. From the HATS Welcome page , click on "launch the Create HATS Project Wizard" link.

3. The New Project panel will come up.

Provide a project name, for example: boats
Enter a description like "iSeries demonstration applications"
Leave the check boxes checked (default) and click Next

4. On the Connection Settings panel enter the following:

Host name: iseriesd.dfw.ibm.com
Port: 23
Type: 5250
Leave the code page at default (037 United States) and leave the screen size default (24x80). Click the Next button

5. The Select Default Template panel

Select a default template from a list of provided templates in the drop down list box
Click Finish button. The studio will now build the project files, this may take a few minutes

6. 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 build for the project. You can now go the next section to start customizing the HATS application.

Customizing the application

This section will introduce you to the HATS customization wizards. You will customize several of the boats application screens and then test the application by running the application in the test server within WebSphere Studio.

1. With the project highlighted in the HATS Project View, right click and select Open Terminal and select the main connection from the list. This will open the terminal window. You should see the SignOn screen.

Click on the Create HATS Screen Customization wizard on the top left of the toolbar.
Use the pre filled screen name or provide a name, click Next.
On the Select Screen Recognition Criteria panel leave all the default settings and click Next.
On the Select Actions panel notice that Apply a transformation is checked by default, Click Finish
On the Screen Region panel rope around the User input field area and click Next.. You can check Highlight input fields in the lower left and this will highlight all input fields.
On the Rendering option panel select component Input field and select widget Text input and click Finish.

The SignOn JSP will now open in the editor. Highlight the line just below the "<HATS:Component" tag as shown in the picture and then right click the mouse and select HATS Tools -> Insert Host Component.
The SignOn screen will appear again and then go ahead and repeat the steps above to create an input field for the Password field.
When complete, maximize the terminal screen and go ahead and enter the user and 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 add a Screen Customization. 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. Specify a name and a description for the new Screen Customization.

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 are the choices of "Use the terminal screen" (selected) and "Use a previously captured screen" (which is grayed out). 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.

Uncheck the "Use default criteria" box
String Position - Click on At the specified position instead of the default Anywhere on the screen. This will make the screen recognition criteria unique to this specific location for the text: OS/400 Main Menu
Click Next

8. The Select Actions panel will come up.

The Apply a transformation option will be checked by default.
Create new transformation will be also checked by default with the name provided already.
Leave everything as is and click Finish

9. The project files will be built now. The Os_400MainMenu.jsp file will be built and the Insert Host Component - Screen Region panel should open up now, shown below. You can sign off the boats application on the iSeriesD host and close the HATS Terminal window now.

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.

To assist you in customizing the screen, there is a check box at the bottom of this panel that when checked will show you highlighted in blue any input fields on the screen. Check this box so you can see the input fields.
With the left button on the mouse held down draw a box around the menu choices on the screen. Make sure you include all the items in the menu list.
When you have the menu text items included in the box click Next.

Insert Host Component - Screen Region panel

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.

Select "Selection List" from the Component List and "Links" from the Widget list and click on Finish. The widget will be built and added to the Os_400MainMenu. Jsp
Click on Full Page Preview button to see a preview of how these changes will render in the browser.
Click Finish - this will add your changes to the Os_400MainMenu.jsp now.

Rendering Option panel - Selection list - Links

12. Examine the code added to the JSP, shown below. Notice that the SelectionListComponent has been added with the HATS tag on the JSP.

We also want to show an input field on the page so that the user can enter "boats" on the command line to load the boats application.

Os_400MainMenu.jsp in HTML editor

13. Move the blinking cursor on the Os_400MainMenu.jsp so that it is located below the first HATS:Component tag on the page.

Click on HATS Tools on the top toolbar and select Insert HOSTcomponent or with the cursor focus below the <HATS:Form> tag then click the right mouse button and select HATS Tools, Insert HOST component.
Click the check box "Highlight input fields" to see the input fields on the screen.
Draw a box around the input field area of the screen and click Next
Rendering Option panel select Input field for the component and Text input for the widget and click Finish.

14. Then go to File > Save the JSP or CTRL S to save the changes to the JSP.

Preview of Os_400MainMenu.jsp.

Open the terminal screen and type boats into the input field and press the ENTER key.
On the AS/400 WSG Boat Demo screen click on the Screen Customization wizard to customize this screen.
Rope around the text "Enter your search parameters" for the screen recognition criteria
Change the string position to at a specified position and click Next
On the Select Actions just click Finish leaving Apply a transformation checked.
On the Screen Region panel rope around the Type input field on the host screen and click Next.

On the Rendering Option panel select Input field and for the widget select Popup.

Click on the Settings for the Popup and uncheck Use project defaults and check String and add list items as follows into the input field: All=A;Powered=P;Commercial=C;Tug=T;Sailing=S and click Finish.

On the JSP add Input field component / Popup widgets for the other 2 input fields. Use the following values for length: 100,200,300 and these values for year: 1940, 1975, 1999. Save the JSP. Now we are ready to run the application on the server. Get out of the application and sign off.

15. Highlight the application in the HATS Project View.

Click on the Preview your HATS project using Run on Server link on the Welcome to HATS page.

16. After a while the WebSphere Test Server will load in the Server Perspective and then a browser will start to open the URL to the application. When the first page is in the browser go ahead an sign into the application and press the enter key and navigate through the application to see your screen customization changes.

17. The next page should come up with the transformation applied so that the menu is rendered as links with an input field.

Type in boats on the command line and press the enter key. Go ahead and navigate through the application to verify it is functioning as designed. Notice that with the link for (90) Sign off, the application will enter the 90 for you and sign you off the application.
Click on the selections in the Popups and verify that the application goes to the results page. After you have tested and verified that the screen customizations work properly, you can add PF Key or buttons to the AS/400 WSG Boat Demo JSP, F3=End (back to Os400 Main Menu) and F12=New Search (back to WSG Boat Demo menu)

18. You can also test run the HATS application from a browser while the WebSphere Test Server is running the application in the WebSphere Studio. Simply copy the URL from the browser in the WebSphere Test Server and then open a browser outside WebSphere Studio and then paste the URL into the browser and press the enter key. The entry servlet for the application should load after a bit and you should see the first screen of the application in the browser and you can work with the application from here. This way you can view the application like a web user would see the application running on WebSphere.

19. Summary - the above section has stepped you through generating several screen customizations and generating transformations. These steps have demonstrated to you some of the tasks necessary to customize screens. These steps can be applied in a similar manner to build other screen customizations and transformations for host screens that the developer might want to customize.

Conclusion

In this tutorial you were shown how to use the screen customization wizards to transform several screens to apply HATS widgets to these screens.

The next tutorial (Module 4) will be a lab exercise using Host Publisher v4 resources with HATS v5.

Copyright: Licensed Materials - Property of IBM
             (C) Copyright IBM Corp. 2002, 2003 All rights reserved.
             U.S. Government Users Restricted Rights -
             Use, duplication or disclosure restricted by
             GSA ADP Schedule Contract with IBM Corp.