|
DataGroup类的数据项发生改变以后，会产生新旧两个视图。旧视图是发生变化前的视图状态，新视图是发生变化以后的视图状态。为了从旧视图到新视图的过渡，需要标记新旧160 视图的属性特征。由于数据项本身并没用任何特征，从本质上看所有数据项的是相同的，所以只要标记数据项的序号即可。将数据项的序号做为视图的状态参数，但是数据项发生变化以后，序号本身也会发生变化，原先的序号可能已经不代表原先的数据项，为了统一，序号均转化为以新视图为参照的序号。因此，记录状态的参数一律为以新视图为参照的序号。这里会产生增加或者删除数据项而产生的序号问题，增加或删除的数据项会单独的进行记录和165 处理。 由于DataGroup的数据项可能很多，但是实质上只要记录当前可视区域的状态参数，其它不在可视区域的数据改变不会影响组件的绘图。记录视图的状态参数以后，需要计算各个数据项在新旧视图中的位置参数，然后使用缓动函数就能完成从旧视图到新视图的过渡。先计算旧视图中移出可视区域的数据项在新视图中的位置，再计算新视图移入可视区域的数据170 项在旧视图中的位置。至此，新旧视图的所需位置信息都计算出来，然后应用缓动函数从旧视图向新视图过渡。在应用缓动函数时，根据位置信息区分出运动的前向或后向。将数据项分成前向和后向两组，然后应用缓动函数分别运动。对于增加或删除的数据项单独记录下来，然后运用缓动函数决定数据项出现或者消失的方式。 具体实现包括： 175 首先，改造spark中的DataGroup类。增加updateDisplayListEx函数，该函数为原DataGroup中的updateDisplayList去除finishVirtualLayout函数，即不去做VirtualLayout的回收工作。当数据项很多的时候，DataGroup会使用虚拟布局，会复用移出可视区域的渲染器。finishVirtualLayout函数会回收相应的渲染器，但是原有数据项的渲染器被回收就无法进行缓动函数，因此不应该立即进行渲染器的回收工作，需要等过渡效果结束以后再进行相180 应的回收工作。增加recyle函数，过渡效果结束后做回收处理。通过oldVrRendererIndices 和vrRendererIndices,获取旧视图和新视图的可见区域数据项的序号。通过getIndexToRenderer,获取每个序号对应的渲染器。dataProviderChangeVR表示dataProvider是否发生变化，beenDraged表示是否被拖动。 然后，由DataGroup类派生出DataGroupEx。定义tween属性为表示是否应用缓动效果，185 每次设置tween时清除上次的效果。resetTween清除所有的缓动效果。tweenSwap 实现互换位置的操作，在实现中被分解为删除和插入两个操作，即从原位置删除再添加到目的位置。在updateDisplayList中，根据Tween效果是否应用，来调用dataGroup中相应的updateDisplayList。 190 图2 DataGroupEx类属性和方法 最后，在layout中进行新旧视图的位置计算，水平，竖直和Tile三种layout分别为：HorizontalLayoutEx,VerticalLayoutEx,和TileLayoutEx。这三种布局的实现流程基本相同，下面以VerticalLayoutEx为例具体说明。VerticalLayoutEx的具体实现： 1）在updateDisplayListVirtual中，首先修正滚动位置，保证滚动位置的正确。然后，195 在计算新视图各个元素（element）的新位置时，并不立即设置，而是利用数组position记录下来；如果采用Tween效果，则调用startTweenEffect,开始缓动效果。 2）在startTweenEffect中，首先计算在旧视图中已经移出元素的序号，再计算新视图中移入元素的序号。计算移入元素在旧视图中的位置，计算的到结果后直接设置；计算移出元素在新视图中的位置，得到结果后保持到position数组中。此时，已经得到新旧视图的所有200 位置信息，调用tweenTo，开始缓动。 图3 startTweenEffect函数流程图 3）在tweenTo中，计算出前向运动的元素，保持到前向forward数组中；计算出后向运动的元素，保持到后向backward数组中。对前向和后向分别采取缓动效果。 205 HorizontalLayoutEx和TileLayoutEx的实现基本类似，只是在位置计算时略有不同。经过改造的DataGroup，当数据项发生改变后，可以支持过渡效果，提升了用户体验，比原有的DataGroup的用户交互更加良好。 3.2 List组件的改进 Spark List控件是显示数据项的列表。用户可以从列表中选择一个或多个数据项。当数210 据项不适合控件的大小时，List控件会自动的显示水平或竖直的滚动条。List控件是SkinnableDataContainer容器的子类。因此，可以设置List控件的布局，应用皮肤，并且定义项渲染器[7]。 Spark控件集中List组件带有皮肤，而且它对拖放数据项也没有过渡效果的支持，在拖放的过程中并不支持数据项的实时更新，一般会在拖放结束后才更新视图。因此，为了优化215 性能，减少层次去除原有List组件的skin并增加对拖放的过渡效果的支持。 基本的设计思想为，改造spark中SkinnableDataContainer类，将其skin去除，再从此类的基础上派生出新的ListEx类。对于拖放的处理，主要是符合拖放的事件机制流程，响应相应的事件，然后操作DataGroupEx类，使其完成相应的过渡效果。 具体实现如下： 220 1) 改造spark中SkinnableDataContainer类，将其skin去除定义出新的DataContainerLite类。为了支持滚动，将DataContainerLite改为从Scroller派生。去除所有的skin part部分。并将原来skin中的DataGroup组件改成具有过渡动画效果的DataGroupEx组件，并将它作 为Scroller的viewPort。为了避免和Scroller的layout发生冲突，将原有的layout属性，改成layoutEx属性，这样layoutEx作为DataGroupEx的layout。重载createChildren函数，创225 建DataGroupEx将其作为Scroller的viewPort。重载measure和updateDisplaylist。在updateDisplayList中调用drawBackground，绘出背景，保证滚动不会出错。 2) 修改ListBase类，使其从DataContainerLite派生。将layout属性都改成layoutEx属性。 3) List类从ListBase派生，去除skin part。将layout属性都改成layoutEx属性。 230 4) ListEx类从List派生， 主要处理拖放的动画效果。重载dragStartHandler，dragEnterHandler，dragOverHandler，dragExitHandler，dragDropHandler，dragCompleteHandler。在dragStart时记录被拖动的数据项的序号，在dragOver时，判断并进行位置交换的动画，具体的动画效果为调用DataGroupEx的tweenSwap完成。 4 结论 235 本文深入的研究了Flex框架技术，对Flex框架进行一些优化和改进，包括简化显示列表的层次结构，简化应用类，简化部分核心基础组件，简化部分组件的皮肤机制，增加数据容器的动画效果，改造列表容器等等。通过优化和改进，使得Flex框架运行的效率得到提高，增加用户的易用性。 240 [参考文献] (References) [1] 董龙飞，肖娜. Adobe Flex大师之路[M]. 北京：电子工业出版社，2009. [2] 布朗. Flex程序设计[M]. 北京：人民邮电出版社，2008. [3] 孙涵波. Adobe Flex 3程序设计指南[M]. 北京：电子工业出版社，2009. [4] 黄曦.Flex 4 RIA开发详解[M]. 北京：电子工业出版社，2010. 245 [5] 聂晓霞. Flex从入门到精通[M]. 北京：清华大学出版社，2008. [6] 吕辉. Flex从入门到实践[M]. 北京：清华大学出版社，2009. [7] 王睿. Flex与ActionScript编程[M]. 北京：机械工业出版社，2008. 学术论文网Tag：代写论文 代写代发论文 职称论文发表 代写代发 |
