enterprise modernization for ibm system z: transform 3270 … · 2008-10-17 · enterprise...

Enterprise Modernization for IBM System z:Transform 3270 green screens to Web UI usingRational Host Access Transformation Services forMultiplatformsExtend a host application to the Web using System z

Skill Level: Intermediate

Meshach M Baptiste ([email protected])IT SpecialistIBM Japan

21 Mar 2008

Updated 21 Oct 2008

Many companies today have the mandate to quickly expose their 3270 and 5250applications to the Web (including the intranet, extranet, or the Internet). This tutorialshows you how you can use IBM® Rational® Host Access Transformation Services(HATS) to get started. While you can achieve this in many product environments thatinclude IBM® Rational® studio, this tutorial focuses on IBM® Rational® Developer forSystem z™.This tutorial shows how IBM Rational Host Access Transformation Services forMultiplatforms can help you quickly improve the user interface of your existing Systemz applications, and achieve integration with other IT systems with minimal developmentcost. The result is an easy-to-use Web interface to the application, which reducestraining cost, simplifies the application, and makes it easy to understand for new users.

Section 1. Before you start

Learn what to expect from this tutorial, and how to get the most out of it.

Transform 3270 green screens to Web UI using Rational Host Access Transformation Services for Multiplatforms© Copyright IBM Corporation 1994, 2008. All rights reserved. of 48

mailto:[email protected]

http://www.ibm.com/legal/copytrade.shtml

About this series

Walk through this scenario and others online as part of the Enterprise ModernizationSandbox for System z.

About this tutorial

• Create an IBM® Rational® Host Access Transformation Services (HATS)Web client project, a sign-on macro, a screen customization,transformation, and a screen combination for an IBM® System z®application

• Learn to use HATS to build and test Web applications

Objectives

You will learn the following tasks:

• Create a basic HATS project

• Explore the zhatshost2web Project Settings

• Test the application using Debug on Server

• Use the host terminal to initiate creation of a screen customization

• Modify and test transformations

Prerequisites

• You should be familiar with one of the IBM® Rational® Software DeliveryPlatform products that HATS supports.

• You should have some knowledge of System z applications and WebUser Interfaces.

System requirements

This tutorial requires the Enterprise Modernization sandbox environment.

developerWorks® ibm.com/developerWorks

Transform 3270 green screens to Web UI using Rational Host Access Transformation Services for Multiplatforms of 48 © Copyright IBM Corporation 1994, 2008. All rights reserved.

http://www.ibm.com/developerworks/downloads/emsandbox/systemz/assets/?S_TACT=105AGX15&S_CMP=EMDOC




Section 2. Rational studio in HATS (Version 7 or later)

The term Rational studio used in this tutorial refers to any one of the followingRational-based studios (all products V7 or later) supported by IBM® Rational® HostAccess Transformation Services (HATS):

• IBM® Rational® Software Architect

• IBM® Rational® Application Developer

• IBM® WebSphere® Development Studio Client for System i®

• IBM® WebSphere® Development Studio Client Advanced Edition forSystem i®

• IBM® WebSphere® Developer for System z®

• IBM® Rational® Developer for System z®

Overview

Many companies today have the mandate to quickly expose their 3270 and 5250applications to the Web. This includes the intranet, extranet, or the Internet. Thistutorial will demonstrate how you can use HATS to get started.

You will:

• Build and test a basic HATS application

• Customize a host screen

Perspectives

Rational studio uses "perspectives" to group editors and views that pertain toparticular development tasks.

For example, the IBM® z/OS® perspective contains views such as z/OS Projects,z/OS File System Mapping, Remote System Details, and so on. The HATSperspective contains views such as HATS Projects, Navigator, Console, Servers,

ibm.com/developerWorks developerWorks®



and so on.

The name of the active perspective appears on the left side of the title bar of theRational studio. In Figure 1, the name of the active perspective is Host AccessTransformation Services. If yours says anything else, you will need to open the HostAccess Transformation Services perspective manually.

Figure 1. HATS Perspective

The HATS perspective

The following steps show you how to open the Host Access Transformation Servicesperspective.

1. To open the HATS Toolkit from the Windows Start menu click Start > AllPrograms > IBM Software Development Platform > IBM RationalHATS 7.1 > HATS Toolkit 7.1.

2. If the HATS perspective is not open, select Window > Open Perspective> Other > Host Access Transformation Services, and then click theOK button, as shown in Figure 2.

Figure 2. Open the HATS perspective




The views associated with the Host Access Transformation Services perspective willdisplay.

Prepare the test environment

By default, the Rational studio internal IBM® WebSphere® Application Server(Version 6.0 and later) are set to automatically publish every 5 seconds. As a result,sometimes the HATS application will load, but other times it will appear that there isa problem because the HATS application Java™Server Pages (JSP) file will not befully loaded in the Web browser.




Make the following changes to prevent this problem:

3. Open the Servers view at the bottom of the workbench window.

a. Select WebSphere Application Server v6.1

b. Right-click and select Open, as shown in Figure 3.

Figure 3. Open the server editor

4. In the Server section:

a. Select the SOAP (Designed to be more firewall compatible)radio button.

b. Select the Terminate server on workbench shutdown option, asshown in Figure 4.

Figure 4. Options for server settings




5. In the Automatic Publishing section, select the Never publishautomatically radio button, as shown in Figure 5.

Figure 5. Select Never publish automatically

6. Click File > Save to save the server configuration.

7. Close the server configuration editor window.




Section 3. Build and test a basic HATS application

You will now create your project.

Build a new project

Follow the steps below to build and test a basic HATS application.

1. From the Welcome to HATS page, click the blue launch the Create aProject wizard text link, as shown in Figure 6..Note: To re-open a closed Welcome to HATS page, select from themenu HATS > Open HATS Welcome Page.

Figure 6. Launch the wizard




2. In the Create a Project > HATS Project dialog, set the options, as shownin Figure 7:

a. Type zhatshost2web as the project Name

b. Choose the Web radio button

c. Target server should be WebSphere Application Server v6.1

d. In the Enterprise application project name field, enter the namezhatshost2web_EAR61

e. Click Next

Figure 7. The Create a Project wizard




3. In the Connection Settings dialog, type or select the following:

a. Host name: zserveros.dfw.ibm.com

b. Type: 3270E

c. Port: 23

d. Code page at 037 United States

e. Screen size at 24 x 80.

f. Click Next.

4. In the Project Theme dialog box, choose Standard for the Appearanceand behavior theme, and then click Next.

5. In the Default Template dialog:

a. Leave Template as Swirl.jsp.

b. Click Finish. The studio will now build the project.




6. When the studio finishes building the project, the HATS Projects view willbe open with the project folders on the left, and zhatshost2web Settingsopen in the HATS Application Editor.

7. Expand the folders and examine the files. All of the zhatshost2webresources will be located within these folders.

Project settings

The Project Settings tab allows you (as the HATS developer) to view and changemany settings. When you open Project Settings in the HATS Application Editor, thename of the project will appear in the title (in this case, zhatshost2web Settings).The tabs at the bottom provide access to various settings, as shown in Figure 8.

Figure 8. Project settings in the HATS Application Editor

Explore the different options and settings that are available for editing:

• Overview: Shows summary information for the project

• Connections: Edit connection properties here




• Template: Choose from all available Templates

• Rendering: Edit multiple default settings

• Events: Prioritize screen customization comparison order and editapplication events

• Other: Configure miscellaneous default settings for the project

• Source: The project settings are stored in XML format

Test the HATS application with Debug on Server

The Debug/Run on Server wizards allow you to define the server on which to testyour application. The Console view displays progress while the server is starting,and information while you interact with the application.

When the Web browser opens, you can:

• Follow template links

• Navigate in your host session

• Copy the URL into an external Web browser to test the Web application

Note: Starting in HATS Version 7, you should use Debug on Server if you want tosee changes made to your project as it is running on the server. You should useRun on Server if you want to simulate running your application on a productionserver.

1. Highlight the zhatshost2web project name in the HATS Projects view,and then, from the Welcome to HATS page, click the blue Debug onServer link, as shown in Figure 9.

Figure 9. Start to debug on server




2. The Display Terminal dialog will display, as shown in Figure 10. TheDisplay Terminal dialog allows you to see a host (green) screen in thebackground when the Web browser opens with the HATS application.Click Yes to proceed.

Figure 10. The Display Terminal dialog




3. The Define a New Server dialog is displayed, as shown in Figure 12.

a. Leave Choose an existing server selected.

b. Select WebSphere Application Server v6.1.

c. Click Set server as project default (do not ask again).

d. Click Finish.

Figure 11. Choose the type of server to create




=

4. The zhatshost2web application will be published to the internalWebSphere Application Server and run in debug mode. Additionalmessages will appear in the Console as the HATS project loads.

5. When the Web browser opens, as shown in Figure 12, double-click thetitle area to maximize the viewing area.

Figure 12. The HATS application in the internal Web browser




6. When the Web browser opened, a Display Terminal window also opened,as shown in Figure 13. The Display Terminal updates to show exactly thesame screens that you are navigating in the Web browser.

Figure 13. The Display Terminal




7. Go back to the Web browser.

Sign on to CICS

1. Back in the Web browser, on the WELCOME TO IBM screen enter CICSAand then press Enter.

2. On the Signon to CICS screen, sign on by entering the User ID ATDEMOand the Password DEMO4YOU, and then press Enter.

3. The next screen is blank except for the text at the bottom of the screen:"DFHCE3549 Sign-on is complete (Language ENU)", as shown in Figure14. At the top of the screen, enter the word MENU on the command line,and then press Enter.




Figure 14. Sign on to CICS

4. The MENU transaction is a sample application in which you can search(inquire), browse, add, and update account information, as shown inFigure 15.

Figure 15. Menu options




5. Enter BRWS into the ENTER TRANSACTION input field, and then pressEnter. A list of numbers, names, and amounts will appear on the FILEBROWSE screen.

Sign off from CICS

1. On the OPERATOR INSTRUCTIONS screen, press Esc.

2. On the blank screen, type CESF LOGOFF, and then press Enter.

3. Double-click the title bar of the internal Web browser to restore it to itsnormal size.

Test HATS application using an external Web browser

1. Copy the URL http://localhost:9080/zhatshost2web/entryfrom the internal Web browser in the studio to the address field of asupported external Web browser on the same machine, and then pressEnter.




Note: Make sure to use the correct port number for your configuration. You mayneed to change 9080 in this URL to match your configuration.

2. To test from a Web browser on another machine, make sure to replacelocalhost with the hostname or IP address of the studio machinewhere the HATS application is running. For example, if the studiomachine’s IP address is 192.168.101.202, then the URL to type in theaddress field of the Web browser on the other machine ishttp://192.168.101.202:9080/zhatshost2web/entry.

Stop the server?

If you will not be doing any additional testing using the WebSphere v6.1 testenvironment, then go ahead and stop the server.

To stop the WebSphere V6.1 test environment:

1. Select the Servers view from the lower pane.

2. Select WebSphere Application Server v6.1.

3. Click the red Stop the server button, as shown in Figure 16.

Figure 16. Stop the server

Section summary

In this section of the tutorial, you learned how to:

• Create a basic HATS project

• Explore the zhatshost2web Project Settings

• Test the application using Debug on Server




Section 4. Customize a host screen

Overview

This part of the tutorial will show you how to make some customizations to a hostscreen.

Prepare to customize

Open the host terminal

The host terminal is a connection to a live host in the HATS Toolkit. Using the hostterminal, you can capture screens, create screen customizations andtransformations, and record and edit macros. In addition, you can play previouslyrecorded or imported macros. The host terminal also allows you to preview yourscreen as a Web page.

1. Right-click the zhatshost2web project in the HATS Projects view, andthen select Open HATS Host Terminal > main, as shown in Figure 17.

Figure 17. Open the HATS host terminal

Navigate to the OPERATOR INSTRUCTIONS screen

2. On the WELCOME TO IBM screen, enter CICSA and then press Enter.




3. On the Signon to CICS screen sign, enter the User ID ATDEMO and thePassword DEMO4YOU, and then press Enter.

4. The next screen is blank except for the text at the bottom of the screen:"DFHCE3 Sign-on is complete (Language ENU)". At the top of the screen,enter the word MENU on the command line, and then press Enter.

Screen customization

This section will show you how to customize a screen.

Capture the screen

Before you can customize a screen, it must first be captured. You can use the hostterminal to both to initiate the customization of a screen, as well as to capture thescreen.

1. From the host terminal tool bar click the Create HATS ScreenCustomization button, as shown in Figure 18.

Figure 18. Initiate the customization




2. In the Create a Screen Customization dialog, accept the Project and theName, as shown in Figure 19. The Screen Customization wizard uses thetext at the top of the host screen to suggest the name to use for thescreen customization file.

3. Click Next.

Figure 19. Screen Customization wizard




Screen recognition criteria

Now you need to specify how to identify the host screen. You can make the criteriamore or less specific in order to match one or many screens. You can add additionalcriteria in the screen customization editor.

1. In the Screen Recognition Criteria dialog, use the yellow selection box toselect the text OPERATOR INSTRUCTIONS, as shown in Figure 20, andthen click Next.

Figure 20. Specify how to identify the screen




2. Use the Actions dialog to define the action to be performed when the hostscreen is recognized, as shown in Figure 21.

a. In this case, Apply a transformation is already selected. A newtransformation file named OperatorInstructions.jsp will becreated automatically.

b. For the pattern, select Blank.

c. Click Finish.

Figure 21. Actions performed when a host screen matches the recognitioncriteria




3. In the Screen Region dialog, click the Cancel button.

4. The OperatorInstructions.evnt screen customization and theOperatorInstructions.jsp transformation will be built and appear in thestudio editors. As shown in Figure 22, the transformation is blank exceptfor some necessary JSP code.

Figure 22. The As_400WsgBoatDemo.jsp transformation in the editor

The OperatorInstructions.jsp transformation needs to be populated with some hostcomponents and widgets so that it is usable.

5. Click the OperatorInstructions.jsp Source tab.

6. Locate the text .

7. Use the cursor to highlight the HTML table code, as shown in Figure 23.

Figure 23. Select the existing HTML table code

8. Press the Delete key to remove all of the highlighted table code.

9. Make sure that the cursor is still below the text , as shown in Figure 24.

Figure 24. Position cursor below specified text

Insert an HTML table

Now insert an HTML table. The purpose of this table is to help you place the hostcomponents and widgets exactly where you want them.

1. From the studio menu, select Insert > Insert Table, as shown in Figure25.

Figure 25. Insert an HTML table




2. In the Insert Table dialog, change the number of Rows to 4 (four), asshown in Figure 26.

Figure 26. Specify the number of table rows and columns




3. Click OK.

4. The source should now look like that shown in Figure 27.

Figure 27. The inserted table code




5. Now click the Design tab. Type the text in each table cell as shown inTable 1.

Table 1. New HTML tableAccount Inquiry

Select Transaction

Account Number

6. The transformation should now look like that shown in Figure 28.

Figure 28. Updated transformation with HTML table




Insert the Select Transaction drop-down menu

1. Click within the table cell in the column to the right of the SelectTransaction cell.

2. From the menu, select HATS Tools > Insert Host Component.

3. In the Screen Region dialog, select the ENTER TRANSACTION inputfield using the yellow selection rectangle. Make sure to select the entireinput field, as shown in Figure 29.

4. Click Next.

Figure 29. Select the input field




5. In the Rendering Options dialog, select the Input Field component andthe Drop-down (data entry) widget, as shown in Figure 30.

6. Click the Widget Settings button.

Figure 30. Select a Component and a Widget




7. On the Settings – Drop-down (data entry) dialog make the followingchanges, as shown in Figure 31:

a. Click Use project defaults in order to clear it

b. Caption source: change to Custom

c. Fill from string – List items: type the following text exactly asshown into the field (make sure to include the semicolons):

• Browse=BRWS;Inquiry=INQY;Add=ADDS;Update=UPDT

d. Click the drop-down to preview the list

Figure 31. Change settings




8. Click OK, and then Click Finish. The input field that used to appear nextto the text ENTER TRANSACTION will now show on the screen as adrop-down list.

Insert the Number input field

1. Click within the table cell in the column to the right of "Account Number"

2. From the menu, select HATS Tools > Insert Host Component.

3. In the Screen Region dialog, select the NUMBER input field using theyellow selection rectangle, as shown in Figure 32. Make sure to select theentire input field.

4. Click Next.

Figure 32. Select the NUMBER field




5. In the Rendering Options dialog, click Input field for the component, andthen click Text input for the widget.

6. Click the Widget Settings button.

7. In the Settings – Drop-down (data entry) dialog, make the followingchanges:

a. Clear Use project defaults

b. Caption source: change to Custom

c. Click OK

d. Click Finish

Insert a Submit button

1. Click within the last table cell on the lower right of the table.

2. From the menu click HATS Tools > Insert Host Keypad > IndividualKey.

3. In the Insert Host Key dialog, click the Add button, as shown in Figure33.




Figure 33. Select host keys to insert, and how they should be displayed

4. On the Add Custom Host Key dialog, make the following changes:

a. Caption: type Submit

b. Mnemonic: type in [enter] (or you can select [enter] from thedrop-down list), as shown in Figure 34.

Figure 34. Add Custom Host Key dialog




c. Click OK, and then click OK again to close the Insert Host Keydialog.

5. Save the OperatorInstructions.jsp file.

6. The transformation should now look like that shown in Figure 35.

Figure 35. Updated transformation

7. Click the Preview tab to see what it would look like in a Web browser. Asyou can see, it still needs some more work.

8. Click the Design tab.

9. Click and hold one time using the left mouse button anywhere within theAccount Inquiry table cell. While still holding down the mouse button,select the cell to the right. You will now see black rectangles within bothcells, as shown in Figure 36.




Figure 36. Select Account Inquiry and cell to its right

10. Right-click and then select Table > Join Selected Cells, as shown inFigure 37.

Figure 37. Join the cells

11. Select the text Account Inquiry, right-click it, and then select Properties,as shown in Figure 38.

Figure 38. Edit field properties




12. Make sure that Account Inquiry is still highlighted before proceeding. Inthe Properties view, perform these steps as shown in Figure 39.

a. Click the B button to add bold emphasis to the text

b. Click the A+ button to increase the size of the text

Figure 39. Change the field properties




13. Click one time to the right of Account Inquiry to deselect it. TheProperties view will change to show attributes for the table cell (td).

14. Change the text alignment by clicking the drop-down to the right ofHorizontal, and then select Center, as shown in Figure 40.

Figure 40. Change the alignment




15. Next, click the table tab on the left. The Properties view will change toshow attributes for the entire table, as shown in Figure 41.

Figure 41. Table properties

16. Click the drop-down list next to Layout: Alignment and then selectCenter.

17. Click in the Border input field and then change the 1 to a 0 (zero).

18. Save the OperatorInstructions.jsp file.

19. Click the Preview tab to see what your transformation looks like, asshown in Figure 42.




Figure 42. Transformation preview

Test the transformation

1. If the Web browser is still open, click the Refresh button on the HATSApplication Keypad.

2. If the Web browser is closed, follow the steps in the Test the HATSapplication with Debug on Server section of this tutorial, and thennavigate to the Account Inquiry page (OPERATOR INSTRUCTION).

3. The Account Inquiry page should now look like that in Figure 43.

Figure 43. Updated Account Inquiry page




4. Click the drop-down, select Browse, and then press Enter (or click theSubmit button). The FILE BROWSE page will appear with a list ofaccount numbers, names, and amounts, as shown in Figure 44.

Figure 44. FILE BROWSE page

5. Press the F1 key to navigate forward, and the F2 key to navigatebackwards.

6. While navigating the FILE BROWSE screens, it should become apparentto you that the HATS default rendering has partially transformed some ofthe NAME column entries into HTML links, as shown in Figure 45.This occurs because HATS is looking for selection lists that are formattedto contain a number followed by a space followed by a description, suchas 000102 J. T. CZAKOWSKI.

Figure 45. Names as HTML links




7. Clicking these links will eventually cause navigation to return to theAccount Inquiry screen.

8. To fix this so that the entries are transformed into plain text, openzhatshost2web Settings (Project Settings) in the studio bydouble-clicking it from the HATS Projects view, as shown in Figure 46.

Figure 46. Open project settings

9. Click the Rendering tab, and then clear the Selection lists box, as




shown in Figure 47.

Figure 47. Configure the rendering set

10. Save zhatshost2web Settings.

11. In the Web browser, click the Refresh button on the HATS ApplicationKeypad at the bottom of the page to see that the names are no longerbeing transformed into HTML links, as shown in Figure 48.

12. If the FILE BROWSE screen is still visible, press the Esc key (clear) onetime to return to the Account Inquiry page.

13. Another way to use the Account Inquiry page is to select a transactionfrom the drop-down, and then enter a specific account number into theAccount Number input field.

a. Click the Select Transaction drop-down and then select Browse

b. In the Account Number input field, type 000102




c. Click the Submit button

14. The system will navigate to the screen containing the account number000102, which will be the first entry on the screen.

15. The Account Inquiry page can also be used to Inquiry about, Add, andUpdate specific account numbers.

Exiting the MENU transaction

To exit the MENU transaction:

1. Press Esc from any screen to return to the Account Inquiry screen.

2. Press Esc to exit to the blank screen.

3. On the blank screen, type CESF LOGOFF, and then press Enter. The nextscreen should be the DEMOnet screen.

Section Summary

This portion of the tutorial has shown you how to:

• Use the host terminal to initiate creation of a screen customization

• Modify a transformation

• Test the transformation




Resources

Learn

• Visit the Rational software area on developerWorks for technical resources andbest practices for Rational Software Delivery Platform products.

• Subscribe to the IBM developerWorks newsletter, a weekly update on the best ofdeveloperWorks tutorials, articles, downloads, community activities, Webcastsand events.

• Subscribe to the developerWorks Rational zone newsletter. Keep up withdeveloperWorks Rational content. Every other week, you'll receive updates onthe latest technical resources and best practices for the Rational SoftwareDelivery Platform.

• Subscribe to the Rational Edge newsletter for articles on the concepts behindeffective software development.

• Browse the technology bookstore for books on these and other technical topics.

Get products and technologies

• Download trial versions of IBM Rational software.

• Download these IBM product evaluation versions and get your hands onapplication development tools and middleware products from DB2®, Lotus®,Tivoli®, and WebSphere®.

About the author

Meshach M BaptisteMeshach M. Baptiste is an IBM IT Specialist. He provides pre-sales technical supportfor Rational Host Access Transformation Services. Meshach has worked at IBM forseven years.



http://www.ibm.com/developerworks/rational

https://www.ibm.com/developerworks/newsletter/

https://www.ibm.com/developerworks/newsletter/

http://www.ibm.com/developerworks/rational/rationaledge/

http://www.ibm.com/developerworks/apps/SendTo?bookstore=safari

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX01&S_CMP=ART

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX01&S_CMP=ART


enterprise modernization for ibm system z: transform 3270 … · 2008-10-17 · enterprise...

Documents