内容


利用 EGL Rich UI 和 HATS 将绿屏应用程序集成到 SOA

概述如何利用 EGL Rich UI 调用 HATS Web 服务并将其与其他业务应用程序相集成

挑战

主机应用程序一直是公司内部业务应用程序的一个重要部分。为了在业务应用程序开发和集成中使用创新技术而重写这些应用程序,这样做的成本太高,以致不太可能。因此,这里所面临的一个挑战是要找到一种经济高效的方式来在一个 SOA 环境中集成主机应用程序与其他的业务应用程序。

解决方案

IBM Enterprise Modernization 解决方案可以帮助组织以最划算的方式将核心 IT 系统逐渐地发展为现代的架构,维护负担因新技术的采用逐渐减少,并能释放更多的资源来集中开发新的业务需求和能力。

包括在这些 IBM Enterprise Modernization 解决方案中的是 IBM 的 EGL 工具类产品;Rational Developer for System z with EGL、Rational Developer for i for SOA Construction 和 Rational Business Developer,以及 Rational HATS。使用这些解决方案,您将可以快速而轻松地应对在一个 SOA 环境中集成主机应用程序与其他业务应用程序的上述挑战。

在比较高的级别,为了在 SOA 环境中集成一个主机应用程序需要采取两个步骤。第一个步骤是创建一个到主机应用程序的 Web 服务接口。第二个步骤是创建一个 Web 应用程序来调用 Web 服务,并将它的输入和输出与其他业务应用程序相集成。

对于第一个步骤,可以使用 HATS 创建这个 Web 服务接口来将主机应用程序内的业务逻辑和事务对 SOA 环境公开。借助 HATS,就可以开发这些 Web 服务来访问运行在 IBM System z 平台上的 3270 主机应用程序、运行在 IBM i 平台上的 5250 主机应用程序以及虚拟终端 (VT) 应用程序。

例如,下图展示了一个运行在 IBM System z 平台上的 3270 CICS 应用程序的一个主机屏幕。这个屏幕显示了按帐号访问的信用卡的信息。对于本文,HATS 被用来创建一个 Web 服务,该服务能接受帐号作为输入、驱动 CICS 事务并返回帐号信息作为输出,比如姓名、地址和信用卡信息。

图 1. 主机应用程序屏幕
主机应用程序屏幕
主机应用程序屏幕

对于第二个步骤,可以使用在 EGL 工具类产品中提供的 EGL Rich UI 支持开发一个 Web 应用程序,从而提供所需的 UI、调用 HATS Web 服务、显示结果并将这些结果与其他应用程序相集成。

如下的图 2 显示了针对本文开发的 UI,并在一个移动设备上显示。这个 UI 包括了一个用来输入帐号的区域、一个用来显示 HATS Web 服务特定输出的区域。此外,来自 HATS Web 服务的地址信息被用作 Yahoo 地图应用程序的输入。

图 2. Web 浏览器设备上的 EGL Rich UI HATS 应用程序
Web 浏览器设备上的 EGL Rich UI HATS 应用程序
Web 浏览器设备上的 EGL Rich UI HATS 应用程序

下图提供了本文中所建议的解决方案的一个架构概览。一个 Web 浏览器给出了 EGL Rich UI 应用程序的 URL 地址,这个 URL 在开发时以 HTML 和 JavaScript 的形式生成并由 Web 应用服务器提供。EGL Rich UI 应用程序使用 Ajax JavaScript 调用来调用 SOAP 服务以便通过运行在 EGL Rich UI 服务器上的一个代理与 HATS Web 服务应用程序通信。HATS Web 服务应用程序使用适当的主机协议,比如 TN3270 或 TN5250,与这个主机应用程序通信。虽然此图显示了 EGL Rich UI 服务器、HATS 以及运行在不同系统上的主机应用程序,但是它们全部都可以运行在相同的系统上或不同的系统组合上。EGL Rich UI 应用程序可以在简单的 HTTP Web 服务器上运行,但是在这种情况下,将不能支持对服务(比如 Web 服务)的访问。

图 3. 架构概览
架构概览
架构概览

有关如何开发 HATS Web 服务的更多信息,请参阅文章 Integrate Green-screen Applications in your SOA: Using Rational Host Access Transformation Services (HATS)

本文接下来的部分将会讨论如何使用 EGL Rich UI 支持来轻松而快速地创建一个 Web 应用程序,用这个 Web 应用程序调用 HATS Web 服务并将 HATS Web 服务的输出与其他应用程序相集成。

关键术语

与 EGL Rich UI 支持有关的基本术语和概念有:

  • EGL handler part – 一个处理程序部分提供了针对 UI 结构(比如 Web 页面或打印机)的数据和回调函数。可以将此处理程序部分内的信息绑定到 UI 内的变量,并将处理程序函数与在此 UI 内发生的其他事件关联起来。
  • EGL package – EGL 包是相关资源部分的指定集合。EGL 包类似于文件夹或目录。

EGL Rich UI 实现概览

用 EGL 可以快速创建 Web 服务和轻松编写 Web 应用程序,后者可以提供访问 Web 服务的 UI。EGL Rich UI 是一种技术,可用来开发运行在浏览器内的 Web 2.0 风格的富应用程序。本文介绍了编写一个 EGL Rich UI Web 应用程序所涉及的步骤,这个应用程序能提供 UI 来调用 HATS Web 服务并将结果输出与其他 Web 应用程序相集成。

所涵盖的步骤包括:

  • 创建一个 EGL Rich UI 项目
  • 创建一个 EGL Rich UI 处理程序部分
  • 开发这个 UI
  • 创建一个对 HATS Web 服务的接口
  • 与其他应用程序集成
  • 预览此应用程序

创建一个 EGL Rich UI 项目

在 EGL 工具类产品内,EGL Rich UI 的开发按项目分类。从一个项目,您可以生成一个可被部署并运行在 WebSphere Application Server、Apache Tomcat 或 HTTP 服务器上的应用程序。部署到 HTTP 服务器的 EGL Rich UI 应用程序并不支持对诸如 Web 服务这类服务的访问。

要创建一个 EGL Rich 项目,可以在 EGL Rich UI 透视图内,从菜单栏选择 File > New > Project,并在 New Project 向导中展开 EGL 并选择 EGL Project。在 New EGL Project 向导中提供项目名称,比如 CustomerInfoEGL,选择 Rich UI Project 单选按钮,并单击 Finish

下图显示了在 Project Explorer 内新创建的这个 EGL Rich UI 项目。

图 4. EGL Rich UI 项目
EGL Rich UI 项目
EGL Rich UI 项目

创建一个 EGL Rich UI 处理程序部分

EGL 用处理程序部分提供 UI,并将此 UI 绑定到从此 UI 中调用并返回给此 UI 的那些事件。

要创建一个 EGL Rich UI 处理程序(RUI 处理程序)部分,首先创建一个包,方法是右键单击项目中的 EGLSource 文件夹并选择 New > Package。为这个包提供一个名称,比如 customerInfoPackage,并单击 Finish

接下来,右键单击这个包并选择 New > Rich UI Handler。为这个 Rich UI 处理程序部分提供一个名称,比如 CustomerInfoRUI,并单击 Finish

请注意,在图 5 中的 Project Explorer 下,文件 CustomerInfoRUI.egl 位于 customerInfoPackage 下。此文件在 EGL Rich UI 编辑器内打开。

图 5. EGL Rich UI 处理程序部分
EGL Rich UI 处理程序部分
EGL Rich UI 处理程序部分

开发 UI

默认地,RUI 处理程序通过 EGL Rich UI 编辑器编辑。请注意在上图内,这个编辑器具有针对三个视图 Design、Source 和 Preview 的选项卡。您可以使用具有小部件的 Design 视图可视化地开发 UI。通过 Source 视图,可输入源代码来开发 UI 及其他在 RUI 处理程序下运行的函数。用 Preview 视图则可运行 RUI 处理程序并预览结果。

在开发 UI 时一种好的做法是使用层叠样式表(CSS 文件)。CSS 文件的使用能帮助您维护所有 UI 外观的一致性并允许您在一个单一位置进行全局的样式更改。本例使用的是默认的 EGL Rich UI CSS 文件。在开发您自己的 UI 时,可以使用一个 CSS 文件来提供与您创建的或您公司应用程序已有的其他 UI 一致的外观。

在为您的 RUI 处理程序开发 UI 时,另一个好的做法是使用 Box 小部件来组织 UI 的各个区域。这个 Box 小部件具有自己的一组属性。所以,使用多个 Box 小部件,就能够定义具有不同属性的 UI 区域。

正如下面的图 6 所示,通过从 palette 选择 Box 小部件并将它拖到 Design 视图 canvas 来创建您的 UI。

图 6. EGL RUI 编辑器的 Design 视图
EGL RUI 编辑器的 Design 视图
EGL RUI 编辑器的 Design 视图

在将 Box 小部件放入到这个 canvas 时,系统会提示您,为这个 Box 小部件的实例提供一个名称。在本例中,您将使用一个 box 来在您的 UI 中包含所有其他的 box。所以要给它起一个有意义的名字,比如 mainBox。

图 7. 变量名对话框
变量名对话框
变量名对话框

在 Design 视图中选中了 mainBox 小部件之后,转到 Properties 视图并将列的属性设置为 1。这将确保向这个 UI 添加的所有区域都将被垂直地组织到一个列内。

图 8. Box 小部件属性
Box 小部件属性

接下来,开始将这些 Box 小部件添加到 mainBox 小部件内。在将新的小部件拖到这个 canvas 上时,编辑器会提供一个可视的指示器(一个绿色的区域颜色)以及一个 outline 视图以帮助将这个小部件放在理想的位置。如果将小部件放在错误的位置,也不要担心,可以很容易地将它拖到正确的位置。

下图显示了这个新的 Box 小部件被放到 mainBox 小部件之内。

图 9. 添加一个 Box 小部件
添加一个 Box 小部件
添加一个 Box 小部件

使用这个新的 Box 小部件来包含一个页面标题。在系统提示时,要给这个 Box 小部件起一个合适的名字,比如 titleBox。

现在,将一个 TextLabel 小部件添加到这个 titleBox 小部件内来提供标题文本。同样地,使用这个绿色的可视指示器以及 outline 视图来定位这个 box。为这个 TextLabel 小部件提供一个名称,比如 titleTextLabel。

图 10. 添加一个 TextLabel 小部件
添加一个 TextLabel 小部件
添加一个 TextLabel 小部件

将这个 titleTextLabel 小部件放入到 titleBox 小部件后,选择默认文本 TextLabel,打开 Properties 视图并将文本属性更改为任何想要的标题文本。

图 11. TextLabel 小部件属性
TextLabel 小部件属性

这时的设计 canvas 应如下面的图 12 所示。

图 12. 标题文本设计
标题文本设计
标题文本设计

接下来,以同样的方式,添加上述的 titleBox 和 titleTextLabel 小部件,再添加 instructionsBox 和 instructionsTextLabel 小部件。如此操作之后,canvas 应该如下所示。

图 13. 指令文本设计
指令文本设计
指令文本设计

现在,添加一个包含用户输入区的 Box 小部件。在本例中,给它提供一个名称 inputBox。

图 14. 添加一个输入 Box 小部件
添加一个输入 Box 小部件
添加一个输入 Box 小部件

在添加了 inputBox 小部件后,在 Properties 视图内,将列属性更改为允许两个列。在第一个列内,添加一个 TextField 小部件,并将它命名为 customerNumberInputTextField。用户就是在这个字段内输入客户号,并按此进行搜索。

图 15. 添加一个输入 TextField 小部件
添加一个输入 TextField 小部件
添加一个输入 TextField 小部件

在添加了 customerNumberInputTextField 小部件后,在 inputBox 小部件的第二个列添加一个 Button 小部件并将之命名为 goButton。使用 Properties 视图将文本属性更改为文本 Go。之后,用这个按钮调用 HATS Web 服务来按输入到 customerNumberInputTextField 小部件内的客户号搜索客户信息。

图 16. 添加 Button 小部件
添加 Button 小部件
添加 Button 小部件

在添加了 goButton 小部件后,canvas 应类似下图。

图 17. 输入框设计
输入框设计
输入框设计

现在,以同样的方式,在 inputBox 下面,添加另一个 Box 小部件并将它命名为 outputBox。将 outputBox 小部件的列属性设置为两列。

在 outputBox 小部件的第一行,添加一个 TextLabel 小部件并将其命名为 statusTextLabel。在第一行的第二列,添加一个 TextArea 小部件并将其命名为 statusTextArea。使用 Property 视图将 statusTextArea 小部件的宽度属性更改为 147。这个区域将被用来显示进展状态以及通过 HATS Web 服务从主机应用程序接收的所有错误消息。

之后,在 outputBox 小部件下面的这些行,将 TextLabel 小部件添加到第一列,将 TextField 小部件添加到第二列。使用 TextLabel 名称,比如 customerNumberTextLabel、firstNameTextLabel、lastNameTextLabel、addressTextLabel、cityStateTextLabel、zipTextLabel。为每个 TextField 小部件使用类似的名字。

现在,创建一个 UI 来向 HATS Web 服务提交输入并显示来自 HATS Web 服务的输出。之后,我们将把对 HATS Web 服务的调用包括进来并将其连到这个 UI。

现在,添加另一个 box 以便将来自 HATS Web 服务的地址信息与一个地图应用程序相集成并显示结果。在本例中,将这个框命名为 mapBox。

完成后,设计 canvas 应如下图所示。

图 18. 输出和地图框设计
HATS Web
HATS Web

请注意 Outline 视图,它显示了在 canvas 上所包含的这些小部件的等级结构。除 Design 视图外,使用这个视图可以选择任何一个小部件来更改这个小部件的属性。

图 19. Outline 视图
Outline 视图
Outline 视图

也请注意这个 Source 视图。可以使用这个视图对此 UI 进行源代码更改。

图 20. UI Source 视图
UI Source 视图
UI Source 视图

创建对 HATS Web 服务的接口

至此,创建好 UI 后,下一个步骤是创建对 HATS Web 服务的调用并将它连到 UI。

这些步骤包括:

  • 导入 HATS Web 服务项目
  • 将 HATS WSDL 文件复制到 EGL Rich UI 项目
  • 创建对 HATS Web 服务的 EGL 接口
  • 将 UI 与 HATS Web 服务相联

导入 HATS Web 服务项目

如果 HATS Web 服务运行在可由 EGL 工具类产品的实例访问的一个网络上,那么 EGL Rich UI 项目中所需的全部内容就是用来定义这个 HATS Web 服务的 WSDL 文件的一个副本。

然而,本例介绍了如何向 EGL 工具类产品导入用来开发 HATS Web 服务的这个 HATS 项目。这样一来,您就可以使用内部的 WebSphere Application Server 测试环境来运行这个 HATS Web 服务,以便可以用 EGL 工具类产品的同一个实例来预览 EGL Rich UI 应用程序。

要导入在一个项目互换文件中包含的 HATS 项目,从菜单栏选择 File > Import。在 Import 向导中,展开 Other 并选择 Project Interchange。在 Import Project Interchange Contents 向导中,浏览查找这个项目交换文件,选择 HATS 项目及 EAR 文件,并单击 Finish

HATS 项目和 EAR 文件现在显示在 Project Explorer 视图中。

将 HATS WSDL 文件复制到 EGL Rich UI 项目

在复制 HATS WSDL 文件前,先在 EGL Rich UI 项目中为这个文件创建一个新的包。右键单击项目中的 EGLSource 文件夹并选择 New > Package。为此包提供一个名称,例如 wsdl,然后单击 Finish

利用 Project Explorer,展开 HATS Web 服务项目并导航到 \Web Content\WEB-INF\wsdl\ 文件夹。右键单击 WSDL 文件并选择 Copy。

图 21. 复制 HATS WSDL 文件
复制 HATS WSDL 文件
复制 HATS WSDL 文件

然后右键单击刚才添加到 EGL Rich UI 项目中的这个包并单击 Paste

创建 HATS Web 服务的 EGL 接口

在 EGL Rich UI 项目中有了 HATS WSDL 文件的一个副本后,就可以创建对这个服务的 EGL 接口了。要创建这个 EGL 接口,在 Project Explorer 中右键单击 wsdl 包文件夹中的 WSDL 文件并选择 EGL Services > Create EGL Client Interface

图 22. 创建 EGL Client Interface
创建 EGL Client Interface
创建 EGL Client Interface

随之出现的 New EGL Part 向导根据 WSDL 文件内的定义创建 EGL 接口并将 Web 服务客户机绑定添加到 EGL 部署描述符文件。接受默认设置,单击 Next,然后再单击 Finish 以结束这个向导。

您可能已经注意到新生成了一个名为 webserviceclasses 的包,并且这个包内有一个 EGL 源文件,其内包含着 WSDL 文件所描述的对 Web 服务的接口。

将 UI 连到 HATS Web 服务

在从一个 Rich UI 处理程序访问 Web 服务时,调用是异步的。这就是说,在调用此服务时,这个 Rich UI 处理程序还会继续运行。当此服务响应时,这个 Rich UI 处理程序中的回调函数将被调用。

本例使用 Go 按钮来调用 HATS Web 服务。首先,选择 Design 视图或 Outline 视图中的 Go 按钮。然后选择 Properties 视图,单击 Events 选项卡,单击 Add Event Handler。在出现提示时,给这个函数提供一个名称,例如:getCustomerInfo。

图 23. 添加 Event Handler
添加 Event Handler
添加 Event Handler

现在突出显示 goButton 的 onClick 事件,并从下拉函数列表中选择 getCustomerInfo。

图 24. 设置 onClick 事件函数
设置 onClick 事件函数
设置 onClick 事件函数

请注意,在这时的 Source 视图中,goButton 的 onClick 事件已经定义好并且已经添加了 getCustomerInfo 函数。

要完成这个函数,可以使用如下所示的源代码:

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

上述代码将 HATS Web 服务所期望的输入 accountNumberPrompt 设定为在此 UI 的 customerNumberInputTextField 内所包含的那个值,并调用这个服务。此外,还引用了一个名为 displayResults 的回调函数(将在下面定义),而且在 UI 的 statusTextArea 中还会显示出一个进度指示 working…。

要改正 Web 服务包中的未解析的引用,可以右键单击 Source 视图并选择 Organize Imports

现在,用如下所示的代码来定义这个回调函数:

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

上述代码将 UI 中定义的字段设定为由 HATS Web 服务返回的适当的输出属性。再次组织导入以纠正未解析的引用。

至此,我们就完成了 UI 的创建及对 HATS Web 服务的调用以显示所维护的客户信息,在本例中,即为运行于 IBM System z 平台上的一个 CICS 应用程序。

与其他应用程序相集成

客户地址信息由示例 HATS Web 服务提供。在本例中,地址信息被用做 Yahoo Map 程序的输入以便作为 UI 的一部分来显示一个地图。这个示例假设工作空间中已经有一个可用的 EGL Yahoo Map 小部件。

请注意 Palette 视图中的这个 YahooMap 小部件。将 YahooMap 小部件的一个实例拖入 Box 小部件的 mapBox 实例中。当出现提示时,给它起个名字,例如:YahooMap。

图 25. 添加 YahooMap 小部件
添加 YahooMap 小部件
添加 YahooMap 小部件

在向 Design 视图 canvas 中添加完 YahooMap 小部件后,用 Properties 视图将宽度属性改为 300、将高度属性改为 200。

然后在 Source 视图中,将如下代码添加到 displayResults 函数(如下所示)的末端以便用 HATS Web 服务所提供的用户地址调用这个 Yahoo Map 程序。

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

至此,这个 EGL Rich UI 应用程序就完成了。Design 视图 canvas 应如下所示。

图 26. 完成后的 Design 视图 canvas
完成后的 Design 视图 canvas
完成后的 Design 视图 canvas

预览应用程序

如果示例 HATS Web 服务运行于一个可被 EGL 工具类产品实例访问的网络,那么,此时,就可以开始预览这个 EGL Rich UI 应用程序了。

本例假设包含示例 HATS Web 服务的这个项目与 EGL Rich UI 应用程序同处在相同的工作区,所以程序无需在别处运行。在本例中,必须使用内部测试环境来启动 HATS Web 服务。

要完成这个操作,请切换到 Host Access Transformation Services 透视图,在 HATS Projects 视图中右键单击 HATS 项目并选择 Debug on Server

通过选择 Debug on Server,除了在 WebSphere Application Server(本例使用的是 WebSphere Application Server V6.1)的一个内部副本上运行这个 HATS 项目外,还会显示 HATS 显示终端。通过这个 HATS 显示终端,可以看到主机屏幕,因为这些主机屏幕在运行这个 HATS 项目时就被导航了。

图 27. 在服务器上调试 HATS 项目
在服务器上调试 HATS 项目
在服务器上调试 HATS 项目

在包含了 HATS Web 服务的这个项目运行在内部测试环境后,切换回 EGL Rich UI 透视图并单击 Preview 选项卡。在客户号输入字段中键入一个数字,例如 10011,然后单击 Go

图 28. 预览请求
预览请求

请留意随着 HATS Web 服务导航主机屏幕时的这个 HATS 显示终端。如果显示终端窗口被最小化,就恢复这个窗口以便能看到主机屏幕导航。

图 29. HATS 显示终端
HATS 显示终端
HATS 显示终端

在 Web 服务返回结果后,这些结果会被显示在 UI 内,而且还会调用 Yahoo Map 程序来更新地图。

图 30. EGL RUI 结果
EGL RUI 结果
EGL RUI 结果

并且,请注意,如果错误消息由主机应用程序返回,它就会被显示在这个 UI 的可滚动状态窗口中。

图 31. 主机错误消息
主机错误消息
主机错误消息
图 32. 在 UI 内显示错误消息
在 UI 内显示错误消息
在 UI 内显示错误消息

结束语

主机应用程序一直是公司业务应用程序的一个重要部分。为了在业务应用程序开发和集成中使用创新技术而重写这些应用程序,这样做的成本太高,以致不太可能。因此,这里所面临的一个挑战是要找到一种经济高效的方式来在一个 SOA 环境中集成主机应用程序与其他的业务应用程序。

使用由 IBM 的 EGL 工具类产品提供的 EGL Rich UI 支持;Rational Developer for System z with EGL、Rational Developer for i for SOA Construction 以及 Rational Business Developer,连同在 Rational HATS 内提供的 Web 服务支持,您可以快速而轻松地应对在一个 SOA 环境中集成主机应用程序与其他业务应用程序时遇到的上述挑战。


相关主题

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=SOA and web services, Rational
ArticleID=466908
ArticleTitle=利用 EGL Rich UI 和 HATS 将绿屏应用程序集成到 SOA
publish-date=02082010