IBM WebSphere Host Access Transformation Server V4.0
(HATS) Tutorial Module 2
HATS Basic Implementation Steps
Abstract
This tutorial is designed for anyone who wants learn how to build HATS
applications. The tutorial is in the form of a lab exercise to a
publicly available host application. This module will cover all the steps
to configure a basic HATS application, apply a default transformation,
and test the application by running it on the WebSphere Studio test server.
Modifying the default template is also covered to demonstrate how to add
customized company names and links and add images to the default template
from the WebSphere Studio gallery of images. The last topic covered
in this tutorial is the steps to deploy the application on a WebSphere
application server.
Assumptions / Requirements
It is assumed that the user has already installed WebSphere Studio 4.03
and the HATS Studio 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 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
The HATS Studio tool is designed understand Host applications. All
the steps in developing a HATS application are performed using the
WebSphere Studio workbench. The HATS perspective is the user interface
and integrated development environment (IDE) in WebSphere Studio
from which you launch wizards, display lists of resources, and use
navigational tools to build your HATS application. It also contains
help information about both HATS and WebSphere Studio. The HATS perspective
is a collection of views and editors that allow you to create, edit, view,
and run resources which belong to a specific HATS application.
Basic HATS Application steps
1) Launch HATS Studio
2) Launch Create HATS Project wizard
3) New Project panel - Give your project a name and description
and click next
4) Connection Settings panel - Enter the Host name and set the
type, either 3270 or 5250 and click next.
5) Select Default Template panel - Select a default template
to use for this project and click Finish. Project files will
be built and return to the HATS project view.
6) Run on Server to test
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
Follow the steps below to build and test a basic HATS application.
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 (24x30). 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.
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
The next step is to run the application and test it using the WebSphere
test server that is part of WebSphere Studio.
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.
5. On the OS/400 Main Menu page enter the word "boats" without the quotes
on the command line below the menu and press the ENTER key or button.
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
In this section you will modify the default template that you have selected
to use with the HATS application. This will introduce you to the
steps needed to do further template customizations.
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.
5. Adding a Picture Image
-
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 1. Simple1.jsp opened in Design View for making modifications to
template
Figure 2. Image added to Simple1.jsp in WebSphere Studio
Assemble the Application for installing and running on a WebSphere Application
Server
In this section we will look at the steps to assemble and install the HATS
application to the WebSphere application server so that users can run the
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 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.
4. After the installation is completed you will need to Start the EAR Application
and do a Regen of the web server Plugin from the WebSphere Administrative
Console..
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.