Use EGL Rich UI and HATS to integrate green-screen applications in your SOA

An overview of using EGL Rich UI to call a HATS web service and integrate it with another business application

This article summarizes the Enterprise Generation Language Rich User Interface (EGL Rich UI) support provided in IBM’s EGL tooling products; Rational® Developer for System z® with EGL, Rational Developer for i for SOA Construction, and Rational Business Developer, in combination with Rational Host Access Transformation Services (HATS). Using these solutions you can quickly and easily create Web applications to access business logic and transactions contained within character-based 3270 and 5250 applications in a service-oriented architecture (SOA) environment.

Rick Hardison (rhardison@sdicorp.com), Consultant, EMC

Author photoRick Hardison joined IBM in Raleigh, North Carolina in 1970 as a junior programmer. In 1992, he moved into technical marketing providing support for IBM's Communications Clients and Servers, Host On-Demand and Host Access Transformation Services. Rick retired from IBM in 2005 and has since provided consulting services, including technical writing, through Systems Documentation, Inc. (SDI).



16 September 2009

Also available in Chinese

The challenge

Host applications continue to be a significant part of the set of business applications within a company. Rewriting these applications to use up-to-date innovations in business application development and integration can be cost prohibitive. The challenge is to find a cost-effective way to integrate these host applications with other business applications, for example within an SOA environment.


Solution

IBM Enterprise Modernization solutions help organizations cost-effectively and incrementally evolve core IT systems towards modern architectures and technologies—reducing maintenance burden and freeing up more of their resources to focus on developing new business requirements and capabilities.

Included in the IBM Enterprise Modernization solutions are IBM’s EGL tooling products; Rational Developer for System z with EGL, Rational Developer for i for SOA Construction, and Rational Business Developer, as well as Rational HATS. Using these solutions, you quickly and easily can meet the challenge of integrating host applications with other business applications in an SOA environment.


Overview

At a high level, two steps must be taken to integrate a host application into an SOA environment. The first step is to create a web services interface to the host application. The second step is to create a Web application that calls the web service and integrates its input and output with other business applications.

For the first step, you can use HATS to create a web services interface to the business logic and transactions in the host application that you wish to expose to the SOA environment. With HATS, you can develop web services that access 3270 host applications running on IBM System z platforms, 5250 host applications running on IBM i platforms, and virtual terminal (VT) applications.

For example, in the figure below shows a host screen from a 3270 CICS application running on an IBM System z platform. This screen displays credit card information accessed by account number. For this article, HATS is used to create a web service that accepts an account number as input, drives the CICS transaction, and returns as output account information such as name, address, and credit card information.

Figure 1. Host application screen
Host application screen

For the second step, you can use the EGL Rich UI support provided in the EGL tooling products to develop a Web application to provide the desired UI, call the HATS web service, display the results, and integrate the results with other applications.

Figure 2 below shows the UI developed for this article as displayed on a mobile device. The UI includes an area to enter an account number and an area to display selected output from the HATS web service. In addition, the address information from the HATS web service is used as input to the Yahoo map application.

Figure 2. EGL Rich UI HATS application on a Web browser device
EGL Rich UI HATS application on a Web browser device

The following figure provides an architectural overview of the solution suggested in this article. A Web browser addresses the URL for the EGL Rich UI application, which is generated into HTML and JavaScript at development time and served up from a Web application server. The EGL Rich UI application uses Ajax JavaScript calls that invoke the SOAP service to communicate with the HATS web services application through a proxy running on the EGL Rich UI server. The HATS web services application communicates with the host application using the appropriate host protocol, for example TN3270 or TN5250. Although the figure shows the EGL Rich UI server, HATS, and host applications running on different systems, they could all run on the same system or a different combination of systems. EGL Rich UI applications can run on simple HTTP web servers, but in this case do not support access to services such as web services.

Figure 3. Architectural overview
Architectural overview

For more information about how to develop a HATS web service, see the article, Integrate Green-screen Applications in your SOA: Using Rational Host Access Transformation Services (HATS).

The remainder of this article describes how to use EGL Rich UI support to easily and quickly create a Web application that calls a HATS web service and integrates output from the HATS web service with another application.


Key terms

Some of the basic terms and concepts related to EGL Rich UI support are:

  • EGL handler part – A handler part provides data and callback functions for UI constructs such as Web pages or printers. You bind information in the handler part to variables within the UI, and associate handler functions with events that occur in the UI.
  • EGL package – An EGL package is a named collection of related source parts. You can think of it in the same way as you do a folder or directory.

EGL Rich UI implementation overview

EGL allows you to rapidly create web services and easily write Web applications that provide a UI to access web services. EGL Rich UI is a technology for developing rich, Web 2.0 style applications that run in a browser. This article describes the steps involved in writing an EGL Rich UI Web application that provides the UI to call a HATS web service and integrates the resulting output with another Web application.

The steps covered include:

  • Creating an EGL Rich UI project
  • Creating an EGL Rich UI handler part
  • Developing the UI
  • Creating the interface to the HATS web service
  • Integrating with another application
  • Previewing the application

Creating an EGL Rich UI project

Within the EGL tooling products, EGL Rich UI development efforts are organized by project. From a project, you generate an application that can be deployed to run on WebSphere Application Server, Apache Tomcat, or an HTTP server. EGL Rich UI applications deployed to an HTTP server do not support access to services such as web services.

To create an EGL Rich UI project, in the EGL Rich UI perspective, from the menu bar, select File > New > Project, and in the New Project wizard expand EGL and select EGL Project. In the New EGL Project wizard, give the project a name, for example, CustomerInfoEGL, select the Rich UI Project radio button, and click Finish.

The figure below shows the newly created EGL Rich UI project in the Project Explorer.

Figure 4. EGL Rich UI project
EGL Rich UI project

Creating an EGL Rich UI handler part

The handler part is used by EGL to provide a UI and bind the UI to events that are called from and returned to the UI.

To create an EGL Rich UI handler (RUI handler) part, first create a package by right-clicking the EGLSource folder in your project and select New > Package. Give the package a name, for example customerInfoPackage, and click Finish.

Next, right-click the package and select New > Rich UI Handler. Give the Rich UI handler part a name, for example CustomerInfoRUI, and click Finish.

Notice in figure 5 in the Project Explorer the file CustomerInfoRUI.egl located in the customerInfoPackage. The file is open in the EGL Rich UI editor.

Figure 5. EGL Rich UI handler part
EGL Rich UI handler part

Developing the UI

By default, RUI handlers are edited using the EGL Rich UI Editor. Notice in the figure above, this editor has tabs for three views, Design, Source, and Preview. You can use the Design view with widgets from the palette to visually develop your UI. The Source view lets you enter source code to develop your UI and other functions that will run under the RUI handler. You use the Preview view to run the RUI handler and preview the results.

A good practice when developing a UI is to use cascading style sheets (CSS files). The use of CSS files helps you to maintain consistency in the overall appearance of all of your UIs and allows you to make global style changes in one place. This example uses the default EGL Rich UI CSS file. It is assumed that when you develop your own UI, you will use a CSS file that provides an appearance consistent with other UIs you create or that exist for your company applications.

When developing the UI for your RUI handler, another good practice is to use the Box widget to organize areas of your UI. The Box widget has its own set of properties. So, using multiple Box widgets lets you define areas of the UI with different properties.

As illustrated in figure 6 below, start creating your UI by selecting the Box widget from the palette and dragging it to the Design view canvas.

Figure 6. EGL RUI editor Design view
EGL RUI editor Design view

When you drop the Box widget onto the canvas, you are prompted to give this instance of the Box widget a name. In this example, you will use one box to contain all of the other boxes in your UI. So give it a meaningful name, for example mainBox.

Figure 7. Variable name dialog
Variable name dialog

With the mainBox widget selected in the Design view, go to the Properties view and set the columns property to 1. This will ensure that all of the areas you add to this UI are arranged vertically in one column.

Figure 8. Box widget properties
Box widget properties

Next, begin adding Box widgets inside the mainBox widget for each area of your UI. As you drag a new widget onto the canvas, the editor provides a visual indicator, a green area color, and an outline view to help you place the widget where you want it. Do not worry if you drop the widget in the wrong place, it is easy to drag it to the correct place.

The figure below shows positioning the new Box widget inside the mainBox widget.

Figure 9. Adding a Box widget
Adding a Box widget

Use this new Box widget to contain a page title. When prompted, give the Box widget an appropriate name, for example, titleBox.

Now, add a TextLabel widget inside the titleBox widget to supply your title text. Again, use the green visual indicator and the outline view to position the box. Give the TextLabel widget a name, for example, titleTextLabel.

Figure 10. Adding a TextLabel widget
Adding a TextLabel widget

After dropping the titleTextLabel widget into the titleBox widget, Select the default text, TextLabel, open the Properties view, and change the text property to whatever text you want for your title.

Figure 11. TextLabel widget properties
TextLabel widget properties

Your design canvas should now look as shown in figure 12 below.

Figure 12. Title text design
Title text design

Next, in the same way you added the titleBox and titleTextLabel widgets above, add instructionsBox and instructionsTextLabel widgets. After doing so, your canvas should look like shown below.

Figure 13. Instructions text design
Instructions text design

Now add a Box widget to contain the input area for the user. For this example, give it the name, inputBox.

Figure 14. Adding the input Box widget
Adding the input Box widget

After you add the inputBox widget, in the Properties view change its column property to allow two columns. In the first column add a TextField widget, and name it customerNumberInputTextField. This is the field into which the user enters a customer number on which to search.

Figure 15. Adding the input TextField widget
Adding the input TextField widget

After adding the customerNumberInputTextField widget, add a Button widget in the second column of the inputBox widget and name it, goButton. Use the Properties view to change the text property to the text, Go. Later, you will wire this button to call the HATS web service to search for customer information for the customer number entered into the customerNumberInputTextField widget.

Figure 16. Adding the Button widget
Adding the Button widget

After adding the goButton widget, your canvas should look like the following figure.

Figure 17. Input box design
Input box design

Now in the same way, add another Box widget below the inputBox and name it outputBox. Set the column property for the outputBox widget to two columns.

In the first row of the outputBox widget, add a TextLabel widget and name it statusTextLabel. In the second column of the first row add a TextArea widget and name it statusTextArea. Use the Property view to change the width property of the statusTextArea widget to 147. This area will be used to display progress status and any error messages received from the host application through the HATS web service.

Then, in each following row of the outputBox widget, add TextLabel widgets to the first column and TextField widgets to the second column. Use TextLabel names like, customerNumberTextLabel, firstNameTextLabel, lastNameTextLabel, addressTextLabel, cityStateTextLabel, zipTextLabel. Use similar names for each TextField widget.

You have now created a UI to submit input to and display output from the HATS web service. Later, you will include the call to the HATS web service and wire it to the UI.

Now add one more box to integrate address information from the HATS web service with a map application and display the results. For this case, name the box, mapBox.

When complete, your design canvas should look like the following figure.

Figure 18. Output and map box designs
Output and map box designs

Notice the Outline view, which displays the hierarchy of the widgets included on the canvas. You can use this view, in addition to the Design view, to select any of the widgets in order to change the widget properties.

Figure 19. Outline view
Outline view

Also, notice the Source view. You can use this view to make source code changes to the UI.

Figure 20. UI Source view
UI Source view

Creating the interface to the HATS web service

Now that you have created the UI, the next step is to create the call to the HATS web service and wire it to the UI.

The steps covered are:

  • Import the HATS web service project
  • Copy the HATS WSDL file to the EGL Rich UI project
  • Create the EGL interface to the HATS web service
  • Wire the UI to the HATS web service

Import the HATS web service project

If the HATS web service is running somewhere on a network accessible by your instance of an EGL tooling product, then all you need in your EGL Rich UI project is a copy of the WSDL file that defines the HATS web service.

However, this example describes importing into your EGL tooling product the HATS project used to develop the HATS web service. This lets you use the internal WebSphere Application Server test environment to run the HATS web service so that you can preview your EGL Rich UI application using the same instance of your EGL tooling product.

To import the HATS project contained in a project interchange file, from the menu bar select File > Import. In the Import wizard, expand Other and select Project Interchange. In the Import Project Interchange Contents wizard, browse for the project interchange file, select the HATS project and EAR file, and click Finish.

The HATS project and EAR file now displays in your Project Explorer view.

Copy the HATS WSDL file to the EGL Rich UI project

Before copying the HATS WSDL file, create a new package for it in your EGL Rich UI project. Right-click the EGLSource folder in your project and select New > Package. Give the package a name, for example wsdl, and click Finish.

Using the Project Explorer, expand the HATS web service project and navigate to the \Web Content\WEB-INF\wsdl\ folder. Right-click the WSDL file and select Copy.

Figure 21. Copy HATS WSDL file
Copy HATS WSDL file

Then, right-click the package you just added to the EGL Rich UI project and click Paste.

Create the EGL interface to the HATS web service

Now that you have a copy of the HATS WSDL file in your EGL Rich UI project, you can create the EGL interface to the service. To do this, in the Project Explorer right-click the WSDL file in the wsdl package folder and select EGL Services > Create EGL Client Interface.

Figure 22. Create EGL Client Interface
Create EGL Client Interface

The resulting New EGL Part wizard creates EGL interfaces from definitions in the WSDL file and adds web services client bindings to the EGL deployment descriptor file. Take the defaults by clicking Next and then Finish to end the wizard.

Notice a new package, named webserviceclasses, has been created, and in it is an EGL source file that contains the interface to the web service as described by the WSDL file.

Wire the UI to the HATS web service

When you access a web service from a Rich UI handler the invocation is asynchronous. That is, you call the service and the Rich UI handler continues to run. When the service responds, the callback function in the Rich UI handler is invoked.

This example uses the Go button to call the HATS web service. Start by selecting the Go button in either the Design view or the Outline view. Select the Properties view, click the Events tab, and click Add Event Handler. When prompted, give the function a name, for example getCustomerInfo.

Figure 23. Add Event Handler
Add Event Handler

Now highlight the onClick event for the goButton and from the dropdown list of functions select getCustomerInfo.

Figure 24. Set onClick event function
Set onClick event function

Notice in the Source view the goButton has the onClick event defined, and the getCustomerInfo function has been added.

To complete the function use the source code shown below:

function getCustomerInfo(event Event in)
getCustomerInfo CustomerInfo {@bindService};
		
         inputFromClient CustomerInfo_Input_Properties { accountNumberPrompt 
              = customerNumberInputTextField.text  };
		
         call getCustomerInfo.CustomerInfoProcessWS(inputFromClient) 
              returning to displayResults;
           statusTextArea.text = "working ...";
end

This code sets the input expected by the HATS web service, accountNumberPrompt, to the value contained in the customerNumberInputTextField of the UI and calls the service. A callback function, named displayResults, is referenced (to be defined next), and a progress indication, working…, is displayed in the statusTextArea of the UI.

To correct the unresolved references to the web services package, right-click on the Source view and select Organize Imports.

Now define the callback function using the source code shown below:

function displayResults(retResult CustomerInfo_Output_Properties? in)
       statusTextArea.text = retResult.accountNumberError;
       customerNumberTextField.text = retResult.accountNumber;
       firstnameTextField.text = retResult.firstName;
       lastnameTextField.text = retResult.lastName;		
       addressTextField.text = retResult.address1;
       cityStateTextField.text = retResult.address2;
       zipTextField.text = retResult.address3;	
		
end

This code sets the fields defined in the UI to the appropriate output properties returned by the HATS web service. Organize imports again to correct unresolved references.

You have now completed creating the UI and the call to the HATS web service to display customer information maintained, in this case, in a CICS application on an IBM System z platform.


Integrating with another application

Customer address information is provided by the sample HATS web service. In this example, the address information is used as input to a Yahoo Map program to display a map as part of the UI. This example assumes an EGL Yahoo Map widget is available in your workspace.

Notice the YahooMap widget in the Palette view. Drag an instance of the YahooMap widget and drop it into the mapBox instance of the Box widget. When prompted, give it a name, for example, YahooMap.

Figure 25. Adding the YahooMap widget
Adding the YahooMap widget

After adding the YahooMap widget to the Design view canvas, use the Properties view to change the width property to 300 and the height property to 200.

Then in the Source view, add the code at the end of the displayResults function (as shown below) to call the Yahoo Map program with the customer address supplied by the HATS web service.

function displayResults(retResult CustomerInfo_Output_Properties? in)
       statusTextArea.text = retResult.accountNumberError;
       customerNumberTextField.text = retResult.accountNumber;
       firstnameTextField.text = retResult.firstName;
       lastnameTextField.text = retResult.lastName;		
       addressTextField.text = retResult.address1;
       cityStateTextField.text = retResult.address2;
       zipTextField.text = retResult.address3;	
		
       YahooMap.showLocation(retResult.address1 + ", " 
                                                    + retResult.address2 + 
                                                    ", " + retResult.address3);
       YahooMap.addMarker(retResult.address1 + ", " + retResult.address2 + 
                                                    ", " 
                + retResult.address3, "A", "B", "C");
end

You have now completed your EGL Rich UI application. The Design view canvas should look as shown below.

Figure 26. Completed Design view canvas
Completed Design view canvas

Previewing the application

If the sample HATS web service is running on a network accessible by your instance of an EGL tooling product, then you can begin previewing your EGL Rich UI application at this point.

However, instead of running elsewhere, this example assumes a project containing the sample HATS web service is present in the same workspace as your EGL Rich UI application. In this case, you must start the HATS web service using the internal test environment.

To do this, switch to the Host Access Transformation Services perspective, in the HATS Projects view, right-click the HATS project and select Debug on Server.

By selecting Debug on Server, in addition to running the HATS project on an internal copy of WebSphere Application Server (this example uses WebSphere Application Server V6.1), the HATS display terminal can also be displayed. The HATS display terminal allows you to see host screens as they are navigated while running the HATS project.

Figure 27. Debug HATS project on the server
Debug HATS project on the server

After the project containing the HATS web service is running in the internal test environment, switch back to the EGL Rich UI perspective and click the Preview tab. In the customer number input field, enter a number, for example 10011, and click Go.

Figure 28. Preview request
Preview request

Notice the HATS display terminal as the HATS web service navigates through the host screens. If the display terminal window is minimized, restore it to see the host screen navigation.

Figure 29. HATS display terminal
HATS display terminal

After the web service returns the results, they are displayed in the UI and the Yahoo Map program is called to update the map.

Figure 30. EGL RUI results
EGL RUI results

Also, notice if an error message is returned by the host application, it is displayed in the scrollable status window in the UI.

Figure 31. Host error message
Host error message
Figure 32. Display error message in the UI
Display error message in the UI

Conclusion

Host applications continue to be a significant part of the set of business applications within a company. Rewriting these applications to use up-to-date innovations in business application development and integration can be cost prohibitive. The challenge is to find a cost-effective way to integrate these host applications with other business applications, for example within an SOA environment.

Using EGL Rich UI support provided in IBM’s EGL tooling products; Rational Developer for System z with EGL, Rational Developer for i for SOA Construction, and Rational Business Developer, in combination with web services support provided in Rational HATS, you quickly and easily can meet the challenge of integrating host applications with other business applications in an SOA environment.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into SOA and web services on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=SOA and web services, Rational
ArticleID=428559
ArticleTitle=Use EGL Rich UI and HATS to integrate green-screen applications in your SOA
publish-date=09162009