Flex4beta的Spark布局特性解析-51CTO.COM

本文和大家重点讨论一下Flex4beta的Spark布局的概念，Spark作为Flex4beta的全新组件模型和架构给RIA表格带来了很多惊喜，同时在皮肤、CSS、组件、状态、动画、文本、graphics标签、布局等等方面解决了许多关键性问题.

Flex4beta的Spark布局

注意：此文使用的是Flexbeta1，当然Flex4beta2也不会有任何问题
Spark作为Flex4beta的全新组件模型和架构给RIA表格带来了很多惊喜，同时在皮肤、CSS、组件、状态、动画、文本、graphics标签、布局等等方面解决了许多关键性问题.
本文我将会重点关注Spark布局。我会从全局的角度审视Flex3布局和Spark布局的主要不同之处。在简短介绍用法的不同之后我会一步步的创建一个自定义的Spark布局-一个简单的FlowLayout类。
全文所提到的Halo其实就是指代Flex3中的布局、组件、架构。而Spark则指代Flex4beta中全新的布局、容器以及整体架构。

需求

为了学到更多，你需要以下软件和文件:
Flex4beta
下载了解更多
FlashBuilder4beta（严格意义上来说不是必需的，但却十分有用而且免费）
下载了解更多
案例文件
spark_flow_layout.zip（ZIP7K）
预备知识
假定目标读者熟悉Flex3框架

SPARK及HALO布局对比

和Spark架构的其他新特性一样，全新的布局一样是在强大的Halo布局的基础上发展而来的。Flex3开发者将会发现了解通用执行流程以及相应的API以及布局逻辑都是十分容易的。然而，由于Spark更加注重模块化设计所以在一些地方还是有所不同与改进的。

相同的特性

对于使用MXML的开发者来说，没什么太大改变。像width,height,minWidth,explicitWidth和percentWidth这些属性以及相应的语法及语义都没有发生变化。仍然支持left，right，top，horizontalCenter和baseline这些样式。

组件开发者同样会发现相似的元素。核心布局管理类以及组件生命周期都没有发生变化。对于组件开发者来说三个十分熟悉的方法-commitProperties(),measure(),updateDisplayList()仍然被布局管理器以相同的顺序进行调用，并且失效规则也没有发生变化。
在measure()方法调用时组件依旧会设定默认的大小，同样，组件在updateDisplayList（）方法被调用时依旧会为它的子元素设定大小。

显著的不同

也许最明显的布局不同之处就在于Flex4beta中Spark布局从容器中分离出来了！当一个Spark容器调用measure()或updateDisplayList()时，测量和子元素的放置会交由一个Spark布局实例来完成。这种分离的模式带来了许多其他相关的新颖点：
布局逻辑被抽象在一个继承自LayoutBase类的单独类中，LayoutBase是Spark布局的最基础的类
全新的API被引入到Spark布局以及它测量、设值、摆放的元素中。这正是ILayoutElement接口的典型应用，并且支持2d和3d变换。如果你不创建自己的布局话，可能并不会注意到这个接口，但如果你这么做的话，你就会发现它是多么的高效。
布局虚拟化-创建，销毁以及回收数据容器的项目渲染器完全交给DataGroup容器(Spark为数据容器所开发的基本构造块)来实现。Spark布局支持虚拟化相对比较容易是因为这一繁重的任务DataGroup负责完成了。
Spark容器的显示列表顺序与子元素顺序相分离。举例来说，第一个子元素可以被渲染呈现在最后一个子元素的上面

提升的新特性

Flex4beta中Spark布局的改变致力于使整个系统更加模块化，功能更强大，更具扩展性。以下就是之前提到的Spark所带来的新特性以及改进的列表：
可设定的布局--因为布局逻辑与容器相分离，Spark容器可以被设定不同的Spark布局，即使是在运行的时候。这样减少了容器类的数量，同时提升了模块化以及代码的重用性。例如，在Spark中只有一个List类。为了获得Halo中TileList的功能，只需要为它制定一个TileLayout实例即可

自定义布局--伴随着布局逻辑与容器的分离，新的LayoutBase类以及ILayoutElement接口允许开发者更快更容易的开发强大的布局，再将它们和Spark容器组合起来。
随意2D变换--Spark布局现在支持随意2D变换。这一功能被内置在ILayoutElement接口中，并且被所有的Spark容器子类所支持。这样一来使得开发支持2D变换的自定义布局变得不费吹灰之力
像素平滑滚动--这一功能被DataGroup所支持，这样一来所有的Spark容器都将支持像素平滑滚动。在自定义布局中实现平滑滚动同样是轻而易举的事
3D支持--LayoutBase和ILayoutElement接口都支持3D。现在网络上已经出现了3D自定义布局的类，例如CoverFlow，Carousel，WheelLayout。
深度管理--开发者可以指定任意子元素的深度，无论在MXML中还是在自定义布局中

后期布局变换--开发者可以指定x,y,z,rotation,scale等属性而不会对布局产生任何影响。因为现在所有的Spark布局已经内置了2D变换支持，这一新特性十分实用。假如要做一个移上效果，当鼠标移动到水平布局的列表的一个缩略图上的时候，它会放大一点或者3d旋转，但这并不会将其他的缩略图挤向右侧。
相容坐标空间--所有的大小属性如width,height,measuredWidth,measuredHeight保持一致的预变换。这样就消除了冲突如“measure()中measuredWidth是无法缩放的，但updateDisplayList()却可以”。

使用Spark布局进行工作

因为布局和容器在Spark中是分离的，所以在使用Spark布局时需要注意一下几点改变。花点时间在下面的表格上，你可以直观的看到Halo布局容器类以及与其相对应的Spark布局和容器组合

【编辑推荐】