ibm host access transformation servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · ibm...

73
IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250) By: Vijay V. Karthik Level: Introductory May 2012

Upload: others

Post on 06-Mar-2021

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

IBM Host Access Transformation Services

Introduction to IBM Rational HATS For IBM i (5250)

By: Vijay V. Karthik

Level: Introductory

May 2012

Page 2: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 2 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Lab instructions

This lab teaches you how to use IBM Rational HATS to create a Web application capable of transforming your 5250 applications. You will learn how to create a HATS project, bypass unnecessary screens with macros, customize multiple screens, and apply transformations with various Dojo widgets.

Please report any issues or problems with this lab to Cloud Tsai ([email protected]).

Learning objectives

♦ Use the HATS Toolkit to create a HATS Web project

♦ Customize a HATS template

♦ Record macros

♦ Transform host screens

Total time: 4 hours

Skill level

Introductory

Audience

Programmer

Requirements

♦ IBM Rational Application Developer 8.0 (or above)

♦ IBM Rational Host Access Transformation Services (HATS) 8.0 (or above)

♦ Internet connection

Prerequisites

♦ Basic IDE skills

♦ Basic understanding of terminal applications

♦ Basic HTML knowledge

Conventions used in this lab

♦ Bold font for user interface controls ♦ Mono-spaced font for user input and code blocks

Page 3: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 3 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

♦ Italic font for variable names and glossary terms

Page 4: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 4 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Creating a HATS project

1. Click Start > All Programs > IBM Software Development Platform > IBM Rational HATS V8.0 > HATS Toolkit to start the HATS toolkit.

2. When prompted for a workspace directory, type c:\myworkspaces\myhatslabs and click OK. 3. Once the Host Access Transformation Services perspective loads, click the Create HATS Project

button on the HATS toolbar.

4. In the Name field, type myhatsdojo5250 5. Select the Web deployment option. 6. In the Target Server field, WebSphere Application Server v8.0 or WebSphere Application

Server v8.0 stub. If this server is not available, select v6.1 or v7.0. 7. In the Enterprise Application project field, type myhatsdojo5250EAR. 8. Check Use Dojo technology checkbox. 9. Click Next.

Page 5: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 5 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

The Connection Settings panel enables you to setup the connection to your 3270 or 5250 system.

Note: Before proceeding, please check with your lab instructor (if applicable) for updated connection settings. Please refer to the following link to get more information: http://hilive.demos.ibm.com/atdemo/atdemo_help.html

10. In the Host name field, type iseriesd.demos.ibm.com (unless your instructor provides an alternate host to connect to).

11. In the Type drop-down, select 5250. 12. Accept the default values for the Code page, Screen size, and type 992 for Port field.

13. Click Next.

You will see the Project Theme panel. A theme controls the basic appearance and behavior characteristics for the application. For example, you can select the Classic terminal emulator theme to enable emulator-like features, such as automatic field advance, in your application by default.

14. Select the Standard theme option. 15. Click Next.

You will see the Dojo Project Setup panel. The default Dojo version is 1.5. You can click the Change these setup options… button to change the Dojo version, get Dojo from another project or via CDN. We use the default setting for Dojo in this tutorial.

16. Click Next.

You will see the Default Template panel. A template controls the basic layout and style (such as color and font) of the application.

Page 6: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 6 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

17. From the list of templates, select Research.jsp.

18. Click Finish.

After a few minutes, the new project will appear in the HATS Projects view and the Project Settings editor for the project will open.

Note: At this point, and in later steps, you may get different HATS Tips on what to do next. You can disable them if you don’t want to see them.

Caution: There is a known issue that sometimes causes WebSphere Application Server not to start. Because you will use this server later in the tutorial to test your application, please take the opportunity now to fix this problem on your system by following the steps below.

19. Open the Servers view tab at the bottom of the workbench window, select WebSphere Application Server v8.0 (or equivalent), right-click and select Open.

Page 7: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 7 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

20. In the Server section, check the Terminate server on workbench shutdown checkbox. Expand the Publishing twistie, and select Never publish automatically. Click File > Save to save the server configuration.

21. Close the server configuration editor window. 22. Click the X on the settings tab to close this editor for now. You will review the settings in this editor

later in the lab.

In the HATS project view, notice your project including all of its folders. You will be looking into these folders as you go through this tutorial.

Testing the project

Page 8: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 8 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

After creating the HATS project, but before doing a run on server or launching the HATS terminal, do the following:

23. Expand the project and Connections in the project view, and double-click the main connection.

24. Switch to the security tab. Check Enable SSL. 25. Choose Import PKCS12 keystore into project, browse to where you save the .p12 file and import

it. Note: The hatsdemo.p12 file can be downloaded from http://iseriesd.demos.ibm.com/ 26. Enter the “hats4all” into the Password field, click the Verify button to check whether the password

is correct.

27. Save and close the connection editor. 28. In the HATS Projects view right-click on your project folder and select Debug on Server.

Page 9: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 9 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

29. Click Yes when prompted to show the display terminal. The display terminal window appears whenever a connection is established to your system. It allows you to see the actual green screens HATS is transforming.

30. Select the Choose an existing server option. 31. Select WebSphere Application Server v8.0 from the server list. 32. Click Finish.

It will take a few minutes for the server to start. In the Web Browser view, you will see your HATS project running live with your host system. This is the HATS default transformation for your host system. As you go through this tutorial, you will learn how to change some of the project settings that affect the default transformation as well as create custom transformations for several screens.

33. To maximize the Web Browser, double-click on the Web Browser tab. Restore it by double-clicking it again.

Page 10: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 10 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

34. Click one of the links on the menu bar of the template. Click the back button to get back to your HATS application. Later you will learn how to modify the template.

35. Notice the following:

• At the bottom of the host screen the five buttons starting with the Reset button. This is the application keypad.

• At the bottom of the host screen there are no buttons for host keys visible. This is because the host keypad is not displayed by default (with the Standard theme).

• The Operator Instruction Area (OIA). Later you will learn how to change these global project settings.

Also notice the host display terminal that shows the actual host screen that HATS is transforming. The end user would never see this screen. It is displayed because you requested it, in an earlier step above, and it can be used to help you debug your HATS application.

Page 11: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 11 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Working with the template and stylesheets

36. Switch to the HATS Projects view. 37. Expand the Web Content > Templates folder. 38. Double-click the template you selected as your default (Research.jsp) to open it.

Page 12: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 12 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

This will open the template in the Page Designer editor. Notice at the bottom of the editor view the Design, Source, and Preview tabs. The Design view is a WYSIWYG editor, the Source view enables you to modify the JSP source of your template, and the Preview view shows a preview of your template. You can make your changes in either the Design or Source views.

39. In the Design view, change the company name by clicking on the text, My Company, and typing whatever company name you wish. This example uses JK Enterprises.

40. When you have finished making changes to your template, close the editor view by clicking the X on the JSP tab. Click Yes when asked if you want to save your changes.

Changing project settings

41. In the HATS Projects view, double-click Project Settings to open the project settings editor for your project.

The Project Settings editor enables you to modify project-level settings. For example, you can select a different template or theme, modify the default rendering rules, show the host keypad, and more.

42. Click the Rendering tab.

Page 13: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 13 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

The Rendering tab allows you to modify default rendering rules, create global rules, modify project-level component and widget settings, and alter the host and application keypads.

43. In the left panel, expand the list of Components.

These are the components that HATS can recognize on a host screen and the default rules for recognizing them. For example, notice the default rules for how HATS will recognize an area of the screen to represent a Selection list. HATS also provides components to detect menu options as well as subfiles.

Page 14: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 14 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

When you are done looking at the various components, expand the list of Widgets (Dojo) that can be used to render a graphical view of a host component. Notice the default settings for the Validation text box (Dojo) widget. You will use this widget later in this tutorial.

Page 15: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 15 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

44. When you are finished looking at the various Widgets, click the Application Keypad node.

Earlier in this tutorial you saw the application keypad. Here you can change what keys to display and whether to display keys as buttons or links.

45. Uncheck Turn Keyboard On/Off so that this key will not appear on the application keypad.

46. Click the Host Keypad section. Notice that by default the host keypad is not displayed. Here is where you can tell HATS to display the host keypad and what keys to include. For this tutorial, use the default to not show the host keypad.

47. Click Operator Information Area.

This area is used to configure the Operator Information Area, or OIA, that is typically displayed below the transformed host screen. In this lab we will leave it on.

Page 16: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 16 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

48. Close the Project Settings View by clicking on the X and click Yes to save your changes when prompted.

Testing template and project settings changes

49. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad.

Warning: sometimes WebSphere Application Server will attempt to republish your application and fail. If this happens, you will see a 500 error in the Web browser. To correct this problem, open the Servers view at the bottom of the workbench view, select your WebSphere Application Server, right-click and select Restart > Debug.

50. If you see a disconnect page, click Restart.

Notice that the Turn Keyboard On/Off key is no longer displayed on the application keypad and that the background is now white.

Page 17: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 17 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Notice that the company name has been changed to JK Enterprises now.

Screen Customizations

This section will teach you how to customize a host screen using HATS. A screen customization is designed to perform a set of actions when a host screen is recognized. It includes a set of criteria for matching host screens and the actions to take when the host screen matches these criteria. Typically a screen customization has a single Apply action. An Apply action tells HATS to use a JSP/HTML page to transform the screen. In this section you will learn how to create screen customizations for multiple screens that display transformations. This transformation pages will have various Dojo widgets that enrich the web application.

Creating a screen capture

1. In the HATS Projects view, select your project, right-click and select Open Host Terminal > Main.

The Host Terminal will open and you will see the Sign On screen.

2. Click the Create Screen Capture button on the toolbar.

Page 18: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 18 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

3. In the Name field, type signon and click Finish.

Recording a macro

A HATS macro is a script that drives screen interactions. Macros can be played either by clicking a button or automatically when a screen from the host is recognized. Macros can also be called from a Web service. In this case you will record a macro that will sign on the user with a generic user name. Of course, if the application required that a user sign on with a unique user name, you would not use this type of macro. For this tutorial you are using a generic user profile that has been set up to allow read only access to a subset of the applications and transactions on the host.

Caution: This tutorial assumes the Display Program Messages screen appears after the Sign On screen and before the Main Menu screen. In order to make sure this happens you must start a separate telnet session using the same user name and password. Follow the instructions below to do this:

1. Switch to the Web Browser

Note: Before proceeding, please ask your lab instructor (if applicable) for the user name and password to use or get the current user name and password for the IBM i demo system from: http://rational.demos.ibm.com/atdemo/atdemo_uid_pw.pdf

2. Type ATDEMO on User field and press the TAB key. 3. Type DEMO4YOU on Password field and press the ENTER key.

Page 19: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 19 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

You should now be at the Main Menu or a Display Program Messages screen. If you are at a Display Program Messages Screen, press the ENTER key.

4. Switch back to the HATS Host Terminal window. 5. To start recording the macro, click the Record Macro button on the toolbar.

6. In the Name field, type signon. 7. Click Finish.

Page 20: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 20 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

For the first screen in a macro, HATS asks you to define its screen recognition.

8. In the Screen Name field, type signon. 9. Select the Within a rectangular region option (this tells HATS to look for the selected text within

the roped off area.) 10. Click Finish.

The Host Terminal is now in record mode. This means that every keystroke you make (in the terminal area) is recorded in the macro.

11. In the User field, type ATDEMO (your cursor should already be positioned in this field). 12. Press the TAB key to advance to the next field. 13. In the Password field, type DEMO4YOU. 14. Press the ENTER key.

Page 21: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 21 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

15. On the Display Program Messages screen, click the Define Screen Recognition Criteria button on the toolbar.

You should now see the Select Screen Recognition Criteria panel.

16. In the Screen Name field, type displayMessages. 17. With your mouse, rope off (select) just the title, Display Program Messages, at the top of the

screen. 18. Select the At a specified position option. 19. Click Finish.

20. On the Display Program Messages screen, press the ENTER key. 21. On the Main Menu screen click Define Screen Recognition Criteria.

You should now see the Select Screen Recognition Criteria panel.

Page 22: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 22 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

22. In the Screen Name field, type mainmenu. 23. With your mouse draw a box around the MAIN text at the top of the screen. 24. Select the At a specified position option and click Finish.

25. On the Main Menu screen from the toolbar click Stop Macro

26. On the Define the exit screen of the macro panel click Finish.

Next you will edit the macro to handle the case when the Display Programs Messages screen does not appear.

27. In the Macro Navigator panel, right-click on the Next Screens folder under the Sign On screen node and select Edit.

Page 23: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 23 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

28. Under Available Screen, select the entry for the mainmenu screen and click the button to move it under Next Screens.

29. Click OK.

Notice in the Macro Navigator that after the Sign On screen the macro will look for either the displayMessages screen or the mainmenu screen. This will allow your macro to work regardless of whether or not the Display Program Messages screen appears after the Sign On screen.

30. Click the Save Macro button on the toolbar.

31. Navigate the terminal session back to the Sign On screen in the terminal window. Do this by typing 90 in the Selection or command field on the host screen and pressing ENTER.

32. Once the session is on the Sign On screen, from the Host Terminal toolbar click the Play Macro button to test the macro.

The macro should navigate the session to the Main Menu.

33. Click the Disconnect button on the toolbar to disconnect the terminal session.

Page 24: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 24 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

34. Close the Host Terminal window.

Creating a screen customization for the Sign On screen

You previously created a screen capture for the Sign On screen. You also created a macro to automate sign on to the system. Next you will create a screen customization for this screen. A screen customization consists of how to recognize the screen and then what actions to perform once the screen is recognized.

Notice in the Screen Captures folder there is a screen capture for the Sign On screen.

1. Double-click the signon screen capture file to open it.

Page 25: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 25 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

2. Click the Preview tab at the bottom of the editor window.

You will see how HATS will transform the screen. At this point you will see the default transformation for the screen.

3. Click the Host Screen tab at the bottom to switch back to the screen capture.

Page 26: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 26 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

4. Click the New Screen Customization button on the editor toolbar.

5. Accept the supplied screen customization name of signon and click Next

6. The first task in creating a screen customization is to tell HATS how to recognize the screen. On the Select Screen Recognition Criteria panel, accept the default recognition criteria and click Next

7. After you tell HATS how to recognize the screen, you have to tell HATS what to do once the screen is recognized. On the Select Actions panel you will see that you can apply a transformation, which means to display the screen to the end user in a transformed way. Also, you can tell HATS to play a

Page 27: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 27 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

macro or perform advanced actions when this screen is recognized. In this case, check the Apply a transformation checkbox and click Finish.

HATS will create a new screen customization and a blank transformation. You could have selected a different transformation pattern on the previous wizard panel, such as the pattern to prefill the new transformation with all fields on the screen. This approach would allow you to start with a basic rendering of the screen and then move fields around and/or remove fields you don’t want the user to see.

Creating a transformation for the Sign On screen

After a few minutes, HATS will open the new transformation in the Page Designer tool and show the Insert Host Component wizard. This wizard is used to add parts of the screen to the Web page. You will learn how to use this wizard later in the tutorial.

8. For now, click Cancel.

Page 28: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 28 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Notice in the HATS Projects view that there are now entries for the Sign On screen in both the Screen Customization and the Web Content > Transformations folders.

Also notice the transformation for the Sign On screen, signon.jsp, is displayed in the editor view. You will create a transformed look for the Sign On screen.

9. From the Palette view, expand HTML Tags drawer, and select the Text Cell tool. Note: if the Palette view is not open, select Window > Show View > Palette.

10. Move your mouse to the gray area of the transformation, click the left mouse button. In the new text area, type JK Products.

11. In Properties view at the bottom of the workbench window, click the Align Horizontal Center button to center the text.

Page 29: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 29 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

12. Select the text again in the design area. 13. Click the Increase Font Size button to increase the size of the text.

14. Next you will add a button that will play the signon macro. First, click anywhere on the free layout area to take focus away from the text cell you just added. From the toolbar select HATS Tools > Insert Macro Key.

15. On the Insert Macro panel, check the signon macro and click OK.

Page 30: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 30 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

16. Draw and drop the button below the text area (create an area that is about the same width as the text area you created previously).

17. Select the new table cell by clicking in it. 18. Click td tab in the Properties view. 19. Click the Align Horizontal Center button to center the button. 20. Click the signon button to select it. 21. In the input tab of the Properties view, type SignOn in the Label field. This will give the button a

friendlier caption.

Page 31: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 31 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

22. You have now finished with the transformation for the Sign On screen. Close the editor by clicking the X and click Yes to save changes.

23. From the screen capture view click on the Preview tab.

Page 32: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 32 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Here you will see a preview of how HATS will transform this screen using the transformation you just created.

24. Close the screen capture view by clicking on the X.

Testing the transformation

25. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad.

Note: If you see the disconnected screen, click Restart.

26. Notice your transformed Sign On screen. Restore the host display terminal window if you want to see the macro play through the host screens. Click on the SignOn button to play the signon macro.

The signon macro plays, signs on using the supplied userid and password, recognizes whether or not the Display Program Messages is displayed and navigates to the Main Menu screen.

Page 33: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 33 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Customizing the Main Menu screen

In this exercise you will learn how to create a screen customization for the Main Menu screen. Although this tutorial shows creating a screen capture before creating a screen customization, there is a button on the Host Terminal toolbar to create a screen customization directly from the current host screen displayed on the terminal.

1. In the HATS Projects view, select your project, right- click and select Open Terminal > Main.

2. On the Sign On screen, fill in the user name and password fields (with ATDEMO/DEMO4YOU) and press the ENTER key.

3. On the Display Program Messages screen, press the ENTER key.

You should now be at the Main Menu screen.

4. To create a screen capture, click the Create Screen Capture icon

5. In the Capture a Screen panel, type mainMenu in the Name field, and click Finish.

Page 34: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 34 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

6. Disconnect and close the Host Terminal window.

Creating a screen customization for the Main Menu screen

You have already saved a screen capture for the Main Menu screen. Next you will create a screen customization for this screen.

7. Switch back to the workbench window. 8. Notice that in the Screen Captures folder in the HATS Projects view you now have a screen capture

for the mainMenu screen. Double-click the mainMenu screen capture to open its editor.

9. Click the New Screen Customization button on the editor toolbar.

Page 35: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 35 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

10. Accept the supplied screen customization name of mainMenu and click Next

11. On the Select Screen Recognition Criteria panel, with your cursor draw a box around MAIN at the top left corner of the screen. Check At a specified position, and click Next.

12. Check the Apply a transformation checkbox and click Finish.

Creating a transformation for the Main Menu screen

13. Once the editor for the Main Menu transformation loads, click the Cancel button to close the Insert Host Component wizard. You will learn how to use this wizard later.

14. Now you will create a transformed look for the mainMenu screen. Start by putting some instructional text on the screen. From the Palette view, select Text Cell and drag and drop it onto the Free Layout Tables area in the Design view of your page.

Page 36: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 36 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

15. After you have dropped the text cell onto the JSP, position the cell on the JSP using the Properties tab and the values shown below for Top, Left, Width, and Height. This positions the text cell in an exact position within the free layout table.

16. Type the following text: Select application and click Enter into the text cell. 17. Select the text with your mouse. 18. Using the Properties tab, align the text and/or increase its size.

Page 37: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 37 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Next you will add a Filtering select and a host key button. This example shows inserting these HATS components into a table. Inserting them into a table is not required but helps with aligning the components with each other. Start by selecting Table from HTML Tags drawer of the Palette and dragging it to the free layout area.

19. Set the table to be 1 row with 2 columns and click OK.

Page 38: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 38 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Select the cell containing the table and set its location as shown below.

20. Then select the Text tab and center the table within the cell.

21. Now you will insert a HATS host component into the first cell of the table. Using your left mouse button, position the cursor inside the first cell.

22. From the toolbar select HATS Tools > Insert Host Component. Another method of inserting a host component is to drag and drop it from the HATS Components listed on the Palette.

Page 39: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 39 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

In the Select Screen Region panel, you can select an area of the host screen to transform.

23. If not already checked, check the Highlight fields Input check box. After you do this, you will notice that the ‘Selection or command’ field at the bottom of the screen is an input field. This is where the end user can enter an application name or command. In this case, you will create a list of applications from which your end users can select.

24. Rope off the first row of the command input field. Make sure you select an area that is long enough to contain the longest string we use in this lab, at least 5 characters.

25. Click Next.

You should see the Rendering Options panel. This is where you tell HATS what host component to use for this area of the screen and the widget into which it will be transformed. Notice when you click on each component that different widget options are displayed.

Page 40: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 40 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

26. Select the Input field component. Notice that by default the component includes the caption for the input field, which in this case is ===>. In this example, you do not want to include the caption. To change this, click the Component Settings button.

27. Uncheck Use project defaults, then uncheck Extract field caption, then click OK.

28. From the Widgets list, select the Filtering select (Dojo) widget. 29. Click the Widget Settings button.

This panel allows you to change the settings for this widget.

30. Uncheck Use project defaults to override the project level defaults (which are defined in the Project Settings editor).

31. Check the Fill from string checkbox. 32. In the List items box type: Celdial Communications=go celdial;Parts Order Entry=call ordentr;WSG Boats=boats;JK Toys Product Inventory=strqm;Sign Off=90

HATS will use these values to populate the Filtering select widget. It will use the text before the equal sign as the text to show in the Filtering select widget and will use the text after the equal sign as the text

Page 41: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 41 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

to insert into the command field. For example, selecting “JK Toys Product Inventory” from the Filtering select widget will cause “strqm” to be inserted into the command field.

33. Click OK

34. Back on the Rendering Options panel under Widget Preview you can now see what your widget will look like. Click Finish

Next, you will add a button that when clicked will pass the Enter key back to the host.

35. Position the cursor in the second cell of your table. 36. Select HATS Tools > Insert Host Keypad > Individual Key on the main menu bar.

37. On the Insert Host Key panel check the Enter key.

38. Click OK. 39. If you would like to change the label on the Enter button, you can do so on the Properties > Input

tab. 40. You have now finished with the transformation for the Main Menu screen. Close the editor by clicking

the X and click Yes to save changes.

Page 42: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 42 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

41. From the screen capture view click the Preview tab.

Here you see a preview of how HATS will transform this screen using the transformation you just created.

42. Close the screen capture view by clicking on the X.

Testing the transformation

43. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad.

Page 43: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 43 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Notice the transformed Main Menu screen. The Filtering select widget is editable, so users can type in values at runtime. As users type into the input text box, partially matched values from the list are displayed in a drop-down list.

User-supplied text that does not match a value in the list is flagged as an error. Filtering select widget does not allow users to submit values not already in the list.

44. Select JK Toys Product Inventory and click the Enter button to execute the strqm command.

The strqm command is executed. You should see the DB2 Query Manager screen.

Passing unnecessary host screens by macro

In this section, you will learn how to create a macro to pass unnecessary host screens for users.

Recording the macro

Page 44: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 44 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

1. In the HATS Projects view, right-click on your project and select Open Host Terminal > main 2. Click the drop-down arrow next to the Play Macro button on the toolbar and select signon from the

menu.

This will cause the signon macro to play (which will navigate you to the Main Menu).

3. Type strqm in the Command field and press the ENTER key. 4. Click the Record Macro button on the Host Terminal toolbar.

5. In the Name field, type goToJKInventory.

6. Click Finish.

You will see the Define Screen Recognition Criteria wizard.

7. Accept the default screen name (Screen1) and screen recognition criteria and click Finish.

The Host Terminal is now recording every key stroke and command and storing them in your macro.

8. Type 3 in the Selection field and press the ENTER key. 9. Type WHIDEMO in the Library field and press the ENTER key. 10. Find the JK_INV table in the list. In the first input field (under the Opt) column in the same row as

JK_INV, type 5 and press ENTER.

11. On the Find Data in Query Manager Table screen press the ENTER key. This will cause a table of records to be displayed.

Page 45: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 45 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

You should now be at the Display Report screen.

12. Click the Create Screen Capture icon to create a screen capture.

13. On the Capture a Screen panel, accept the supplied screen customization name of DisplayReport in the Name field, and click Finish.

14. Click the Stop Macro button on the toolbar.

15. Accept the default screen name (Screen5) and screen recognition criteria and click Finish. 16. Click the Save Macro button on the toolbar.

Page 46: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 46 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

17. Switch back to the workbench window. 18. Double-click the Screen1 screen capture in the goToJKInventory folder to open its editor.

19. Click the New Screen Customization button on the editor toolbar.

20. Accept the supplied screen customization name of db2QueryManager and click Next.

Page 47: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 47 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

21. On the Select Screen Recognition Criteria panel, with your cursor draw a box around DB2 for i5/OS Query Manager at the top center of the screen. Check At a specified position, and click Next.

22. Uncheck the Apply a transformation checkbox and check the Play a macro checkbox. Make sure the goToJKInventory macro is selected and click Finish.

23. Switch to the Web Browser view to display your HATS application. Click the Refresh button.

After a few moments, HATS will show the Display Report screen.

Page 48: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 48 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

In addition, we need to record another macro for leaving JK Toys Product Inventory, and back to main Main Menu screen.

24. Switch to the HATS Host Terminal window. 25. Click the Record Macro button on the Host Terminal toolbar.

26. In the Name field, type exitJKInventory.

27. Click Finish.

You will see the Define Screen Recognition Criteria wizard.

28. With your mouse, rope off (select) just the title, Display Report, at the top of the screen and accept the default screen name (Screen1), and click Finish.

Page 49: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 49 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

The Host Terminal is now recording every key stroke and command and storing them in your macro.

29. Press the F3 key three times. 30. You should now be at the Main Menu screen. Click the Stop Macro button on the toolbar.

31. Accept the default screen name (Screen4) and screen recognition criteria and click Finish. 32. Click the Save Macro button on the toolbar.

33. Type 90 on the command field and press the Enter key to sign off. 34. Close the Host Terminal.

This exit macro will be used via Macro Key in the next section.

Page 50: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 50 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Customizing the Display Report screens

You have previously learned how to customize screen using Filtering select widget. You will now learn how to customize screens using another Dojo-based Enhanced grid widget.

1. In the HATS Projects view, double-click DisplayReport to show this screen in Host Screen Editor.

2. Click the drop-down arrow next to the Create HATS Screen Customization button on the toolbar and select New Screen Customization… from the menu.

3. Accept the supplied screen customization name of DisplayReport and click Next.

Page 51: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 51 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

4. On the Select Screen Recognition Criteria panel, with your cursor draw a box around Display Report at the top center of the screen. Check At a specified position, and click Next.

5. Check the Apply a transformation checkbox and click Finish.

Page 52: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 52 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Creating a transformation for the Display Report screen

6. Once the editor for the Display Report transformation loads, Insert Host Component wizard will be launched automatically. Now you will create a transformed look for the Display Report screen. Using your mouse, rope off the data in the wizard as shown below:

Page 53: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 53 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

7. Click Next in the wizard to select a host component for this region. 8. You should see the Rendering Options panel. This is where you tell HATS what host component to

use for this area of the screen and the widget into which it will be transformed. Notice when you click on each component that different widget options are displayed.

9. Select the Table (visual) component. Notice that by default the component doesn’t extract the column header text from row above table, and we don’t want to include the first row as part of table in this example. To change this, click the Component Settings button.

10. Uncheck Use project defaults, enter 1 into Rows to exclude, check Extract column header text from row above table, and then click OK.

Page 54: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 54 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

11. From the Widgets list, select the Enhanced grid (Dojo) widget. 12. Under Widget Preview you can now see what your widget will look like. Click Finish. 13. The finish of Insert Host Component wizard will then bring you back to the editor for the

DisplayReport.jsp transformation. The cursor will have a plus sign appened under the design view of the editor. Move the plus sign to place the component at a sutiable position as shown below.

14. Switch back to the Web Browser view to display your HATS application. Click the Refresh button, and you should see Display Report screen are now rendering with Enhanced grid as shown below.

Page 55: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 55 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

You now have customized the Display Report screen that will render the table-like host component as Enhanced grid widget. With Dojo-based Enhanced grid widget, you can easily utilize a set of features that enhance the capcabilities of normal HTML table.

Performing drag and drop for the Display Report screen

The default rendering of Enhanced grid widget includes a row selector column as the first column in the table. You can click cells in the column to select rows to drag to another location in the table. To select multiple consecutive rows, click the first row and holding down the mouse, swipe to the last row. To select multiple nonconsectutive rows, press CTRL while clicking each row. To drag, click the selected row, or rows, and drag.

15. Move the cursor to the very left column, left click and then move the cursor down until three rows are selected.

Page 56: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 56 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

16. Move the cursor to the cells right to the checkboxes until the cursor appears as a cross sign, indicating that you can drag these three selected rows to somewhere in the table.

17. Now you can move these three selected rows via left-clicking, and an indication bar will appear to tell you which position these three rows will be moved to.

Page 57: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 57 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

18. Once you determine the new position for these selected rows, let go the left-clciking to complete the drag and drop.

Performing sorting for the Display Report screen

Another function of the default rendering of the Enhanced grid widget includes a sort function. You can sort rows by column contents in ascending or descending order and remove a sort. You can also perform a nested sort, which is sorting a second column nested within a sorted first column.

19. Move the cursor to the PRODUCT_CATEGORY header, and you should see an up arrow icon would appear on the right side of the cell. Move the cursor to the arrow icon.

Page 58: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 58 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

20. Click the up arrow icon would sort the column contents in ascending order.

21. Move the cursor to the PART_NAME header, and you should see two up arrow icons would appear on the right side of the cell. Click the icon once to perform nested sort on the column contents in ascending order, then click the icon one more time to perform nested sort on the column contents in descending order.

Page 59: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 59 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

22. Click the x sign to give up the nested sorting.

Customizing Enhanced grid widget

So far, you have learned how to render a table-like host component as Dojo-based Enhanced grid widget, and you also experienced some advanced features provided by Enhanced grid. In the following section, you will learn how to customize an Enhanced grid widget without modifying any server-side Java codes.

23. Switch back to the Source view of editor for the Display Report transformation. Move the cursor to the place where <HATS:Component> tag for Enhanced grid widget was inserted. Right-click and select “HATS Tools” > ”Transform for Dojo Editing”. The Transform for Dojo Editing wizard transforms the <HATS:Component> tag to a <HATS:Render> tag in which you can directly edit the client-side javascript codes and customize the behaviour of Enhanced grid widget.

Page 60: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 60 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

24. Once the Transform for Dojo Editing wizard completes the tag transformation, you should see a bunch of javascripts codes are shown within <HATS:Render> tag, and these javascripts codes can be categorized into three sections: JSON data source, rendered Enhanced grid, and data binding. You can find more details about each section in the chapter 4 of Web Application Programmer’s Guide. And here, you will learn how to customize the Enhanced grid so only single row selection is allowed.

Page 61: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 61 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

25. Locate and change the grid variable as shown below:

26. Switch back to the Web Browser view to reload the Display Report screen. You should see that multi-selection checkboxes are now replaced by single-selection radio buttons to each row in the table.

Page 62: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 62 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Inserting Macro Key for the Display Report transformation

You had previously recorded a macro to exit Display Report screen. You’ll learn how to insert a Macro Key into the Display Report transformation so users can exit this screen and go back to Main Menu.

27. Switch back to the Design view of editor for the Display Report transformation. Right-click and select HATS Tools > Insert Macro Key.

Page 63: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 63 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

28. In the Insert Macro dialogue, check exitJKInventory, and then press OK.

Page 64: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 64 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

29. In the design view of editor for the Display Report transformation, move the cursor to the place below the Enhanced grid widget.

Page 65: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 65 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

30. Left click to place the Macro Key.

31. Save the change and switch back to the Web Browser view to reload the Display Report screen. You should see that a button would appear below the table and clicking on the button would lead you back to main menu.

Page 66: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 66 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Enrich Display Report screen with Dojo validation text box widget

On the Display Report page, you can use the Control field to select and control paging, rolling, and window functions. You can press F1 to get the detail description of this field.

Page 67: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 67 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

On the Control - Help page, you can see a format list that is applied to the Control field. For example, the format for this field is a single character function code, an optional directional code (+ or -), and an optional integer to represent positioning.

By using a specialized pattern matching language known as regular expressions, we can specify a pattern of characters to check the value against. Dojo Validation text box widget contains a special property for validating against regular expressions. We can use Dojo Validation text box to validate for the Control field. In this section, we will demonstrate how to use Dojo validation text box to provide basic client-side validations.

1. From the toolbar select HATS Tools > Insert Host Component. Another method of inserting a host component is to drag and drop it from the HATS Components listed on the Palette.

On the Select Screen Region panel, you can select an area of the host screen to transform.

2. If not already checked, check the Input checkbox in Highlight fields options. 3. Rope off the control input field.

Page 68: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 68 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

4. Click Next.

You should see the Rendering Options panel. This is where you tell HATS what host component to use for this area of the screen and the widget into which it will be transformed. Notice when you click on each component that different widget options are displayed.

5. Select the Input field component. 6. From the Widgets list, select the Validation text box (Dojo) widget. 7. Click the Widget Settings button.

Page 69: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 69 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

This panel allows you to change the settings for this widget.

8. Uncheck Use project defaults to override the project level defaults (which are defined in the Project Settings editor).

9. In this case, we need use the regular expression to validate following formats of the control field: Relative Paging ( P+/-n ) Absolute Paging ( Pn ) Relative Rolling ( +/-n ) Absolute Rolling ( n ) Relative Windowing ( W+/-n ) Absolute Windowing ( Wn ) Displaying Bottom of File ( B or *BOT ) Displaying Top of File ( T or *TOP )

10. In the Regular expression: field, type (P|p|W|w)(\+|-)?\d{1,5}|(\+|-)?\d{1,5}|B|b|\*BOT|T|t|\*TOP

11. In the Prompt message: field, type Formats: P+/-n , Pn, +/-n, n, W+/-n, Wn, B, *BOT, T or *TOP

12. Uncheck the Use default invalid message checkbox. 13. In the Invalid message: field, type

The value entered is not valid (P+/-n , Pn, +/-n, n, W+/-n, Wn, B, *BOT, T or *TOP)

HATS will use these values to populate the Dojo validation text box. It will popup a hint message when the text box got the focus, use the defined regular expression to validate the entered value, and popup a invalid message when the inputted value is not validated. Besides, if the Re-validate on submit check box is checked, HATS will block the form submission if the inputted value is not validated.

14. Click OK

Page 70: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 70 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

15. Back on the Rendering Options panel under Widget Preview you can now see what your widget will look like. Click Finish.

16. You have now finished with the transformation for the Display Report screen. Close the editor by clicking the X and click Yes to save changes.

17. You have now finished with the transformation for the Display Report screen. Close the editor by clicking the X and click Yes to save changes.

18. Switch back to the Web Browser view, scroll down and click the Refresh button on the application keypad.

19. When the Control field getting focus, you can see the defined message shows in the browser.

Page 71: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 71 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

20. Iput A+3 in Control field. Because the input data is invalid, the defined invalid message shows in the browser.

21. Iput P+3 in Control field. Because the input data is valid, the defined prompt message shows in the browser.

Page 72: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 72 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

22. Press Enter. Now we can see the 4th page of report on the browser.

23. Now we click the exitJKInventory button on the browser to go back to the main menu.

24. Select 90=Sign Off to log off the system.

Page 73: IBM Host Access Transformation Servicespublic.dhe.ibm.com/.../emi/hats_80_web_5250_lab.pdf · IBM Host Access Transformation Services Introduction to IBM Rational HATS For IBM i (5250)

Creating Web Services using IBM Rational HATS For IBM i (5250), Page 73 of 73

Copyright © 2012, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Note: There are some considerations about HATS web transformation. Please refer to: https://www.ibm.com/support/docview.wss?rs=3441&uid=swg27019102

Conclusion

This concludes the tutorial on creating a HATS Web transformation application. Although only a small set of capabilities were demonstrated, it should be apparent that HATS is a very powerful tool. HATS allows for rapid modernization of green screen applications without any impact to your existing code. What’s more, the numerous useful Dojo widgets can enhance the user interface of your web application. You can create highly themeable, functional forms, layouts, and much more usings Dojo widgets.

Please report any errors in this tutorial to Cloud Tsai ([email protected])