Comment lines: Reginaldo Barosa: Modernize your CICS applications with SOA and Web 2.0 using Rational tools

Breathe new life into your existing CICS® COBOL applications by using IBM® Rational® Developer and EGL to reuse them in a Web 2.0 application. This simple example shows you how. This content is part of the IBM WebSphere Developer Technical Journal.

Reginaldo Barosa (rbarosa@us.ibm.com), Executive IT Specialist, WSO2 Inc

Author photoReginaldo W. Barosa is an IBM Executive IT Specialist. He provides sales support, helping customers with enterprise modernization solutions and development tools, such as Rational Developer for System z. Before joining IBM U.S. more than ten years ago, Reginaldo worked for 27 years for IBM Brazil. He has co-authored IBM Redbooks and has written two books, as well as other articles and tutorials for IBM developerWorks. He holds a degree in electrical engineering from Instituto Maua de Tecnologia, Sao Paulo, Brazil


developerWorks Professional author
        level

08 April 2009

Everything old can be new again

Many people have been talking about Web 2.0 and many products today have some sort of integration with this new technology. The objective of this article is to show you a simple scenario where you can use IBM® Rational® Developer for System z® with EGL to reuse existing COBOL CICS® code and integrate it into a Web 2.0 application.

About a year ago I wrote a paper called EGL is ready to help you to adopt Web 2.0 in which I showed how you can use the EGL language to write an application using Web 2.0 and Web services. Figure 1 shows one Web page that was coded using EGL.

Figure 1. Web 2.0 application written with EGL
Figure 1. Web 2.0 application written with EGL

As with any other Web 2.0 application, this panel is filled with information extracted from different sources. For example, the maps are extracted from Google, the pictures and houses information are extracted from a service deployed into an application server, and the mortgage calculator service (the one that has the graphic on the right) is extracted from CICS Tranaction Server.

The information extracted from CICS was returned from a CICS Web service deployed into CICS Tranaction Server V3.3 that is running in our mainframe in Texas. This is the piece that I want to discuss here. The CICS service, as well the Web 2.0 client, was created using the Rational tools.


The COBOL CICS application

In this scenario, you have an existing COBOL CICS application that is made up of many COBOL programs and BMS maps. Figure 2 shows part of this application. We are interested in the COBOL program named EPCSMRT that is circled in red in the figure. This is the code that produces the mortgage calculator and is to be turned into a Web service and reused in the Web 2.0 application.

Figure 2. Existing COBOL/CICS/BMS application to be reused
Figure 2. Existing COBOL/CICS/BMS application to be reused

We’ll look at creating the CICS Web service and consuming the service using Web 2.0 separately for easier understanding.

CICS Web service creation

In this part, you need to create the Web service that will later be used in the Web 2.0 application.

  1. Create the CICS services from the COBOL program

    Using IBM Rational Developer for System z (hereafter referred to as Rational Developer), import the program into a Web Services for CICS Project. Figure 3 shows the program used for this example along with the COBOL copybooks loaded into the Rational Developer workspace. You will need to look into the CICS communication area, since this is where you pass and receive the data that will be the input and output messages.

    Figure 3. COBOL copybook that maps the input and output messages
    Figure 3. COBOL copybook that maps the input and output messages

    Using the Rational Developer wizards, you create the WSDL (Web Services Definition Language) and the assets required to turn this COBOL/CICS program into a CICS Web service. This is an easy activity. Figure 4 shows the graphical representation of the WSDL generated by Rational Developer. SIDE BAR (Several developerWorks tutorials demonstrate how this can be easily done; for example, Wrap existing COBOL programs as Web Services with IBM Rational Developer for System z explains how to perform to create, deploy, and test a CICS SOAP Web service using Rational Developer for System z from existing COBOL code.)

    Figure 4. WSDL that define the CICS Web service
    Figure 4. WSDL that define the CICS Web service
  2. Deploy and test the generated CICS services

    Also using Rational Developer, deploy the generated code to CICS V3.3. Even the new resources that need to be configured in CICS can be configured using the latest version of Rational Developer (Version 7.5). An easy to use CICS Explorer perspective makes this task very simple.

    After creating the CICS resources and compiling them on z/OS, you should test the CICS service that was created. Again, using Rational Developer, you can use the Web Service Explorer dialog. Using a Web browser for an interface, you can perform a simple test to be sure this CICS service is running well. Figure 5 shows an example of this wizard dialog. (In this example, the CICS service is deployed into a mainframe that is listening on port 9046.)

    Figure 5. Using Web Service Explorer to test the CICS service
    Figure 5. Using Web Service Explorer to test the CICS service

At this point, you are finished with Part 1 of the scenario: you have created and deployed a CICS service using Rational Developer. You are now ready to create the user interface using Rich User Interface (RUI) components that will invoke the CICS services you created.

Consume the Web service using Web 2.0

With EGL Version 7.5.1, you have the capability to generate JavaScript that leverages Web 2.0 technology. EGL Rich UI is a new technology for writing applications that will be deployed on Web servers. The technology builds on an idea central to EGL: create simple code which is automatically converted to output that is useful for running a business. The output in this case is client-side JavaScript -- called "client-side" because the JavaScript runs in the browser, not on the remote machine that serves the Web page.

Client-side JavaScript is important because it makes the Web page more responsive, providing greater flexibility so that the user experience can go beyond receiving and submitting a page. After the user clicks a radio button, for example, the logic might respond by changing the content of a text box. The change occurs quickly because the JavaScript runs locally and, in most cases, redraws only one area of the page.

An extension of client-side JavaScript is Ajax (Asynchronous JavaScript and XML), a technology that permits the run time invocation of remote code and the subsequent update of a portion of a Web page, even as the user continues working elsewhere on the page. After the user selects a purchase order from a list box, for example, the JavaScript logic might request transmission of order item details from the remote Web server and then place those details in a table that is displayed to the user. In this way, the application can access content from the server but can save time by selecting -- at run time -- which content is transmitted.

You can write Rich UI applications using EGL syntax. For advanced purposes, however, you can write custom JavaScript or use JavaScript libraries, rather than rely on the default behavior provided by EGL. For example, you can use Rich UI to access the Dojo Toolkit or Microsoft® Silverlight™.

Creating the Rich UI components using EGL

Using Rational Developer for System z with EGL, you can create a Rich UI EGL project and using some provided components, you can create a simple widget, as shown in Figure 6. All this EGL code (also shown in the figure) is automatically generated by just dragging and dropping the visual components.

If you are interested in an example how those components can be visually created using EGL wizards, you find many examples in the EGL Cafe. A very simple step by step example can be found at Building Web 2.0 application using EGL 7.5.1 - Step by Step.

Figure 6. Rich UI components created with EGL, along with generated EGL code
Figure 6. Rich UI components created with EGL, along with generated EGL code

Creating the EGL code to consume the CICS service

Service invocation in Rich UI is always asynchronous, which means that the requester (the Rich UI client) continues running without waiting for a response from the service. The user can still interact with the user interface while the Rich UI handler waits for the service to respond. After the invocation, the service does some task and, in most cases, responds to the EGL runtime, which, in turn, invokes a Rich UI function that you code, called a callback function.

To invoke a service from Rich UI, create an EGL interface part that includes properties indicating how the service is accessed at run time. You then create a variable based on the interface part and use the variable in a call statement. The call statement includes the details necessary for the EGL runtime to issue a callback.

Again using Rational Developer with EGL, from the generated WSDL you can create an EGL interface that invokes the CICS service. Figure 7 shows how this wizard is started.

Figure 7. Creati an EGL interface from WSDL
Figure 7. Create an EGL interface from WSDL

The generated EGL from the above dialog is shown in Listing 1.

Listing 1
package files.target;

//@webBinding{wsdlLocation="EPSCSMR.wsdl", wsdlPort = "EPSCSMRPort", 
	wsdlService = "EPSCSMRTService"}

interface EPSCSMRPortType{@xml {name="EPSCSMRPortType", 
	namespace="file://target.files"}}

	function EPSCSMRTOperation 
  (DFHCOMMAREA com.EPSCSMRTI.www.schemas.EPSCSMRTIInterface.DFHCOMMAREA
       in)
      returns(com.EPSCSMRTO.www.schemas.EPSCSMRTOInterface.DFHCOMMAREA)
       {@xml {name="EPSCSMRTOperation"}};
end

Complete the EGL Rich UI code to invoke the CICS Service

You still need to associate an event on the Rich UI that will invoke the CICS service. In our scenario, you can associate the Rich UI button with the service invocation. When the button is clicked, the EGL code will invoke the CICS service.

In our scenario, this was done using an EGL function called onClick. Under the function onClick, we defined a variable named cicsService that binds to the CICS service and the port, we assigned data from Rich UI to the EGL record passed as an input message, and we called the CICS service.

This is an asynchronous call and when the service returns without errors, the function displayResults_cics will be run. When the service returns an exception, another function called displayResultsCICSException will be run (Figures 8 and 9).

Figure 8. EGL code to invoke the service
Figure 8. EGL code to invoke the service and process the results
Figure 9. EGL code to process the results
Figure 9. EGL code to invoke the service and process the results

Testing the Rich UI application

The code is now ready to be tested and Figure 10 shows the testing of this EGL Rich UI code. The user entered values for the Amount, the Term in number of months, and the interest rate, and clicked the button. The CICS service was invoked and the results displayed.

Figure 10. Testing the Rich UI widget
Figure 10. Testing the Rich UI widget

You will probably be impressed at how fast the data is retrieved.

By adding the code below to the EGL Rich UI handler, you would have a screen that monitors the Web service invocation:

// Create service monitor
monitor tools.ServiceMonitor{};

Figure 11 shows this screen monitor. You might notice that we had 187 milliseconds of response time to invoke and get a response from the CICS Web service. Really impressive, the way "sub second" response time used to be with the old fashion "green screen" systems.

Figure 11. Measuring the response time
Figure 11. Measuring the response time

This EGL code can be turned into a widget and then used as a Rich UI component. In our complete mortgage application, this component was one of the Web services that was leveraged (see the right corner of Figure 1). It’s also very easy to create graphics (like a pie chart) to better illustrate, for example, how much interest the customer will pay, depending on the number of years.

Notice also that we did not use any application server at the client side to invoke this service, Rational Developer with EGL provides proxies that help the service invocations at the test level. When this code is deployed for production, it would likely be installed in an application server, such as IBM WebSphere Application Server.


What are the benefits?

Not long ago, I gave a presentation on EGL with Web 2.0 in Brazil at a Rational conference. I demoed the Web 2.0 mortgage application described in this article and constructed some other Web components as well. A young programmer cornered me to say, "I can do that with Ajax as fast as you did it with EGL." I asked him, "How well do you know Ajax?" He replied, "Very well." So I said, "Well, without knowing any Ajax, I was able to create the same Rich UI components that you can with Ajax -- and just as fast as you -- with EGL! "

It was a good day.

Today, we have Ajax, DOJO, Silverlight, and more, and by using EGL, you can leverage those technologies without having to directly code them.

Here are some of the benefits of using EGL rather than these low level implementations:

  • Reduce development costs, accelerate time to market (due to higher productivity and greater simplicity), and deliver higher quality new Web 2.0 based business solutions in rich Internet-style applications.
  • Very good performance, rich Web end-user interface.
  • Shorter learning curve and training costs; you only need to learn one language (EGL) to build both back-end business logic and services, and to build and front-end user interfaces.
  • Cross-browser support (write once, but run in the most popular browsers).
  • Extend the value and the life of reliable business logic contained in System z and System i applications to run transactional services within innovative applications that significantly improve user experience and productivity.
  • Seamlessly integrate enterprise information and processes with other sources of information, or with services across the enterprise (or Web) to better serve users, customers, and partners (mashups).
  • Leverage emerging SOA-based industry-vertical services provided by vendors or through free or fee powerful services (for example, Google Maps, Xignite, and so on).
  • Lower the skills barrier and leverage traditional business-oriented developers while delivering innovative and powerful state-of-the-art solutions to the business.

Resources

Learn

Get products and technologies

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. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. 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 WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Rational, Web development
ArticleID=380561
ArticleTitle=Comment lines: Reginaldo Barosa: Modernize your CICS applications with SOA and Web 2.0 using Rational tools
publish-date=04082009