深入浅出Flex4 移动应用组件的生命周期.docVIP

深入浅出Flex组件生命周期前言 Flex开发移动应用时，出于性能考虑，需要使用AS3编写组件Skin，而不是使用MXML。实际上，通过使用AS3编写组件皮肤，开发者可以更深入的了解Flex的组件生命周期，无论是对于移动应用开发还是传统的桌面或者Web应用开发，都大有裨益。 本文通过一个实例，来展示如何使用AS3开发一个Spark组件和对应的移动组件Skin，更重要的是解释与之相关的Spark组件生命周期知识。关于本系列文章 Spark架构的目的就是分离组件行为和可视化。在Spark框架中，组件的数据和逻辑行为由组件类负责，而可视化剥离到Skin中。组件和其Skin间维护一个所谓的“契约”。本文不具体解释Spark架构的基本概念，如果您不了解Spark的基础知识，可以参考Deepa姐姐的文章 “?Spark架构和组件集的简要概述 ”。 本文将为你揭示Spark架构背后的秘密。本文介绍的内容和例子是基于Flex4.5的移动架构上，但是其中关于Spark架构的介绍99%通用于非移动框架的Spark组件。为了更好的理解本文，建议您下载Flex4.5 SDK源码。 我们的终极目标 Flex移动应用中，最频繁使用的组件之一可能就是ponents.LabelItemRenderer和ponents.IconItemRenderer了。IconItemRenderer继承自LabelItemRenderer，而LabelItemRenderer扩展了UIComponent。 这里有一点问题。如果参看Adobe官方文档《Using Adobe Flex4.5》, 在“Create advanced Spark visual components in ActionScript”一章有如下描述： Create a skinnable component by creating a subclass of the SkinnableComponent class. A skinnable component uses two files: one for the component definition and one for the skin definition. Create a Spark skinnable component as a subclass of the SkinnableComponent class. Spark体系的Skinnable组件应该是继承自SkinnableComponent。每一个组件包含两个文件，一个是组件类（继承自SkinnableComponent），一个是皮肤类。很显然，IconItemRenderer和LabelItemRenderer都不属于SkinnableComponent，其弊端在于每次如果你需要深度定制ItemRenderer，都不得不扩展这两个类，覆盖其中相关方法。 Part1的目标是使用ActionScript创建一个真正Skinnable的ItemRenderer。为了简单起见，我们以LabelItermRenderer为例。开发Spark组件和mobile应用适用的Skin类的步骤 B车追上A车，需要一个步骤：电A车！ 而创建Spark架构下Skinnable的组件需要两个主要步骤：创建负责数据和非可视化逻辑的组件类：该类将继承SkinnableComponent 。本例中需要额外两个接口mx.core.IDataRenderer和ponents.IItemRenderer，以便最终用于List的ItemRenderer。创建负责可视化的Skin类：由于我们的目标是为移动应用创建组件Skin，因此该类继承spark.skins.mobile.supportClasses.MobileSkin。最复杂的是把大象关进冰箱，具体方法超出本文讨论范畴。 创建Flex手机项目 启动FlashBuilder4.5，点击“文件-新建”创建“Flex手机项目”，如下图。 跟随向导选择手机操作系统和应用模板。本例中选择的模板是”基于视图的应用程序”。FlashBuilder将为我们创建空的手机应用项目，在本例中，我们最终所创建项目的项目结构如下： 创建Component类 创建继承SkinnableComponent，实现IDataRenderer和IItemRenderer的AS3类：MobileItemRenderer.as 在src目录下，创建路径为ponents的package。在该package下，通过菜单“新建-ActionScript Skinnable组件”创建Skinnable组件类。 在创建向导中(如下图)，指定该类名为MobileItemRenderer。可以看到该类的