Flex4beta的Spark布局特性解析

开发 后端 Spark
Spark作为Flex4beta的全新组件模型和架构给RIA表格带来了很多惊喜,本文就向大家简单介绍一下Flex4beta的Spark布局。

本文和大家重点讨论一下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布局和容器组合

【编辑推荐】

  1. Flex4Beta引入新元素功能更强大
  2. Flex3到Flex4的转变新特性值得关注
  3. Flex4Beta引入新元素功能更强大
  4. FlexBuilder3.0与Eclipse3.4的完美结合
  5. 技术分享 Flex4兼容模式如何移植到发布版本

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-09 12:53:15

Flex4beta

2010-08-09 13:05:24

Flex4beta

2010-07-27 09:55:52

Flex4

2010-08-09 12:59:15

Flex4beta

2010-08-09 12:47:00

Flex4beta

2010-07-27 09:37:44

Flex

2010-08-13 14:45:58

Flex4布局

2010-08-05 13:14:16

Flex布局

2010-08-13 14:39:57

Flex布局

2009-07-29 09:40:02

Flex 4

2010-08-05 13:20:41

Flex最优布局

2010-08-05 13:33:06

Flex布局规则

2010-08-02 11:09:45

Flex4

2021-11-03 16:48:55

Flex前端特性

2010-08-05 13:27:06

Flex布局

2010-08-10 09:08:29

HTMLTemplatFlex4

2010-08-02 12:44:01

Flex3Flex4

2010-07-27 10:03:57

Flex4

2010-08-06 09:18:14

Flex

2010-08-02 11:26:21

Flex4
点赞
收藏

51CTO技术栈公众号