Customize a HATS project
Overview
We can customize a basic HATS project by...
- Giving Web pages a graphical "look and feel". For example, adding a company name and logo.
- Tailoring the display of data from the host screens
- Converting text strings from the host to different strings in the Web pages.
HATS applications
When a user enters the URL of a HATS application into a browser, the request is sent to the HATS application, running on WebSphere Application Server. The HATS application forwards the request to the host application and receives a host screen. The HATS application converts the host screen into a Web page, using the customization you have designed in the HATS project, and sends the Web page to the user. Each time the user clicks a link or interacts with the application, the process is repeated.
How does the HATS application know how to convert each host screen into a Web page? You do not have to specify how to convert every single screen from your host application. Instead, the HATS application uses a rules-based approach to determine how to convert each host screen.
Each HATS application contains a list of screen customizations, which specify criteria used to match host screens. We will look at some examples in Work with screen customizations. Each screen customization also lists actions to be taken when a match is found, to convert the host screen into a Web page. Your HATS application compares each host screen to its screen customizations, and when a match is found, it converts the host screen by applying the specified actions.
Understanding HATS resources
Each HATS project contains a set of different types of resources. You can see the resource types listed under the project name (or in the project's Web Content folder) in the HATS Project View in the HATS Studio. These are the key resource types and how they are used:
- Connection
- A connection is a set of parameters used by HATS to connect to a host application.
- Screen customization
- A screen customization has two parts: a set of criteria for matching host screens, and a list of actions to be taken when a host screen matches these criteria.
- Screen capture
- A screen capture is an XML representation of a host screen, used to create or customize a screen customization, transformation or global rule.
- Macro
- A macro automates interactions with the host. It can send commands to the host, enter data into entry fields, or extract data from the host.
- Template
- A template (located in the project's Web Content folder) defines the appearance of areas that are common on most of your Web pages, such as a banner and a navigation area.
- Transformation
- A transformation (located in the project's Web Content folder) are Java beans that encapsulate interactions with legacy data sources. These legacy data sources include terminal-oriented applications that use 3270 and 5250 data.
Use the host terminal screen as you work
As you develop your HATS project, much of your work will involve screens from your host application. You will use the HATS host terminal to connect to and interact with your host application and use it for these tasks:
- Capturing screen images to work with when you are not connected to the host
- Create screen customizations
- Create transformations
- Recording macros.
Each of these tasks is described in the following sections.
To open a host terminal session, select your project in the HATS Project View, then click the Open HATS Host Terminal icon on the main tool bar to open the host terminal session. You can also open the host terminal from the context menu by right-clicking any item in the HATS Project View. If you leave your host session active, you can move around in it as you customize your project, creating screen customizations and transformations from the active screens. If you prefer, you can navigate to a few screens in your host application and click the Create Screen Capture icon on the host terminal tool bar to create screen images that you can use to create screen customizations and transformations.
When you use the host terminal through the HATS Studio, different actions such as minimizing the terminal window or shifting to a new perspective can cause the terminal window to lose focus and not regain it. Click the terminal window at the cursor position to restore the focus to the terminal window.
Work with screen captures
Another way to work with host screens is to navigate to several screens on your host terminal and use the Create Screen Capture icon, shown in the table above, to capture representations of host screens. After you have captured some host screens, you can work with them without being connected to the host computer. You must create screen captures in order to create global rules.
When you create screen captures, they are stored in the Screen Captures folder within your project. To work with a screen capture, expand the folder in the HATS Project View, then double click the name of the screen capture to start the screen capture editor. The editor shows the host screen; click the Preview tab at the bottom to see how this screen would be transformed by your project.
Click the Host Screen tab at the bottom to return to the host screen. From this tab you can use the icons at the top of the editor to create a screen customization or transformation based on this screen capture. The name of the screen customization or transformation defaults to the name of the screen capture.
Update your project's template
In most cases, the pages displayed by your application in a Web browser consist of two elements:
- A template containing the static content of the page, such as a company logo, the name of the company, and navigational links
- A transformed screen, representing a screen in the host application, on which an end user enters and views data.
A template is a JSP file that allows you to control the overall appearance of your application. A typical template contains a company logo, other company information, and links to other web pages. The template provides a consistent appearance for the pages in an application and enables you to personalize your HATS application.
Review the example of a transformed screen in A HATS example. In this example, the HATS browser window comprises three main areas: a graphic title banner, a vertical navigation bar, and the host information area. The template provides a coordinated look and feel for your application. You can use the same template in more than one application.
Although every screen in your application will normally use the same template, you can define a screen customization so that it applies a transformation that uses a different template. The new template applies to host screens matching the screen customization. (See Work with screen customizations for more information about screen customizations.)
To change the template for your HATS project, follow these steps:
- In the HATS Project View, click the plus sign to expand the resources for the project.
- Double-click Project Settings to open the project editor.
- Click the Template tab at the bottom of the project editor to view the Template page.
- Review the templates provided with the HATS Studio and select the one that most closely resembles the way you want your application to look.
- Use the Template Editor to modify the text, graphics, and links in the template. To open the Template Editor, expand your project in the HATS Project View. Expand the Web Content and templates folders. Double click the name of the template you want to modify.
Edit default rendering
Default rendering works with the default transformation to change host components on the screen to widgets on the Web page. Certain host components are mapped to specific widgets for conversion in the default transformation. A default list of mapping items is defined for projects. You can modify the list of items to suit your needs.
The items in the default rendering list are processed in the order in which they are listed. After a rendering item has been applied to a region of the host screen, that region has been "consumed" and will not be processed again.
To access the default rendering items in the project settings, follow these steps:
- In the HATS Project View, locate the name of your HATS project. If the list of resources associated with this project is not already expanded, click the plus sign to expand it.
- Double-click Project Settings.
- At the bottom of the editor window, click the Rendering tab.
- In the list of rendering items, click Default Rendering. The default list of default rendering items appears in the table on the right.
As you can see, there several default items defined. A check box precedes each item. When the box is checked, the item is active, and the default transformation uses the item, if HATS finds the component on the screen. If there is an item that you do not want to use in your project, you have the option to clear the check box rather than removing the item entirely. Using the buttons beside the table, you can add, remove, or edit items.
To define additional default rendering mappings, follow these steps:
- You create new default rendering mappings from a screen capture. Begin by creating a screen capture for each default rendering mapping you plan to create.
- Click Add to add a new item to the list.
- In the New Rendering Item window. provide a unique description for the item.
- In the Screen Region window:
- Select a previously captured screen that contains a component for which you want to assign a widget.
- Click Next.
- In the Rendering Options window:
- Select the component from the list of components.
- Select the widget from the list that you want to assign as the default widget for the component.
- Click Finish .
Create global rules
As default rendering works with the default transformation, global rules enable you to define component to widget mappings for all your transformations. Although the mappings are similar to default rendering, global rules apply only to input field components, and there are no default mapping items defined. When you define global rules, they take precedence over any default rendering items and component to widget mappings defined in specific transformations.
Each global rule item is defined in a transformation fragment, which can be included in other transformations. You can edit the transformation fragments just like you edit transformations, using all of the options available with transformations.
Work with screen customizations
The screen customization is at the heart of the HATS application's rules-based processing of host screens. Each screen customization includes a set of criteria that determine which host screens it should be applied to. When a host screen matches these criteria, the HATS application executes the actions that are defined in the screen customization. These actions can include:
- Applying a transformation to the host screen
- Extracting, setting, or inserting data or the value of a global variable
- Running a macro or macro transaction
- Calling Java methods to execute business logic
- Displaying a specified Web page (URL)
- Sending a key to the host application
- Forwarding control to a URL
Create a new screen customization
To create a new screen customization, follow these steps:
- Select your project in the HATS Project View and expand its resources.
- To create a new screen customization based on an active host terminal, bring up the host terminal, navigate to the screen you want to use, and click the Create HATS Screen Customization icon on the host terminal tool bar. If you want to create a new screen customization based on a screen capture, right-click that screen capture in the tree and select New HATS > Screen Customization. Using these methods bases the screen customization on the selected screen capture or host terminal screen, and the name of the screen customization defaults to one built from the name of the screen capture or from text found on the host terminal screen. Either of these methods starts the Create a Screen Customization wizard.
- Accept the default name, or enter a new name for this screen customization. Enter a description if you wish.
- Accept the default location, or, if you are organizing your resources into folders, use the entry field or graphical tree view to select a different location within the project. Click Next.
- If you invoked this wizard from the host terminal or from a screen capture, the screen displayed defaults to that screen. You can change to a different screen capture if you wish by selecting it from the drop-down list. The Use the host terminal screen option is available only if a host terminal session is active.
- Use the options on the right side of the page to specify which criteria will be used to match host screens. Use several criteria to match a screen specifically, or fewer criteria to match a broader range of screens.
Click Next.
- Specify the actions to be taken when a host screen matches the selection criteria. By default a new transformation, based on the same screen, is created with the same name as the screen customization. You can change the name of the new transformation, specify that an existing transformation be used, or clear the Apply a transformation check box if you do not want to apply any transformation. When you apply a transformation, you can specify a different template to be used with it. If you want to add other actions, check the Add advanced actions box.
- Click Finish.
You do not have to define your screen customization completely when you define it. You can edit it later and modify its screen recognition criteria and actions.
Ordering and enabling your screen customizations
Your HATS application checks each incoming host screen against an ordered list of screen customizations. It is essential to have the screen customizations for your project listed in the correct order. For example, you might have one screen customization that converts a few specific screens, and a second one that converts a more general set of screens. If the second one is listed before the first, it might be applied to one of the screens to which you wanted to apply the first, more specific screen customization.
You can reorder your screen customizations, or review the order in which they are checked, in the Project Settings editor. After you have created your project's screen customizations, double-click Project Settings in the HATS Project View. In the editor, click the Events tab. Review the list of screen customizations and use the Up and Down buttons if you want to change the order. The screen customization that you want checked first should be at the top of the list.
Use the check boxes next to each screen customization in the list to enable or disable the screen customization. When the box is checked, the screen customization is active. If you clear the check box, the HATS application will not use that screen customization. Disabling some screen customizations can be useful during testing and debugging, and will improve performance if you have a lot of screen customizations that you do not use.
Work with transformations
A transformation defines the way in which a host screen is converted into a Web page. The transformation specifies how to treat each part of the host screen.
Understanding host components and widgets
In host applications, data can be presented in many different ways, such as menus, tables, and command prompts. These are known as host components. Your HATS application converts them into graphical elements, or widgets, for displaying data on a Web page.
HATS comes with a default set of host components, representing the most frequently used methods of presenting data, as well as a set of widgets associated with each one. These host components and widgets are listed in Table 5. As you develop your HATS application, you draw boxes on the host terminal and indicate that the contents of each box should be treated as a specific kind of host component. Then, for each host component, you choose one of the corresponding widgets to present the data or function on a Web page.
For example, if a host application has a menu in which the user is required to select one of the several choices, you can design your HATS application to display the menu in a Web browser as a drop-down list. Alternatively, you can have the menu appear as a list of radio buttons, from which the user makes a choice, or as a list of links or buttons. You can even design a custom component or widget.
Host component Widget
Command line
Drop-down (data entry)
Popup
Radio butons (data entry)
Text input
Field
Field
Field table
Horizontal bar graph
Line graph
Table
Vertical bar graph
Function key
Button
Button table
Drop-down (selection)
Link
Radio buttons (selection)
Input field
Calendar
Check box
Drop-down (data entry)
Popup
Radio buttons (data entry)
Text input
Input field with hints
Drop-down (data entry)
Popup
Radio buttons (data entry)
Selection list
Button
Button table
Drop-down (selection)
Link
Radio buttons (selection)
Subfile
Subfile
Text
Label
Visual table
Horizontal bar graph
Line graph
Table
Vertical bar graph
How HATS uses transformations
A HATS transformation is a powerful tool, containing all the information needed to convert components from host screens into widgets on Web pages. A transformation can only be used, however, when it is associated with a screen customization. The screen customization, described in Work with screen customizations, includes a list of actions to be taken when a host screen matches its screen recognition criteria. Applying a transformation to the host screen is one of the actions that can be taken.
The easiest way to associate a transformation with a screen customization is to create the transformation at the same time that you create the screen customization.
Create a new transformation
There are many ways to create a new transformation. When you create a screen customization, HATS will by default create a transformation with the same name, based on the same host screen, and associate it with the screen customization. Because the transformation is named and associated with a host screen, it is created without the use of a wizard.
You can also create a transformation in other ways:
- To create a new transformation based on a screen capture, right-click that screen capture in the tree and select New HATS > Transformation. Or double-click that screen capture in the tree to start the screen capture editor, and click the Create HATS Transformation icon.
- To create a new transformation based on an active host terminal, bring up the host terminal and click the Create HATS Transformation icon.
Either of these methods starts the Create a Transformation wizard. If you create a transformation directly from a screen capture or from a host terminal, you will have to associate it with a screen customization later by editing the screen customization and adding the transformation as an action. This process is described in HATS User's and Administrator's Guide.
The Create a Transformation wizard asks you to supply a name for the transformation and to indicate which screen it is based on. The wizard creates the transformation and opens it in the transformation editor so that you can add host components and widgets.
Edit a transformation
While editing a transformation, you will see these icons added to the main toolbar:
Icon Description Insert a host component into the transformation. Edit a host component in the Source view of the editor Insert the default rendering of a screen or partial screen into the transformation Edit the default rendering In addition to these icons, you can use other functions of the HATS Tools menu to insert items into a transformation while editing the transformation. They are:
Insert Function Description Insert Tabbed Folder Inserts a folder with tabs Insert Macro Key Adds a button, link, or drop-down list to enable the end user to execute a macro Insert Global Variable Inserts a global variable as text, or as a prompt for a global variable with input fields Insert Default Host Keypad Adds the default host keypad Insert Custom Host Keypad Adds a customized host keypad containing only the keys that you select Insert Individual Host Key Adds individual host keys that you select Insert Default Application Keypad Adds the default application keypad Insert Custom Application Keypad Adds a customized application keypad to the template on your Web page, containing the keys that you select Insert Individual Application Key Adds individual application keys that you select to the template on your Web page Insert All Host Components Inserts all possible host components found on a selected screen capture Insert Stored Screen Inserts a screen that you have stored when combining multiple host screens Insert Integration Object Input Inserts inputs from a specified Integration Object JSP page Insert Integration Object Output Inserts outputs from a specified Integration Object JSP page Insert Forward to HATS Servlet Adds a button that forwards JSP control information to the HATS entry servlet that is processed when an end user starts your application The use of these functions in the transformation editor is described in HATS User's and Administrator's Guide. Here are descriptions of the most commonly used HATS Tools menu items:
The Insert Host Component wizard shows a list of host components and widgets and includes these icons:
Table 7. HATS Insert Host Component wizard icons Icon Description View or modify the settings for a component. View or modify the settings for a widget. Enlarge the widget preview window.
Performing other customization tasks
You can also do the following kinds of customization on your HATS project. For more information about each of these topics, refer to the HATS User's and Administrator's Guide or the HATS Programmer's Guide.
Displaying function keys (PF keys)
Many host screens include a list of function keys (PF keys) and their assignments. You can choose to display these lists graphically in your HATS application.
To learn about things you can do to display other host components, including information about designing custom components and widgets, refer to the HATS Programmer's Guide.
Replacing text strings from the host screen
Your HATS application can replace text strings on host screens with different output on Web pages. These text strings must be protected text strings, that is, strings that are used only on the screen and never passed to the host application as input. For example, you can replace the text string used as a field label or prompt. You can replace text with different text, HTML coding of your choosing, or images.
You can define text replacement in two ways within a project:
- In the project settings, which replaces the specified text on any screen within the project
- In a screen customization, which replaces the specified text only on screens that match the screen recognition criteria for that screen customization.
If you define text replacement for the same text in both the project settings and in a screen customization with different replacement output, the screen customization definition takes precedence.
Text replacement using another text string attempts to maintain the original screen layout. If the replacement text is longer than the text to be replaced, the replacement text is truncated to fit into the original field size. However, if there is available white space between the text replacement field and the next host component, the replacement string uses that white space for the next characters of your replacement string.
Text replacement with either HTML strings or images does not preserve the original screen layout, because the replacement output might not fit into the original field size. This might cause undesired formatting results on the Web page.
The field widget has an option to render the output on a character by character basis. If you use the field widget, with this option set, to render the section of the host screen that is replaced with an image, undesired formatting will occur.
When replacing text with any chosen replacement, be sure to test your text replacements carefully to be sure that they do not give unexpected results.
Use macros
You can record a macro to list a set of steps to be taken automatically, such as providing information for entry fields or selecting menu options. For example, to access a host application, a user needs to log on to the system with a user ID and password. Logging on to the system is a good candidate for a macro, because your project can traverse the logon screens for the user of your application.
To record a simple logon macro, follow these steps:
- Highlight a project in the HATS Project View, and click the Open HATS Host Terminal icon ( ).
- Start from the host terminal screen in HATS Studio displaying the logon screen, and click the Record Macro icon ( ).
- On the Record Macro panel, give the macro a name, such as mylogon. Optionally, add a description, select the destination for the macro, and click Finish.
- On the Define the starting screen of the macro panel, you can name the screen or accept the default name. For this example, assume we name the screen logon. Select an area of the screen to be used to recognize the screen. Since a logon screen usually has static text, you can select any text on the screen. Notice that the Strings check box is checked. You should select the At a specified position option of the string position criteria, since the selected text should always be in the same location. The Row and Column fields are filled in with the coordinates of the screen area you selected. Click Next.
- On the Recognition Criteria for Screen Screen1 panel, the text used to recognize the screen is already defined for you, using information collected from the previous screen. Click Finish.
- On the host terminal screen displaying the logon screen, enter the user ID and password required and press the Enter key. To the left of the host screen, the progression of the macro displays in the Macro Navigator pane.
- There might be other screens that always appear during logging on to a host that are not necessary for the end user to see. Take any action that you would normally take on these screens when logging on, until you navigate to a screen from which you can access the host application for your project. This screen might have some explicit text on it that indicates that an application can be accessed, such as Ready; or System available.
- Click the Stop Macro icon ( ).
- On the Define the exit screen of the macro panel, give the exit screen a name, such as finalscreen. This time, you are defining recognition criteria for the last screen in the macro. Most likely, this is the screen that has the Ready; or System available text on it. You can select this text to be used to recognize the exit screen for the macro. However, in addition to this text there might also be other text on the screen issued by the application. Because the Ready; or System available text might not always appear on the same line of the screen, select the Anywhere on the screen option of the string position criteria. By doing so, the last screen of the macro can be recognized no matter where the Ready; or System available text appears. Click Next.
- On the Recognition Criteria for Screen Screen2 panel, the text used to recognize the screen is already defined for you, using information collected from the previous screen. Click Finish.
- You now have recorded a macro that logs a user on to the system. To add this macro to your project, click the Save Macro icon ( ).
- Now you can close or minimize the host terminal screen, and you can see the macro named mylogon under the Macros folder of your project in the HATS Project View.
You can run the mylogon macro as an action in a screen customization to log a user on to the host system.
For more information about recording and using macros, refer to the HATS User's and Administrator's Guide.
Use Host Publisher artifacts
You can import IBM WebSphere Host Publisher applications, Integration Objects, and macros into your HATS project using the File > Import menu. You can also create Web pages directly from imported Integration Objects. For more information about importing and using Host Publisher artifacts, refer to the HATS User's and Administrator's Guide. For information about programming with or customizing Host Publisher Integration Objects, refer to the HATS Programmer's Guide.
Create background connections
When you create a project, you define a connection to the host to handle all transformations. You can define background connections to different hosts to run Integration Objects and macros. Secure Sockets Layer (SSL), Web Express Logon (WEL), pooling, and user lists are supported on these connections. For information about defining connections, refer to the HATS User's and Administrator's Guide.
Defining global variables
You can define global variables to hold data from, for example, an area of the screen, and make that data available to business logic, templates, transformations, and macro prompts. For information about global variables, refer to the HATS User's and Administrator's Guide.
Applying business logic
You can specify a Java method to be called as one of the actions in a screen customization, to perform business logic. To add business logic to your HATS project, right click on the HATS Project View tree and select New HATS > Business Logic. A wizard prompts you for a class name and a package name and then a skeleton .java file is created in the Source directory in the HATS Project View. For more information about adding business logic to your HATS project, refer to HATS Programmer's Guide.
Use print support
You can add support to your HATS project for local viewing and printing of files from the host application. Refer to the HATS User's and Administrator's Guide for more information.
Use keyboard support
In addition to representing host-application buttons as part of the screen presentation, you can enable your users to interact with your application by using the keyboard. Refer to the HATS User's and Administrator's Guide for more information.
Create Integration Objects and EJB projects
From the macros in HATS projects and HATS EJB projects, you can create Integration Objects. HATS EJB projects have no folders for Screen Customizations, Screen Captures, or Web Content. EJB projects only contain connections, macros, and Integration Objects. Refer to the HATS Programmer's Guide for more information on Integration Objects and creating EJB projects.
Home