Flex移动皮肤.doc

Flex移动皮肤 Flex 4.5提供的移动增强的皮肤特性，支持触摸交互、性能优良，并且考虑到了内存占用问题。尽管目前市场上有不少性能优异的设备，但典型的Spark皮肤（包括Flex 4引入的默认皮肤）却没有能够在移动设备上得到很好的应用。Adobe为移动优化过的皮肤在设计时就考虑到平衡两个对立的目标：性能优异却又容易创建。虽然MXML皮肤在某些情况下是有用的，但Adobe还是建议遵循以下简单的方针，确保Flex 4.5移动应用程序能够同时满足开发者和最终用户的性能要求。 这是介绍Flex 4.5移动皮肤特性系列文章中的第一篇。 本文将涵盖创建移动增强皮肤的基本知识，包括： Spark主题和Mobile主题的区别 MobileSkin基类中包含的性能优化 用FXG替代MXML图形 基于Mobile主题的ButtonSkin类创建自定义的Button皮肤 该系列文章中的余下几篇将会介绍更多高级主题，包括： 基于MobileSkin基类构建新的皮肤 创建空间感知的皮肤，可以适应所有屏幕尺寸 使用CSS媒体查询为每个平台创建自定义的主题 比较Spark和Mobile 主题 Mobile主题基本是Flex 4引入的Spark主题功能集的一个子集。Mobile主题专门针对性能和内存占用问题进行的优化。 MobileSkin 基类 Spark 皮肤通常需要继承 Skin (它扩展了 Group) 或者 SparkSkin (它扩展了 Skin)。Mobile主题里的皮肤使用一个新的基类MobileSkin，它扩展了UIComponent。 状态 MobileSkin对状态的支持是它一项针对移动开发优化过的主要特性。一般情况下，使用状态特性（在MXML或者ActionScript）都会带来额外的内存和性能消耗。而MobileSkin不再用State类及子类，而是手工的在代码里处理状态改变，例如SetProperty 和 AddChild。 布局 因为MobileSkin不是一个 Group, 它不能使用 Spark的基于约束的布局。例如 HorizontalLayout, VerticalLayout和BasicLayout 。 MobileSkin的内容在代码中人工的布局。MobileSkin加入了新的生命周期方法layoutContents(),，它在 updateDisplayList() 中被调用。这个方法用于放置皮肤的子元素。 FXG 和 MXML 图形 Mobile主题中皮肤的图形由编译过的FXG和用于绘制的ActionScript代码构成。绘制代码仅用于琐碎的图形或者需要支持样式的时候。处于性能优化的考虑，所有其他图形都使用编译过的FXG。MobileSkin基类不选择使用MXML图形，除非他们都包含在一个Group当中。 文本 Mobile主题在默认皮肤中不会使用Flash Text Engine (FTE)或者Text Layout Framework (TLF) 。这主要是基于性能的考虑，并且为了支持原生的文本输入和编辑。 Flex 4.5在mobilecomponents.swc中引入了一个新的StyleableTextField类。它扩展了TextField，并且加入了对样式的支持。它专门用于那些不准备与MXML结合使用的移动ActionScript皮肤和渲染器。 在同时使用StyleableTextField 和 Label (基于 FTE)时，开发者必须嵌入字体两次。Label 使用 embedAsCFF=true,而 TextField 和 StyleableTextField 用embedAsCFF=false。 Adobe不建议在移动项目中使用RichEditableText组件。请用TextArea组件代替。 MXML 和 ActionScript 由于MobileSkin删除了MXML皮肤的需要主要的申明性特性（状态、布局和MXML图形），Adobe建议用ActionScript编写皮肤。没有这三个特性，用MXML做声明性的标识已经没有什么优势了。 注意: 在Flash Builder中，可以指定库和主题的SWCs的代码或者编译过的ActionScript皮肤，由设计视同渲染出MXML皮肤。但设计视图不能通过指定代码渲染ActionScript皮肤。 不支持的全局样式 由于上文提到限制，Mobile主题删除了一些样式，包括： rollOverColor – 不支持，因为基础可触屏的界面是目前主要环境。 borderAlpha , borderColor , cornerRadius – 不支持，因为这些参数是编译过的FXG的属性，他们不会在运行时发生变化 dropShadowVis