modifying hats output customizing html output

98
ibm.com/redbooks Redpaper Creating and Modifying HATS Projects Mark Boyd Byron Braswell Modifying HATS output Customizing HTML output Personalizing application appearance

Upload: others

Post on 21-Dec-2021

40 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Modifying HATS output Customizing HTML output

ibm.com/redbooks Redpaper

Creating and ModifyingHATS Projects

Mark BoydByron Braswell

Modifying HATS output

Customizing HTML output

Personalizing application appearance

Front cover

Page 2: Modifying HATS output Customizing HTML output
Page 3: Modifying HATS output Customizing HTML output

Creating and Modifying HATS Projects

August 2003

International Technical Support Organization

Page 4: Modifying HATS output Customizing HTML output

© Copyright International Business Machines Corporation 2003. All rights reserved.Note to U.S. Government Users Restricted Rights -- Use, duplication or disclosure restricted by GSA ADPSchedule Contract with IBM Corp.

First Edition (August 2003)

This edition applies to Version 4 of Host Access Transformation Server (HATS).

Note: Before using this information and the product it supports, read the information in “Notices” on page v.

Page 5: Modifying HATS output Customizing HTML output

Contents

Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vTrademarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .vi

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiThe team that wrote this Redpaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiBecome a published author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiiComments welcome. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Chapter 1. Creating a HATS project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.1 Default vs. customized HATS projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Using the wizard to create a default application . . . . . . . . . . . . . . . . . . . . . 21.3 Modifying project settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.3.1 Modifying the basic connection settings . . . . . . . . . . . . . . . . . . . . . . . 71.3.2 Advanced connection settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 2. Customizing a HATS default project . . . . . . . . . . . . . . . . . . . . . 132.1 Create a new HATS template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.1.1 Create the new template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.1.2 Modify the new template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2 Modify an existing HATS template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.2.1 Make a new copy of an existing template . . . . . . . . . . . . . . . . . . . . . 192.2.2 Modify the template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.3 Import an HTML page to create a HATS template . . . . . . . . . . . . . . . . . . 202.3.1 Import the Web page to be used as the template . . . . . . . . . . . . . . . 202.3.2 Modify the HTML page to be a HATS template . . . . . . . . . . . . . . . . 22

2.4 Establishing the appearance with stylesheets. . . . . . . . . . . . . . . . . . . . . . 242.4.1 About cascading stylesheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4.2 About the stylesheets used in HATS projects . . . . . . . . . . . . . . . . . . 252.4.3 Modifying the stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4.4 Alternate method of modifying stylesheets . . . . . . . . . . . . . . . . . . . . 292.4.5 Determining which styles to edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Chapter 3. Customizing HATS projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353.1 How HATS screen processing works . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.2 Capturing screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3 Creating a screen customization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.3.1 Some notes regarding screen identification . . . . . . . . . . . . . . . . . . . 453.3.2 Adding screen recognition criteria to a customization. . . . . . . . . . . . 45

3.4 Applying actions to screen customizations . . . . . . . . . . . . . . . . . . . . . . . . 46

© Copyright IBM Corp. 2003. All rights reserved. iii

Page 6: Modifying HATS output Customizing HTML output

3.4.1 Actions that can be attached to a screen customization . . . . . . . . . . 483.5 Creating and editing transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.5.1 Creating a screen transformation as a result of creating a screen customization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.5.2 Initiating the screen transformation process . . . . . . . . . . . . . . . . . . . 563.5.3 Editing a screen transformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Chapter 4. Common customizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.1 Macros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4.1.1 Recording a macro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644.1.2 Editing a macro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654.1.3 Using the macro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

4.2 Using global variables to combine screens . . . . . . . . . . . . . . . . . . . . . . . . 674.2.1 Reading global variables from a host screen . . . . . . . . . . . . . . . . . . 674.2.2 Displaying global variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.2.3 Creating a form to enter HATS global variables . . . . . . . . . . . . . . . . 68

4.3 Screen navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.3.1 Bypassing screens with screen customizations . . . . . . . . . . . . . . . . 694.3.2 Creating navigation buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

4.4 Transforming a host input field to a drop-down list . . . . . . . . . . . . . . . . . . 704.4.1 Getting values from a screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714.4.2 Create the screen transformation . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Appendix A. HATS Studio in WebSphere Studio V4.03 vs. V5.0 . . . . . . . . 77

Abbreviations and acronyms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Related publications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81IBM Redbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Other publications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Online resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81How to get IBM Redbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Help from IBM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

iv Creating and Modifying HATS Projects

Page 7: Modifying HATS output Customizing HTML output

Notices

This information was developed for products and services offered in the U.S.A.

IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service.

IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not give you any license to these patents. You can send license inquiries, in writing, to: IBM Director of Licensing, IBM Corporation, North Castle Drive Armonk, NY 10504-1785 U.S.A.

The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you.

This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice.

Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk.

IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any obligation to you.

Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products.

This information contains examples of data and reports used in daily business operations. To illustrate them as completely as possible, the examples include the names of individuals, companies, brands, and products. All of these names are fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental.

COPYRIGHT LICENSE: This information contains sample application programs in source language, which illustrates programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs. You may copy, modify, and distribute these sample programs in any form without payment to IBM for the purposes of developing, using, marketing, or distributing application programs conforming to IBM's application programming interfaces.

© Copyright IBM Corp. 2003. All rights reserved. v

Page 8: Modifying HATS output Customizing HTML output

TrademarksThe following terms are trademarks of the International Business Machines Corporation in the United States, other countries, or both:

AS/400®™

ibm.com®

IBM®Perform™Redbooks™

Redbooks (logo) ™WebSphere®

The following terms are trademarks of other companies:

ActionMedia, LANDesk, MMX, Pentium and ProShare are trademarks of Intel Corporation in the United States, other countries, or both.

Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

C-bus is a trademark of Corollary, Inc. in the United States, other countries, or both.

UNIX is a registered trademark of The Open Group in the United States and other countries.

SET, SET Secure Electronic Transaction, and the SET Logo are trademarks owned by SET Secure Electronic Transaction LLC.

Other company, product, and service names may be trademarks or service marks of others.

vi Creating and Modifying HATS Projects

Page 9: Modifying HATS output Customizing HTML output

Preface

This IBM Redpaper will help you create and modify Host Access Transformation Server (HATS) projects. It gives a general overview of the process involved in creating and modifying HATS applications as well as some examples of some common customizations.

The HATS Studio plug-in works with:

� WebSphere® Studio Site Developer� WebSphere Studio Application Developer� WebSphere Studio Application Developer - Integration Edition� WebSphere Studio Enterprise Developer

Version 4.3 and Version 5 of these Studio products are supported. This document was created using WebSphere Studio Application Developer V5.0.1 and HATS V4 with CSD3. We will refer to WebSphere Studio in this document and have it mean any of the above supported development studio tools.

There are some differences in the way you access HATS Studio functionality between Version 4.03 and Version 5 of WebSphere Studio.

The reader is expected to have some familiarity with the WebSphere Studio product is using. The IBM Redbook, WebSphere Studio Application Developer Version 5 Programming Guide, SG24-6957, is an excellent source for more information about WebSphere Studio.

Also, some beginning knowledge of HTML will be required. This can be gained from various tutorial Web sites.

This document is organized in the same order in which you create and customize a HATS project. If you read through from beginning to end, you will get an understanding of the typical HATS development process. However, if you are already somewhat familiar with the HATS project creation and customization process, you may simply use the various sections as a reference.

The team that wrote this RedpaperThis Redpaper was produced by a team of specialists from around the world working with the International Technical Support Organization, Raleigh Center.

© Copyright IBM Corp. 2003. All rights reserved. vii

Page 10: Modifying HATS output Customizing HTML output

Mark Boyd is a Certified IT Specialist in the WebSphere Software sales organization in the United States. He has twenty-six years with the IBM Corporation, seven years as an IT Specialist, and has worked on HATS since the earliest beta version was available. He holds a Bachelors degree in Mechanical Engineering from Ohio State University. His areas of expertise include IBM’s Host Integration products and WebSphere Application Server and WebSphere Studio tools.

Byron Braswell is a networking professional at the International Technical Support Organization, Raleigh Center. He received a BS degree in Physics and an MS degree in Computer Sciences from Texas A&M University. He writes extensively in the areas of networking and Host Integration software. Before joining the ITSO three years ago, Byron worked in IBM Learning Services Development in networking education development.

Thanks to the following people for their contributions to this project:

Mike Schwartz and Julie CzubikInternational Technical Support Organization, Poughkeepsie Center

Ashish Jain (IBM HATS Development)Will Smythe (IBM HATS Development)David Wisler (IBM HATS Development)Jim Collins (IBM HATS Development)Thom Haynes (IBM HATS Development)Chakra Reddy (IBM HATS Development)Patrick Remington (IBM HATS Development)IBM RTP

Become a published authorJoin us for a two- to six-week residency program! Help write an IBM Redbook dealing with specific products or solutions, while getting hands-on experience with leading-edge technologies. You'll team with IBM technical professionals, Business Partners and/or customers.

Your efforts will help increase product acceptance and customer satisfaction. As a bonus, you'll develop a network of contacts in IBM development labs, and increase your productivity and marketability.

Find out more about the residency program, browse the residency index, and apply online at:

ibm.com/redbooks/residencies.html

viii Creating and Modifying HATS Projects

Page 11: Modifying HATS output Customizing HTML output

Comments welcomeYour comments are important to us!

We want our papers to be as helpful as possible. Send us your comments about this Redpaper or other Redbooks™ in one of the following ways:

� Use the online Contact us review redbook form found at:

ibm.com/redbooks

� Send your comments in an Internet note to:

[email protected]

� Mail your comments to:

IBM® Corporation, International Technical Support OrganizationDept. HZ8 Building 662P.O. Box 12195Research Triangle Park, NC 27709-2195

Preface ix

Page 12: Modifying HATS output Customizing HTML output

x Creating and Modifying HATS Projects

Page 13: Modifying HATS output Customizing HTML output

Chapter 1. Creating a HATS project

This chapter covers the creation of a default HATS project. We will discuss:

� The difference between a default project and a customized project� Using the wizard to create the default project� Modifying project properties

1

© Copyright IBM Corp. 2003. All rights reserved. 1

Page 14: Modifying HATS output Customizing HTML output

1.1 Default vs. customized HATS projectsWe use the phrase default project to refer to a HATS project that has not been customized to perform any changes in the application flow or screen presentation. That is, no screen customizations have been developed. There have been no screen identifications made. Any screen customization that takes place in the application is done by the HATS application by default. (For more information regarding the screen identification and customization process, see 3.1, “How HATS screen processing works” on page 36.)

Being a default project does not mean that there is no screen customization occurring, or that the look of the host screens has not been altered. A default project is performing whatever customization the HATS product does dynamically or automatically. Also, the default application is applying the cascading stylesheets and HTML to provide a specific look and feel to the application.

There are two implications to the differences between a default project and a customized project:

� The default project can be created with a minimal amount of work, typically within a day's time. Customized HATS projects typically take a little longer.

� With a default project, any changes to the host application will have no impact on the HATS application, because the customization of the screens is being done dynamically. There is no screen identification taking place like there is in a customized application.

1.2 Using the wizard to create a default applicationUse the HATS Project Wizard to create a new HATS project. The HATS Project Wizard can be started by clicking the link Launch the Create HATS Project Wizard in the HATS Welcome page, or by clicking File -> New -> Project and then selecting Host Access Transformation Server in the dialog and then clicking Next.

2 Creating and Modifying HATS Projects

Page 15: Modifying HATS output Customizing HTML output

The HATS New Project Wizard will open. See Figure 1-1.

Figure 1-1 HATS New Project Wizard

Fill in the name for the new HATS project, and then any description desired for the project. For our example, we chose boats_default. You may wish to change the name of the Enterprise Application project name. The default is HATS.ear. Whatever name is used is the name that is shown in the WebSphere Application Server when the application is deployed on WebSphere. You may want to make this Enterprise Application (EAR) file match the name of your HATS project just for consistency. This would not be appropriate if you intend to have multiple HATS projects within one EAR file.

Chapter 1. Creating a HATS project 3

Page 16: Modifying HATS output Customizing HTML output

Click Next to proceed to the New Project Connection Settings panel (see Figure 1-2).

Figure 1-2 Connection Settings panel

On this panel, you will specify the connection properties for the HATS application. Select or enter the appropriate values for your application. Note that after you have created the HATS project, you can edit the connection properties and configure the advanced connection properties. Advanced connection properties are aspects such as printing or the use of a specific LUPool name or Workstation ID name (see 1.3, “Modifying project settings” on page 6).

Click Next to continue to the New Project Select Default Template panel (Figure 1-3 on page 5) of the Project Creation Wizard.

4 Creating and Modifying HATS Projects

Page 17: Modifying HATS output Customizing HTML output

Figure 1-3 Select Default Template panel

On this panel you select the template you want to use. If you have already created a specific template to be used, select that template (see Chapter 2, “Customizing a HATS default project” on page 13, for information on creating a custom template). If you have not yet created or customized a template, select one that most closely matches what your template will look like and then click Finish. The HATS Project Wizard will complete the creation of the HATS project.

Chapter 1. Creating a HATS project 5

Page 18: Modifying HATS output Customizing HTML output

You will see the new HATS project in the HATS Project View of the HATS Studio (see Figure 1-4).

Figure 1-4 HATS Project View with new HATS project (boats_custom)

1.3 Modifying project settingsOnce you have created the HATS project, double clicking the Project Settings item in the project folder will open a series of panels where you can modify the project settings. Note that you may have to expand the project folder by clicking the + sign next to the project folder.

In this series of panels you can:

� Modify the basic connection settings.

� Set advanced connection settings like:

– Enable and configure printing.

– Add advanced connection settings, for example, Workstation ID or LUpool name.

� Select a different template to be used.

� Specify text replacement.

� Change event priority (only used with customized HATS projects; not pertinent to default projects).

6 Creating and Modifying HATS Projects

Page 19: Modifying HATS output Customizing HTML output

� Configure the default transformation functionality, for example, the application keypad, the host keypad, etc.

� View and edit the actual source file that makes up the project settings.

We will now review each of these in some detail.

1.3.1 Modifying the basic connection settingsAny of the connection settings can be modified after the HATS project is created, by clicking the Connection Settings tab. This is the same information that was entered when the Create HATS Project Wizard was run initially to create the project.

1.3.2 Advanced connection settingsClick the Advanced Connection Settings tab to display a panel where you can configure advanced connection settings. By clicking the Enable print support check box you can enable the printing capability in HATS. A discussion of the printing capability in HATS is beyond the scope of this document. To understand the printing capability in HATS, see IBM WebSphere Host Access Transformation Server Developer's Guide Version 4, SC31-6324, Chapter 11, “Enabling print support in projects”.

By clicking the Add button, additional parameters that modify the Telnet connection can be specified. While all of the Host On-Demand session parameters are listed in the pull-down list, only the following parameters are actually supported in HATS:

� Lamalef (bi-directional support)� LUName� numeralShape (bi-directional support_� numericSwapEnabled (Arabic support)� roundTrip (bi-directional support)� SecurityProtocol� SSLServerAuthentication� symmetricSwapEnabled (Arabic support)� textOrientation (bi-directional)� ThaiDisplayMode� workstationID

Details for each of these parameters are available in the IBM WebSphere Host Access Transformation Server Developer's Guide, SC31-6324, Appendix B. See the <otherParameters> tag section.

Chapter 1. Creating a HATS project 7

Page 20: Modifying HATS output Customizing HTML output

Changing the template to be used with HATSUse the pull-down list to select the desired template. This would typically be done after a new customized template has been created.

Text replacementThe text replacement function provides the ability to specify text, that when it is found on a host screen, is replaced with some other text on the HATS screen. For example, in the AS/400® boats application used in this work for demonstration purposes, there are some screens that have a heading “AS/400 WSG Boat Demo”. We might not want our new Web application to refer to an AS/400, so we might replace “AS/400” with “WWW”. The new HATS screen would have a heading of “WWW WSG Boat Demo”.

Text replacement is performed after component recognition, but before widget rendering.

Event priority (not used in a default application)The Event Priority tab provides a panel where the customization events can be prioritized. See Figure 1-5.

Figure 1-5 Event Priority

If you have customized the HATS application (created screen customizations), you can move the various screen customizations up and down to prioritize them as appropriate. HATS will check each host screen to see if it matches a screen in this list of screens in the order they are listed.

Screen customization is notused if box is not checked.

8 Creating and Modifying HATS Projects

Page 21: Modifying HATS output Customizing HTML output

You will also notice that there is a check box beside each customization. See Figure 1-5 on page 8. If the box is not checked, then the screen customization is not used. This feature can be useful in debugging a HATS project.

You may be able to reduce the amount of work the HATS application has to perform or improve the speed of the application by properly prioritizing this list of screens. For example, if you have a screen that is recognized frequently, you probably want it to be high in the event priority list so that HATS does not have to look at all of the other screens to find that frequently used screen. Conversely, if you have a screen that is used only once and that would not be impacted by being found last in the list of screens, then that screen should be last. For example, the very first screen in the application should probably be listed last. The logon screen is usually only accessed once and if it takes a little longer to be presented that would typically be acceptable. By doing this, the performance of the other HATS screens can be improved slightly because HATS does not have to check to see if the host screen matches the logon screen.

If you are creating a default HATS project, then there would be no screen customizations and this panel would not apply.

GeneralThe Project Settings editor (Figure 1-6 on page 10) gives the developer an opportunity to set project-level default settings for all components and widgets (for those objects that have settings).

Chapter 1. Creating a HATS project 9

Page 22: Modifying HATS output Customizing HTML output

Figure 1-6 General settings tab

These settings are used by HATS to perform its default customization, and for the default settings for any transformations that are created. When creating the transformation, you can change the settings for the specific transformation from the default without impacting the default transformation.

ComponentsThese configuration items determine how host screen elements (components) will be identified by HATS. For example, in the Command Line component configuration, you simply enter the text that precedes the host command line (the default is “==>”). If the command line in your host application is proceeded by “:”, then you would change this item to that character and the command line would be properly identified.

10 Creating and Modifying HATS Projects

Page 23: Modifying HATS output Customizing HTML output

Similar configuration capability is available to tailor the identification of:

� Host function keys� Host menus� Host selection lists� Host tables

WidgetsThese configuration items determine how the HATS widgets operate by default. The settings can be overridden when a particular widget is used in a screen transformation.

Perhaps the most important item in this list is the Default item. This item allows you to configure which widgets are applied as the HATS default transformation, and how they will be applied. For example, you can change the transformation of PF key menus (“PF1=Help”, for example) from clickable links to buttons, or to not have this transformation take place at all.

Application keypadThe application keypad is an area on the template where the end user can perform certain actions related to the application.

This section allows the developer to configure how the application keypad will appear to the end user.

� Certain items can be hidden from the end user.� Keypad items can be displayed as buttons or links.

Host keypadThe host keypad is an area on the transformation where the end user can perform certain host-related actions (send [pf1], [enter], etc.).

This section allows the developer to configure how the host keypad will appear to the end user.

� Certain keys can be hidden from the end user.� Keypad items can be displayed as buttons or links.

Keyboard supportThis section allows the developer to turn on/off keyboard support for the end user. Keyboard support allows the end user to use her keyboard as if she were using a true terminal emulator. For example, with keyboard support turned on, a user can press F5 and have [pf5] sent to the host.

Chapter 1. Creating a HATS project 11

Page 24: Modifying HATS output Customizing HTML output

Client localeThe Client Locale settings section allows the developer to set the language in which the application buttons, host keypad buttons, error messages, and disconnect message will be displayed. The choices are:

� From the browser: A browser, in its post/get requests, sends a flag saying which language it would like content in.

� From the server: The language of the Java Virtual Machine (JVM) the HATS application is running in.

� Specified: Always use a specific language.

12 Creating and Modifying HATS Projects

Page 25: Modifying HATS output Customizing HTML output

Chapter 2. Customizing a HATS default project

In this chapter we describe how to customize the default project to provide the desired Web appearance. All of the customizations described in this chapter are only appearance related, and do not have any impact on the actual flow of the application. In this chapter, we will customize the default application that was created in the previous chapter.

The primary appearance of the HATS project is delivered through the default template. The default template is applied to any screen that is not customized, and it is used by default for all transformations. (Note that it is possible to have different templates applied to different transformations. See 3.5, “Creating and editing transformations” on page 51.) Consequently, the first customization to be made to the HATS application is typically to create the default template.

There are three basic methods by which a default template can be created:

� Create an new HATS template.

� Modify a template that is supplied as a part of the HATS Studio.

� Import an existing Web page into the HATS Studio and modify it so that it is a HATS template.

All three methods are discussed in this chapter.

2

© Copyright IBM Corp. 2003. All rights reserved. 13

Page 26: Modifying HATS output Customizing HTML output

2.1 Create a new HATS templateIn this section we review the process of creating and then modifying a new HATS template which will then be our default template.

2.1.1 Create the new templateYou can create a new HATS template by clicking the new HATS template icon on the tool bar, as shown in Figure 2-1.

Figure 2-1 Create a new HATS template - Method 1

14 Creating and Modifying HATS Projects

Page 27: Modifying HATS output Customizing HTML output

Alternatively you can create a new HATS template by clicking File -> New -> Other, then select Host Access Transformation Server from the list of available actions in the left pane, and HATS Template in the right pane of the panel, as shown in Figure 2-2.

Figure 2-2 Create a new HATS template

Click Next to proceed to the next panel.

Chapter 2. Customizing a HATS default project 15

Page 28: Modifying HATS output Customizing HTML output

In the Create a Blank Template panel, enter the name for your new HATS template and then expand the project folder and select the Template folder so that the template is created in the appropriate directory.

Figure 2-3 Create a blank template

Click the Finish button to complete the creation of the new template. The template will be created and opened in the JSP page editor window.

2.1.2 Modify the new templateTo modify an existing template, you can double click the template in the templates folder and it will be opened with the JSP page editor. Use the page editor to add the additional images, links, etc. that are needed to complete the template.

There are three views available in the page editor:

� Design view� Source view

16 Creating and Modifying HATS Projects

Page 29: Modifying HATS output Customizing HTML output

� Preview view

The Design view provides a graphical interface for modifying the page.

Figure 2-4 Design view

Chapter 2. Customizing a HATS default project 17

Page 30: Modifying HATS output Customizing HTML output

You can click a location on the screen and then, by selecting the Insert drop-down menu, insert various components such as tables, images, links, etc. See Figure 2-5.

Figure 2-5 Insert drop-down menu

Alternatively, you can select items on the page and by right clicking and selecting Attributes, you can modify the various elements on the page.

18 Creating and Modifying HATS Projects

Page 31: Modifying HATS output Customizing HTML output

By clicking the Source tab, you can open the Source view and edit the HTML source directly.

Figure 2-6 Source view

See 2.4, “Establishing the appearance with stylesheets” on page 24, to see more information about modifying the appearance of the HATS elements of the page.

2.2 Modify an existing HATS templateIf there is a template provided with HATS that is close to the look you desire for your HATS application, then it may be easiest to modify that template to create your default template.

It is recommended that before you modify one of the supplied templates, you make a copy of it and give it an appropriate name.

2.2.1 Make a new copy of an existing templateIn the HATS Studio perspective of WebSphere Studio, expand the Templates folder by clicking the + sign next to the folder. You should then see the complete list of available templates provided with HATS.

Copy the template with which you want to start by right clicking that template and choosing Copy from the drop-down list.

Chapter 2. Customizing a HATS default project 19

Page 32: Modifying HATS output Customizing HTML output

On the Select a Destination dialog click OK to have the new copy of the template saved in the Templates directory of your project.

You will see a new template listed with the same name as the original, but with a _2 added to the file name. Now you can right click this file and select Rename from the drop-down menu and rename the file by simply typing the new name over the old one.

When you change the name, WebSphere Studio will ask if you want the links updated. Click Yes.

2.2.2 Modify the templateDouble clicking the template to be modified will open the template using the page editor (provided you have not changed WebSphere Studio preferences to use a different editor). See 2.1.2, “Modify the new template” on page 16, for information on how to modify the template.

2.3 Import an HTML page to create a HATS templateIn this section, we will make our HATS application look like a Web page in an existing Web site.

2.3.1 Import the Web page to be used as the templateImport the Web page and any related files to be used as the template by performing the following steps:

1. Select the Navigator view of the HATS Studio. See Figure 2-7 on page 21.

20 Creating and Modifying HATS Projects

Page 33: Modifying HATS output Customizing HTML output

Figure 2-7 Select the HATS Navigator view

2. Expand the HATS project folder, then the webApplication folder, then the Templates folder.

3. Click the Templates folder to select it.

4. Right click and select Import from the drop-down menu.

5. Select the method to be used for importing the Web page:

– If you have a page that is stored locally or on a network drive, chose File System.

– If you are getting a page from an actual Web server, select HTTP.

6. Configure the details of the import action for the Web page.

7. Click Finish to import the files that make up the Web page.

Note that if there are image files or other associated files that get imported with the Web page, you may want to move them to a different directory or folder (for example, the Images folder under the common folder in the HATS project), and then change the reference so that your template can find the files. Alternatively,

Chapter 2. Customizing a HATS default project 21

Page 34: Modifying HATS output Customizing HTML output

you may want to change the reference in your template so that you use the files in the original source server.

2.3.2 Modify the HTML page to be a HATS templatePerform the following steps to modify the HTML page to be a HATS template.

1. If the file that was imported is named index.xxx, rename the file to be something other than index. If WebSphere Studio prompts you asking if you want to have the links fixed, click the Yes button.

2. Change the file extension of the file to .jsp.

3. Double click the file to open it in the page editor.

Add the lines to the HTML that provide the HATS functionalityOpen the Source view of the page editor window and add the lines to the HTML page as listed below. (Note that you can open and use an existing template as a source from which to copy and paste these lines.)

1. Add the following lines after the <HTML> tag (Example 2-1).

These lines enable the Java language and the HATS tag library in this page.

Example 2-1 Enable Java and HATS tag library

<%@ page import="java.util.*, com.ibm.hats.common.*" %><%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ taglib uri="/WEB-INF/classes/tld/hats.tld" prefix="HATS" %>

2. Now add the lines shown in Example 2-2 at the place where you want the HATS (host) screen to appear in your template. To more easily locate where to place these lines, select the Design view in the page editor window, type some sample text in the page where you want the host screen to be display (for example, “put host screen here”), then go to the Source view of the page editor window and search for the text that was just entered, and replace it with the following lines (Example 2-2).

Example 2-2 Placing the host screen to be displayed

<HATS:Transform skipBody="true"> <CENTER><P> Host screen transformation will be shown here </P></CENTER> </HATS:Transform>

These lines enable the HATS default transformation.

3. If you choose to have the HATS application keypad present on the screen, choose the proper location and insert the following line (Example 2-3 on page 23) to have the keypad displayed vertically.

22 Creating and Modifying HATS Projects

Page 35: Modifying HATS output Customizing HTML output

Example 2-3 Add the HATS application keypad

<HATS:ApplicationKeypad/>

Alternatively, add the following line (Example 2-4) to have the keypad displayed horizontally.

Example 2-4 Horizontal HATS application keypad

<HATS:ApplicationKeypad settings="layout:horizontal"/>

4. Add the stylesheet references just before the </HEAD> tag. Add lines that refer to the stylesheets you wish to apply to template.

Example 2-5 Add the stylesheet references

<!-- Global Style Sheet --><LINK rel="stylesheet" href="../common/stylesheets/keypad.css" type="text/css">

<LINK rel="stylesheet" href="../common/stylesheets/graybackground.css" type="text/css"><LINK rel="stylesheet" href="../common/stylesheets/smallFont.css" type="text/css">

See 2.4, “Establishing the appearance with stylesheets” on page 24, for information on making modifications to the stylesheets.

5. You can optionally add specific style information that will override the style parameters in the cascading stylesheets listed in the page before them. Place these lines in the page immediately after the stylesheet references discussed in the above section.

The following lines are from the Corporate2.jsp template.

Example 2-6 Corporate2.jsp template

<STYLE>A.TOPBAR:link {color:white}A.TOPBAR:active {color:white}A.TOPBAR:visited {color:white}

A.DISCONNECT:link {color:red}A.DISCONNECT:active {color:red}A.DISCONNECT:visited {color:red}

A.BOTTOMBAR:link {color:black}A.BOTTOMBAR:active {color:black}A.BOTTOMBAR:visited {color:black}

.rowWhite { BACKGROUND-COLOR: #ffffff;}

.rowHighlight {BACKGROUND-COLOR: #E9EFF2;}

Chapter 2. Customizing a HATS default project 23

Page 36: Modifying HATS output Customizing HTML output

.rowTitle { BACKGROUND-COLOR: #204080; }

td.PFKEY { background-color:#960030; }INPUT.PFKEY { background-color:#960030; }INPUT.HBUTTON { background-color:#EFD39E; color:black; }table.ApplicationKeypad{

color: white; white-space: nowrap;

}td.ApplicationKeypad{

color: white; white-space: nowrap;

}input.HostButton { background-color: #EFD39E; color: black; white-space: pre;}input.HostPFKey { background-color: #960030; color: white; white-space: pre;}input.ApplicationButton { background-color: #EFD39E; color: black; white-space: pre;}</STYLE>

2.4 Establishing the appearance with stylesheetsIn this section we describe the process of getting the desired look and feel for the Web pages. The appearance characteristics of the HATS screens are established through the use of cascading stylesheets. There are three basic types of stylesheets that are used with HATS. These stylesheets establish the following characteristics:

� Host fields colors� Screen background colors� Font size� Keybutton size� Keybutton colors

24 Creating and Modifying HATS Projects

Page 37: Modifying HATS output Customizing HTML output

� Link colors

2.4.1 About cascading stylesheetsCascading stylesheets provide the Web page appearance information about colors, fonts, tables, fields, etc. The various styles in a stylesheet are applied to the page based on the style tags in the page.

There can be multiple stylesheets referenced in a Web page and the styles are applied based on the order of the listing of the stylesheet in the page. That is why they are called cascading stylesheets—they are applied in a cascading manner.

In addition, styles that are explicitly defined within the page (inline styles) are also applied and override the external stylesheets and the browser default styles. In summary, styles are applied in the following order with increasing priority:

� Browser default� External Style Sheet� Internal Style Sheet (inside the <head> tag)� Inline Style (inside HTML element)

The inline style (inside an HTML page) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

2.4.2 About the stylesheets used in HATS projectsThere are typically three cascading stylesheets used to establish these parameters:

� The keypad stylesheet� The background stylesheet� The font size stylesheet

There is a noinputborders stylesheet that is used in the classic or “green screen” template so that the borders of the HTML input fields are not displayed, thus making the screen appear more like a classic 3270 or 5250 terminal.

There is also a PrintJobWindow stylesheet that is used when the printing support is configured in the HATS project and the user accesses the print management portion of the HATS application.

2.4.3 Modifying the stylesheetsIn this section we discuss the modification of stylesheets.

Chapter 2. Customizing a HATS default project 25

Page 38: Modifying HATS output Customizing HTML output

Copy an existing stylesheetBefore modifying a stylesheet, it is recommend that you make a copy of the stylesheet that is supplied with HATS and then modify that new stylesheet that you created. To copy an existing stylesheet, right click the existing stylesheet and from the context drop-down menu, select Copy.

Figure 2-8 Copy a HATS stylesheet

A Selection Dialog panel will be displayed. Make sure the existing stylesheet folder is selected and click OK. (Note: You can copy an existing stylesheet to another project by selecting the stylesheet folder in another project folder.)

A new stylesheet with the same name as the original one with a _2 appended will be created. See Figure 2-9 on page 27.

26 Creating and Modifying HATS Projects

Page 39: Modifying HATS output Customizing HTML output

Figure 2-9 Copy of HATS stylesheet with _2 added

Next, right click the new file name and select Rename from the context drop-down menu. Enter the new name for the new stylesheet.

Once you have made copies of the stylesheets used in the default template, you need to modify the default template to refer to these new stylesheets. Open the Templates folder and double click the default template. This will open the template in the page editor window.

In the Source view of the page editor, find the lines that refer to the stylesheets and edit them to use the new stylesheets you created. An example of the HTML lines that refer to the stylesheets is shown in Example 2-5 on page 23.

Modify the stylesheets in the pageTo modify the stylesheets used in your template, open the Templates folder and double click the default template. This will open the template in the page editor window.

Chapter 2. Customizing a HATS default project 27

Page 40: Modifying HATS output Customizing HTML output

Below the page editing window, you can click the Styles tab and the style editor is displayed, as shown in Figure 2-10.

Figure 2-10 Displaying the style editor

If the style view is opened by default, you can click Window -> Show View -> Other -> Web -> Styles to open the Styles view.

The Styles view lists the stylesheets that are referenced in the template page, and any specific styles that are listed in the page itself. You can expand these stylesheet references in the style editing window by clicking the + sign next to the stylesheet.

28 Creating and Modifying HATS Projects

Page 41: Modifying HATS output Customizing HTML output

By double clicking any style reference in the style editing window, a style editing dialog is opened, as shown in Figure 2-11.

Figure 2-11 Style editing dialog

Any of the style properties can be changed through this dialog. Notice that any style property that is set is marked with an “*” character.

2.4.4 Alternate method of modifying stylesheetsBy expanding the Common folder under the HATS project and then the Stylesheets folder, you can then double click the stylesheet you want to edit. This will open the stylesheet in the editor window along with a preview window that displays samples of the styles in the stylesheet (see Figure 2-12 on page 30). When you click a particular style in the stylesheet editor window, a sample of the style is displayed in the preview window.

Chapter 2. Customizing a HATS default project 29

Page 42: Modifying HATS output Customizing HTML output

Figure 2-12 Stylesheet in an editor window

2.4.5 Determining which styles to editIt is common to want to change the color of a field on a host screen. The challenge is to know which style is being applied to that particular host field. In order to determine this, you can view the source of the Web page when the host field is displayed, and by examining the source, you can determine which style is being applied.

30 Creating and Modifying HATS Projects

Page 43: Modifying HATS output Customizing HTML output

Let us look at an example. We have our HATS project running in the WebSphere Studio test server and have accessed it using Internet Explorer. Let us say we want to change the text that it is being used for the User and Password text on the Sign On screen of our HATS project, as shown in Figure 2-13.

Figure 2-13 Unchanged User and Password text

To view the source of the Web page, run the HATS project in an actual Web browser until you can see the field in question. Do not use the Web browser built into WebSphere Studio (you can run the HATS project on the test server in WebSphere Studio but you need to access the project via either Netscape or Internet Explorer).

Chapter 2. Customizing a HATS default project 31

Page 44: Modifying HATS output Customizing HTML output

When the field in question is visible, click View on the browser’s menu bar and then click Source from the drop-down menu.

Figure 2-14 Accessing the source of a Web page

32 Creating and Modifying HATS Projects

Page 45: Modifying HATS output Customizing HTML output

Figure 2-15 Web page source

Search in the text file for the text that is in the field or near to the field that you wish to modify, in this case User. Just before the text in the source, you will find a “CLASS=” statement. That statement provides the CLASS or style that is being applied to the text. Armed with that information, you can then go into the template or stylesheet and edit the style to get the effect you want. In this example, we can see that HGREEN is the style being used for the text User (Figure 2-15).

Chapter 2. Customizing a HATS default project 33

Page 46: Modifying HATS output Customizing HTML output

To change the font used for this text, we edited the HGREEN style to have a larger font and to make the color black instead of blue, with the results shown in Figure 2-16.

Figure 2-16 Modified Web page

Note that this style change will be applied throughout the HATS application where this style is used. In the case of this example application, it will be on every screen. Since we have created a default application, where the default template is applied to every host screen, this style will be used on every screen.

If you wanted to have a style applied to just one host screen, then you would need to create a template that gets applied to that specific host screen.

34 Creating and Modifying HATS Projects

Page 47: Modifying HATS output Customizing HTML output

Chapter 3. Customizing HATS projects

This chapter describes how to customize a HATS project beyond the Web appearance aspects. The customization process described in this chapter will provide you with the ability to apply HATS widgets to change the appearance and functionality of the host screens. This chapter also explains the ability to change the navigation through the host application by using macros.

Understanding how HATS screen processing operates is vital to being able to successfully customize an application. HATS screen processing is discussed in the following section.

3

© Copyright IBM Corp. 2003. All rights reserved. 35

Page 48: Modifying HATS output Customizing HTML output

3.1 How HATS screen processing worksThe diagram shown in Figure 3-1 on page 37 illustrates the process a HATS application goes through to apply the appropriate screen customizations. The first step HATS performs is to check to see if there are any screens that have been captured and identified that match the current host screen. If there are no screen customizations, then the default transformation is applied.

If there is a screen customization that matches the current host screen, then whatever actions have been associated with this screen are executed. The actions that can be associated with a host screen are:

� Extract a value off the screen and save it to a global variable.� Insert a global variable value to the screen.� Set a global variable value.� Execute “business logic” (a java bean).� Execute an immediate host key.� Run a macro.� Apply a transformation.

It is the work of the HATS developer to capture the host screens and determine how they will be recognized, and then to determine what actions will be associated with these screens. This activity results in a HATS screen customization. Additionally, the HATS developer will have to record any macros that will be used, and develop the transformations that will be used.

36 Creating and Modifying HATS Projects

Page 49: Modifying HATS output Customizing HTML output

Figure 3-1 HATS application processing

There are three steps in the HATS customization process:

1. Capture the required host screens. See 3.2, “Capturing screens” on page 38.

Host screenreceived

Check firstScreen

Customization(SC)

Allrequiredcriteriamatch?

Anyoptionalcriteriamatch?

Isthere

anotherSC?

Perform actionsdefined forunmatched

screen event

Send screento user

Perform actionsdefined forthis Screen

Customization

Check nextScreen

Customization(SC)

No

No

No

Yes

Yes

Yes

Chapter 3. Customizing HATS projects 37

Page 50: Modifying HATS output Customizing HTML output

2. Define how the screens will be identified by HATS. See 3.3, “Creating a screen customization” on page 41.

3. Define what actions are taken when HATS encounters the host screen. See 3.4, “Applying actions to screen customizations” on page 46.

3.2 Capturing screensThe first step in customizing a HATS application is to capture the host screens that will have some customization applied to them. Every screen that will be customized must first be captured. The customization may be as simple as entering some value on the command line and pressing the Enter key without displaying the screen. This is a common way to provide a customized navigation in the HATS application.

To capture a screen, begin by opening the terminal emulator session. Do this by clicking the terminal emulation icon on the tool bar. See Figure 3-2.

Figure 3-2 Open a terminal emulator session - Method 1

Alternatively, you can open the terminal session by right clicking the HATS project folder in the HATS project view and then selecting Open Terminal in the drop-down context menu. See Figure 3-3.

Figure 3-3 Open a terminal emulator session - Method 2

Terminal session icon

38 Creating and Modifying HATS Projects

Page 51: Modifying HATS output Customizing HTML output

A standard terminal emulation session will start based on the connection properties that are configured for the HATS project.

This terminal emulation session is actually a Host On-Demand session provided by the HATS Studio product. See Figure 3-4.

Figure 3-4 Active terminal emulator session

Note: Your workstation must be connected to the network and be able to make a Telnet connection to the host.

Chapter 3. Customizing HATS projects 39

Page 52: Modifying HATS output Customizing HTML output

To capture a screen, navigate to the screen and click the Screen capture icon (the camera) on the terminal session toolbar. See Figure 3-5.

Figure 3-5 Initiating a screen capture

This will capture the screen that is present in the terminal emulator session. When you click the Screen capture icon, you will be presented with a dialog that will allow you to name the screen (a screen name is assigned by default based on what is found in the screen itself). Click Finish to complete the screen capture.

The screens that are captured are saved in the Screen Captures folder under the HATS project folder. If you expand the Screen Captures folder you can see each of the screen capture files that have been saved. Placing the mouse cursor over the files will display the captured screen. See Figure 3-6.

Figure 3-6 Displaying captured screens

Screen capture icon

40 Creating and Modifying HATS Projects

Page 53: Modifying HATS output Customizing HTML output

3.3 Creating a screen customizationThere are three basic steps in creating a screen customization:

1. Give the new screen customization a name and any descriptive information that is appropriate.

2. Determine how the host screen will be identified by HATS.

3. Determine what actions will be taken when the screen is displayed. These might include:

– Screen transformation.– Run a macro.– Insert a value from a variable to the screen.– Extract a value from the screen to a variable.– Set the value of a variable.

To create a screen customization, select one of the folders in the HATS project and right click the folder. From the context drop-down menu, select New HATS and then Screen Customization as shown in Figure 3-7.

Figure 3-7 Start the screen customization

This will result in a dialog panel where you can enter the name for the new screen customization and any description that may be appropriate. Click Next to continue.

Chapter 3. Customizing HATS projects 41

Page 54: Modifying HATS output Customizing HTML output

The next panel that is displayed provides the ability to define which host screen will trigger the screen customization actions and how the host screen will be identified. See Figure 3-8.

Figure 3-8 Select a screen recognition area

Using this dialog panel, you can select the area on the screen that will be used to identify the screen. Whatever is surrounded by the yellow outline box will be used to identify the screen.

42 Creating and Modifying HATS Projects

Page 55: Modifying HATS output Customizing HTML output

You can also select whether or not the text that is selected has to be identified in a particular location on the screen by clicking the appropriate check boxes. See Figure 3-9.

Figure 3-9 Selecting text at a specific location

As an alternative to using text on the screen for screen recognition you can, by clicking the appropriate check boxes, use the total number of fields on the screen, or the number of input fields on the screen, or the position of the cursor. See Figure 3-9.

If additional screen recognition criteria are needed to exactly identify the screen, they can be added after the screen customization is completed. See 3.3.2, “Adding screen recognition criteria to a customization” on page 45.

Once the screen identification has been configured, click Next to continue the screen customization process.

Chapter 3. Customizing HATS projects 43

Page 56: Modifying HATS output Customizing HTML output

The Select Actions screen provides the ability to configure whether or not you want to create a transformation to be applied to the screen customization, or if the default transformation will be used, or no transformation at all would be used. See Figure 3-10.

Figure 3-10 Selecting a transformation to apply

If no transformation is applied, then no screen will be displayed when the host screen is encountered.

If you choose the option to create a new transformation, a name for the transformation will be entered. The same name as the screen customization is used by default, but you can type over the name if you wish to change it.

44 Creating and Modifying HATS Projects

Page 57: Modifying HATS output Customizing HTML output

If you choose the option to create a new transformation, when you click Finish to complete the screen customization process, HATS will automatically start the transformation creation process. See 3.5, “Creating and editing transformations” on page 51 to proceed through the transformation creation process.

If you have clicked the Add advanced actions check box, you will be able to click the Next button. When you click the Next button, the Advanced Actions dialog will be presented. See 3.4, “Applying actions to screen customizations” on page 46, for details on adding actions to a screen customization.

3.3.1 Some notes regarding screen identificationScreens must be identified uniquely; however, it is best if you do not make the screen identification parameters any more stringent than need be. For example, if you can use some text on the screen that is unique to that screen, but not specify that the text be in a specific location, this will help insulate your application from being impacted if the host screen changes. If the identifying text is moved to a different location, the screen will still be properly identified. If you have required that the identifying text be in an exact location, and then it is moved in the host screen, the HATS application will have to be modified so that the screen identification occurs with the new location.

If you want to distinguish between an error condition on a host screen and a non-error condition, you must capture these two situations as two different host screens and identify them as such. You must use the characteristic of the screen that denotes the error condition (an error statement, perhaps just a change in a field color) to distinguish the error screen from the non-error screen. This may take a little extra thought and diligence to accomplish, but it can be done.

Be careful not to select a part of the screen for identification that includes a dynamic element such as the date or time, or less obvious, the workstation ID or terminal ID. Obviously, a screen identification using dynamic data will not work consistently.

3.3.2 Adding screen recognition criteria to a customizationIf more than one criterion is required to exactly and uniquely identify the screen, that can be done by finding the screen customization in question in the Screen Customizations folder and then double clicking the screen customization. This will open the screen customization editing panels in the editing window. See Figure 3-11 on page 46.

Chapter 3. Customizing HATS projects 45

Page 58: Modifying HATS output Customizing HTML output

Figure 3-11 Adding additional screen recognition criteria

By clicking the Add button, you can add additional screen recognition criteria. Note that when you are adding or editing screen customization criteria, you have the option to specify that the recognition criteria include Case sensitive, Optional, and Invert parameters. Case sensitive requires that the case of the text on the screen exactly match the text specified, Optional indicates that the text may or may not be present, and Invert indicates that the text specified must not be present.

3.4 Applying actions to screen customizationsThe ability to add actions to a screen customization can be initiated by either proceeding through the process of creating a new screen customization (see 3.3, “Creating a screen customization” on page 41) or by editing an existing screen customization.

46 Creating and Modifying HATS Projects

Page 59: Modifying HATS output Customizing HTML output

To edit an existing screen customization, under the Screen Customizations folder, double click the file name of the screen customization to be edited. This will open the screen customization in the editing window. Selecting the Actions tab will open the panel that will allow you to add, edit, delete, and order actions attached to the screen customization. See Figure 3-12.

Figure 3-12 Adding actions to a screen customization

To add an action to the screen customization, click the Add button.

To edit an existing action, click the action in the list to highlight it, and then click the Edit button.

To remove an action, click the action in the list to highlight it, and then click the Remove button.

Actions will be applied in the order they are listed. To change the order, click to highlight the action to be moved in the list, and then click the Up or Down button to move the item up or down in the list.

Chapter 3. Customizing HATS projects 47

Page 60: Modifying HATS output Customizing HTML output

3.4.1 Actions that can be attached to a screen customizationWhen the Add or Edit button is clicked, the panel shown in Figure 3-13 is displayed. This provides the dialog for configuring screen customization actions.

Figure 3-13 Specifying screen customization actions

The available actions that can be applied to the screen customization are:

� Apply a transformation.� Insert a global variable.� Extract a global variable.� Set a global variable.� Execute business logic.� Show a URL.� Disconnect the session (not supported through the GUI—source editing only).

Each of these is discussed in the following paragraphs.

48 Creating and Modifying HATS Projects

Page 61: Modifying HATS output Customizing HTML output

Applying a transformationYou can select available transformations to be applied to the screen customization and an associated template. Typically the same template (the default template) is used throughout the HATS project; however, there may be instances where a different template is desired with a given transformation to change the look of the page.

Additionally, by clicking the Immediate host keys button, you can configure host keys that will be sent to the host before the transformation is applied.

Insert a global variableThis action will insert the value from a global variable into the specified location on the screen, or insert a character string into a specific location on the host screen. A global variable can only be inserted into an input field in the host screen. The location can be indicated by using the mouse to draw a rectangular box around the area on the screen, or by entering the specific row and column values. Note that you can click the Highlight input fields box to have the input fields shown in bright blue, making them easier to distinguish.

By choosing Advanced, you can choose options regarding indexed variables. An indexed variable can have all of the values appended together and inserted as one value, or have the values inserted into a rectangular area on the screen, or have a specific index inserted.

Extract a global variableThis action will extract a value from the screen and assign it to a global variable. If the variable has been previously established, it will be available in the drop-down list for selection. If the variable has not been previously assigned, you can type the name of the variable in the Name box, which will establish a new variable.

The location can be indicated by using the mouse to draw a rectangular box around the area on the screen, or by entering the specific row and column values. Note that you can click the Highlight input fields box to have the input fields shown in bright blue, making them easier to distinguish.

The Advanced button provides a dialog where you can make specifications regarding how the screen values will be extracted and assigned to the variable, including the ability to use indexed variables. You can either extract a region on the screen as one variable or as a list or indexed variable, each field in the region becoming an index value.

Chapter 3. Customizing HATS projects 49

Page 62: Modifying HATS output Customizing HTML output

The Advanced button also provides the ability to specify if the value or values being extracted will overwrite an existing value or be appended to an existing variable value.

Set a global variableThis action will assign a value to a global variable, or initialize a global variable.

Execute business logicBy selecting Execute business logic as a screen customization action, you can have a Java application execute. To configure this action, simply enter the name of the Java class, or use the Browse button to browse to find it.

The HATS Studio provides a wizard to assist in the creation of business logic; however, the details of that activity are beyond the scope of this document. See IBM WebSphere Host Access Transformation Server Developer’s Guide Version 4, SC31-6324, Chapter 9, “Adding business logic”.

Specify a URLSpecifying a URL will cause the specified Web page to be displayed when the host screen being customized is encountered.

Disconnect the sessionA HATS screen customization can be configured to disconnect the host session when the particular host screen is recognized. This capability is not supported in the HATS Studio wizards, rather only by editing the source code of the screen customization.

To edit the source of the screen customization, double click the screen customization in the Screen Customizations folder so that it opens in the editing window. Click the tab labeled Source. This will open the source editor. Add the lines as shown in Example 3-1.

Example 3-1 Adding disconnect code to the screen customization source

<?xml version="1.0" encoding="UTF-8"?><event description="" type="screenRecognize"> <actions> <disconnect /> </actions> <associatedScreens> <screen name="DisplayProgramMessages"/> </associatedScreens> <description> <oia invertmatch="false" optional="false" status="NOTINHIBITED"/> <string casesense="false" col="1" ecol="-1" erow="-1"

50 Creating and Modifying HATS Projects

Page 63: Modifying HATS output Customizing HTML output

invertmatch="false" optional="false" row="1" value=" Display Program Messages "/> </description></event>

3.5 Creating and editing transformationsWhen creating screen transformations, select items on the host screen that will be transformed. The transformation may be as simple as a default transformation, which merely displays that portion of the host screen on the Web page just as it is displayed on the host screen.

3.5.1 Creating a screen transformation as a result of creating a screen customization

If you are creating a screen transformation as a result of the screen customization process, after you click the Finish button in the screen customization process, you will be presented with the panel labeled Insert Host Component, as shown in Figure 3-14 on page 52.

Chapter 3. Customizing HATS projects 51

Page 64: Modifying HATS output Customizing HTML output

Figure 3-14 Creating a screen transformation

In this panel you use the mouse to draw a box around the portion of the screen you wish to transform.

Once you have identified the portion of the screen to be transformed click Next. This will result in the Insert Host component - Rendering Option panel being displayed, as shown in Figure 3-15 on page 53.

52 Creating and Modifying HATS Projects

Page 65: Modifying HATS output Customizing HTML output

Figure 3-15 Select host component to be transformed

On this panel, select the appropriate host component type and then the appropriate widget to be applied to that host component. Note that if you attempt to select a widget that is not appropriate for the host component type, the widget selections will be turned gray and will not be selectable.

Chapter 3. Customizing HATS projects 53

Page 66: Modifying HATS output Customizing HTML output

When you have configured the widget in the manner you desire, click the Finish button. The transformation editing screen will be displayed either in the Source view (see Figure 3-16) or the Design view (see Figure 3-17 on page 55).

Figure 3-16 Transformation editing - Source view

54 Creating and Modifying HATS Projects

Page 67: Modifying HATS output Customizing HTML output

Figure 3-17 Transformation editing - Design view

The view that is displayed depends on which view is set as the default or which view was open when a transformation was last saved.

Chapter 3. Customizing HATS projects 55

Page 68: Modifying HATS output Customizing HTML output

3.5.2 Initiating the screen transformation processA screen transformation is often created as a part of the screen customization process. If you have the Create new transformation checkbox checked, a new process of creating a transformation is begun. However, it is also possible to initiate the process of creating a new screen transformation independently. To do this, click the right mouse button, and then select New HATS -> Transformation from the drop-down context menu (see Figure 3-18).

Figure 3-18 Initiating the screen transformation process

When initiated independently of the screen customization process, the screen transformation process is slightly different.

When you initiate the screen transformation creation separately from the screen customization process, you are first presented with a panel to name the transformation, and then the Select Screen panel, which is used to select the screen that will trigger the screen transformation. This can either be a screen that was already captured or, if you have the terminal emulation session open, the screen that is currently displayed in that session.

Also on the Select Screen panel you can check a box to indicate that you want to perform the screen customization process. If you check that box, the screen customization process will begin when you click Finish. The screen customization process will then finish with the screen transformation creation process.

If you are creating the screen transformation as a result of the screen customization process, then the screen transformation is automatically associated with the screen customization that was just created, so you are not presented with the panel used to select the screen customization.

56 Creating and Modifying HATS Projects

Page 69: Modifying HATS output Customizing HTML output

Once the screen customization is created, or the Finish button is clicked, the new screen transformation is displayed in the editor window. There is no process to add the first component to the screen like there is if you came into the screen transformation creation as a result of the screen customization process. At this point, you will need to add host components or key buttons, etc. to the screen transformation. This is done in the same way you would edit an existing screen transformation as described in the following section.

3.5.3 Editing a screen transformationTo edit a screen transformation, if the screen transformation is not already opened in the editing window, double click the screen transformation file name in the screen transformation folder.

Once the screen transformation file is opened in the editing window, if the Source view is not opened, click the tab labeled Source to open it.

Scroll down to the bottom of the page and notice the lines <HATS:Form> and </HATS:Form>. These lines indicate the section of the Java Server Page (JSP) that make it a HATS transformation page. Only items between these two lines represent the HATS transformation, or host screen. To edit the transformation, we will insert or delete lines within this area of the JSP (screen transformation).

To add a host component, put the cursor within the HATS Form portion of the JSP. If there is already a HATS component within the form, then you need to decide if the HATS component should be displayed before or after the existing component. If before, place the cursor before the existing component. If the new component is to be displayed after the existing component, place the cursor after the existing component.

Next, click the HATS Tools menu item on the menu bar, or right click and select HATS Tools from the context pop-up menu. You will be presented with a list of HATS components that can be inserted at the location of the cursor.

When you select one of the items on the menu, you will be presented with a panel allowing you to configure the HATS component to be inserted.

Editing an existing HATS componentIf you wish to edit an existing HATS component, place the cursor within the line representing that component, and again click the HATS Tools menu item on the menu bar, or right click and select HATS Tools from the context pop-up menu. Next select Edit HATS component from the list of available options and you will be presented with the appropriate panels to edit the existing HATS component.

Chapter 3. Customizing HATS projects 57

Page 70: Modifying HATS output Customizing HTML output

Arranging HATS componentsA common way to provide formatting in HATS transformations is to use tables.

Figure 3-19 illustrates how HATS components can be placed in a table to provide formatting for the screen elements.

Figure 3-19 Arranging HATS components within a table

In this case, two host screen components (input fields) have been placed in the table cells and two lines of text in the other table cells. The table border is displayed, so that it is more apparent how the table is being used, but the border could be not shown to make the table invisible on the screen.

The HTML source that creates this result is shown in Example 3-2 on page 59. Notice that this table is within the <HATS:Form> area of the transformation page, and the HATS components are inserted into the cells of the table.

58 Creating and Modifying HATS Projects

Page 71: Modifying HATS output Customizing HTML output

Example 3-2 Adding table source to the <HATS:Form> area

<HATS:Form><CENTER><TABLE border="1">

<TBODY><TR>

<TD>Enter your UserID:</TD><TD><HATS:Component

type="com.ibm.hats.component.InputFieldExtract"widget="com.ibm.hats.widget.TextInputWidget" row="6" col="53"erow="6" ecol="62" label="" componentSettings=""

widgetSettings="" /></TD></TR><TR>

<TD>Enter your password:</TD><TD><HATS:Component

type="com.ibm.hats.component.InputFieldExtract"widget="com.ibm.hats.widget.TextInputWidget" row="7" col="53"erow="7" ecol="62" label="" componentSettings=""

widgetSettings="" /></TD></TR>

</TBODY></TABLE></CENTER>

<BR><BR><BR><BR><BR><BR>

<HATS:HostKeypad/>

</HATS:Form>

The table can be easily inserted into the HATS transformation by performing the following steps:

1. Open the HATS transformation in the editing window (double click the transformation file name).

2. If the source view is not open, click the Source tab to open it.

3. Place the cursor within the HATS form (between <HATS:Form> and </HATS:Form>) where you want the table to be displayed.

4. Click the Insert icon on the HATS Studio menu, then click Table from the drop-down menu.

Chapter 3. Customizing HATS projects 59

Page 72: Modifying HATS output Customizing HTML output

5. Configure the Table wizard dialog for the number of rows and columns desired in the table and then click OK.

Figure 3-20 Using the HATS Studio menu to add a table

6. The table HTML code is inserted into the HATS transformation region.

7. Create the HATS components within the appropriate table cells or cut and paste existing HATS components into the table cells.

After creating the table and placing the HATS components into the appropriate table cells, you can click the Design view (or Preview) tab and see the results. In the Design view, you can click the table to select it and then right click and select Attributes from the context pop-up menu. This will open the Attributes [TABLE] dialog panel where you can configure the various characteristics of the table. See Figure 3-21 on page 61 for an example.

2) Click Insertthen Table.

1) Cursor at locationfor table insertion.

60 Creating and Modifying HATS Projects

Page 73: Modifying HATS output Customizing HTML output

Figure 3-21 Configuring table characteristics

Changing the border value to 0 will make the table border invisible.

After you make changes with the Attribute [TABLE] dialog, you can click back to the Source view and see the changes that were made in the HTML code. This will help you better understand HTML syntax if you are not familiar with it.

Chapter 3. Customizing HATS projects 61

Page 74: Modifying HATS output Customizing HTML output

62 Creating and Modifying HATS Projects

Page 75: Modifying HATS output Customizing HTML output

Chapter 4. Common customizations

This chapter provides details on additional customization that can be performed on HATS projects. This is intended to be only a small sampling of what can be done with HATS customization. The customizations described here are some of the more common customizations that might be performed in a HATS project.

4

© Copyright IBM Corp. 2003. All rights reserved. 63

Page 76: Modifying HATS output Customizing HTML output

4.1 MacrosYou can record a macro that plays keystrokes and/or inserts values from HATS variables into host fields and/or extracts values from screens into HATS global variables.

Macros can be recorded simply by interacting with the terminal session, and edited using a series of configuration panels.

The HATS macro functionality is virtually the same functionality that is in IBM Host On-Demand. People familiar with recording and editing Host On-Demand macros will be very comfortable with doing so in HATS. To learn more details of the macro functionality, see the Host On-Demand Library, which can be found at:

http://www-3.ibm.com/software/webservers/hostondemand/library.html

4.1.1 Recording a macroTo record a macro, open the HATS host terminal screen, and navigate to the host screen where you want to begin recording the macro. Click the Record Macro icon (Figure 4-1). You will be prompted to enter a name for the macro.

Figure 4-1 HATS macro icons - Part 1

Once you enter a name for the macro and click Finish, the HATS Studio will be recording whatever keys you enter and whatever host screens are encountered. When you have completed recording the macro, click the Stop Recording icon (Figure 4-2 on page 65). While you are recording the macro, you can insert a HATS global variable into a host field by placing the cursor in the appropriate host field and then clicking the Insert prompt icon (Figure 4-2 on page 65).

Play Macro icon

Record Macro icon

64 Creating and Modifying HATS Projects

Page 77: Modifying HATS output Customizing HTML output

Figure 4-2 HATS macro icons - Part 2

You can play the macro in the terminal session to verify that it works the way you want by clicking the Play Macro icon (Figure 4-1 on page 64). If you have recorded more than one macro, you will see a drop-down list to choose the macro you want to play.

4.1.2 Editing a macroThere is a macro editor that provides a series of panels that allows you to make modifications to the macro. The macro editor can be accessed by double clicking a macro file in the Macros folder. The macro file will be opened in the editor window. On the Overview tab, you can click the Editor button (see Figure 4-3) to get a series of dialog panels that allow you to edit the macro (see Figure 4-4 on page 66).

Figure 4-3 Macro editor overview panel

Stop Recording icon

Insert prompt icon

Insert extract icon

Click toedit the macro.

Chapter 4. Common customizations 65

Page 78: Modifying HATS output Customizing HTML output

Figure 4-4 Macro editor panel

In this series of panels, you can configure virtually every aspect of the macro. The details of how to do that are beyond the scope of this document. For information on this go to the he Host On-Demand Infocenter at:

http://www-3.ibm.com/software/webservers/hostondemand/library/infocentergafinal/hod/en/help/2tabcontents.html

This site provides a Macro Programming Guide, which provides details of how to create and edit macros.

You can also click the Source tab in the macro editor window and see the XML source for the macro. This source is also directly editable. More detail on editing the macro XML file can also be found in the Host On-Demand Infocenter.

4.1.3 Using the macroA HATS macro can be associated with any screen customization so that the macro is played automatically when the screen is encountered. This

66 Creating and Modifying HATS Projects

Page 79: Modifying HATS output Customizing HTML output

customization is done as a part of a screen customization, and typically a transformation would not be applied.

Alternatively, a macro can be associated with a button, or a series of macros could be listed in a drop-down selection list. In this way, when the user clicks the button or makes a selection from the drop-down list, the macro is played. This is done as part of a transformation.

4.2 Using global variables to combine screensCombining screens can be accomplished in two different ways:

1. Collecting data across multiple screens and displaying it on one screen

This is accomplished by extracting values from the screens into HATS global variables, and then displaying the global variables on the final screen. A screen customization is used for every screen where values are extracted from the screen, but no screen transformation is applied to these screens, as they are not to be displayed. On the final host screen, a screen transformation is applied that displays the HATS global variables (see 4.2.2, “Displaying global variables” on page 68).

2. Entering data on one screen and using it (inserting it) on several subsequent screens

This is accomplished by entering values into an HTML form on the first page (see 4.2.3, “Creating a form to enter HATS global variables” on page 68). The HTML form sets the values of HATS global variables. The variable values are then inserted into the appropriate fields as the subsequent screens are encountered.

A key aspect of both of these scenarios is being able to navigate through the various screens without displaying them. A technique for doing that is covered in 4.3.1, “Bypassing screens with screen customizations” on page 69.

4.2.1 Reading global variables from a host screenTo read a value from a host screen and store it in a HATS global variable, perform the following steps:

1. Create a screen customization for the page (or modify an existing customization).

2. Add an action to the screen customization to extract a global variable for each field on the screen that is to be presented on the final screen.

Chapter 4. Common customizations 67

Page 80: Modifying HATS output Customizing HTML output

4.2.2 Displaying global variablesIn order to display a global variable on a page, you must first set or extract the global variable value. Once you have created the global variable by setting or extracting a value to the global variable you can create a new (or modify an existing) screen transformation (see 3.5, “Creating and editing transformations” on page 51). On the screen transformation you use the Insert HATS global variable item on the HATS Tools menu item or the Insert HATS Component icon menu. Insert each of the variables that you wish to be displayed on the screen. You can place these variables into tables to get the formatting that is desired (see “Arranging HATS components” on page 58).

4.2.3 Creating a form to enter HATS global variablesFrom the Design view (tab) of the page editor, select Insert -> Form and Input Fields -> Text Field to insert an HTML input field. Note that this new HTML input field must be inserted within the HATS form tags (<HATS:Form>). Instead of Text Field, you may also select Radio Button, Text Area, Check Box, List Box, or Option Menu. You will see the attributes dialog box (Figure 4-5), and you will enter the text field name with hatsgv_ prepended to the actual HATS global variable name, as shown in Figure 4-5. Indexed variables are not supported.

Figure 4-5 Attributes dialog box

68 Creating and Modifying HATS Projects

Page 81: Modifying HATS output Customizing HTML output

For instance, hatsgv_myVariableName will update the HATS global variable myVariableName with the value entered in the text field. For each variable to be assigned, simply create a new input field. Remember, all input fields using the hatsgv_ form must be within the <HATS:Form> area of the page.

4.3 Screen navigationThere are various screen navigation techniques that can be used. Two techniques are discussed in the following sections:

� Bypassing screens with screen customizations� Using macro buttons to cause screen navigation

4.3.1 Bypassing screens with screen customizationsFigure 4-6 illustrates a common way to navigate from one screen (for example, a logon screen) into the host application until the actual application is reached. The user logs on in and the next screen that is displayed is the application screen. All the screens in between would be automatically navigated through by the HATS application. This method uses a variable so that different actions can take place for navigating into the host application, than those actions that occur navigating back out of the host application.

Figure 4-6 Using a global variable to navigate through host screens

logonscreen

Set variable nav = "boats". Displaylogon transformation

menuscreen

Insert nav intocommand line. Run enter_keymacro.

applicationscreen

Set nav = "90". Display HATS transformation.

menuscreen

Insert nav intocommand line. Run enter_keymacro.

hitenter

click "end" orhit PF12

logonscreen

Set nav = "boats". Displaylogon transformation

HostScreen

ScreenCustomization

Chapter 4. Common customizations 69

Page 82: Modifying HATS output Customizing HTML output

In the illustration in Figure 4-6 on page 69, the HATS screen customization for the logon screen sets a global variable called nav to have a value of “boats”. When the Enter key is pressed, the menu screen is recognized by HATS and the variable nav is inserted into the command line, and the enter_key macro is played which simply plays the Enter key.

The next screen that is encountered is the application screen. The application screen customization sets the value of nav to 90, and then displays the application transformation. When the user clicks the end button or press the PF12 key, the host application goes back to the menu screen.

When the menu screen is encountered, the value for nav, now “90”, is again entered into the command line ,and the enter_key macro is played, which caused the host session to log off. This causes the logon screen to be encountered, and then the screen customization is again used.

4.3.2 Creating navigation buttonsFrequently, host applications are navigated by entering a mnemonic on the screen that represents a particular application. A GUI navigation system can be achieved by creating a macro for each mnemonic. Each macro would simply write the mnemonic to the screen and press the Enter key. By creating a transformation that displays a series of macro buttons or a drop-down list that executes the various macros, a navigation menu can be achieved.

4.4 Transforming a host input field to a drop-down listThe input field widget can be applied to a host field and configured to be displayed as a drop-down list. The values that are used in the drop-down list can either be obtained from HATS global variables, or explicitly specified in the input field widget as part of the drop-down list settings.

In order to populate the drop-down list from HATS global variables, it is necessary to first establish the two variables and then populate them with values from the screen. One variable provides the list of values that will be displayed in the list, and the other variable provides the values that will be entered into the host field. If the same values are displayed that are entered into the host field, then only one variable is needed.

Once the variables are created, then you create the transformation that applies the input field widget to the host field.

70 Creating and Modifying HATS Projects

Page 83: Modifying HATS output Customizing HTML output

4.4.1 Getting values from a screenTo create a screen customization that reads the values used to populate the drop-down list from the host screen, perform the following actions:

1. Create a screen customization (or modify an existing screen). See 3.3, “Creating a screen customization” on page 41.

2. Click the Add advanced actions box as the customization is being created.

3. Click the Add button to add an action to the customization.

4. Select the Extract global variable option from the drop-down list.

5. Enter the name of the variable. For example, you might use “ListValues” for the name of the variable that contains the values that will be entered into the host screen, and “ListDesc” for the variable that contains the values that will be displayed in the drop-down list.

6. Click the Advanced button and in the panel displayed. Click the button Overwrite the existing value with the new value. See Figure 4-7.

Figure 4-7 Overwriting a variable with data from the screen

7. Click OK.

8. Back on the Add action panel, select the value on the screen so that the screen location is entered into the Host Region: Starting and Ending positions.

9. Click OK to complete the addition of the screen extraction.

10.Click the Add button again to add another action to the screen.

11.Again select the Extract global variable option from the drop-down list.

12.Select the variable that was previously created in the Name field.

13.Click the Advanced button.

Chapter 4. Common customizations 71

Page 84: Modifying HATS output Customizing HTML output

14.In the Handle Indexed Variables panel, click the Append this new value to the end of the existing value radio button, as shown in Figure 4-8. This will cause this second value to be assigned to the second index of this variable.

Figure 4-8 Appending data extracted from the screen

15.Click OK to close the Handle Indexed Variables panel.

16.Back on the add action panel, select the value on the screen so that the screen location is entered into the Host Region: Starting and Ending positions.

17.Click OK to complete the addition of this screen extraction action.

18.Repeat steps 10 through 17 to add the remaining values to this variable.

19.Repeat steps 2 through 18 to add the second variable. Be sure to use a different variable name, as described in step 5.

When you are finished, you should have two variables as shown in Table 4-1.

Table 4-1 Variables

Note: Be sure to keep the variable values coordinated by assigning the values in the same order.

Variable: boat_type boat_desc

index 1: A All

index 2: P Power

index 3: S Sail

etc. ... ...

72 Creating and Modifying HATS Projects

Page 85: Modifying HATS output Customizing HTML output

When you are finished adding these actions to the screen customization, you should have a list like that shown in Figure 4-9.

Figure 4-9 Transformation actions

Chapter 4. Common customizations 73

Page 86: Modifying HATS output Customizing HTML output

4.4.2 Create the screen transformationCreate the new transformation. See 3.5, “Creating and editing transformations” on page 51. Perform the following steps to transform the host input field to a drop-down list:

1. On the Insert Host Component screen, use the mouse to draw a box around the host field to be transformed. See Figure 4-10.

Figure 4-10 Select the field to be transformed

74 Creating and Modifying HATS Projects

Page 87: Modifying HATS output Customizing HTML output

2. Click the Next button to proceed to the Insert Host Component Rendering Option panel, as shown in Figure 4-11.

Figure 4-11 Select host component to be transformed

3. Select the Input Field component as shown in Figure 4-11.

4. Click the Widget settings icon as shown in Figure 4-11.

Widget Settings icon

Chapter 4. Common customizations 75

Page 88: Modifying HATS output Customizing HTML output

5. In the Settings panel perform the following actions as illustrated in Figure 4-12:

a. Click the box to uncheck Use project defaults.

b. Click the box to check Display as dropdown list.

c. If you are using global variables to populate the drop-down list, click the box to check Global variable.

Figure 4-12 Change the settings

d. Enter the names of the variables that were created in 4.4.1, “Getting values from a screen” on page 71. These are the variables that hold the values that populate the drop-down list and the values that get entered into the host field.

e. If you want to explicitly specify the values for the drop-down list within the input field settings, click the String box and enter the list items as per the example given in the dialog (see Figure 4-13).

Figure 4-13 Drop-down list settings

76 Creating and Modifying HATS Projects

Page 89: Modifying HATS output Customizing HTML output

Appendix A. HATS Studio in WebSphere Studio V4.03 vs. V5.0

This appendix describes the differences between the user interfaces of the HATS Studio in WebSphere Studio V4.03 and later, and WebSphere Studio V5.0 and later.

WebSphere Studio Site Developer (WSSD) V4.03 comes as a part of the IBM Host Integration Solution, and so this may be the development studio you would be using.

Many HATS users have already upgraded to WebSphere Studio Application Developer (WSAD) V5 or WebSphere Studio Application Developer - Integration Edition, and so either of those may be the development studio you would be using

Figure A-1 on page 78 shows the HATS Tools menu item that is used in WebSphere Studio V5. You select this item to insert HATS components into a HATS transformation page. Figure A-2 on page 78 illustrates that this function is provided by an icon on the toolbar in WebSphere Studio V4.03. Note that these functions are only available when you have a HATS transformation page opened with the Page Designer function.

A

© Copyright IBM Corp. 2003. All rights reserved. 77

Page 90: Modifying HATS output Customizing HTML output

Figure A-1 HATS Studio in WSAD V5.0

Figure A-2 HATS Studio In WSSD 4.03

78 Creating and Modifying HATS Projects

Page 91: Modifying HATS output Customizing HTML output

acronyms

CSS Cascading Style Sheet

EAR Enterprise Archive file

GUI Graphical User Interface

GWAPI Go Webserver API

HACP Host Access Client Package

HATS Host Access Transformation Server

HLLAPI high level language application programming interface

HOD Host On-Demand

HPR high performance routing

HTML Hypertext Markup Language

HTTP Hypertext Transfer Protocol

IBM International Business Machines Corporation

IT Information Technology

ITSO International Technical Support Organization

JSP JavaServer Pages

JVM Java virtual machine

URI Universal Resource Identifier

URL Universal Resource Locator, Uniform Resource Locator

WAR Web module Archive

WAS WebSphere Application Server

WAS AE WebSphere Application Server Advanced Edition

WAS AEs WebSphere Application Server Advanced Single Server Edition

WSAD-IE WebSphere Studio Application Developer-Integration Edition

WSSD WebSphere Studio Site Developer

WWW World Wide Web

XML eXtensible Markup Language

XSL eXtensible Style Language

Abbreviations and

© Copyright IBM Corp. 2003. All rights reserved.

79
Page 92: Modifying HATS output Customizing HTML output

80 Creating and Modifying HATS Projects

Page 93: Modifying HATS output Customizing HTML output

Related publications

The publications listed in this section are considered particularly suitable for a more detailed discussion of the topics covered in this Redpaper.

IBM RedbooksFor information on ordering these publications, see “How to get IBM Redbooks” on page 82. Note that some of the documents referenced here may be available in softcopy only.

� WebSphere Studio Application Developer Programming Guide, SG24-6585

� WebSphere Studio Application Developer Version 5 Programming Guide, SG24-6957

Other publicationsThese publications are also relevant as further information sources:

� IBM Host Access Transformation Server InfoCenter

http://www-3.ibm.com/software/webservers/hats/library/infocenter/

� IBM Host On-Demand InfoCenter

http://www-3.ibm.com/software/webservers/hostondemand/library/infocentergafinal/hod/en/help/2tabcontents.html

� IBM WebSphere Host Access Transformation Server Developer’s Guide, SC31-6324

� IBM WebSphere Host Access Transformation Server Getting Started, SC31-6325

� HATS Architecture, Redpaper by Erasmus Tapera

Online resourcesThese Web sites and URLs are also relevant as further information sources:

� HATS Forum

news://news.software.ibm.com/ibm.software.websphere.hats

© Copyright IBM Corp. 2003. All rights reserved. 81

Page 94: Modifying HATS output Customizing HTML output

� HATS Support

http://www-3.ibm.com/software/webservers/hats/support.html

� Host On-Demand Library, which can be found at:

http://www-3.ibm.com/software/webservers/hostondemand/library.html

How to get IBM RedbooksYou can search for, view, or download Redbooks, Redpapers, Hints and Tips, draft publications and Additional materials, as well as order hardcopy Redbooks or CD-ROMs, at this Web site:

ibm.com/redbooks

Help from IBMIBM Support and downloads

ibm.com/support

IBM Global Services

ibm.com/services

82 Creating and Modifying HATS Projects

Page 95: Modifying HATS output Customizing HTML output

Index

Aactions 36, 46–48, 67

apply a transform 48–49disconnect the session 48, 50execute business logic 48, 50extract a global variable 48–49, 67insert a global variable 48–49set a global variable 48, 50specify a URL 48, 50

advanced connection settings 7application keypad 11

Bbasic connection settings 7business logic 36, 50

Ccapturing screens 38–40cascading stylesheets 25

background 25font size 25keypad 25

client locale 12combine screens 67components 10customized navigation 38customized project 1–2

Ddefault project 1–2, 6, 13

modifying 13default template 13, 27

creating new 14–19import HTML page 20–24modify existing HATS 19–20stylesheets 27

default transformation 7, 10–11, 22, 36, 51dropdown list 70, 76

Eevent priority 8

© Copyright IBM Corp. 2003. All rights reserved.

Gglobal variable 67–70

display 68extract 49, 67insert 49set 50, 67, 70

HHost Integration Solution 77host keypad 11

Kkeyboard support 11

Mmacro 35–36, 64–67

editing 65recording 64using 66

Nnoinputborders 25

Pprint support 7PrintJobWindow 25project settings 6–12

advanced connection 7basic connection 7event priority 8modifying 6template 8text replacement 8

project settings editor 9application keypad 11client locale 12components 10host keypad 11keyboard support 11widgets 11

83

Page 96: Modifying HATS output Customizing HTML output

RRedbooks Web site 82

Contact us ix

Sscreen customization 2, 8, 36, 41–42, 56–57, 66–67, 71

actions 46–48, 73apply a transform 48–49disconnect the session 48, 50execute business logic 48, 50extract a global variable 48–49, 67insert a global variable 48–49run a macro 41set a global variable 48, 50specify a URL 48, 50

creating 41–46default project 2, 9, 36editing 46–47screen navigation 69–70screen recognition 43, 45–46screen transformation 41, 51–61templates 44trigger 42using a macro 66

screen identification 45error condition 45

screen navigation 69–70screen recognition 43, 45–46

actions 44screen transformation 51–61, 74

creating 51, 56, 74editing 57initiating 56trigger 56

stylesheets 24–34cascading 25modifying 25–30noinputborders 25PrintJobWindow 25

Ttemplate 8text replacement 8

WWebSphere Application Server 3

WebSphere StudioV4.03 77V5.0 77

WebSphere Studio Application Developer vii, 77Integration Edition vii, 77V5.0.1 vii

WebSphere Studio Enterprise Developer viiWebSphere Studio Site Developer vii, 77widgets 11, 53, 70, 75WSAD

See WebSphere Studio Application DeveloperWSSD

See WebSphere Studio Site Developer

84 Creating and Modifying HATS Projects

Page 97: Modifying HATS output Customizing HTML output
Page 98: Modifying HATS output Customizing HTML output

®

INTERNATIONAL TECHNICALSUPPORTORGANIZATION

BUILDING TECHNICALINFORMATION BASED ONPRACTICAL EXPERIENCE

IBM Redbooks are developed by the IBM International Technical Support Organization. Experts from IBM, Customers and Partners from around the world create timely technical information based on realistic scenarios. Specific recommendations are provided to help you implement IT solutions more effectively in your environment.

For more information:ibm.com/redbooks

Redpaper

Creating and ModifyingHATS Projects

Modifying HATS output

Customizing HTML output

Personalizing application appearance

This Redpaper will help you create and modify Host Access Transformation Server (HATS) projects. It gives a general overview of the process involved in creating and modifying HATS applications, as well as some examples of some common customizations.

The HATS Studio plug-in works with:

� WebSphere Studio Site Developer� WebSphere Studio Application Developer� WebSphere Studio Application Developer - Integration

Edition

WebSphere Studio Enterprise Developer Versions 4.3 and 5 of these Studio products are supported. This document was created using WebSphere Studio Application Developer V5.0.1 and HATS V4 with CSD3.

This document is organized in the same order in which you create and customize a HATS project. If you read through from beginning to end, you will get an understanding of the typical HATS development process. However, if you are already somewhat familiar with the HATS project creation and customization process, you may simply use the various sections as a reference.

Back cover