IBM WebSphere Host Access Transformation Server V4.0 (HATS) Tutorial Module 2

HATS Basic Implementation Steps

Abstract

Assumptions / Requirements

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 in this module

• Review HATS Studio
• Creating a basic HATS project to use a default template
• Configuration information
• Pick default template
• Review contents of the project
• Run on Server
• Modifying the Default Template
• HATS Application Assembly Steps
• Packaging the project into J2EE ear file
• Deploying the application to the web server
• Installing a HATS ear application onto WebSphere

WebSphere Studio Workbench - HATS Studio Review

Basic HATS Application steps

These steps represent the tasks that you would need to do to configure a connection and use a default template to apply to each screen that the user navigates through. Once these steps are accomplished, the application could be packaged in a J2EE ear file and transferred and deployed on a WebSphere application server and made available to a web user. Customization of the HATS application can be done on an iterative basis later after the application is already up and running.  This will be covered in the next tutorial.
 

Create A HATS Project

• Start > Programs > IBM WebSphere HATS > HATS Studio

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

• 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 (24x30).  Click the Next button

• 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

7. The Project Settings folder

• The Project settings folder allows the application developer to view all the project settings and change previously configured settings or configure new settings. We will examine all the project settings here.
• Double click on the project settings in the project. This will cause the Overview page to load.  Notice the tabs at the bottom of the page.  Clicking on these tabs will show you all the settings 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 page 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 default templates provided that 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 page lets you configure miscellaneous default settings for the project. Also this is where you define keyboard and keypad support.  As you select each individual component or widget you will be presented with different options.  Click on the Source tab
• Source - All the projects settings are stored in the project source XML file. Close the Project Settings pages.

Run on Server

1. Highlight  your project in the HATS Project View if not already done so.

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. 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

4. On the Sign On page, enter a user id and password to sign on to the ISERIESD OS/400 application

• User id: user4boats
• Password: password
• Press the enter key  on the keyboard or click on the ENTER button on the browser page
• The application will run and should update the browser page with the OS/400 Main Menu screen or the Display Messages screen.  If the Display Messages page comes up, just press the enter key once again or click on the ENTER key again on the browser page and they next page should be the OS/400 Main Menu page.

6. The next page that should appear is the AS/400 WSG Boat Demo page.  This screen is a menu from which you can search a database application for boats that meet certain criteria that you supply here.  Notice that you have 3 input fields on this screen.  There is a field for Type, length and year.  Type can be any one of the following: A= All, P = Power, S = Sailing, T = Tug, C = Commercial.   Length can be a length to start from and Year is the year to start the search from.

7. By default the A is always in the type field.   Click on the Enter button to move to the next screen.

8. The AS/400 WSG Boat Demo screen should appear with a list of boats now with the default template applied to the screen.  Notice that there are input fields to the left of each boat entry.  At the top is words that indicate a 1=Details.  So if you enter a one in any one of the input fields and click or press the enter key you will get details about that specific boat.

9. Go ahead an enter a 1 in the Monk Fly bridge/Sedan selection and then click or press the ENTER key.

10. Now you should see the details for that boat in the web page.  Examine the results and then click on the End link at the bottom of the web page.  This is the F3 key represented as a keyboard link by the default template.

11. Now you should be back 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.

12. The web page should now be back to the Sign On screen.  You could start the application over from here if you wanted and try different search criteria if you desire.

13. 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.

14. 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 basic configuration and a default transformation applied to every screen, and how you would navigate through the application using WebSphere Studio Run on Server capability.
 

Modifying the Default Template

1. With the project highlighted in the HATS Project View, expand the Modify the template section on the Welcome to HATS page and Click on open the default template in the HTML editor link.

2. The template associated with your project will now open in the HTML editor window, source view. Click to place the blinking cursor just at the right of the company name text backspace to erase the place holder name, then type your company name.  Type 'Ctrl+S' or select File >> Save >> to save your changes.

3. You can now click on the Design tab at the bottom of the page to refresh the page to see your changes to the template.   You can now make changes in the source view and then review those changes by clicking on the Design tab to view the changes to the default template.

4. Go ahead and make other changes to the template and then save your changes.

•  The Top links section on the page can be modified to add your URLs or remove the classes that are not desired.
•  The Left Bar and Links section of the page can be modified with your company information or remove the classes that are not desired.
•  When you are finished making changes to the template go to the next section to add an image to the page.

• To add an picture or photo image is simple to do with the images provided by WebSphere Studio gallery of pictures. Make sure you have the Design         tab selected so you are viewing the template.
• At the bottom, click on the Gallery View tab, then expand the Image folder and click on the Photo folder at the bottom and it will open up the thumbnail view of the photos.  Scroll the bar down until you see the V5-005.jpg  photo.
• Right click on the V5-005.jpg photo and select "Insert as Background Image"
• The image will then be inserted into your template page.  This gives you an idea of how you can use WebSphere Studio to enhance and further customize your HATS template pages.
• When you are finished save your changes and close the template page.

Figure 2. Image added to Simple1.jsp in WebSphere Studio

Assemble the Application for installing and running on a WebSphere Application Server

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 applications 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.

•     From the WAS Administrative Console, click on Wizards
•     Select Install Enterprise Application
•     Browse for the path to the application and follow the wizard to install the HATS application.
•     Install the HATS EAR in the WebSphere default server instance.

5. Then provide the end user with the URL to the application.  Use the webmodulename for the HATS application in the URL.
 

Conclusion

• In this tutorial you were introduced to the HATS studio and shown the steps to create a HATS application and apply a default transformation to each screen of the host application.  You were also introduced to the HATS project settings and how to use the Run on Server capability of WebSphere Studio to test your HATS application before deploying it in a production environment.  The steps to modify the HATS default template were covered to customize it and lastly, the steps to assemble the HATS application and deploy onto a WebSphere application server were covered.

• The next tutorial (Module 3) will look at how you use the wizards to customize a screen in a HATS application and will look at screen customization events and actions.