Flex框架优化与改进
朱正超1，王振凯2**
作者简介：朱正超(1987-), 男, 学生, 下一代网络 通信联系人：王振凯（1974-），男，副教授，下一代网络. E-mail: wangzk@bupt.edu.cn
（1. 北京邮电大学信息与通信工程学院, 北京 100876； 2. 北京邮电大学下一代网络实验室，北京 100876） 5
摘要：Adobe Flex做为支持RIA（Rich Internet Applications）的开发和部署的技术有着重要的地位，因此对Flex框架的研究与改进也有着重要的意义。通过对Flex框架的研究可以更好的掌握Flex技术，从而编写出更加良好的程序来支持RIA的实现。同时，对Flex框架进行一些改进，使得程序的运行效率得到提高，并更加利于用户的交互，改进程序的易用性。10 为了深入的研究Flex框架技术，首先要学习Flex开发技术，包括ActionScript语言和MXML描述，以及Flex开发的技巧。然后，通过研究Flex框架的源码，深入理解Flex框架的一些核心机制，包括层次化显示对象体系，容器和组件，布局机制，延迟机制，事件机制，绑定机制，动画特效，皮肤机制，列表体系，滚动机制等等。最后，对Flex框架进行一些优化和改进，包括简化显示列表的层次结构，简化应用类，简化部分核心基础组件，简化部分组15 件的皮肤机制，增加数据容器的动画效果，改造列表容器等等。通过优化和改进，使得Flex框架运行的效率得到提高，增加用户的易用性。通过对Flex框架的研究与改进，加深了对Flex框架的理解，并在一定程度上简化了Flex框架。对Flex框架的优化，也加快了Flex程序的启动速度。对Flex框架的优化，提高了Flex程序的运行效率，同时改善了用户的交互体验。 20
关键词：计算机应用；flex； RIA；框架；优化
 0 引言
RIA是Rich Internet Applications的缩写，翻译成中文为富因特网应用程序。传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表现层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览50 者的更高的、全方位的体验要求了[1]。而富互联网应用的出现就是为了解决这个问题。
Flex 是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序，这些应用程序利用 Adobe Flash Player和 Adobe AIR, 运行时跨浏览器、桌面和操作系统实现一致的部署。虽然只能使用 Flex 框架构建 Flex 应用程序，Adobe Flash Builder软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。 55
Adobe Flex做为支持RIA（Rich Internet Applications）的开发和部署的技术有着重要的地位，因此对Flex框架的研究与改进也有着重要的意义。通过对Flex框架的研究可以更好的掌握Flex技术，从而编写出更加良好的程序来支持RIA的实现。同时，对Flex框架进行一些改进，使得程序的运行效率得到提高，并更加利于用户的交互，改进程序的易用性。
1 Flex框架核心机制研究 60
1.1 容器和组件
开发者使用可视组件来构建Adobe Flex应用。可视组件有灵活的特性组合，通过控制和配置它们来满足应用的要求。Flex包含了一个基于组件开发模型来开发应用和用户接口。开发者可以使用Flex已建立的可视组件，扩展组件来加入新的属性和方法，根据应用的需要创建组件[2]。 65
可视组件十分的灵活并在组件的外观上提供了很多的控制，组件如何响应用户的交互，组件中包括的文本的字体和大小，组件在应用中的大小，和许多其它的特性。
容器提供了一种层次结构可以控制子组件的布局特征。容器定义了Adobe Flash Player的绘制层的一个矩形区域。在这个区域里，可以定义组件，包括想要显示的控件和容器。定义在容器里的组件叫做子组件。 70
1.2 布局机制
Adobe Flex通过绝对组件的大小和位置来布局组件。Flex为控制大小和位置提供了多种选项。组件布局包括两个方面：组件尺寸测量和组件定位。Flex通过使用一组规则来控制组件的布局。这些布局规则是为每个组件的测量大小规则和组件定位规则的组合。
布局管理器控制着Flex中的布局。管理器使用三个阶段的处理来决定应用中的每一个75 组件的大小和位置[3]。
阶段1-Commitment阶段，决定应用组件的属性设置。这个阶段容许容器在Flex决定它们的大小和位置前，设置决定内容的属性和配置组件本身。在commitment阶段，布局管理器使得每个组件运行它的commitProperties()方法，来决定属性值。
阶段2-Measurment阶段，计算应用中的每个组件的默认大小。这个阶段从最深层的组80 件开始，然后向应用容器进行。measurement阶段决定测量过的，或默认的每个组件的尺寸。每个容器的默认尺寸是基于它的子组件的默认或明确的尺寸。在measurement阶段，布局管理器使得每个组件调用它的measure()方法来决定组件的默认尺寸。在Flex应用为组件做任意变换之前所有的尺寸属性都会被计算。
 阶段3-Layout阶段，布局应用，包括移动和重新计算组件尺寸。这个阶段从最外层的85 容器开始，然后向最里层的组件进行。布局阶段决定每个组件的真实大小和位置。它同样做程序画图，如调用lineTo()或者drawRect()方法。布局管理器使得每个组件运行它的updateDisplayList()方法来布局组件的子组件。
1.3 事件机制
通过控件和ActionScript来处理事件是Adobe Flex应用的重要部分之一。事件使得开发90 者了解到在应用中发生的事情。事件可以由用户设备如鼠标和键盘产生，或者是由其它的外部输入产生，如网络服务调用等。当控件的生命周期或者是外观发生变化会触发事件，比如组件的创建和销毁或当组件大小发生变化。
任何用户和应用交互时就会产生事件。当没有直接的用户交互时同样可能产生事件，比如当数据从服务器加载完成或者当照相机变得可用。开发者可以通过添加事件处理器在代码95 中处理这些事件。事件处理器是编写的响应相应事件的函数或者方法。它有时也被称为事件监听器。
Flex事件模型是基于Document Object Model(DOM)三层事件模型[4]。虽然Flex并没有紧跟DOM标准，但是实现是类似的。Flex的事件模型由Event对象和它的派生类，以及事件派发模型构成。 100
组件产生和派发事件，并且监听其它事件。当一个对象需要另外一个对象的事件信息时，它会再那个对象上注册监听器。当事件产生时，通过调用在注册时要求的函数对象把事件派发给所有注册的事件监听器。为了从同一个对象接收多个事件，必须为每一个事件注册监听器。
2 Flex框架的优化 105
2.1 启动优化
通过对Flex的启动流程的研究，一般由SystemManager类来完成应用程序的创建和加载工作。SystemManager在被实例化以后，会查找相应的stage即当前负责显示对象的舞台，获取相应的尺寸信息。Flex程序一般只有两帧，第一帧会停留在SystemManager上，让其去加载相应的资源和应用程序[5]。当一切准备就绪以后，才会进入第二帧，运行应用程序的逻110 辑。以后就会不断的重复第二帧，使得应用程序的逻辑不断的得到执行。
为了加快Flex应用程序的启动速度，从SystemManager，Preloader，Application都进行了相应的优化。
在SystemManager中，可以去除动态共享库的加载，同时简化资源模块的加载，这样就可以提高加载的速度。同时，对于一些用处不大的管理类都可以去除。 115
在Preloader类中，会不断的检测加载过程中发生的进度事件，事件的不断更新需要进行处理，这样也加大的加载过程中的负担。因此，可以在Preloader类中，减少对一些事件的处理，减少向外派发大量的进度信息。具体包括在registerApplication函数中删除添加事件的处理，在displayClassCompleteHandler函数中删除去除事件的处理，也可以删除派发事件的处理。这样通过简化事件的处理，就能够加快Preloader类的加载速度。 120
在Application类中，由于Application类是有皮肤的，这样其实是增加了应用的显示列表的层次。在布局过程中如果显示列表层次较多，会加重自动布局的负担。因为自动布局的核心在于计算各个组件的大小和位置，层次越多需要计算的组件也越多，计算量增多，消耗
 时间也会增多。而应用刚刚启动时，所有的组件都需要计算大小和位置，这时计算量是相当大的，消耗的时间也比较大。因此，去除Application类的皮肤，可以减少显示列表的层次，125 从而减少显示列表的层次，降低自动布局过程中的计算开销，减小启动的时间。
Application类具体优化包括：该为从Group派生，并实现IFocusManagerContainer接口。这个接口是原有的Spark中SkinnableContainerBase需要实现的接口，为了保持一致性在这里重新实现。去除controlBarContent，controlBarLayout,controlBarVisible等等，因为控制条较少用到，所以可以考虑直接去除。和皮肤相关的函数有partAdded，partRemoved，130 getCurrentSkinState，这些函数可以直接去除。为了实现IFocusManagerContainer接口，需要加入defaultButton控件。
同时考虑到Application类的大小很少发生改变，所以考虑去除改变大小的处理。在CommitProperties中去除resize函数的处理。在初始化过程中，由于上下文菜单也较少用到，为了加快速度可以考虑去除上下文菜单。在initialize函数中去除initContextMenu函数，这135 个函数主要完成上下文菜单的初始化工作。
图1 Application类优化前后的继承关系图
2.2 简化核心组件
Flex4中核心的基础组件是Group和DataGroup，但是出于对皮肤机制的支持相应的产140 生了SkinnableContainer和SkinnableDataContainer[6]。皮肤机制虽然较好的实现了逻辑和外观分离的MVC思想，但是增加了显示列表的层次，使得在自动布局，消息传递方面性能都
 有较大的影响，因此应该尽量避免皮肤机制的使用。但是Spark控件集合中的大多数组件都有皮肤机制，因此需要对一些常用的控件做一些去除皮肤的处理。由于皮肤的实现也是用到基础控件Group和DataGroup的组合，因此在简化一些核心的基础控件时可以考虑只用145 Group和DataGroup来实现。通过简化一些使用的基础组件，如Button，ImageButton，Image组件等等，来达到优化的目的。在这些简单组件中，可以简化自动布局的过程，Group的布局类仅仅使用简单的基本布局，这样尽量减少不必要的计算，从而提高性能。
3 Flex框架的改进
3.1 DataGroup组件的改进 150
DataGroup组件是数据组件的核心基础，它支持对数据项的增加，删除，更新，插入等等操作。但是，DataGroup组件对数据项的改变是即时完成的，即数据项发生改变以后，在Flash下一帧刷新屏幕时，DataGroup组件就会显示改变完成以后的数据项状态。DataGroup组件的旧状态到新状态是跳变的关系，这种情形使得用户在操作时会产生突兀感，并不是良好的用户体验。因此，从提高用户体验的角度来看，在数据项发生改变时，从旧的视图状态155 到最终新的视图状态直接应该存在一个过渡的过程。为了满足的需求，在DataGroup的数据项发生改变，新旧视图切换时加入必要的过渡动态效果，使得新旧视图得到平滑的过渡，增强用户体验。
学术论文网Tag：代写论文 代写代发论文 职称论文发表 代写代发