Flex4 beta 的 Spark 布局

简介:

Flex4 beta 的 Spark 布局
SPARK及HALO布局对比

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

相同的特性

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

组件开发者同样会发现相似的元素。核心布局管理类以及组件生命周期都没有发生变化。 对于组件开发者来说三个十分熟悉的方法—commitProperties(), measure(), 和 updateDisplayList()—仍然被布局管理器以相同的顺序进行调用,并且失效规则也没有发生变化。

在 measure() 方法调用时组件依旧会设定默认的大小,同样,组件在 updateDisplayList() 方法被调用时依旧会为它的子元素设定大小。

显著的不同

也许最明显的布局不同之处就在于Spark布局从容器中分离出来了!当一个Spark容器调用 measure() 或 updateDisplayList() 时,测量和子元素的放置会交由一个Spark布局实例来完成。这种分离的模式带来了许多其他相关的新颖点:

布局逻辑被抽象在一个继承自LayoutBase类的单独类中,LayoutBase是Spark布局的最基础的类
全新的API被引入到Spark布局以及它测量、设值、摆放的元素中。这正是ILayoutElement接口的典型应用,并且支持2d和3d变换。如果你不创建自己的布局话,可能并不会注意到这个接口,但如果你这么做的话,你就会发现它是多么的高效。
布局 虚拟化—创建,销毁以及回收数据容器的项目渲染器完全交给DataGroup容器(Spark为数据容器所开发的基本构造块)来实现。Spark布局支持虚拟化相对比较容易是因为这一繁重的任务DataGroup负责完成了。
Spark容器的显示列表顺序与子元素顺序相分离。举例来说,第一个子元素可以被渲染呈现在最后一个子元素的上面
提升的新特性

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, and measuredHeight 保持 一致的预变换。这样就消除了冲突如 "measure() 中 measuredWidth 是 unscaled, 但 updateDisplayList()却可以".
本文转自jiahuafu博客园博客,原文链接http://www.cnblogs.com/jiahuafu/archive/2010/05/24/1742811.html如需转载请自行联系原作者

jiahuafu

相关文章
|
7天前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
|
8月前
display: block 属性影响flex布局
display: block 属性影响flex布局
|
10月前
|
前端开发 容器
一篇文章带你掌握Flex布局的所有用法(下)
一篇文章带你掌握Flex布局的所有用法(下)
42 0
一篇文章带你掌握Flex布局的所有用法(下)
|
10月前
|
前端开发 容器
一篇文章带你掌握Flex布局的所有用法(上)
一篇文章带你掌握Flex布局的所有用法(上)
55 0
16、实现水平垂直的三种方法(flex、grid、transform)
16、实现水平垂直的三种方法(flex、grid、transform)
111 0
16、实现水平垂直的三种方法(flex、grid、transform)
|
Web App开发 开发者
关于SAP Spartacus嵌套label的padding问题
关于SAP Spartacus嵌套label的padding问题
关于SAP Spartacus嵌套label的padding问题
flex布局和grid布局
flex布局 display:flex/inline-flex 设为 Flex布局后,子元素的float、clear和vertical-align属性将失效。但是position属性,依然生效。 父元素属性 flex-flow flex-direction和flex-wrap的缩写形式 ...
|
前端开发 容器
【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)
原文:【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)   写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高。
959 0