在学习Flex的过程中,你可能会遇到Flex4beta架构变化,本文就向大家简单介绍一下,Flex4beta的重要主题之一是“用心设计”。这个目标涉及在设计人员和开发人员之间创造一个更顺畅的工作流程。为了帮助实现这一点,该框架将组件可视部分与其剩余行为明确划分开。
Flex4beta架构变化概述
Flex4beta的重要主题之一是“用心设计”。这个目标涉及在设计人员和开发人员之间创造一个更顺畅的工作流程。为了帮助实现这一点,该框架将组件可视部分与其剩余行为明确划分开。在Flex3中,组件的代码包括以其行为、布局和可视变化为中心的逻辑。在Flex4beta中,组件被划分为不同的类,各个类负责处理特定的行为。
◆Gumbo架构文档*中的说明如下:
“主组件类,即类名与组件的MXML标签名匹配的那个类封装了组件的核心行为。这包括定义组件调度的事件、组件表示的数据、接通作为主组件组成部分的任何子组件以及管理和跟踪内部组件状态(稍后我们将详细讨论状态)。
与之相应的组件类是一个外观类,它负责管理与组件的可视外观相关的一切内容,包括图形、布局、表示数据、更改不同状态中的外观以及从一个状态过渡到另一个状态。在Halo模型中,Flex组件外观是只负责组件的某个图形部分的资源。更改组件外观的任何其他方面,如布局或状态可视化,需要将组件子类化并直接编辑ActionScript代码。在Gumbo模型中,所有这一切都在外观类中以声明方式进行定义,并且主要通过名为FXG标签的新图形标签进行定义。”
要进一步了解Flex4beta中新的图形标签,您可以阅读FXG1.0规范*。
作为上述架构的示例,您可以参考spark.components.Button类的代码。这个类只包含以组件行为为中心的逻辑。在外观类spark.skins.default.ButtonSkin中定义这个恶组件的所有可视部分。
考虑到性能,Flex4beta为开发人员提供了构造块,可供他们根据需要选择功能。默认情况下,关闭并非所有应用程序都需要的重量级功能,如滚动和虚拟化。
◆Flex4beta中的名称空间与包
在将Flex3类原封不动地保留在同一mx.*包中的同时,Flex4beta为组件、核心类、效果、滤镜、布局、基元、外观和utils引入了spark.*包。
Flex4beta提供一套新的组件和效果,它们与Flex3组件共享许多相同类名。为了避免MXML中出现名称冲突,Flex4beta随附四个独特的名称空间:MXML2006、MXML2009、Spark和Halo。
MXML2006:
之前版本的Flex中使用的旧版MXML语言名称空间。使用Flex4beta编译的Flex3应用程序可以继续使用这个名称空间。
URI:http://www.adobe.com/2006/mxml
默认前缀:mx
MXML2009:
新的MXML语言名称空间。这纯粹是一个语言名称空间,不包含组件标签。
URI:http://ns.adobe.com/mxml/2009
默认前缀:fx
Spark:
这个名称空间包含所有新的Spark组件。它应当与MXML2009语言名称空间一起使用。
URI:library://ns.adobe.com/flex/spark
默认前缀:s
Halo:
这个名称空间包含所有Halo组件。它应当与MXML2009语言名称空间一起使用。
URI:library://ns.adobe.com/flex/halo
默认前缀:mx
以下是使用MXML2009、Spark和Halo名称空间创建一个简单的Flex4beta应用程序的简明示例。它使用一个HaloDateChooser和一个SparkButton。
- <s:Applicationxmlns:fxs:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/halo">
- <mx:DateChooseridmx:DateChooserid="main_calendar"x="20"y="20"/>
- <s:Buttonlabels:Buttonlabel="submit"x="220"y="20"/>
- </s:Application>
Flex4beta还在CSS中加入了多名称空间支持。如果将MXML2009、Spark和Halo名称空间与字体选择器一起使用,您需要在CSS定义中定义一组名称空间以避免名称冲突。
以下是一个将字体选择器用于Halo和Spark组件的CSS示例:
- <fx:Style>
- @namespaces"library://ns.adobe.com/flex/spark";
- @namespacemx"library://ns.adobe.com/flex/halo";
- s|Button{color:#FF0000;}mx|DateChooser{color:#FF0000;}
- </fx:Style>
◆默认Property和Declarations标签
在Flex4beta发布之前,Flex语言允许Application根标签包含可视子代和非可视子代。可视子代与addChild()一起添加到Application,非可视子代则作为属性声明。随后,表示新属性声明的非可视子代不可以作为Application的直接子代。您可以将这些非可视子代添加到<fx:Declarations>标签下。这包括效果、验证程序、格式化程序、数据声明和RPC类等非可视子代。以下是一个简短的示例:
- <s:Applicationxmlns:fxs:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark">
- <fx:Declarations><s:Fadeids:Fadeid="fadeEffect"target="{targetButton}"alphaFrom="1"alphaTo="0"/>
- </fx:Declarations><s:Buttonids:Buttonid="targetButton"/>
- <s:Buttonlabels:Buttonlabel="playeffect"click="fadeEffect.play()"x="80"/>
- </s:Application>
【编辑推荐】
- Flex4beta的Spark布局特性解析
- Flex4Beta引入新元素功能更强大
- Flex4beta的Spark布局特性解析
- Flex4Beta引入新元素功能更强大
- 技术分享 如何将Flex3应用程序迁移到Flex4beta