Flex技术介绍.doc

北京翰纳维科技有限公司 Beijing Handlewell Technology Limited.中国北京海淀区中关村东路66号世纪科贸大厦B座1705室 邮编：100080Room 1705, 17/F., Tower B, Tri-tower HouseNo. 66 Zhongguancun East Road, Haidian District, Beijing 100080, China.电话 Tel:(010) 6267 0002 传真 Fax:(010) 6267 0002.FLEX技术介绍1 技术概述(Tech Reference)1.1 FLEX简介 Flex是Adobe公司推出的一系列工具和技术，使开发人员可以开发和部署可升级的富互联网应用程序（RIA）。富互联网应用程序（RIA）是指像开发Web网页一样的简单方式来部署富客户端程序。这种程序具有比HTML更加健壮、反应更加灵敏和互动性更丰富的特点。RIA利用相对健壮的客户端描述引擎。这个引擎能够提供内容密集、响应速度快和图形丰富的用户界面。并可利用丰富的控件库随时、快速的构建富客户端程序。RIA的另一个好处是，数据能够被缓存在客户端，从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器次数更少的用户界面。1.2 FLEX特点Flex可以在企业内部或在Web上创建富互联网应用程序（RIA）。它使企业能够创建个性化的丰富多媒体应用程序，极大地提高用户的体验，彻底革新人与Web的交互关系。包括：增强用户体验、完善的开发环境、通用的配置环境、企业级的特征、消除页面加载、标准的架构、与浏览器兼容、AIR应用程序、可集成HTML、JavaScript、Ajax。1.3 FLEX开发环境IDE：Flex Builder3。Flash Player插件：Install Flash Player 9 ActiveX.exe，Install Flash Player 9 Plugin.exe。1.4 FLEX项目结构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文件中编写。AS代码效果图CSS：控制Flex组件样式。效果图1.5 RSL介绍减少应用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文件的内容是：然后重新启动tomcat后运行程序即可如果要限制访问的网站可以在中的 *改成网站名，如改成还有一种情况，当我们将bin里的程序以及文件拷贝到其他地方时运行报错，是因为FLEX编译的SWF文件，只能选择访问本地文件或访问网络文件，二者只能取一，而Flex 编译的默认选项是只能访问网络文件，所以你将bin里的东西COPY到其他地方就不能读取了。而你在默认的bin目录下可以读取得到，是因为FLEX认为你是在IDE环境种，这时是没有这个所谓的安全限制的。 解决办法就是在编译时，加个参数 -use-network=false 就OK了 (FB里,选菜单ProjectPropertiesFlex Compiler输入这个参数) 但这样做的话,你的SWF就不能读取网络的数据了。1.7 图形报表设计以柱状图为例，下图为MXML与AS代码。MXML组件标签：MXML代码ActionSctipt实现代码：AS代码效果图1.8 FLEX开发技巧MXML设计技巧：可以点击Design对其进行设计，在FB左边的Components库中显示了所有的组件模型，开发人员可以通过拖拽的方式把相应的组件放到MXML文件中，再点击Source会发现已生成MXML标签。在FB右边是对组件的样式设置，使用起来跟Dreamweaver一样。效果图CSS设计技巧：同样是点击Design按钮，改变Style选择，选择你需要修改的组件，在FB右边可见相应组件样式设置选项，开发人员可随意定制样式。下图以Button组件为例：效果图2 Java开发模型(Application Development)2.1 开发模型图表组件架构逻辑视图实现图2.2 数据封装API2.2.1 数据模型请先看XML格式，有助于更好的理解数据模型的设计原理。 数据模型类定义com.handlewell.chart.bean. Graphcom.handlewell.chart.bean. Chartcom.handlewell.chart.bean. DataSetcom.handlewell.chart.bean. Item 层次结构 具体类分析2.2.2 XML模板 实现类定义com.handlewell.chart.util. ChartUtils 分析/ 按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) 模板：com.handlewell.chart.analyzer. graph.ftl2.2.3 图形报表封装 类定义com.handlewell.chart.service. ChartManager 分析3 FLEX与开发框架整合及实例演示3.1 View层把编译后的Flex文件引入页面，如图：3.2 Control层在Servlet或Action中，引入ChartManager对象，使用其提供的接口，生成Flex程序所需的XML流。如图：3.3 实例 3.3.1 Action拼装XMLList datasets = new ArrayList();/ 数据源集合List charts = new ArrayList();/ 图形报表集合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)