技术介绍
1技术概述(Tech Reference)
1.1FLEX简介
Flex是Adobe公司推出的一系列工具和技术，使开发人员可以开发和部署可升级的富互联网应用程序（RIA）。富互联网应用程序（RIA）是指像开发Web网页一样的简单方式来部署富客户端程序。这种程序具有比HTML更加健壮、反应更加灵敏和互动性更丰富的特点。
RIA利用相对健壮的客户端描述引擎。这个引擎能够提供内容密集、响应速度快和图形丰富的用户界面。并可利用丰富的控件库随时、快速的构建富客户端程序。
RIA的另一个好处是，数据能够被缓存在客户端，从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器次数更少的用户界面。
1.2FLEX特点
Flex可以在企业内部或在Web上创建富互联网应用程序（RIA）。它使企业能够创建个性化的丰富多媒体应用程序，极大地提高用户的体验，彻底革新人与Web的交互关系。包括：增强用户体验、完善的开发环境、通用的配置环境、企业级的特征、消除页面加载、标准的架构、与浏览器兼容、AIR应用程序、可集成HTML、JavaScript、Ajax。
1.3FLEX开发环境
IDE：Flex Builder3。
Flash Player插件：Install Flash Player 9 ActiveX.exe，Install Flash Player 9 Plugin.exe。
1.4FLEX项目结构
MXML：MXML是一种XML标识语言，用于进行组件布局。MXML中的组件包括了可视组件和非可视组件。非可视组件可以是从服务器中读取的数据源或用户组件绑定至服务器中的数据。
就像HTML一样，MXML提供标签来定义界面。但MXML比HTML更结构化，提供更丰富的标签集。用户可根据需要，在MXML组件的基础上进行扩展，从而创建自定义组件。
MXML与HTML最大不同在于，MXML定义的应用程序最终被编译为SWF文件，由Flash Player来执行。Flash Player下执行MXML应用程序比HTML应用程序更加丰富、动感。
MXML代码
效果图
ActionScript3.0：ActionScript3.0是运行于Flash Player运行环境的编程语言，使用新的ActionScript虚拟机AVM2。AVM2使用新的二进制指令集，并在性能上有很大改进。同时，ActionScript3.0使用面向对象模型，扩展和提高了应用程序接口。ActionScript3.0代码被FlexBuilder或Flash中的编译器编译成二进制数据。这种二进制数据被装入SWF文件中，然后运行于Flash Player运行环境中。
Flex工程中可有两种方式使用ActionScript3.0代码：一种是在MXML文件的 AS代码 效果图 CSS：控制Flex组件样式。 效果图 1.5RSL介绍 减少应用SWF文件大小的一个方法就是将一些共享的外部资源拆分出去，成为一个的文件，这样可以单独地加载缓存到客户端，这些共享资源可以由多个应用在运行时进行加载，但是传递到客户端的动作只会发生一次，这些共享文件被称为运行时共享库（Runtime Shared Libraries）或简写为RSL。 如果你有多个应用而且这些应用共享一些核心组件或者类，那么作为RSL，用户只会唯一的一次加载这些资源。只要应用在同一个域中，这些应用共享同一个缓存的RSL，这样应用文件的大小就减小了。使用RSL的应用越多，效果越好，如果只有一个应用，总的文件大小不但不减小，反而会增大。 操作：在Flex项目目录上点击鼠标右键，选择Properties，弹出属性窗口，继续选择Flex Build Path属性，点击Library path，把Framework linkage选择改成Runtime Shared Library（RSL）即可。 操作图 1.6安全沙箱 用Flex进行URL调用网页(jsp文件放在tomcat下的webapps下)上的数据时，如果Flex生成的程序在工程所在路径时没有任何问题，可如果把程序文件的路径更改后，就会报安全沙箱问题，解决方法就是在tomcat的安装目录下的%tomcat%/webapps/ROOT/下放置一个名叫crossdomain.xml的文件，记住，名字必须是crossdomain，不然不起作用，crossdomain.xml文件的内容是： SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> 然后重新启动tomcat后运行程序即可 如果要访问的网站可以在 还有一种情况，当我们将bin里的程序以及文件拷贝到其他地方时运行报错，是因为FLEX编译的SWF文件，只能选择访问本地文件或访问网络文件，二者只能取一，而Flex 编译的默认选项是只能访问网络文件，所以你将bin里的东西COPY到其他地方就不能读取了。而你在默认的bin目录下可以读取得到，是因为FLEX认为你是在IDE环境种，这时是没有这个所谓的安全的。 解决办法就是在编译时，加个参数 -use-network=false 就OK了 (FB里,选菜单Project>Properties>Flex Compiler输入这个参数) 但这样做的话,你的SWF就不能读取网络的数据了。 1.7图形报表设计 以柱状图为例，下图为MXML与AS代码。 MXML组件标签： MXML代码 ActionSctipt实现代码： AS代码 效果图 1.8FLEX开发技巧 MXML设计技巧：可以点击Design对其进行设计，在FB左边的Components库中显示了所有的组件模型，开发人员可以通过拖拽的方式把相应的组件放到MXML文件中，再点击Source会发现已生成MXML标签。在FB右边是对组件的样式设置，使用起来跟Dreamweaver一样。 效果图 CSS设计技巧：同样是点击Design按钮，改变Style选择，选择你需要修改的组件，在FB右边可见相应组件样式设置选项，开发人员可随意定制样式。下图以Button组件为例： 效果图 2Java开发模型(Application Development) 2.1开发模型 图表组件架构逻辑视图 实现图 2.2数据封装API 2.2.1数据模型 请先看XML格式，有助于更好的理解数据模型的设计原理。 2.2.1.1数据模型类定义 com.handlewell.chart.bean. Graph com.handlewell.chart.bean. Chart com.handlewell.chart.bean. DataSet com.handlewell.chart.bean. Item 2.2.1.2层次结构 2.2.1.3具体类分析 2.2.2XML模板 2.2.2.1实现类定义 com.handlewell.chart.util. ChartUtils 2.2.2.2分析 // 按Graph的内容直接输出xml数据给图形控件 public static void render(HttpServletResponse resp,Graph bean) // 把XML内容直接给图形控件 public static void render(HttpServletResponse resp,String xml) // 把Graph解析成XML，输出到指定的流中 public static void render(OutputStream out,Graph bean) // 把XML内容直接输出到指定流中 public static void render(OutputStream out,String xml) 2.2.2.3模板： com.handlewell.chart.analyzer. graph.ftl 2.2.3图形报表封装 2.2.3.1类定义 com.handlewell.chart.service. ChartManager 2.2.3.2分析 3FLEX与开发框架整合及实例演示 3.1View层 把编译后的Flex文件引入页面，如图： 3.2Control层 在Servlet或Action中，引入ChartManager对象，使用其提供的接口，生成Flex程序所需的XML流。如图： 3.3实例 3.3.1Action拼装XML List List String hql = "select id,item from Table"; List list = beanManager.find(hql); DataSet dataset = chartManager.createDataSet(list, "Name", "*.do");// 创建数据源 datasets.add(dataset); Chart chart = chartManager.createPieChart(datasets);// 创建柱状图报表样式 charts.add(chart); String xhql = "select item from Table"; List xlist = beanManager.find(xhql); List xaxis = chartManager.createXaxis(xlist);// 横坐标集合 chartManager.createGraph(response, charts, xaxis, "横坐标", "纵坐标", ""); 3.3.2Flex Object对象指定URL url指明flash与后台数据通信路径。 FlashVars指明传给flash的参数。 3.3.3效果图 4应用展示(Applications)下载本文
