Flex图表开发总结.docVIP

Flex图表应用程序架构概述 Flex应用程序的架构如下图所示： 主要分为展现层, 逻辑层和数据服务层三部分，各部分的功能如下所述： 前端展现层：前端Flex ( flash )图表控件的制作 ( 需要安装集成开发环境FlexBuilder3.0 )，具体的图表控件为Flex SDK中自带 ( 仅有二维图表 )，仅需做少许个性化配置即可，其产出物为一个扩展名为swf的flash文件，制作完毕后将该swf文件嵌入jsp/html页面中即可。开发该模块需要一些MXML和ActionScript的基础知识。 逻辑层1：由于Flex中的图表要求数据源的格式为ActionScript中的一个类型为ArrayCollection的变量，从后端服务取来的统计结果 ( 通常为一固定格式的字符串 ) 无法直接添加到图表中加以展示，可能还需要对统计结果进行一些二次加工统计，因此需要编写一些ActionScript脚本代码，将获取来的字符串统计结果解析包装成为ArrayCollection变量实例，再将该变量实例赋给图表的数据源属性即可。 逻辑层2：为前端页面的展示提供数据的Javabean的开发，该Javabean与一般的Javabean无任何区别，通常提供的服务为到后端数据库中获取需要展示的数据，并包装为某一固定格式的字符串(建议使用XML格式)，返回给调用者，即前端swf中的Flex图表控件。 数据层：数据库统计脚本的编写，通常在做图表统计时，统计的结果都是对于数据库中单表甚至多表的混合复杂运算，因此简单的SQL语句往往无法直接得到最终的统计结果，而且效率差，一般需要在数据库中建立一些函数，存储过程，甚至保存中间运算结果的临时表来达到我们简化统计，提高性能的目的，在资产管理系统中，建立了一张基础统计表和多张最终统计结果表，最后便可以利用相对简单的SQL语句取到我们想要的统计指标。 Flash与应用服务器的通信：Flash图表要向应用服务器获取展示数据，就需要与应用服务器进行通讯，Adobe提供了一个开源的服务器名为openAMF，该服务器为一jar包，需要引入到所在项目中，配置了该通讯服务器后，仅需在嵌入该swf文件的jsp/html页面中加以配置，ActionScript便可透明地调用javabean中的方法 ( 通常为获取需要展现的数据的服务 )。 Flex图表应用程序部署步骤 在Jsp文件中加载图表Flash文件 Flex控件生成的Flash文件需要在Jsp页面中进行加载和展现，因此需要在Jsp页面中进行一些配置，示例页面如下图所示： 该Jsp页面与Flex相关的部分主要有： 添加了JS文件swfobject_source.js的引用。该JS控件的作用是将Flash文件加载进Jsp页面。 实例化上述引入的JS控件，配置Flash加载参数并进行实际加载操作。 几个需要说明的参数为： gateway：应用服务器提供给Flex控件的网关； service：应用服务器提供数据服务的方法名，该方法可在Flex控件中进行远程调用； 添加Flex应用程序所需的Jar包 架设Flex应用需要向Web工程中添加三个Jar包，分别为： 1). openamf.jar Flex与Java之间直接进行通讯的服务器(Adobe开发，开源/免费) 2). commons-codec-1.3.jar 提供了为Flex于Java之间传输的各种数据进行编解码的服务 3). astranslator-1.5.9.jar 提供了将JavaBean映射到Flex对象的服务 **开发应用程序时，需要将上述三个Jar包添加进工程，否则将无法实现通讯  配置OpenAMF服务器 在web.xml文件中配置应用服务器提供给前端页面中的Flex控件调用的服务网关。示例配置文件如下图所示： 如上图所示，仅需在web.xml配置文件中添加一个供Flex控件与应用服务器进行通讯的Servlet网关即可。 Flex甘特图开发介绍 Flex甘特图控件的界面实例如下图所示： 该控件是在Flex SDK 3.0中的控件AdvancedDataGrid基础上扩展而来，该控件如下图所示： 可以看出，AdvancedDataGrid实现了展现具有树形层次结构数据集的功能，因此甘特图开发需要单独实现的仅仅是甘特图右侧任务条以及任务条之间依赖箭头的绘制。 甘特图的数据获取 页面中的Flex控件与应用服务器的通信在上面已经介绍过，在此不再累述。这里重点介绍的是甘特图中展现的项目数据的原始配置文件以及配置文件中的数据是如何被加载，组织，传递给前端Flex控件并展现出来。 项目配置XML文件格式 一个典型的项目配置文件如下图所示： 一个配置文件由一个project-config节点开