Flex4beta架构变化的示例分析

发布时间:2021-12-16 16:28:44 作者:小新
来源:亿速云 阅读:137

这篇文章给大家分享的是有关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架构变化的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. vue源码架构的示例分析
  2. VUE监听窗口变化事件的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flex4beta

上一篇:ServerLess如何进行天气API实践

下一篇:怎么解析Python中的Dict

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》