transform 5250 green screens into web applications by...
TRANSCRIPT
Transform 5250 Green Screens into Web Applications by Using IBM Rational Host Access Transformation Services
for Multiplatforms Create 5250 to Web transformations using HATS in
IBM Rational Developer for Power
Level: Introductory
July 2010
Transform 5250 green screens to Web applications, Page 2 of 47
Copyright © 2010, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.
Contents
Contents................................................................................................................. 2
About this Tutorial ................................................................................................... 4
Objectives .............................................................................................................. 4
Prerequisites ........................................................................................................... 4
Perspectives............................................................................................................ 5
The HATS perspective...............................................................................................................................................5
Prepare the test environment ....................................................................................................................................6
Build and test a basic HATS application ....................................................................... 8
Build a new project ...................................................................................................................................................8
Project Settings .......................................................................................................................................................10
Test the HATS application with Debug on Server ..................................................................................................11
Test HATS application using an external Web browser .........................................................................................17
Stop the server? ......................................................................................................................................................17
Summary .................................................................................................................................................................18
Customize a host screen ..........................................................................................19
Overview.................................................................................................................................................................19
Open the host terminal............................................................................................................................................19
Navigate to the boats application ...........................................................................................................................19
Screen customization ..............................................................................................................................................19
Screen recognition criteria .....................................................................................................................................21
Insert an HTML table .............................................................................................................................................26
Insert the Type drop-down menu ............................................................................................................................30
Insert the Length input field....................................................................................................................................34
Insert the Year input field .......................................................................................................................................35
Insert a Submit button.............................................................................................................................................36
Change the text attributes .......................................................................................................................................40
Test the transformation...........................................................................................................................................45
Exiting the boats application ..................................................................................................................................45
Summary .................................................................................................................................................................46
Trademarks............................................................................................................47
Transform 5250 green screens to Web applications, Page 3 of 47
Copyright © 2010, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.
0BAbout this Tutorial
This tutorial demonstrates how to use IBM® Rational® Host Access Transformation Services (HATS) to create a Web application that exposes an IBM® Power Systems™ 5250 application to the Web. You will learn how to create a HATS project, and then how to do some basic customization on that application.
1BObjectives
Use the HATS Toolkit to create a Web project Test the Web project in the studio Customize the Web project Total time: 90 minutes
2BPrerequisites
Basic IDE skills Basic understanding of terminal applications
3BPerspectives
Rational workbench uses perspectives to group editors and views that pertain to particular development tasks. For example, the Remote System Explorer perspective contains views such as Remote Systems, Commands Log, Job Status, and so on. The HATS perspective contains views such as HATS Projects, Navigator, Console, Servers, and so on. The name of the active perspective appears on the left side of the title bar of Rational workbench. In Figure 1, the name of the active perspective is Host Access Transformation Services. If your perspective shows something different, you will need to manually open the Host Access Transformation Services perspective.
Figure 1: HATS Perspective
6BThe 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 Delivery Platform > IBM Rational HATS 7.5 > HATS Toolkit 7.5. Note: you will see the HATS Tips panel and you can read the tip and close it or check the boxes so that you don't continue to get the HATS Tips and then close the panel by clicking OK. 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. The views associated with the Host Access Transformation Services perspective appear.
Figure 2: Opening the HATS perspective
7BPrepare the test environment By default the Rational workbench internal WebSphere Application Servers are set to automatically publish every 15 seconds. As a result, sometimes the HATS application will load, but other times it will appear there is a problem because the HATS application JSP file will not be fully loaded in the Web browser. Make the following changes to prevent this: 3. Open the Servers view tab at the bottom of the workbench window and then:
a. Select WebSphere Application Server v7.0 b. Right-click and select Open.
Figure 3: Open the server editor
4. In the Server section:
a. Click the Manually provide connection settings radio button. b. Deselect the RMI radio button. c. Click Terminate server on workbench shutdown
Figure 4: Select the SOAP connection type
5. In the Publishing section, select the Never publish automatically radio button.
Figure 5: Select Never publish automatically
6. Click File > Save to save the server configuration. 7. Close the server configuration editor window.
4BBuild and test a basic HATS application
8BBuild a new project Follow the steps below to build and test a basic HATS application. 8. 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 HATS > Open HATS Welcome Page from the menu.
Figure 6: Launch the Create a Project wizard
9. On the Create a Project – HATS Project dialog:
a. Type ihatshost2web as the project Name. b. Choose the Web radio button. c. Target server should be WebSphere Application Server v7.0.
d. In the Enterprise application project name field enter the name ihatshost2web_EAR7, as shown in Figure 7.
e. Click Next.
Figure 7: The Create a Project wizard
10. On the Connection Settings dialog type or select the following:
a. Host name: iseriesd.demos.ibm.com (Important: there is a 'd' in the host name iSeriesd).
b. Select: 5250W c. Port: 4004. d. Code page at 037 United States. e. Screen size at 24 x 80. f. Click Next.
11. On the Project Theme dialog box:
a. Choose Standard for the Appearance and behavior theme b. Click Next.
12. On the Default Template dialog:
a. Leave Template as Swirl.jsp. b. Click Finish. The studio will now build the project.
When the studio finishes building the project, the HATS Projects view will be open with the project folders on the left, and ihatshost2web Settings open in the HATS Application Editor. Expand the folders and examine the files. All of the ihatshost2web resources will be located within these folders.
9BProject Settings Project settings allow you (as the HATS developer) to view and change many settings. When Project Settings is opened in the HATS Application Editor, the name of the project will appear in the title, in this case ihatshost2web Settings, as shown in Figure 8. The tabs at the bottom provide access to various settings.
Figure 8: Project Settings in the HATS Application Editor
Explore the different options and settings that are available for editing:
• Overview: View 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 edit application
events • Other: Configure miscellaneous default settings for the project • Source: See that the project settings are stored in XML format
10BTest the HATS application with Debug on Server The Debug and 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, and you should use Run on Server if you want to simulate running your application on a production server. 13. Highlight the ihatshost2web project name in the HATS Projects view, and then, from
the Welcome to HATS page, click the blue link Debug on Server, as in Figure 9.
Figure 9: Click the Debug on Server link
The Display Terminal prompt will appear, as shown in Figure 10. The Display Terminal dialog enables 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
14. The Define a New Server dialog appears, as shown in Figure 11: a. Leave Choose an existing server checked. b. Select WebSphere Application Server v7.0. c. Click Always use this server when running this project. d. Click Finish.
Figure 11: The Define a New Server dialog
This publishes the ihatshost2web application to the internal WebSphere Application Server and runs it in debug mode. Additional messages will appear in the Console as the HATS project loads.
15. When the Web browser opens, double-click the title area to maximize the viewing area, as shown in Figure 12.
Figure 12: The HATS application in the internal Web browser
When the Web browser opens, a Display Terminal window also opens, as shown in Figure 13. The Display Terminal updates to show exactly the same screens being navigated in the Web browser.
Figure 13: The Display Terminal
16. Go back to the Web browser and then sign on to the system by entering the UUser IDU
ATDEMO and the UPasswordU DEMO4YOU, and then press Enter.
Note: If the Display Program Messages screen appears, press Enter to navigate to the IBM® i operating system Main Menu.
17. As you navigate the host screens the Console will reappear at the bottom of the
workbench. There are two console commands that affect this behavior. They are both set on by default: a. Show Console When Standard Out Changes will open (if needed) and bring a
console to the front when information is written to the System.out stream b. Show Console When Standard Error Changes will open (if needed) and bring a
console to the front when information is written to the System.err stream
18. To turn off these settings click the respective buttons on the Console toolbar as indicated in the picture below.
Figure 14: Show Console buttons
19. On the i5/OS Main Menu screen, enter the word boats on the command line, and then
press Enter. The “AS/400 WSG Boat Demo” screen contains a menu from which a database can be searched for boats that match certain criteria. By default the A is in the Type field. 20. Press Enter. The screen will be updated with the first screen of a list of all boats. 21. Enter a 1 in the input field preceding Monk Flybridge/Sedan and then press Enter.
The details of this boat will appear. Examine the results. 22. Click the UF3=EndU link at the bottom of the Web page. This is the F3 function key text
transformed into an HTML link. 23. On the i5/OS Main Menu screen, click the U90. Sign off linkU.
24. Double-click the title bar of the internal Web browser to restore the window, or click
Window > Reset Perspective. Click OK when the prompt appears.
11BTest HATS application using an external Web browser You can also test the HATS application can using an external Web browser while the WebSphere Application Server test environment is running. 25. Copy the URL http://localhost:9080/ihatshost2web/entry from the internal Web
browser in Rational workbench to the address field of a supported external Web browser on the same machine, and then press Enter.
Note: Make sure to use the correct port number for your configuration; 9080 may need to be changed to match your configuration.
26. 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/ihatshost2web/entry.
12BStop the server? If you will not be doing any additional testing using the WebSphere Application Server test environment, then go ahead and stop the server. 27. To stop the WebSphere Application Server test environment:
a. Select the Servers view from the lower pane. b. Select WebSphere Application Server v7.0. c. Click the red Stop the server button, as shown in Figure 15.
Figure 15: Click the Stop the server button
13BSummary This section of the tutorial demonstrated:
• Creating a basic HATS project
• Exploring the ihatshost2web project settings
• Testing the application using Debug on Server
5BCustomize a host screen
14BOverview This part of the tutorial will show how to make some customizations to a host screen.
15BOpen the host terminal The host terminal is a connection in HATS Toolkit to a live host. Using the host terminal, you can capture screens, create screen customizations and transformations, and record and edit macros. You can also play previously recorded or imported macros. The host terminal also allows you to preview your screen as a Web page. 28. Right-click the ihatshost2web project in the HATS Projects view, and then select
Open HATS Host Terminal > main, as shown in Figure 16.
Figure 16: Open the HATS Host Terminal
16BNavigate to the boats application 29. On the Sign On screen, sign on to the system by entering the UUser IDU ATDEMO and the
UPasswordU DEMO4YOU, and then press Enter.
Note: If the Display Program Messages screen appears, press Enter to navigate to the i5/OS Main Menu.
30. On the i5/OS Main Menu screen, enter the word boats on the command line, and then
press Enter. 31. The AS/400 WSG Boat Demo screen contains a menu from which a database can be
searched for boats that match certain criteria. This is the screen that will be customized.
17BScreen customization Before you can customize a screen, it must first be captured. You can use the host terminal both to initiate the customization of a screen, as well as to capture the screen.
32. From the host terminal toolbar, click the Create HATS Screen Customization button, as shown in Figure 17.
Figure 17: Click the Create HATS Screen Customization button
33. The Screen Customization wizard, shown in Figure 18, uses the text at the top of the host screen to suggest the name to use for the screen customization file.
a. Click Next.
Figure 18: The Create HATS Screen Customization wizard
18BScreen 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.
34. On the Screen Recognition Criteria dialog, use the yellow selection box to select the text Enter your search parameters, and then click Next.
Figure 19: Specify screen recognition criteria
35. Use the Actions dialog shown in Figure 20 to define the action to be performed when the host screen is recognized. a. In this case, Apply a transformation is already selected. A transformation named
As_400WsgBoatDemo.jsp will be created automatically. b. For the pattern, select Blank. c. Click Finish.
Figure 20: Specify the actions to perform
36. On the Screen Region dialog, click the Cancel button.
The screen customization As_400WsgBoatDemo.evnt and the transformation As_400WsgBoatDemo.jsp will be built and appear in the studio editors, as shown in Figure 21. As you can see, the transformation is blank except for some necessary JSP code.
Also notice that the As_400WsgBoatDemo.jsp file is open in the Page Designer editor in Split view. This enables you to see both the Design and Source views at the same time
Figure 21: The As_400WsgBoatDemo.jsp transformation in the editor
You next need to populate the 400WsgBoatDemo.jsp transformation with some host components and widgets so that it is usable. 37. Click within the As_400WsgBoatDemo.jsp Source view. 38. Scroll up or down to locate the text <!-- Insert your HATS component tags here. -->.
39. Use the cursor to highlight the HTML table code, as shown in Figure 22. Make sure to include the entire code between the opening (<TABLE …>)and closing tags (</TABLE>).
Figure 22: Select the existing HTML table code
40. Press the Delete key to remove all of the highlighted table code.
41. Make sure that the cursor is still below the text <!-- Insert your HATS component tags here. -->.
Figure 23: The correct cursor positioning
19BInsert an HTML table Now insert an HTML table. The purpose of this table is to help place the host components and widgets exactly where you want them.
42. From the studio menu, select Insert > Insert Table, as shown in Figure 24.
Figure 24: Insert an HTML table
5
43. On the Insert Table dialog, change the number of Rows to 5 (five), and Columns to 3 (three).
Figure 25: Specify the number of table rows and columns
a. Click OK. The design and source should look similar to Figure 26.
Figure 26: The inserted table code
44. In the Design view, type the text in each table cell as shown below.
Figure 27: Enter the following text into the table
The transformation should now look like that shown in Figure 28.
Figure 28: The updated table
20BInsert the Type drop-down menu 45. Click within the center table cell in the column to the right of the Type cell.
Figure 29: Place the cursor in cell next to Type
46. From the menu, select HATS Tools > Insert Host Component
47. On the Screen Region dialog shown in Figure 30, click the Highlight fields checkbox so that the input fields are highlighted in blue.
Figure 30: Click the Highlight fields button
48. Use your mouse to draw a yellow selection box around the Type input field, as shown in Figure 31.
Figure 31: Select the Type input field
49. Click Next.
50. On the Rendering Options dialog, as shown in Figure 32: a. Select the Input Field UcomponentU and the Drop-down (data entry) Uwidget U. b. Click the Widget Settings button.
Figure 32: Specify the Type input field attributes
51. On the Settings – Drop-down (data entry) dialog, make the following changes, as shown in Figure 33: a. Click Use project defaults in order to clear it b. Caption source: change to Custom (otherwise the label Type would show up twice) c. Fill from string – List items: type the following text exactly as shown into the field.
Make sure to include the semicolons: Powered=P;Sailing=S;Tug=T;Commercial=C;All=A
d. Click the drop-down to preview the list.
Figure 33 Edit the drop down menu
e. Click OK, and then click Finish. The input field that used to appear next to the label Type will now render as a drop-down list.
21BInsert the Length input field 52. Click within the table cell in the column to the right of Length 53. From the menu, select HATS Tools > Insert Host Component.
54. On the Screen Region dialog shown in Figure 34, select the Length input field using the yellow selection rectangle. Make sure to select the entire input field. a. Click Next.
Figure 34: Select the Length input field
55. On the Rendering Options dialog:
a. Click Input field for the UcomponentU and then click Text input for the Uwidget U. b. Click the Widget Settings button.
56. On the Settings – Drop-down (data entry) dialog, make the following changes:
a. Uncheck Use project defaults b. Caption source: change to Custom c. Click OK d. Click Finish.
22BInsert the Year input field 57. Click within the table cell in the column to the right of Year built. 58. From the menu, select HATS Tools > Insert Host Component. 59. On the Screen Region dialog:
a. Select the Year input field using the yellow selection rectangle. Make sure to select the entire input field.
b. Click Next. 60. On the Rendering Options dialog:
a. Click Input field for the UcomponentU and then click Text input for the Uwidget U. b. Click the Widget Settings button.
61. On the Settings – Drop-down (data entry) dialog, make the following changes:
a. Uncheck Use project defaults b. Caption source: change to Custom c. Click OK. d. Click Finish.
23BInsert a Submit button 62. Click within the table cell just below the “Year built” input field that you just inserted. 63. From the menu click HATS Tools > Insert Host Keypad > Individual Key. 64. On the Insert Host Key dialog shown in Figure 35, click the Add button.
Figure 35: The Insert Host Key dialog
65. On the Add Custom Host Key dialog shown in Figure 36, make the following changes: a. Caption: type Submit b. Mnemonic: type [enter] (or you can select [enter] from the drop-down list)
Figure 36: Add a Custom Host Key
66. Click OK, and then click OK again to close the Insert Host Key dialog. 67. Save the As_400WsgBoatDemo.jsp file. The transformation should now look like that shown in Figure 37.
Figure 37: The table with the Submit key
68. 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. 69. Click the Design tab.
70. Click one time using the left mouse button anywhere within the “Search for Boats” table cell; while holding down the left mouse button select the cells to the right. You will now see black rectangles within both cells, as shown in Figure 38.
Alternatively, right-click within the “Search for Boats” cell and then select Table > Select Row.
Figure 38: Select the three cells of the first row
71. Right-click one of these highlighted cells and select Table > Join Selected Cells, as shown in Figure 39.
Figure 39: Join the selected cells of the first row
24BChange the text attributes 72. Highlight the Search for Boats text, right-click and select Properties, as shown in
Figure 40.
Figure 40: Click the Properties menu item
73. Make sure the Search for Boats text is still highlighted before proceeding, as shown in Figure 41. In the Properties view: a. Click the B button to add bold emphasis to the text. b. Click the A+ to increase the size of the text.
Figure 41: Edit the Search for Boats text
74. Click to the right of the Search for Boats text to ensure that it is no longer selected it.
The Properties view will now change to show the attributes for the table cell.
75. Change the text alignment by clicking the drop-down to the right of Alignment: Horizontal, and then select Center, as shown in Figure 42.
Figure 42: Center the Search for Boats text
76. Now click the table tab on the left. The Properties view will change to show attributes
for the entire table. 77. Click the drop-down next to Layout: Alignment and then select Center, as shown in
Figure 43.
78. Click in the Border input field and then change the 1 to a 0 (zero).
Figure 43: Center the table and remove the border
79. Save the As_400WsgBoatDemo.jsp file.
80. Click the Preview tab to see what the transformation looks like, as shown in Figure 44.
Figure 44: Preview the updated transformation
25BTest the transformation 81. Back in the Web browser navigate to the Search for Boats page. It should now look like
that shown in Figure 45. If necessary, restart the application or rerun Debug on Server, and then navigate to the Search for Boats page.
Figure 45: The updated transformation loaded in a Web browser
82. At this point, you can either press the Enter key or click the Submit button in order to
search for All boat types. 83. On the search results page, click the UF12=New searchU link to return to the Search for
Boats page. 84. Now try a different combination of search criteria by selecting different options from the
Type drop-down, and entering different values for Length and Year.
26BExiting the boats application 85. To exit the boats application:
a. Press F3 to return to the i5/OS Main Menu. b. Click the U90. Sign offU link.
27BSummary This exercise has demonstrated:
• Using the host terminal to initiate a screen customization
• Modifying a transformation
• Testing the transformation
Trademarks IBM and the IBM logo are trademarks of International Business Machines Corporation in the United States, other countries or both. Java and all Java-based trademarks and logos are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. See Java Guidelines Other company, product and service names may be trademarks or service marks of others.
Resources Learn
Visit the HURational software area on the IBM® developerWorksUH® Web site for technical resources and best practices for IBM® Rational® Software Delivery Platform products. Subscribe to the HUdeveloperWorks Rational zone newsletterUH. 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 HUIBM developerWorks newsletterUH, a weekly update on the best of developerWorks tutorials, articles, downloads, community activities, webcasts and events.
Get products and technologies
Download HUtrial versions of IBM Rational softwareUH. Download HUIBM product evaluation versionsUH and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
Discuss
Check out HUdeveloperWorks blogsUH and get involved in the HUdeveloperWorks communityUH.
Share this article
HUDigg this storyUH