Flex4 beta 的 Spark 布局

简介: Flex4 beta 的 Spark 布局 SPARK及HALO布局对比 和Spark架构的其他新特性一样,全新的布局一样是在强大的Halo布局的基础上发展而来的。Flex3开发者将会发现了解通用执行流程以及相应的API以及布局逻辑都是十分容易的 。

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()measuredWidthunscaled, 但 updateDisplayList()却可以".
相关文章
|
12天前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
|
前端开发 容器
Grid布局使用方法
Grid布局使用方法
99 0
Grid布局使用方法
16、实现水平垂直的三种方法(flex、grid、transform)
16、实现水平垂直的三种方法(flex、grid、transform)
111 0
16、实现水平垂直的三种方法(flex、grid、transform)
|
存储 移动开发 Oracle
向平台转型:Box发布开发者工具Box View+Metadata
在旧金山举行的Box第一次开发者大会上,刚刚宣布进行IPO的云存储公司Box宣布发布新工具Box View,连同此前在BoxWorld上发布的Metadata,公司CEO Aaron Levie在大会开场演讲中将它们称为“Box提供的开发者工具”。
158 0
向平台转型:Box发布开发者工具Box View+Metadata
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)   写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高。
960 0
|
分布式计算 Spark 开发者
|
容器
[GEF]在非XYLayout布局的container里调整children尺寸
以前只做过两种类型的GEF程序,一种是画布使用XYLayout,子图形可以在上面随意改变大小和位置;另一种是画布使用非XYLayout的布局,子图形的大小和位置由布局决定,用户不能用鼠标拖动的方式改变。
1297 0
|
前端开发 Windows 容器
背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid
原文:背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid [源码下载] 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel...
978 0