基于 Flex 的水库调度信息发布系统研发与实现

李 琳，李聂贵，于兴晗，徐 红

（1.中国水利水电科学研究院，北京 100038；2.南京水利科学研究院，江苏 南京 210029）

0 引言

水库调度信息发布系统主要用于发布电厂水库调度的相关信息。系统由服务器、网络、客户端组成[1]。系统通过网络连接服务器，可以实时地将流域站点的雨水量、水位流量、水库运行情况的数据发布出去，也可以进行在线洪水预报和报表的计算。

目前，水库调度信息发布系统已经在水利行业逐渐得到广泛使用。但是大多水调信息发布系统程序开发仍基于页面的、服务器端数据传递的模式，把网络程序的表示层建立于 HTML 页面之上，功能单一、人机交互性差且安全性不高。

Flex 技术[2]是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序，它可以满足用户更高要求的、全方位的体验要求[3]，并使Web 应用程序的 UI（User Interface）层的功能更加强大。Flex 应用程序最终编译成 Flash SWF 文件，可以方便的跨平台和浏览器使用。

XML[2]是一个通用的可扩展标记语言，常用于数据的描述、封装和结构化处理。XML 具有统一的标准语法，语法简单灵活，可以更加方便和标准地对数据进行读取、传输和操作。它使得任何系统和产品所支持的 XML文档，都具有统一的格式和语法，并具有跨平台跨系统的特性。

基于 Flex 和 XML 的优势，采用相关技术开发浏览速度快、性能高、展现方式灵活的跨平台水库调度信息发布系统已经势在必行。

1 技术架构

水库调度信息发布系统架构分为 UI 层、逻辑层和数据层[4]，如图1所示。

图1 系统总体架构

其中：UI 层为客户端；逻辑层为应用服务器端[5]，这里指 .Net 端；数据层为数据库服务器端，这里指 SQL Server 或 Oracle 数据库服务器。本系统 UI 层开发采用 Flex 技术，并通过 XML，Http 与.Net 端交互，.Net 端通过 ODBC，ADODB 等与数据库服务器端通讯。各层之间开发完全分离，各个层之间使用接口函数，便于不同层次开发人员之间的合作，也增加了代码的可重用性[6]。

2 数据交互

2.1 数据传输方式

在 Flex 中，数据传输方式包括内部数据、文件流方式、XML 方式传输和其他等传输方式。

内部数据传输适用于同一文件、类或不同文件间采用赋值方式进行传输的数据；对于简单的文本数据，一般采用文件流方式传输；对于 XML 数据，一般采用 XML 方式传输；对于复杂数据，如大型数据库中的数据，需要通过其他程序辅助数据传输。

XML 方式的优点是简单小巧、存储方便、检索快速。所以，XML 常用于数据存储和交换。依照水文数据的特点和要求，本系统采用 XML 方式进行数据传输。

Flex 文件首先通过发出命令（通常通过 url 中带参数传递）来请求对应的 XML 文件，依照请求返回XML 结果集合，得到所需的结果。传输数据如图2所示。

图2 数据传输

2.2 与 .Net 的交互

Flex 本身并不支持直接与数据库交互，但可以通过3种间接的通讯方式与数据库交互，分别为 WebService，HttpService 和 Remoting 通讯[7]。HttpService 既可以直接获取 XML 中的数据，还可以通过 JSP，ASP（asp.net）及 PHP 读取数据库中的数据，因此本系统采用 HttpService 方式通过 asp.net 读取并连接数据库。

在 Flex 端，HttpService 是基于 Http 协议发送Post 和 Get 请求外部数据，然后通过指定的监听方法来处理响应[8]。可以通过标签实例化 HttpService 组件。这样，HttpService 对象也拥有了自己的 result 和 fault 事件。为2个事件注册事件侦听器，分别接受 mx.event.ResultsEvent 和mx.event.FaultEvent 对象。访问 ResultEvent.result 或HttpService.lastResult 属性可获得返回数据。

在系统实现过程中，数据交换频繁发生，因此研制了数据交互共用模块（sendData），用于与 asp.net程序交互所需数据，流程如图3所示。

图3 数据交互共用模块流程

代码如下所示：

在 asp.net 应用程序中，系统使用一组相关的类，通过一定的顺序来处理客户端的请求（Request），asp.net 应用程序的处理模式可称之为 Http 处理管道。HttpModule 和 IhttpHandler 就是这个处理管道上的2个处理环节。IhttpHandler 真正地对客户端请求的服务器页面做出编译和执行，并将处理过后的信息附加在 Http 请求信息流中再次返回到 HttpModule中。主要流程如图4所示。

图4 .Net 端数据交互流程

在 Web.con fig 文件[9]中代码如下所示：

这里，verb 可以是“GET”或“POST”，表示对Get 或 Post 的请求进行处理，对应用从 Flex 端传过来的参数 format；Path 指明对相应的文件进行处理，对应用从 Flex 端传过来的参数 url。

这种方式的好处是不用建立静态 .aspx 页面，当请求处理完成后，*.aspx 页面自动消失，这样可以大大减少系统占用资源和生成静态页面时间，提高系统效率。

3 UI 层的实现

系统的 UI 层由 Flex 实现。Flex 提供了模块化架构，灵活可定制的可视化组件和丰富便捷的图表组件，提供了视图的状态和动画特效，真正让 UI 层具有较好的可视性和可操作性。

3.1 模块化架构

Flex 支持应用程序的模块化，分别对每个模块进行编译，每个模块都能够被主程序动态地进行加载和卸载，因此运行时并非所有模块都被加载到主程序中，而是只加载当前需要的使用的模块，从而提高程序执行效率，节省系统资源。Flex 通过ModuleManager 和 ModuleLoader 这2个ActionScript对象进行模块化编程的管理和加载控制。

水调信息化系统 UI 层的模块化架构如图5所示。

图5 水调信息化信息发布系统 UI 层架构

3.2 图表组件

Flex 数据可视化组件中的 mx.charts 包中，列出了内置的9种图表控件类[2]，水调信息化系统主要用到的图形组件如下：

1）雨量柱状图。使用 ColumnChart 组件，将选定时段的测站雨量通过柱状图显示出来，可以显示多站雨量。

2）水位过程图。使用 LineChart 组件，将选定时段的测站水位通过折线图显示出来。

3）洪水预报分析图。组合使用 LineChart 和ColumnChart 组件，将所选场次洪水的预报流量、校正流量、实测流量、加降雨流量和雨量显示出来。

3.3 个性化组件

Flex 的组件可以分为容器、导航和工具控件3个基本大类[10]。通过3类控件组合可以自定义生成系统开发需要的组件。直接拖拽就可以随意使用到应用程序页面，省去了重复开发的麻烦。系统开发过程中自定义了多种组件，如图6所示。

图6 系统自定义组件

在水调自动化信息发布系统中，流域监视页面中为了将站点的水位、流量和雨量以图形形式直观显示出来，定制了2个组件：分别为 ChartWindow1及 ChartWindow2组件。ChartWindow1和ChartWindow2通过使用 LineChart，ColumnChart，TextInput 组件及其后台页面的编程实现显示所选站点在所选时段内的水位、流量的过程和雨量累积的可能。定制的组件可以重复使用，并可以方便灵活地应用于其他信息发布系统中。

4 结语

应用 Flex 和 XML 开发水调自动化信息发布系统，主要有以下几个优点：1）系统的模块化设计结构，有效提高了系统开发部署效率；2）实现了跨平台和跨浏览器运行[2]；3）页面设计更方便灵活，用户体验有很大改善。

目前，水调自动化信息发布系统除了水务报表子模块外，其他子模块均可以通过简单配置适用于电厂。各模块可以灵活配置，也可以个性化定制，基本满足单个电厂的水调信息发布需求。目前该系统已经在安康电站、张家界水电厂等多个电厂投入运行，运行状况良好。经过现场运行测试，客户反应良好，该系统在防汛期间发挥了重要作用。

[1] 陈森林，高仕春.水电站水库运行与调度[M].北京：中国电力出版社，2008: 176.

[2] 杨占坡，杨铭.Flex3RIA 开发详解与精深实践[M].北京：清华大学出版社，2009: 5-183.

[3] 魏志军.浅析 RIA-Flex 技术在 Web 应用开发中的应用[J].信息系统工程，2011（3）: 52.

[4] 朱付保，郭倩倩，杨金梅.基于 Flex 的应急网络地理信息系统架构的设计与实现[J].郑州轻工业学院学报：自然科学版，2012（3）: 21.

[5] 季永峰，李志.ASP.NET 办公自动化系统开发实例导航[M].北京：人民邮电出版社，2004: 3.

[6] 季永峰.专家门诊—ASP.NET 开发答疑200问[M].北京：人民邮电出版社，2005: 19.

[7] 沈继辉，张宏军，陈刚，等.基于 Flex 和 J2EE 架构的数据发布系统的设计与实现[J].软件导刊，2011（10）: 146.

[8] Tariq Ahmed,Jon Hirschi.Flex3实战[M].北京：清华大学出版社，2010: 290.

[9] 明日科技，房大伟，庞娅娟，等.ASP.NET 开发典型模块大全[M].北京：人民邮电出版社，2010: 50.

[10] 董龙飞，肖娜.Adobe Flex 大师之路[M].北京：电子工业出版社，2010: 11-126.