Enterprise Modernization for IBM System z:

Enterprise Modernization for IBM System z: Transform 3270 green screens to Web UI using Rational Host Access Transformation Services for Multiplatforms Extend a host application to the Web using System z Skill Level: Intermediate Meshach M Baptiste (meshach@us.ibm.com) IT Specialist IBM Japan 21 Mar 2008 Updated 21 Oct 2008 Many companies today have the mandate to quickly expose their 3270 and 5250 applications to the Web (including the intranet, extranet, or the Internet). This tutorial shows you how you can use IBM Rational Host Access Transformation Services (HATS) to get started. While you can achieve this in many product environments that include IBM Rational studio, this tutorial focuses on IBM Rational Developer for System z. This tutorial shows how IBM Rational Host Access Transformation Services for Multiplatforms can help you quickly improve the user interface of your existing System z applications, and achieve integration with other IT systems with minimal development cost. The result is an easy-to-use Web interface to the application, which reduces training 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. Page 1 of 48

About this series Walk through this scenario and others online as part of the Enterprise Modernization Sandbox 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 Delivery Platform products that HATS supports. You should have some knowledge of System z applications and Web User Interfaces. System requirements This tutorial requires the Enterprise Modernization sandbox environment. Page 2 of 48

Section 2. Rational studio in HATS (Version 7 or later) The term Rational studio used in this tutorial refers to any one of the following Rational-based studios (all products V7 or later) supported by IBM Rational Host Access 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 for System 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 5250 applications to the Web. This includes the intranet, extranet, or the Internet. This tutorial 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 to particular 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 HATS perspective contains views such as HATS Projects, Navigator, Console, Servers, Page 3 of 48

and so on. The name of the active perspective appears on the left side of the title bar of the Rational studio. In Figure 1, the name of the active perspective is Host Access Transformation Services. If yours says anything else, you will need to open the Host Access Transformation Services perspective manually. Figure 1. HATS Perspective The HATS perspective The following steps show you how to open the Host Access Transformation Services perspective. 1. To open the HATS Toolkit from the Windows Start menu click Start > All Programs > IBM Software Development Platform > IBM Rational HATS 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 the OK button, as shown in Figure 2. Figure 2. Open the HATS perspective Page 4 of 48

The views associated with the Host Access Transformation Services perspective will display. 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 is a problem because the HATS application Java Server Pages (JSP) file will not be fully loaded in the Web browser. Page 5 of 48

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, as shown in Figure 4. Figure 4. Options for server settings Page 6 of 48

5. In the Automatic Publishing section, select the Never publish automatically 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. Page 7 of 48

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 a Project wizard text link, as shown in Figure 6..Note: To re-open a closed Welcome to HATS page, select from the menu HATS > Open HATS Welcome Page. Figure 6. Launch the wizard Page 8 of 48

2. In the Create a Project > HATS Project dialog, set the options, as shown in 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 name zhatshost2web_ear61 e. Click Next Figure 7. The Create a Project wizard Page 9 of 48

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 Appearance and 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. Page 10 of 48

6. When the studio finishes building the project, the HATS Projects view will be open with the project folders on the left, and zhatshost2web Settings open in the HATS Application Editor. 7. Expand the folders and examine the files. All of the zhatshost2web resources will be located within these folders. Project settings The Project Settings tab allows you (as the HATS developer) to view and change many settings. When you open Project Settings in the HATS Application Editor, the name 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 Page 11 of 48

Template: Choose from all available Templates Rendering: Edit multiple default settings Events: Prioritize screen customization comparison order and edit application 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 test your 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 to see changes made to your project as it is running on the server. You should use Run on Server if you want to simulate running your application on a production server. 1. Highlight the zhatshost2web project name in the HATS Projects view, and then, from the Welcome to HATS page, click the blue Debug on Server link, as shown in Figure 9. Figure 9. Start to debug on server Page 12 of 48

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

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 Page 14 of 48

= 4. The zhatshost2web application will be published to the internal WebSphere Application Server and run in debug mode. Additional messages will appear in the Console as the HATS project loads. 5. When the Web browser opens, as shown in Figure 12, double-click the title area to maximize the viewing area. Figure 12. The HATS application in the internal Web browser Page 15 of 48

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

7. Go back to the Web browser. Sign on to CICS 1. Back in the Web browser, on the WELCOME TO IBM screen enter CICSA and then press Enter. 2. On the Signon to CICS screen, sign on by entering the User ID ATDEMO and 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 Figure 14. At the top of the screen, enter the word MENU on the command line, and then press Enter. Page 17 of 48

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 in Figure 15. Figure 15. Menu options Page 18 of 48

5. Enter BRWS into the ENTER TRANSACTION input field, and then press Enter. A list of numbers, names, and amounts will appear on the FILE BROWSE 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 its normal size. Test HATS application using an external Web browser 1. Copy the URL http://localhost:9080/zhatshost2web/entry from the internal Web browser in the studio to the address field of a supported external Web browser on the same machine, and then press Enter. Page 19 of 48

Note: Make sure to use the correct port number for your configuration. You may need to change 9080 in this URL to match your configuration. 2. To test from a Web browser on another machine, make sure to replace localhost with the hostname or IP address of the studio machine where the HATS application is running. For example, if the studio machine s IP address is 192.168.101.202, then the URL to type in the address field of the Web browser on the other machine is http://192.168.101.202:9080/zhatshost2web/entry. Stop the server? If you will not be doing any additional testing using the WebSphere v6.1 test environment, 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 Page 20 of 48

Section 4. Customize a host screen Overview This part of the tutorial will show you how to make some customizations to a host screen. Prepare to customize Open the host terminal The host terminal is a connection to a live host in the HATS Toolkit. Using the host terminal, you can capture screens, create screen customizations and transformations, and record and edit macros. In addition, you can play previously recorded or imported macros. The host terminal also allows you to preview your screen as a Web page. 1. Right-click the zhatshost2web project in the HATS Projects view, and then 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. Page 21 of 48

3. On the Signon to CICS screen sign, enter the User ID ATDEMO and the Password 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 host terminal to both to initiate the customization of a screen, as well as to capture the screen. 1. From the host terminal tool bar click the Create HATS Screen Customization button, as shown in Figure 18. Figure 18. Initiate the customization Page 22 of 48

2. In the Create a Screen Customization dialog, accept the Project and the Name, as shown in Figure 19. The Screen Customization wizard uses the text at the top of the host screen to suggest the name to use for the screen customization file. 3. Click Next. Figure 19. Screen Customization wizard Page 23 of 48

Screen recognition criteria Now you need to specify how to identify the host screen. You can make the criteria more or less specific in order to match one or many screens. You can add additional criteria in the screen customization editor. 1. In the Screen Recognition Criteria dialog, use the yellow selection box to select the text OPERATOR INSTRUCTIONS, as shown in Figure 20, and then click Next. Figure 20. Specify how to identify the screen Page 24 of 48

2. Use the Actions dialog to define the action to be performed when the host screen is recognized, as shown in Figure 21. a. In this case, Apply a transformation is already selected. A new transformation file named OperatorInstructions.jsp will be created automatically. b. For the pattern, select Blank. c. Click Finish. Figure 21. Actions performed when a host screen matches the recognition criteria Page 25 of 48

3. In the Screen Region dialog, click the Cancel button. 4. The OperatorInstructions.evnt screen customization and the OperatorInstructions.jsp transformation will be built and appear in the studio editors. As shown in Figure 22, the transformation is blank except for some necessary JSP code. Figure 22. The As_400WsgBoatDemo.jsp transformation in the editor The OperatorInstructions.jsp transformation needs to be populated with some host components and widgets so that it is usable. 5. Click the OperatorInstructions.jsp Source tab. 6. Locate the text <!-- Insert your HATS component tags here. -->. Page 26 of 48

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 <!-- Insert your HATS component tags here. -->, as shown in Figure 24. Figure 24. Position cursor below specified text Page 27 of 48

Insert an HTML table Now insert an HTML table. The purpose of this table is to help you place the host components and widgets exactly where you want them. 1. From the studio menu, select Insert > Insert Table, as shown in Figure 25. Figure 25. Insert an HTML table Page 28 of 48

2. In the Insert Table dialog, change the number of Rows to 4 (four), as shown in Figure 26. Figure 26. Specify the number of table rows and columns Page 29 of 48

3. Click OK. 4. The source should now look like that shown in Figure 27. Figure 27. The inserted table code Page 30 of 48

5. Now click the Design tab. Type the text in each table cell as shown in Table 1. Table 1. New HTML table Account Inquiry Select Transaction Account Number 6. The transformation should now look like that shown in Figure 28. Figure 28. Updated transformation with HTML table Page 31 of 48

Insert the Select Transaction drop-down menu 1. Click within the table cell in the column to the right of the Select Transaction cell. 2. From the menu, select HATS Tools > Insert Host Component. 3. In the Screen Region dialog, select the ENTER TRANSACTION input field using the yellow selection rectangle. Make sure to select the entire input field, as shown in Figure 29. 4. Click Next. Figure 29. Select the input field Page 32 of 48

5. In the Rendering Options dialog, select the Input Field component and the Drop-down (data entry) widget, as shown in Figure 30. 6. Click the Widget Settings button. Figure 30. Select a Component and a Widget Page 33 of 48

7. On the Settings Drop-down (data entry) dialog make the following changes, 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 as shown 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 Page 34 of 48

8. Click OK, and then Click Finish. The input field that used to appear next to the text ENTER TRANSACTION will now show on the screen as a drop-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 the yellow selection rectangle, as shown in Figure 32. Make sure to select the entire input field. 4. Click Next. Figure 32. Select the NUMBER field Page 35 of 48

5. In the Rendering Options dialog, click Input field for the component, and then click Text input for the widget. 6. Click the Widget Settings button. 7. In the Settings Drop-down (data entry) dialog, make the following changes: 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 > Individual Key. 3. In the Insert Host Key dialog, click the Add button, as shown in Figure 33. Page 36 of 48

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 the drop-down list), as shown in Figure 34. Figure 34. Add Custom Host Key dialog Page 37 of 48

c. Click OK, and then click OK again to close the Insert Host Key dialog. 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. As you 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 the Account Inquiry table cell. While still holding down the mouse button, select the cell to the right. You will now see black rectangles within both cells, as shown in Figure 36. Page 38 of 48

Figure 36. Select Account Inquiry and cell to its right 10. Right-click and then select Table > Join Selected Cells, as shown in Figure 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 Page 39 of 48

12. Make sure that Account Inquiry is still highlighted before proceeding. In the 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 Page 40 of 48

13. Click one time to the right of Account Inquiry to deselect it. The Properties view will change to show attributes for the table cell (td). 14. Change the text alignment by clicking the drop-down to the right of Horizontal, and then select Center, as shown in Figure 40. Figure 40. Change the alignment Page 41 of 48

15. Next, click the table tab on the left. The Properties view will change to show 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 select Center. 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, as shown in Figure 42. Page 42 of 48

Figure 42. Transformation preview Test the transformation 1. If the Web browser is still open, click the Refresh button on the HATS Application Keypad. 2. If the Web browser is closed, follow the steps in the Test the HATS application with Debug on Server section of this tutorial, and then navigate 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 Page 43 of 48

4. Click the drop-down, select Browse, and then press Enter (or click the Submit button). The FILE BROWSE page will appear with a list of account 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 navigate backwards. 6. While navigating the FILE BROWSE screens, it should become apparent to you that the HATS default rendering has partially transformed some of the NAME column entries into HTML links, as shown in Figure 45. This occurs because HATS is looking for selection lists that are formatted to contain a number followed by a space followed by a description, such as 000102 J. T. CZAKOWSKI. Figure 45. Names as HTML links Page 44 of 48

7. Clicking these links will eventually cause navigation to return to the Account Inquiry screen. 8. To fix this so that the entries are transformed into plain text, open zhatshost2web Settings (Project Settings) in the studio by double-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 Page 45 of 48

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 Application Keypad at the bottom of the page to see that the names are no longer being transformed into HTML links, as shown in Figure 48. 12. If the FILE BROWSE screen is still visible, press the Esc key (clear) one time to return to the Account Inquiry page. 13. Another way to use the Account Inquiry page is to select a transaction from the drop-down, and then enter a specific account number into the Account Number input field. a. Click the Select Transaction drop-down and then select Browse b. In the Account Number input field, type 000102 Page 46 of 48

c. Click the Submit button 14. The system will navigate to the screen containing the account number 000102, which will be the first entry on the screen. 15. The Account Inquiry page can also be used to Inquiry about, Add, and Update 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 next screen 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 Page 47 of 48

Resources Learn Visit the Rational software area on developerworks for technical resources and best practices for Rational Software Delivery Platform products. Subscribe to the IBM developerworks newsletter, a weekly update on the best of developerworks tutorials, articles, downloads, community activities, Webcasts and events. Subscribe to the developerworks Rational zone newsletter. Keep up with developerworks Rational content. Every other week, you'll receive updates on the latest technical resources and best practices for the Rational Software Delivery Platform. Subscribe to the Rational Edge newsletter for articles on the concepts behind effective 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 on application development tools and middleware products from DB2, Lotus, Tivoli, and WebSphere. About the author Meshach M Baptiste Meshach M. Baptiste is an IBM IT Specialist. He provides pre-sales technical support for Rational Host Access Transformation Services. Meshach has worked at IBM for seven years. Page 48 of 48