Issuu on Google+

信息工程期刊

第2卷 第1期 2012 年 2 月

Scientific Journal of Information Engineering(SJIE)

Vol.2 No.1 Feb. 2012

一种 web 服务定制框架 韩昊,杨捷,尚楚涵 华南理工大学 软件学院,广东 广州 510006

要:本文介绍了一个Web服务自动生成和布局的方法。我们提出了一个web 服务的应用定制平台,创建了一个新的UI布

局算法以及相应的UI布局标记语言。移动用户可以基于自定义的UI风格自动生成网络服务界面并使用Web服务。我们提供了该 转换算法的部分源码,以及进行性能测试的服务构建时间对比表,通过测试,该方法用于转换WEB服务后效率提高了一倍左右, 较为理想。该服务主要被移动平台使用并能自动生成服务界面,具有灵活、友好,互操作性强的优点。下一步工作时应用到不 同手机平台,提高自适应性。

关键词: web serbice;自动定制;UI 布局标记语言

Web Service Automatically Layout Generation Method Hao Han, Jie Yang, Chuhan Shang South China University of Technology School of software, Guangzhou, 51006, China

Abstract: This paper introduces an application customization platform by which users can package internet information resources as web services. The platform also creates a new UI layout markup language as well as an UI layout algorithm. The mobile client generates web services UI automatically based on user-defined UI layout style, and run the web services. The test tables with some source code are offered in the paper. The method is proved to be valid in enhancing the web service. The service is applied mainly on the mobile platform and can create the interface. The future work is to invent product on various mobile phone platform.

Key words: Web service; Customization; UI layout markup language

引言 一般只是作为 SOA 的实现方式的 Web services,建立可互操作的分布式应用程序的新平台,可以消除企业系统 之间的差异。但利用 web 服务不仅能满足企业级应用的需要,还可用于互联网信息资源整合。数据挖掘领域对 Web 信息抽取的表现形式为封装器 [1]。封装器需要用户自定义抽取规则,而图形界面则可以辅助用户定义这些规则。文 献[2]提出了基于浏览器的数据抽取方式,用户直接在浏览器中对目标 HTML 文档操作。一种支持 Web 信息资源服 务化的标记语言及其软件工具在[3]中提出,该工具生成的封装器是 Web 服务。这种服务化工具面向的用户必须是 具备一定编程基础的相关人员,且服务定制工作离不开其他集成开发环境如 eclipse 的支持。Web 服务目前被广泛 应用在企业级环境下,以消除企业系统之间的差异。越来越多的用户离不开手机等移动设备,文献[4]介绍了 web 服务在移动设备上的应用,但由于 web 服务是基于 HTTP 的一种服务,只存在服务调用和数据返回,因此移动设备 上需要有 GUI 的支持,以增强实用性、创造更好的用户体验。一种自适应的 web 服务用户界面生成框架在文献[5] 中提出,该框架首先根据输入规范和设备特点生成显示偏好和约束,然后调用一个决策算法生成最优化 GUI 布局, 以满足所有显示约束和最大化的偏好值。但是该框架要求服务设计者在编写 web 服务的同时要设计一个 WS 规格文 档,所以不能有效兼容已存在的 web 服务。 基于以上分析,我们为普通的互联网用户提出一个完整的基于 web 服 务的应用程序自定制及部署平台,平台主要实现的功能有:提供服务定制网站,定义 HTML 数据抽取规则,通过 抽取规则及目标网页细节自动生成 web 服务代码及 WSDL 文档,手机客户端可对服务器端运行的 web 服务进行搜 索定制后,自动生成服务操作界面,完成应用程序定制功能。 www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD -5-


Scientific Journal of Information Engineering (SJIE)

1 问题解决策略及实现方法 1.1 服务定制模型 为了记录 web 服务自动生成时所需要的参数及各项属性,这里引入服务定制模型用来记录用户进行 web 服务 定制过程中生成的各种信息。服务定制模型定义为六组 CM=(INP,OUTP,XT ,OP, CONF,UI),INP 代表服 务输入操作所在页面的详细信息,OUTP 代表服务输出所在的页面的详细信息。INP 和 OUTP 在结构上相同,包括 了页面的 URL,请求方法等参数。XT 为 XPATH 变量集合,集合中每一个元素对应了输出页面 HTML 的 DOM 树 中用户选中的每一个信息节点的路径。OP 代表了服务的操作,包扩输入操作中输入参数的类型,以及服务输出的 数据类型。CONF 包含了服务的配置信息。

1.2 服务定制网 在整个平台中,服务定制网是应用程序定制的起点。用户在这个网站中提交自己感兴趣的 web 信息资源所在网 页的 URL,URL 包含目标链接或基于 HTML 表单的动态网页操作,如在线词典、车次查询等。服务器端的 web 代 理程序通过 HTTP 请求得到原始的目标 HTML 文档,并嵌入 AJAX 动态交互代码作为响应页面返回给用户,输入 页面的相关信息存储在 INP 中。用户可以利用鼠标轻松框选目标表单或链接。在表单中输入适当的参数并提交后, web 代理再次请求响应 HTML 文档,并同样加入动态交互代码,用户可以点击感兴趣的信息点。输出页面的信息 存储在 OUTP 中。整个过程中,后台程序会全程记录用户的操作情况,并进行数据抽取规则定义。

1.3 输入输出页面 输入页面交互:用户对输入页面用鼠标框选感兴趣的表单或链接控件(本系统使用 javascript 框选模型识别用 户选中的控件)。进行坐标匹配后,如果某表单被用户选中,则提取当前表单的相关参数和操作信息,并分别存入 服务定制模型中的 INP 和 OP 中。 输出页面交互:提供基于鼠标点击的动态交互功能,用户对感兴趣的数据项用鼠标点击,利用 AJAX 将用户点 击的 DOM 节点的 XPATH 表达式存入服务定制模型中的 XT 中。上述操作完成后,抽取规则定义完成。

1.4

UI 布局标记语言 为了存储客户端自动生成界面所需要的各项数据,我们提出一种基于 XML 文法的 UI 布局标记语言,使用该

语言编写的 XML 文档被称为 UI 布局标记文档,该文档由服务器端和客户端共同完成,界面最后由客户端生成。 用户完成数据规则定义后,需要对客户端的服务界面设置推荐布局(由服务定制者推荐、所有用户可见),其他用 户使用同样的服务时,可以采用推荐布局,也可以在客户端根据自己的偏好修改布局。 首先提取并记录页面中所有控件的宽度和长度。定义宽度集为 W,长度集为 H,并且定义基准单位为 S,则基 准单位可以由 S = min(min(W), min(H))计算。网页弹出推荐布局操作区,布局操作区以网格的形式出现。网格个数 的划分可以根据实际需要设定,考虑到控件数量不多,这里推荐 50*50 个网格,适应于横屏或竖屏的手机。一个基 准单位对应两个网格,下面将举例说明一个具体的控件如何在网格中摆放。假设一个控件的宽度为 a,长度为 b, 且设 a 为所有控件的长度和宽度的最小值,即 a 就是基准单位。系统提取原始 web 页面布局信息,把对应的内置控 件图片以原始布局形式展示在网格操作区,供服务定制者修改推荐布局。如果用户满意,则记录默认布局;如果不 满意,则可根据自己的意愿拖动各项控件图片,给系统一个准确的布局偏好信息,这种使用网格对用户的布局偏好 进行定位的布局策略有很高的满意度。系统会记录用户修改后的各控件在网格坐标系中的坐标(Gx,Gy)、类型、以及 Nw(i)、N h(i),并将之保存在 UI 布局标记文档里。

1.5 布局重心算法和服务自动生成 用户推荐布局完成后,服务器端将计算控件布局的重心,我们称之为布局重心。这里介绍一种利用重心法的客

www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD -6-


韩昊,等 一种 web 服务定制框架

户端布局策略:对面积大的控件(如 TextArea)赋予高权重;对面积小的控件(如 Button)赋予低权重。对赋予权 重后的控件布局图形求出其布局重心,在客户端界面生成时,该布局重心和屏幕中心重合。这样做的目的是使整个 客户端布局更加平衡,占面积大的控件更加偏向屏幕中部,占面积小的控件偏向于屏幕四周。 下面给出权重的定义和布局重心的计算方法:由于权重和控件面积成正比关系,我们将权重定义为 W(i) = Nw(i) * Nh(i),布局重心坐标为(Cx,Cy),则有 Cx =

w i . Gx i wi

Cy =

w i . Gy i wi

服务器端程序将各个控件相对于布局重心的相对坐标写入 UI 布局标记文档里。下面给出 UI 布局标记语言的定 义和语法,使用 BNF 文法展示语言结构。布局文档主要包含两部分:Ui=(ServerProcess,ClientProcess),语法结构如 图 2 所示。对各元素进行说明:ServerProcess 记录的是服务器端要处理的 Ui 信息,包含元素 PageUi,属性 type(用 于区别是输入页面还是输出页面) 。每个页面有一个布局元素 PageLayout,其属性 gridwidth 和 gridheight 分别描述 网页布局操作区的横向和纵向网格数,其每个子元素都具有相对坐标位置和横向和纵向的权重值(用网格数来衡量)。 ClientProcess 记录客户端要处理的 Ui 信息,总体结构和 ServerProcess 类似。其中 config 的 value 属性存储客户端的 分辨率。每个 ServiceItem 具有相应的实际坐标和大小信息。 类似于编译器,该服务生成器的输入是上述服务定制模型的所有数据,输出为 java 语言编写的 web 服务相关 代码和 WSDL(web 服务描述文档) 。服务生成器根据服务定制模型中的网页细节、数据抽取规则、服务器配置等 信息,生成完整的 web 服务并产生单元测试用例。生成的 web 服务部署完服务器端后即可运行。

2 客户端布局生成和布局方法 通过手机客户端的服务列表,用户可以“下载”运行在服务器端的基于 web 服务的“应用程序” 。根据用户的 服务选择,客户端下载相应服务的 Ui 布局标记文档到本地,提取相关信息生成布局,并把处理后的信息记录保存 在本地文档中。下面给出客户端的 UI 布局算法,用以客户端的 UI 自动生成,其中一些参数源自 UI 布局标记文档。 1)从文档中提取每个控件的相对网格坐标,并按照相对纵坐标的值进行分组统计。Rx 和 Nw 分别为控件的相 对横坐标和网格宽度,分别计算每组并找出 f 最大的一组:f=Max(Left= |Rx-0.5*Nw|, Right=|Rx+0.5*Nw|)其中 n 为 该组内控件数目,Nw(k)是从左往右第 k 个控件的网格宽度,X(k)是从左往右第 k 个控件的相对横坐标,求出 𝑛

𝑆𝑈𝑀 =

𝑛−1

𝑁𝑤(𝑘) + 𝑘=1

𝑋(𝑘 + 1) − 𝑋(𝑘) 𝑘 =1

2) 获取其手机屏幕的分辨率大小,并把值写入布局文档的 config 的 value 中。 3) 每个控件的实际宽度为 𝑅𝑤 ( 𝑖 ) = 𝑁𝑤( 𝑖 ) ∗ (

𝑆𝑤 ) 𝑆𝑈𝑀 + 𝑑

其中 Sw 为手机屏幕的宽度。用(SUM+0.5)而不用 SUM 的原因是给控件和屏幕两边留出空间,默认每一边留 0.25 个网格的距离。必须注意的是,对于每个控件 Rw 的大小应有所限制。例如对 Button 控件有 Rw<=0.5*Sw。根据 Rw(i)可以求出控件的实际高度 Rh(i)。 4) 以屏幕中心点建立直角坐标系,Rx,Ry 分别是从布局文档中提取的控件的相对横坐标和纵坐标,每个控件 的实际坐标为 ( 𝑋(𝑘) = 𝑅𝑥 𝑖 ∗

𝑆𝑤 𝑆𝑈𝑀 +𝑑

, 𝑌(𝑘) = 𝑅𝑦 𝑖 ∗

𝑆𝑤 𝑆𝑈𝑀 +𝑑

)

5) 最后把上面计算出来的每个控件的Rw,Rh,X和Y分别写入布局文档中。以后每次运行服务,客户端就可 www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD -7-


Scientific Journal of Information Engineering (SJIE)

直接读取文档中的参数生成布局。 用户可以将自己感兴趣的 web 操作或链接轻易地封装成 web 服务,在自己的手机客户端上自动生成界面并使 用,同时具备实用性和娱乐性。手机客户端不用专门为 web 服务的使用开发应用程序,自动生成的界面可以满足基 本的功能需求。

图 1 UI 布局算法

从定量的角度分析,这个平台缩短了将 web 页面操作转化为 web 服务、并将 web 服务部署在手机上的时间。 在互联网上选取 4 个常见的 web 操作来测试平台构建服务的时间。服务定制者为平台的普通使用者(非开发人员)。 时间统计表如表 1 所示。由图中可知,时间主要花费在输入输出规则定义和 UI 布局设置上。 表 1 构建服务时间统计表 服务名称

服务来源

输入页面操作

输出页面操作

UI 布局操作

总时间

电子词典

有道词典网站

1

2

2

6

航班查询

中国国际航空

2

3

2

8

IP 查询

IP.CN

1

1

1

4

天气预报

中国天气

2

3

2

9

我们对手机客户端执行 web 服务进行了试验,并从各个逻辑单元所耗费的时间角度来分析 web 服务的性能。 从手机客户端的角度来看,web 服务的运行包括以下几个阶段: 1)服务界面自动生成,指的是用户在客户端的服务列表中找到目标服务,客户端根据该服务的 UI 布局标记文 档和 WSDL 文档自动生成界面,耗时与界面复杂度有关; www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD -8-


韩昊,等 一种 web 服务定制框架

2)HTML 文档获取与解析,在服务器端完成,利用 web 代理获取目标 HTML 文档,与当前网络状况有关; 3)数据抽取并封装成 web 服务的输出,在服务器端完成,与数据抽取规则的数量有关。用各个阶段耗费的时 间作为性能评价的指标。测试环境如表 2 所示。 表 2 测试环境 服务器 机型

系统

内存

CPU

Milestone2

Android 2.3

512M

ARM Cortex-A8 1G HZ

机型

系统

内存

CPU

PC

Windows server 2008

2G

2.4G HZ 双核

服务器

实验人员对整个服务定制和客户端使用服务的过程进行时间测试,服务器只允许一个服务。对于同一个服务, 在手机客户端采用 5 组不同的输入参数进行性能测试,时间取平均值。 表 3 性能测试 HTML 文档

界面生成

HTML 文档解析

服务输出

总时间

服务名称

UI 控件数量

电子词典

5

60426

673

129

202

1004

航班查询

9

37417

762

76

173

1011

IP 查询

4

16232

521

34

65

620

天气预报

8

72219

714

156

232

1111

大小(字节) 时间(毫秒)

时间(毫秒)

时间(毫秒) (毫秒)

由表 3,客户端首次使用 web 服务的过程中,服务界面生成花费的时间最多,超过整个服务操作时间的 50%。 但是由于 web 服务界面生成以后是保存在本地的,具有重用性,因此以后使用 web 服务的时间效率会提高一倍左 右。

3 结论以及未来工作 基于 web 服务的应用程序定制及部署平台为普通用户将互联网信息资源封装成 web 服务,用户借助友好的操 作界面可以轻易地封装 web 服务输入输出的定义。与传统的 web 服务封装器相比,这个平台产生的 Web 服务主要 被移动平台使用,并且能自动生成服务界面。生成的 web 服务有更好的互操作性、灵活性,并且是可视化的。今后 我们将探讨更好的布局策略,使自动生成的 UI 能拥有更好的用户满意度。也将尝试将这个平台产生��� web 服务应 用到不同手机平台上,提高其自适应性,真正做到与平台无关。

致谢 本工作由国家大学生创新性实验计划 G101056137 基于 SOA 架构的农用信息服务云平台的研究和建设和省创 S1010561121 基于虚拟世界的移动导购平台资助。资助项目还有国家自然科学基金项目以及广东省自然科学基金项 目 X2jsB6110010、广州市科技计划项目 X2RJB2110140、华南理工大学中央高校研究项目 X2RJD2116860。 参考文献 [1]

Hammer, H. Garcia-Molina, et al. Extracting Semistructured Information from the Web. In: Proc. of the Workshop on Management for semistructured data (SIGMOD'97), 1997: 18-25.

[2]

Yang Shaohua,et al. A Markup Language for Generating Web Services out of Web-based Information. Resources and Software Support

www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD -9-


Scientific Journal of Information Engineering (SJIE) Thereof, JOURNAL OF COMPUTER RESEARCH AND DEVELOPMENT, Vol., Suppl, 2006, 43. [3]

R. Baumgartner, S. Flesca, et al. Visual Web Information Extraction with Lixto. The VLDB Journal, 2001: 119-128.

[4]

P. Farley and M. Capp. Mobile Web Services, BT Technology Journal, 2005, 23(3): 202-213.

[5]

Jiang He, et al. An Adaptive User Interface Generation Framework for Web Services. 2008 IEEE Congress on Services Part II.

[6]

Paolucci Massimo, Kawamura Takahiro, Payne Terry R, Sycara Katia. Importing the semantic Web UDDI. In:proceedings of Web service, E-business and semantic Web Workshop(CAISE Workshop), Toronon, Canada, 2002: 225-236.

[7]

Sivashanmugam K, Verma K, Mulye R. Speed-R: Semantic P2P environment for diverse Web service registries. Final Presentation, CSCI: 8350, Enterprise Integration,Department of Comuter Science, University of Georgia, GA, 2002.

[8]

Gao Xiang, Yang Jian, Papazoglou Midke P. The Capability matching of Web service. In: proceedings of the IEEE Four International Symposium on multimedia softeware Engineering (MSE’OZ), califormia, USA, 2002: 56-63.

[9]

胡建强, 邹鹏, 王怀民, 等. Web服务描述语言QWSDL和服务匹配模型研究[J].计算机学报.2005, 28(4).

[10] HU JQ ZOU P WANG HM ZHOU B. Research On Web service Description Language QWSDL and Service Matching Model[J]. Cinese Journal of Computers.2005, 28(4).

【作者简介】 杨捷,女,汉,博士,华南理工大学软件学院讲师。研究领域:软件安全模型、软件体系结构。 Email: yjclear@scut.edu.cn。

www.sjie.org PP.5-10 © 2011 American V-King Scientific Publishing, LTD - 10 -


Web Service Automatically Layout Generation Method