Flex在铁路安全生产日况信息管理系统中的应用

2014-11-27 07:51徐煜明
铁道运营技术 2014年4期
关键词:统计图表服务端样式

严 安,徐煜明

(南宁铁路局信息技术所,1.工程师;2.助理工程师,广西 南宁 530003)

随着信息技术的不断发展和普及,铁路局安监室利用Excel电子表格统计和分析安全生产日况信息的方式已难以适应铁路快速发展的步伐。在利用Flex改进安全生产日况信息的统计和分析之前,依靠信息技术解决上述问题的方法常常因为HTML的局限性而效果不佳,但Flex却提供了一种新的技术以解决这些问题。

1 Flex技术

Flex技术是目前最流行的RIA(富互联网应用系统)开发技术之一,它是开发Web应用的有效工具〔1〕。在传统的开发模式中,用PHP、ASP、JSP等技术来开发Web应用,需要依靠浏览器的动态解释才能够正常显示和执行,这样的开发方式经常会给代码调试带来难度。在开发过程中,界面外观的调试非常耗时耗力,往往同一代码在不同的浏览器或同一浏览器的不同版本下会有不同的外观和不同的动作效果〔2〕。Flex便是人们所期待的能够解决上述问题的方法之一。

1.1 Flex组成元素

1)MXML:基于XML描述应用程序界面的语言。

2)ActionScript:符合ECMA(欧洲计算机制造商协会)标准的脚本语言,负责处理业务逻辑和业务建模。

3)Flex SDK:Flex的基础类库。

4)通信服务:Flex支持Adobe公司自定义的通信协议AMF,它能够将Flash/Flex对象快速序列化、反序列化,采用二进制压缩传输数据,具有数据安全性高、传输快的优点。

1.2 Flex框架结构 Flex框架的基本模型见图1所示。其基本原理是:通过Flex编译器Flex Builder x.0将 MXML 文 件 编 译 成 SWF 文 件〔3〕,然 后 由FlashPlayer执行该SWF文件。

从图1可以看出Flex应用是多层结构。Flex编译器可以把MXML、ActionScript以及一些Flex类库编译成SWF文件,由FlashPlayer在客户端执行SWF文件,实现对应用的访问。

2 基于Flex的Web应用系统架构

Flex主要用于前端用户交互的解决方案框架,当复杂业务逻辑的信息系统进行开发时,服务端一般会选用比较成熟的架构,Flex可以方便地实现与服务端的交互。

2.1 Web应用的整体框架 Web应用的整体框架见图2所示,系统可分为客户端、服务器端。Flex程序在浏览器中运行,由浏览器插件FlashPlayer负责解释执行。

图2 Flex Web应用框架图

2.2 服务器端 服务器端可采用分层设计模式,分为控制层、业务层、数据层和数据实体层等。这里可以采用Spring和Hibernate结合的方法来进行开发。

2.3 Flex与服务端的通信 图2中的BlazeDS是Adobe公司的一款数据服务产品,它能够提供高级的与服务端通信的方式,使Flex通过BlazeDS直接调用服务端的Java类,以实现用户交互层和业务逻辑层的无缝连接。

2.4 配置文件 Flex与服务器端的通信一般需要4个配置文件的支持。在普通Web应用中,配置其中的remoting-config.xml(描述远程调用Java类的服务配置文件)和services-config.xml(描述服务基本设置的配置文件)这2个文件就可以了。

2.5 部署 Flex应用可以运行在任何J2EE服务器上 ,例 如 Websphere、Weblogic、JRun 以 及 JBoss、Tomcat等服务器。

3 安全生产日况信息管理系统简介

“铁路安全生产日况信息管理系统”(以下简称日况系统,界面见图3)是南宁铁路局2011年下达的科技计划项目,用于铁路局安监室对安全生产日况信息进行管理。实现了自动读取铁路局调度安全记事原文件,经过归类整理、定性定责后,生成安全生产日况表、安全生产速报表和安全信息简报,可按事故、部门、路外、劳安和设备故障等分类统计。

图3 日况系统主界面

日况系统设计采用C/S与B/S结构相结合的方式。C/S部分实现数据的采集、编辑、报表生成和打印等功能。B/S部分基于J2EE架构,采用Tomcat服务器,使用oracle9i进行数据存储,通过运行在Tomcat服务器上的BlazeDS和Java代码处理系统的查询和统计逻辑。其中,使用Flex技术实现了用柱状图、饼图、折线图等图表统计数据的功能(见图4所示)。

图4 图表统计界面

4 Flex在日况系统中的应用

日况系统生成的电子统计报表都是Excel表格,虽然Excel表格能让用户准确地掌握数据的具体信息,但表格过多,数据量过大,不利于分析数据之间的相互关系和发展趋势。用户也许无法记住一连串的数字,但是可以很轻松地记住一幅图画或者一个曲线。因此,使用图表统计数据,会比用Excel电子表格更易于分析和理解。这时候,Flex在日况系统中的发挥的优势和作用就体现得淋漓尽致。

4.1 Flex在日况系统开发中的优势 Flex采用基于XML的MXML语言来使用Flex组件,这点与HTML很相似,但MXML有了继承概念,使得MXML与HTML有着本质的不同。与传统的Web开发相比,Flex开发模式不再以请求/响应模式作为编程模型。在开发前台表现层的传统HTML组件与Flex组件的比较见表1〔4〕。

表1 传统HTML组件与Flex组件的比较

通过表1可以看出:Flex组件部署简单,安全性高,扩展灵活,交互表现丰富,编程容易;程序员可从繁重的前台界面调试中得到解脱,节省了大量宝贵的时间,加快了日况系统Web应用的开发速度;同时Flex使用FlashPlayer作为运行环境,使客户交互可以突破浏览器的限制。

而与时下流行的JavaScript技术相比,Flex在系统的实现中也有其特有的优势。虽然JavaScript图表插件开源,且样式众多,但不同样式和功能的JavaScript图表插件数据源格式可能并不统一。选择特定样式和功能的图表,会面临选用不同类型的JavaScript插件,这就意味着要把数据转换成多种格式。

安全生产日况信息的数据繁多复杂,即要根据不同类型的数据生成多种统计图表,还要生成同比、环比的数据图表,并能实现图表间的切换。如果用JavaScript插件来实现,数据的转换颇为麻烦,不仅把问题复杂化,而且JavaScript代码的调试也不方便。

使用Flex绑定数据就不存在上述问题,只需将数据绑定指定成ArrayCollection类型,加到图表控件中的DataProvider属性里即可。同时,Flex还可以自定义图表样式,像Css一样指定图表控件的样式和各种属性,如横纵座标轴的度量,图表提示Tip的显示内容和格式,图表的图示说明,图表的点击切换等等,真正做到了图表的自定义。

4.2 Flex在日况系统中发挥的作用 用Flex进行图表设计,通过MXML文件和Actionscript文件生成的Sw f文件可以在浏览器中与用户进行交互,同时Flash本身的动画效果也使得页面不再单调沉闷。根据日况统计的需求,设计条件选项下拉框和选择按钮,并触发事件生成Flex图表。这一切都直接在MXML和Actionscript中完成,不再牵扯到其他Jsp文件,实现了模块化的高度独立。同时通过Blazeds与后台的JavaBean交换数据,在后台使用Java类从数据库中读取日况数据,传递给Flex生成图表。这样也可以在整体上共用一套Java类,不用再另外编写后台方法,减轻了编写的负担,同时也降低了代码的出差程度。对于Flex图表的整体样式,可通过同一个Css样式文件,保持了整体风格的统一。

不同图表间的切换是日况统计图表设计的难点,如果不同图表的数据源格式不统一,将要消耗很大的精力和计算机资源进行数据转换,正确率也不一定能保证。而Flex实现图表切换却非常方便,因为Flex使用同一种数据格式,也不存在数据转换的麻烦,只需在图表中触发点击事件,传递参数提取相关显示数据项,更改图表状态即可。日况系统中用Flex实现了柱状图、饼图、折线图等统计图表的功能(见图5所示)。

图5 Flex统计图表

5 结束语

Flex在铁路安全生产日况信息管理系统中的应用,将用户的从繁琐复杂的表格中解脱出来。用Flex实现的统计图表以更形象、更直观的方式将数据所蕴含的信息和意义展现给用户,使原来拘泥于Excel电子表格呆板格式的统计和分析工作焕然一新,人机交互性更强,工作效率也更高。

〔1〕Charles E.Brown.The Essential Guide to Flex 3〔M〕.New York,2008.

〔2〕姜天格.Flex3企业级Web应用系统设计与实现〔M〕.北京:机械工业出版社,2008.

〔3〕Michele E.Davis,Jon A.Phillips.Flex3:A Beginner’s Guide〔M〕.United States of America,2008.

〔4〕吕晓鹏.精通Flex3.0-基于ActionScript3.0实现〔M〕.北京:人民邮电出版社,2008.

猜你喜欢
统计图表服务端样式
CPMF-I 取样式多相流分离计量装置
CPMF-I 取样式多相流分离计量装置
取样式多相流分离计量装置
艺术跨学科之美——基于第五届中国中小学生统计图表设计活动的思考
2019年1-5月全国商用车市场销售统计图表
2019年1-4月全国商用车市场销售统计图表
2018年1—5月全国商用车市场销售统计图表
新时期《移动Web服务端开发》课程教学改革的研究
这是巴黎发布的新样式
摸清黑客套路防范木马侵入