2023年6月21日发(作者：)
闲云无衣 /xvridanFlex 快速入门无衣摘自/cn/(版权归原作者所有) 闲云无衣 /xvridanFlex 快速入门: 使用 MXML 和 ActionScript进行编码Adobe® 将 Flex 实施为 ActionScript 类库。 该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。 您通过将 MXML 和 ActionScript 语言与该类库一起使用来开发应用程序。MXMLMXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。 您还使用
MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。例如, 您通过使用下面的 MXML 语句, 使用
属性设置在 Button 实例上显示的标签的文本。
下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码:
xmlns:mx="/2006/mxml" horizontalAlign="center" verticalAlign="center">
的一个很小的可执行文件, 处于 Flex 2 安装文件夹下的 Flex SDK 2.0bin 文件夹中。
提示: 确保 Flex 2 installation folderFlex SDK 2.0bin 文件夹处于您的系统的路径中。 让
Flex 编译器处于您的路径中, 使您不管当前处于哪个文件夹中, 都可以从命令行调用它。说明1.在您喜爱的文本编辑器 (如, 记事本) 中创建一个新文件并将它另存为
。
2.从前面的示例中将代码输入到 中并保存您的文件。
3.通过选择“开始”>“所有程序”>“附件”>“命令提示符”, 打开命令窗口。
4.将您的当前目录更改为包含您在步骤 1 中保存的 Flex 应用程序的文件夹。
5.键入下面的命令来调用 Flex 编译器:
mxmlc --strict=true --file-specs 以双短划线开头的命令字符串中的项目被称为编译器选项, 它们被用于定义 Flex 编译 闲云无衣 /xvridan器的行为。 在前面的示例中, 您将 --strict 选项设置为 true 以强制编译器进入 Strict
模式。 在 Strict 模式下, 编译器对您的代码具有较高的期望。 例如, 它期望您以静态方式键入变量。 您使用 --file-specs 选项来指定被编译的 MXML 文件。6.在 Windows 资源管理器中双击 SWF 文件或在命令行中输入其名称, 在独立的 Adobe
Flash Player 9 中打开它。
此示例会产生下列 SWF 文件:
提示: 您还可以使用 Adobe Flex Builder 2 创建和编译 Flex 应用程序, Adobe Flex Builder 2 是包含可视设计视图的用于 Flex 开发的集成开发环境 (IDE)。 有关 Flex Builder 2 的详细信息, 请参阅使用 Flex Builder 2。ActionScriptMXML 标签与 ActionScript 类或类的属性相对应。 当您编译 Flex 应用程序时, Flex 会解析
MXML 标签并生成相应的 ActionScript 类。 接着它将这些 ActionScript 类编译成存储在
SWF 文件中的 SWF 字节码。提示: 若要查看 Flex 生成的中间 ActionScript 文件, 请将 --keep-generated-actionscript 选项添加到 mxmlc 命令中。继续上面的例子, Flex 提供定义 Flex Button 控件的 ActionScript Button 类。 闲云无衣 /xvridan注意: 在前面的示例中,
Application 标签中的唯一 URL 声明的。 mx 前缀将 mx 名称空间中的每个组件映射到其完全合格的类名称。 这就是 Flex 编译器可以找到与 mx 名称空间中的 MXML 标签相对应的
ActionScript 类的方式。下面的示例阐述如何通过使用 ActionScript 创建 Button 控件。 该结果与该 MXML 版本是相同的。
xmlns:mx="/2006/mxml" viewSourceURL="src/GettingStartedActionScript/" creationComplete="creationCompleteHandler();" width="300" height="80" > myButton = new Button(); = "I'm a button!"; // Get notified once button component has been created and processed for layout ntListener (ON_COMPLETE, buttonCreationCompleteHandler); // Add the Button instance to the DisplayList addChild (myButton); } private function buttonCreationCompleteHandler ( evt:FlexEvent ):void { // Center the button myButton.x = /2 - /2; myButton.y = /2 - /2; } ]]>
此示例会产生下列 SWF 文件:
注意: 此示例阐述线上 ActionScript 与 Script 标签的使用, 这是在 Flex 应用程序中包含
ActionScript 的一个可能的方法。 其他方法有: 将脚本块分隔到外部 ActionScript 文件中, 或使用外部 ActionScript 类。 闲云无衣 /xvridanFlex 快速入门: 创建您的第一个应用程序MXML 文件是普通的 XML 文件, 所以可以选择多种开发环境。 简单的文件编辑器、专用的 XML 编辑器或者支持文本编辑的集成开发环境 (IDE) 均可用于 MXML 代码编写。
Flex 提供专用的 IDE, 称为 Adobe® Flex™ Builder™ 2, 您可以使用它来开发应用程序。MXML 文件的第一行是 XML 声明。 此行必须成为每个 MXML 文件的第一行。下一行是
text 属性被设置为 "Hello, World!"。
来设置组件的样式。 有关详细信息, 请参阅 Flex 2 开发人员指南*中的“使用层叠样式表
(CSS)”。注意: 可以通过使用命令行编译器 mxmlc 或 Flex Builder 2 编译 Flex 应用程序。有关使用
mxmlc 编译应用程序的说明, 请参阅使用 MXML 和 ActionScript 进行编码教程。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/HelloWorld/" horizontalAlign="center" verticalAlign="middle" width="300" height="160"> paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" title="My Application" >
中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在
ActionScript 中注册事件的事件监听器。接收事件通知有三种方式:
•••在 MXML 中注册事件处理程序
在 MXML 定义中创建线上事件处理程序
通过 ActionScript 注册事件监听器
在 MXML 中注册事件处理程序获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。在此示例中, 您为 Button 控件的 click 事件定义一个事件处理程序。用户单击 Button 控件时, 事件处理程序会将 Label 控件的 text 属性设置为“Hello, World!”。
示例 xmlns:mx="/2006/mxml" width="300" height="200" horizontalAlign="center" verticalAlign="middle" viewSourceURL="src/HandlingEventsEventHandler/"> private function clickHandler ( event:MouseEvent ):void { = "Hello, World!"; } ]]> title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > /> 闲云无衣 /xvridan
这也称为使用线上事件处理程序。
在下面的示例中, 您设置
text 属性, 而不会调用事件处理程序方法。
提示: 使用线上事件处理程序可能很快并产生很少代码, 但它们也会导致代码很难阅读、维护和缩放。 不在一个线上事件处理程序中包含多个 ActionScript 语句是一个很好的经验。 如果您必须包含更加复杂的逻辑, 请将它置于 ActionScript 帮助器方法中或置于 ActionScript
事件处理程序中。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/HandlingEventsInlineMethod/" horizontalAlign="center" verticalAlign="middle" width="300" height="200"> title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >
在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。
您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。
提示: Application 表单的 creationComplete 事件在 Application 表单及其子级被初始化之后,
在启动应用程序时发生。 creationComplete 事件的事件处理程序为您提供一个运行
ActionScript 代码以注册事件监听器的方便位置。示例
xmlns:mx="/2006/mxml" viewSourceURL="src/HandlingEventsActionScript/" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);"> private function clickHandler ( event:Event ):void { = "Hello, World!"; } ]]> 闲云无衣 /xvridan title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >
Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。在 Flex 应用程序中定位组件的方法有三种:
•••使用自动定位
使用绝对定位
使用基于限制的布局
使用自动定位对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。可以通过指定容器属性控制布局的各个方面。下列属性是最常见的:
•layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时,
容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。
horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。
••此示例覆盖 Application 容器的 horizontalAlign 属性的 "left" 的默认设置和Application 容器的 verticalAlign 属性的 "top" 的默认设置以分别指定 "center" 和 "middle"。此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label
和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutAutomatic/" horizontalAlign="center" verticalAlign="middle" width="380" height="150"> title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" layout="horizontal" verticalAlign="middle" 闲云无衣 /xvridan > id="myButton" label="Click Me!" click=" = 'Hello, World!';" />
使用绝对定位有三个容器支持绝对定位:
••如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。
Canvas 容器始终使用绝对定位。
使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局；否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutAbsolute/" horizontalAlign="center" verticalAlign="middle" width="280" height="170"> title="My Application" layout="absolute" width="220" height="90" > id="myLabel" 闲云无衣 /xvridan x="10" y="10" width="180" fontWeight="bold" fontSize="24" /> id="myButton" x="60" y="10" label="Click Me!" click=" = 'Hello, World!';" /> xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsBottomRight/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> 闲云无衣 /xvridan title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" bottom="10" right="10" />
如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。
示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsEdges/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" top="10" bottom="10" left="10" right="10" 闲云无衣 /xvridan />
锚定组件的中心您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离；一个负数会从中心向左或向上移动组件。horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsCenter/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" verticalCenter="0" horizontalCenter="0" />
的完全长度。 将 Label 控件的 top 属性设置为 10 以限制它看起来与 Panel 的顶部的距离为 10 像素。 将其 horizontalCenter 属性设置为 10 以完美地将它在 Panel 中居中。
将 Button 控件的 left 和 right 属性设置为 10 以使它拉伸至距离 Panel 的每一边都在 10 像素内。 将其底边属性设置为 10 以限制其底边距离 Panel 的下边为 10 个像素。下面的图说明您以可视方式设置的属性的效果。 可视布局控件是 Flex Builder 2 的设计视图的组成部分。提示: 不要使用 verticalCenter 样式属性指定 top 或 bottom 样式属性, verticalCenter 值会覆盖其他属性。 类似地, 不要使用 horizontalCenter 样式属性指定 left 或 right 样式属性。由基于限制的布局确定的大小会覆盖任何显式或基于百分比的大小规范。 例如, 如果您指定
left 和 right 样式属性, 产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraints/" horizontalAlign="center" verticalAlign="middle" 闲云无衣 /xvridan width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myLabel" fontWeight="bold" fontSize="24" top="10" horizontalCenter="0" /> id="myButton" label="Click Me!" click=" = 'Hello, World!';" bottom="10" height="22" left="10" right="10" />
•••••••••图像 (多个实例)
图像 (单一实例)
使用 scale-9 拉伸的图像
用于与 CSS 和外观一起使用的图像
SWF 文件
SWF 库资源
声音文件
SVG 文件
字体
嵌入图像 (多个实例)
可以在 Flex 应用程序中嵌入具有 PNG、JPEG 或 GIF 文件格式的图像并创建它的一个或多个实例。此示例使用 [Embed] 元数据标签在您的应用程序中嵌入图像并将它与可绑定的 ActionScript
类相关联。 接着它将 Image 控件的 source 属性绑定到 Logo 类。 可以将 Logo 类绑定到采用某个图像的任何组件属性, 比如 Button 控件的 icon 属性。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImages/" layout="horizontal" width="350" height="250"> ]]>
嵌入图像 (单一实例)
可以使用线上 @Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像。此示例将一个图像组件添加到一个应用程序中并使用其 source 属性中的 @Embed 指令。
若要在另一个 Image 控件中使用这一相同的图像, 则还必须将它嵌入到该组件中。 如果希望显示嵌入的图像的多个实例, 请使用 [Embed]元数据标签。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingAnImage/" width="200" height="240">
您 可以将某个图像文件嵌入到您的 Flex 应用程序并以类似组件的方式智能地缩放它。 通过使用 scale-9 功能, 您的图像的四个角根本没有缩放, 水平边框仅在水平方向上缩放, 而垂直边框仅在垂直方向上缩放。 例如, 这对于以下情况很有用: 创建使用圆角的框, 或在您希望在缩放组件时保持边框清晰的位置进行组件样式调整。
此示例使用 Embed 元数据标签的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和
scaleGridRight 网格线位置属性来创建您的 scale-9 网格。提示: 获得网格线位置的值的一种比较容易的方法是将指南与 Adobe® Photoshop® 中的
Rectangular Marquee 工具和 Info 选项板一起使用。提示: 旋转嵌入的 scale-9 图像的实例会关闭该图像的 scale-9 以在将来进行任意大小转换。示例
xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImagesScale9/" layout="vertical" width="400" height="480"> scaleGridTop="55", scaleGridBottom="137", scaleGridLeft="57", scaleGridRight="266" )] [Bindable] public var FancyBorderImage:Class; ]]>
使用 CSS 为外观嵌入图像
您可以在 Flex 应用程序中嵌入图像并将它用于设置组件的外观。
您可以定义一个 CSS 类型选择器为给出类型的所有组件设置外观。 在此示例中, 您为
Button 控件创建了一个类型选择器。 类型选择器通过使用 Embed指定这些图像用作您的组件的外观属性。 您还可以定义一个类选择器来创建可作为样式应用到特定组件的自定义
CSS 类。提示: 类选择器创建可用来设置单独的组件的样式的已命名样式类, 方法是通过使用 闲云无衣 /xvridanstyleName 属性将类选择器分配给该组件。 类型选择器为给出类型的所有组件设置样式, 如下面的示例所示。示例
xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImagesCSS/" layout="horizontal" width="270" height="100" horizontalAlign="center" verticalAlign="middle" > { upSkin: Embed("assets/box_"); overSkin: Embed("assets/"); downSkin: Embed("assets/box_"); }
嵌入 SWF 文件嵌 入 SWF 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SWF 文件的实例当作 MovieClip 类的实例处理。 (它们实际上是 MovieClipAsset 类的子类, MovieClipAsset 类是 MovieClip 类的子类。)
注意: 您无法直接访问嵌入的 SWF 文件的属性或方法。 但是, 您可以使用 LocalConnection
以允许它们进行通信。示例
xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingSwfFiles/" 闲云无衣 /xvridan layout="horizontal" width="290" height="290" horizontalAlign="center" verticalAlign="middle" > ]]>
嵌入 SWF 库资源
您 可以在应用程序中嵌入来自现有 SWF 库中的特定符号。 Flash 定义三种类型的符号:
Button、MovieClip 和 Graphic。 您可以在 Flex 应用程序中嵌入 Button 和 MovieClip 符号,
但您不能嵌入 Graphic 符号, 因为无法为 ActionScript 导出 Graphic 符号。
此示例使用 [Embed] 元数据标签的 source 属性来指定包含您的库的 SWF 文件, 并使用
[Embed] 元数据标签的 symbol 属性来指定您要在该库中嵌入的符号的链接 ID。
示例
xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingSwfLibraryAssets/" layout="horizontal" width="450" height="240" horizontalAlign="center" verticalAlign="bottom" > 闲云无衣 /xvridan [Embed(source="assets/", symbol="Pumpkin")] [Bindable] public var Pumpkin:Class; ]]>
嵌入声音文件
您可以在 Flex 应用程序中通过使用 [Embed] 元数据标签嵌入 MP3 文件并播放它。
注意: 记住嵌入的声音文件会成为您的应用程序 (最终的 SWF 文件) 的一部分, 而 MP3 文件会很大, 从而会使您的应用程序变得很大并会对应用程序的下载速度产生负面影响。
此实例将该 MP3 的一个新实例创建为一个 SoundAsset。它使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例, 并存储返回的 SoundChannel 对象, 从而您可以稍后调用
SoundChannel 对象的 stop() 方法以结束播放。示例
horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/"> 闲云无衣 /xvridan public function playSound():void { // Make sure we don't get multiple songs playing at the same time stopSound(); // Play the song on the channel channel = (); } public function stopSound():void { // Stop the channel, but only if it exists if ( channel != null ) (); } ]]> Attribution License)]]>
可以将 SCG 文件嵌入到 Flex 应用程序中。
嵌 入 SVG 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SVG 文件的实例当作 Sprite 类的实例处理。 (它们实际上是 SpriteAsset 类的实例, SpriteAsset 类是 Sprite 类的子类。) 嵌入的 SVG 文件还保留它们的矢量属性, 且在被缩放或转换时不会显示像素。
注意: 不能在运行时导入 SVG 文件；仅可以在编译时在 Flex 应用程序中嵌入它们。
示例 xmlns:mx="/2006/mxml" layout="horizontal" viewSourceURL="srcEmbeddingSvgFiles/" width="600" height="470"> ]]>
提示: SVG 青娃图形是 Architetto Francesco Rollandin 创建的, 他慷慨地将它发布到 Open
Clip Art Library 的公共区域中。 您可以在网站找到其他可免费使用和试验的 SVG 文件。 闲云无衣 /xvridan嵌入字体
您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个
Text 控件并将其样式设置为该类选择器。提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。详细信息: 有关使用字体的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用字体”。示例 xmlns:mx="/2006/mxml" layout="horizontal" horizontalAlign="center" verticalAlign="center" viewSourceURL="src/EmbeddingFonts/"> { font-family: Copacetix; src: url("assets/"); unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Copacetix; font-size: 24pt; }
使用基于按钮的控件
使用基于列表的控件
使用基于文本的控件基于文本的控件用于显示文本和/或接收来自用户的文本输入。在 Flex 中提供的基于文本的控件有 Label、Text、TextArea、TextInput 和 RichTextEditor 控件。TextInput 和 TextArea 组件既可以显示文本又可以接受用户输入, 而 Label 和 Text 控件仅用于显示文本。Text 和 TextArea 控件可以显示跨多行的文本, 而 Label 和 TextInput 控件用于显示单行文本。使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于
RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。所有基于文本的组件都有一个 text 属性, 可用来设置要显示的文本。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsTextBased/" layout="horizontal" width="380" height="320" horizontalAlign="center" verticalAlign="middle" > title="Leave a comment" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" > text="Fill out this form to leave us a comment:" width="100%" />
Button 控件就会保持其被按下的状态。切换 Button 控件直到您又一次选中它之后, 才会保持被按下的状态。当用户选中控件时, 按钮通常使用事件监听器来执行操作。 当用户在 Button 控件上单击鼠标, 且 Button 控件被启用时, 它会发出一个 click 事件和一个 buttonDown 事件。LinkButton 控件创建一个支持可选图标的单行超文本链接。 它根本上是一个没有边框的
Button 控件。 可以使用 LinkButton 控件在 Web 浏览器中打开 URL。CheckBox 控件是一个常用的图形控件, 它可以包含一个复选标记或者未被选中 (空)。 在需要收集一组并不相互排斥的 true 或 false 值的地方, 可以使用 CheckBox 控件。 可以给
CheckBox 控件添加文本标签, 并将文本标签置于复选框的左侧、右侧、顶部或底部。 Flex
会裁剪 CheckBox 控件的标签以适合控件的边界。使用 RadioButton 控件, 用户可以在一组相互排斥的选项内作单一选择。RadioButtonGroup
控件由具有相同组名的两个或更多 RadioButton 控件组成。该组可以指由
UIComponent 对象。PopUpButton 控件的一个常见的用途是让弹出按钮打开 List 控件或
Menu 控件, 这两个控件更改主按钮的功能和标签。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsButtonBased/" layout="absolute" width="460" height="400"> private const NL:String = "r"; private function submitButtonClickHandler (event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + + NL; userDetails += "Email: " + + NL; userDetails += "Hide email? " + (ed ? "Yes" : "No") + NL + NL; userDetails += "Comment:" + NL + NL + ; (userDetails); } private function emailButtonClickHandler (event:MouseEvent):void { var msg:String = "You can use the navigateToURL() method to open a URL" msg += " using a call similar to the following:rr"; msg += "navigateToURL (new URLRequest ('mailto:comments@'));"; (msg); } ]]> title="Leave a comment" left="10" top="10" right="10" bottom="10" layout="absolute" > text="Fill out this form to leave us a comment:" width="250" x="10" y="10" fontWeight="bold" /> bottom="40"/> id="hideEmail" y="103" left="90" label="Hide my email address" selected="true" /> id="emailButton" y="272" horizontalCenter="0" label="Having trouble? Email us!" click="emailButtonClickHandler(event);" /> id="submitButton" label="Submit" click="submitButtonClickHandler(event);" />
ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。几 个 Flex 框架组件 (包括所有基于列表的控件) 表示来自某个数据提供程序的数据, 数据提供程序是一个包含控件所需数据的对象。例如, 一个 Tree 控件的数据提供程序确定树的结构和分配给每个树节点的相关联的数据, 而一个 ComboBox 控件的数据提供程序确定控件的下 闲云无衣 /xvridan拉列表中的项目。注意: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也从数据提供程序获取数据。显示应用程序数据的控件有时被称为数据提供程序控件。有关使用数据提供程序的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用数据提供程序和集合”。您 可以使用两种方法设置组件的数据提供程序: 第一种方法是通过将 Array 或 Collection 定义为取得数据提供程序的控件的子标签, 在线上在 MXML 中定义数据提供程序。这种方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。第二种方法是使用数据绑定将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。这后一种方法用于显示由服务器端调用引起的数据及用于绑定到在 ActionScript 中创建的数据结构。这种方法也是这两种方法中较有可伸缩性的。下面的示例说明这两种方法。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsListBased/" layout="horizontal" width="460" height="360"> private const NL:String = "r"; // A data provider created by using ActionScript [Bindable] private var subscriptions:ArrayCollection = new ArrayCollection ( [ {data:0, label:"Print"}, {data:1, label:"Website"}, {data:2, label:"RSS (text)"}, {data:3, label:"Podcast"} ] ); private function submitButtonClickHandler(event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + + NL; userDetails += "Email: " + + NL; userDetails += "Site rating: " + + NL + NL; userDetails += "Subscriptions:"; var selectedSubscriptionItems:Array = edItems; for ( var i:String in selectedSubscriptionItems) 闲云无衣 /xvridan { // Display the selected subscriptions, separated by commas userDetails += selectedSubscriptionItems[i].label + ", "; } // Remove the last comma and space from the string we're displaying userDetails = ing(0, -2); ( userDetails ); } ]]> title="Feedback form" width="99%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" layout="vertical" > text="Thank you for giving us feedback:" width="100%" fontWeight="bold" /> id="userSubscriptions" rowCount="3" allowMultipleSelection="true" width="100%" dataProvider="{subscriptions}" /> id="submitButton" label="Submit" click="submitButtonClickHandler(event);" />
使用导航器
使用布局容器使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:
Panel名称描述Panel 容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 "absolute" 或
"horizontal"来覆盖此设置。HDividedBox 容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。Tile 容器以多行或多列的形式排列其子级。Form 容器以标准的表单格式排列其子级。ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。HDividedBoxTileFormApplicationControlBarControlBarControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。此外, 该示例使用 Spacer 控件 (它不是一个容器) 来帮助进行界面的布局。提示: Spacer 控件是用于在自动定位的容器内准确定位元素的一个不可见控件。 在此示例中, Spacer 控件是 ApplicationControlBar 容器中唯一基于百分比的组件。 Flex 调整 Spacer 控 闲云无衣 /xvridan件的大小以占据容器中其他组件不需要的所有可用空间。 通过扩展 Spacer 控件, Flex 将
Button 控件推到该容器的右边缘。示例 xmlns:mx="/2006/mxml" width="525" height="400" viewSourceURL="src/LayoutContainers/"> text="ApplicationControlBar" fontFamily="Verdana" fontWeight="bold" fontSize="12" /> layout="horizontal" title="Panel" width="100%" height="100%" > width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" > width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" >
导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件；控件必须是导航器容器的子容器的子级。下面的表格描述下面的示例使用的导航器容器: 闲云无衣 /xvridan 名称Accordion描述Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容TabNavigator器为每个子级创建一个选项卡。 当用户选中某个选项卡时,
TabNavigator 容器会显示相关联的子级。ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用
LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在
ActionScript 中构建逻辑让用户来更改当前活动的子级。ViewStack示例 xmlns:mx="/2006/mxml" layout="absolute" width="550" height="550" viewSourceURL="src/NavigationContainers/"> layout="absolute" left="10" top="10" right="10" bottom="10" title="Navigators" > id="myViewStack" width="47.5%" height="200" right="10" bottom="10" borderColor="#000000" borderStyle="solid" 闲云无衣 /xvridan >
Application 容器”、“使用 Layout 容器”和“使用 Navigator 容器”。 闲云无衣 /xvridan设置组件的样式样式对于定义 Adobe® Flex™ 应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。在 Flex 中, 可以使用以下几种方法将样式应用到控件:
••••使用本地样式定义
使用外部样式表
使用线上样式
使用 setStyle() 方法
Flex 不支持使用层叠样式表 (CSS) 来控制组件的所有可视方面。属性, 比如 x, y, width 和
height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。主 题是定义 Flex 应用程序的外观和感觉的一组样式。主题可以将一些事项定义得像应用程序的配色方案或常见字体一样简单, 或者它可以成为应用程序所使用的所有组件的完全重新设置的外观。主题通常采取 SWC 文件的形式。但是, 主题也可以是 CSS 文件和嵌入式图形资源, 如来自 SWF 文件的符号。有关主题中支持的样式属性的详细信息, 请参阅 Flex 2 开发人员指南*中的“关于支持的样式”。若要确定特定可视组件所支持的样式, 请参阅 Adobe Flex 2 语言参考中该组件的样式部分。使用本地样式定义可以使用
语法的样式表定义。 这些定义应用到当前文档和当前文档的所有子级。下面的示例创建两个类选择器, .solidBorder 和 .solidBorderPaddedVertically , 并通过使用它们的 styleName 属性来使用它们设置两个 VBox 容器的样式。 如此示例所示, 使用类选择器使您能够为相同组件的多个实例提供不同的样式。示例 xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesStyleTag/"> .solidBorderPaddedVertically { padding-top: 12; 闲云无衣 /xvridan padding-bottom: 12; border-style: solid; } styleName="solidBorderPaddedVertically" >
标签的 source 属性。
注意: 您应尝试限制在应用程序中使用的样式表的数量, 并在应用程序中仅设置处于顶层文档的样式表 (顶层文档是包含
示例:
外部 CSS 文件/* An external CSS file */.solidBorder{ borderStyle: "solid";}.solidBorderPaddedVertically{ borderStyle: "solid"; 闲云无衣 /xvridan paddingTop: 12px; paddingBottom: 12px;}MXML 文件 xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesExternal/">
xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesTagAttributes/"> > xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesSetStyle/"> { le("paddingTop", 12); le("paddingBottom", 12); } ]]> id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" initialize="initVBox();" 闲云无衣 /xvridan >
提供具有默认属性的一组内置效果。作为对某些用户或编程操作的响应, 行为使您可以将动画、动作和声音添加到应用程序中。
例如, 您可使用行为在获得焦点时弹出对话框, 或是在用户输入无效的值时发出声音。Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。 在 Adobe Flex 2 语言参考中, 触发器被列出在标题“效果”的下面。若要创建行为, 您定义一个具有唯一 ID 的特定效果并将它绑定到触发器。 例如, 下面的代码创建两个缩放效果: 一个用于轻微缩小组件, 一个用于将组件还原至其原始大小。 这些效果通过使用它们的唯一 ID 被分配到“按钮”组件上的 mouseDownEffect 和 mouseUpEffect
触发器上。注意如何将 Panel 容器的 autoLayout 属性设置为 "false"。这样是为了阻止在按钮改变大小时面板改变大小。示例 xmlns:mx="/2006/mxml" width="170" height="140"> title="Bouncy Button" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" autoLayout="false" left="41" top="24" right="42"> id="bouncyButton" label="Click me!" mouseDownEffect="{shrink}" mouseUpEffect="{revert}" />
当效果开始和效果结束时, 它也会发出 startEffect 和 endEffect 事件。 您可以监听这些事件并响应您的事件状态中的更改。下面的示例使用“移动”效果的方法和事件来创建一个简单的游戏。 该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。 靠得越近, 赢得的点数越多。
该游戏使用取自 SWF 文件库的电影剪辑符号来表示靶、直升飞机和爆炸动画。 有关这如何工作的详细信息, 请参阅嵌入资源。示例 xmlns:mx="/2006/mxml" width="525" height="450" viewSourceURL="src/EffectsChopperGame/"> import tic; // Embed movie clip symbols from the library of a Flash SWF. [Embed(source="assets/", symbol="DartBoard")] public var DartBoard:Class; [Embed(source="assets/", symbol="Helicopter")] public var Helicopter:Class; [Embed(source="assets/", symbol="Explosion")] public var Explosion:Class; // Event handler for the effectEnd event. private function endEffectHandler():void { e = false; e = true; 闲云无衣 /xvridan = "0"; d = d = d = false; } // Event handler for the "Play Again!" button. private function playAgainHandler():void { // Call resume() to make sure effect is not // in paused state before it ends or calling // pause() on it later will not work. (); // End the effect (); // Reset assets to their original states. e = true; e = false; d = d = d = d = true; } private function pauseChopperHandler():void { // Pause the Move effect on the helicopter. (); // Calculate player's score based on the inverse of the // distance between the helicopter and the dart board. = String((1/(helicopter.x - dartBoard.x)*10000)); d = false; d = true; } private function resumeChopperHandler():void { (); d = false; d = true; } ]]> id="flyChopper" target="{helicopter}" xBy="-290" easingFunction="" duration="{(()*1500+500)}" effectEnd="endEffectHandler();" /> 2023年6月21日发(作者：) 闲云无衣 /xvridanFlex 快速入门无衣摘自/cn/(版权归原作者所有) 闲云无衣 /xvridanFlex 快速入门: 使用 MXML 和 ActionScript进行编码Adobe® 将 Flex 实施为 ActionScript 类库。 该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。 您通过将 MXML 和 ActionScript 语言与该类库一起使用来开发应用程序。MXMLMXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。 您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。例如, 您通过使用下面的 MXML 语句, 使用 属性设置在 Button 实例上显示的标签的文本。 下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码: xmlns:mx="/2006/mxml" horizontalAlign="center" verticalAlign="center"> 的一个很小的可执行文件, 处于 Flex 2 安装文件夹下的 Flex SDK 2.0bin 文件夹中。 提示: 确保 Flex 2 installation folderFlex SDK 2.0bin 文件夹处于您的系统的路径中。 让 Flex 编译器处于您的路径中, 使您不管当前处于哪个文件夹中, 都可以从命令行调用它。说明1.在您喜爱的文本编辑器 (如, 记事本) 中创建一个新文件并将它另存为 。 2.从前面的示例中将代码输入到 中并保存您的文件。 3.通过选择“开始”>“所有程序”>“附件”>“命令提示符”, 打开命令窗口。 4.将您的当前目录更改为包含您在步骤 1 中保存的 Flex 应用程序的文件夹。 5.键入下面的命令来调用 Flex 编译器: mxmlc --strict=true --file-specs 以双短划线开头的命令字符串中的项目被称为编译器选项, 它们被用于定义 Flex 编译 闲云无衣 /xvridan器的行为。 在前面的示例中, 您将 --strict 选项设置为 true 以强制编译器进入 Strict 模式。 在 Strict 模式下, 编译器对您的代码具有较高的期望。 例如, 它期望您以静态方式键入变量。 您使用 --file-specs 选项来指定被编译的 MXML 文件。6.在 Windows 资源管理器中双击 SWF 文件或在命令行中输入其名称, 在独立的 Adobe Flash Player 9 中打开它。 此示例会产生下列 SWF 文件: 提示: 您还可以使用 Adobe Flex Builder 2 创建和编译 Flex 应用程序, Adobe Flex Builder 2 是包含可视设计视图的用于 Flex 开发的集成开发环境 (IDE)。 有关 Flex Builder 2 的详细信息, 请参阅使用 Flex Builder 2。ActionScriptMXML 标签与 ActionScript 类或类的属性相对应。 当您编译 Flex 应用程序时, Flex 会解析 MXML 标签并生成相应的 ActionScript 类。 接着它将这些 ActionScript 类编译成存储在 SWF 文件中的 SWF 字节码。提示: 若要查看 Flex 生成的中间 ActionScript 文件, 请将 --keep-generated-actionscript 选项添加到 mxmlc 命令中。继续上面的例子, Flex 提供定义 Flex Button 控件的 ActionScript Button 类。 闲云无衣 /xvridan注意: 在前面的示例中, Application 标签中的唯一 URL 声明的。 mx 前缀将 mx 名称空间中的每个组件映射到其完全合格的类名称。 这就是 Flex 编译器可以找到与 mx 名称空间中的 MXML 标签相对应的 ActionScript 类的方式。下面的示例阐述如何通过使用 ActionScript 创建 Button 控件。 该结果与该 MXML 版本是相同的。 xmlns:mx="/2006/mxml" viewSourceURL="src/GettingStartedActionScript/" creationComplete="creationCompleteHandler();" width="300" height="80" > myButton = new Button(); = "I'm a button!"; // Get notified once button component has been created and processed for layout ntListener (ON_COMPLETE, buttonCreationCompleteHandler); // Add the Button instance to the DisplayList addChild (myButton); } private function buttonCreationCompleteHandler ( evt:FlexEvent ):void { // Center the button myButton.x = /2 - /2; myButton.y = /2 - /2; } ]]> 此示例会产生下列 SWF 文件: 注意: 此示例阐述线上 ActionScript 与 Script 标签的使用, 这是在 Flex 应用程序中包含 ActionScript 的一个可能的方法。 其他方法有: 将脚本块分隔到外部 ActionScript 文件中, 或使用外部 ActionScript 类。 闲云无衣 /xvridanFlex 快速入门: 创建您的第一个应用程序MXML 文件是普通的 XML 文件, 所以可以选择多种开发环境。 简单的文件编辑器、专用的 XML 编辑器或者支持文本编辑的集成开发环境 (IDE) 均可用于 MXML 代码编写。 Flex 提供专用的 IDE, 称为 Adobe® Flex™ Builder™ 2, 您可以使用它来开发应用程序。MXML 文件的第一行是 XML 声明。 此行必须成为每个 MXML 文件的第一行。下一行是 text 属性被设置为 "Hello, World!"。 来设置组件的样式。 有关详细信息, 请参阅 Flex 2 开发人员指南*中的“使用层叠样式表 (CSS)”。注意: 可以通过使用命令行编译器 mxmlc 或 Flex Builder 2 编译 Flex 应用程序。有关使用 mxmlc 编译应用程序的说明, 请参阅使用 MXML 和 ActionScript 进行编码教程。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/HelloWorld/" horizontalAlign="center" verticalAlign="middle" width="300" height="160"> paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" title="My Application" > 中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在 ActionScript 中注册事件的事件监听器。接收事件通知有三种方式: •••在 MXML 中注册事件处理程序 在 MXML 定义中创建线上事件处理程序 通过 ActionScript 注册事件监听器 在 MXML 中注册事件处理程序获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。在此示例中, 您为 Button 控件的 click 事件定义一个事件处理程序。用户单击 Button 控件时, 事件处理程序会将 Label 控件的 text 属性设置为“Hello, World!”。 示例 xmlns:mx="/2006/mxml" width="300" height="200" horizontalAlign="center" verticalAlign="middle" viewSourceURL="src/HandlingEventsEventHandler/"> private function clickHandler ( event:MouseEvent ):void { = "Hello, World!"; } ]]> title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > /> 闲云无衣 /xvridan 这也称为使用线上事件处理程序。 在下面的示例中, 您设置 text 属性, 而不会调用事件处理程序方法。 提示: 使用线上事件处理程序可能很快并产生很少代码, 但它们也会导致代码很难阅读、维护和缩放。 不在一个线上事件处理程序中包含多个 ActionScript 语句是一个很好的经验。 如果您必须包含更加复杂的逻辑, 请将它置于 ActionScript 帮助器方法中或置于 ActionScript 事件处理程序中。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/HandlingEventsInlineMethod/" horizontalAlign="center" verticalAlign="middle" width="300" height="200"> title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > 在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。 提示: Application 表单的 creationComplete 事件在 Application 表单及其子级被初始化之后, 在启动应用程序时发生。 creationComplete 事件的事件处理程序为您提供一个运行 ActionScript 代码以注册事件监听器的方便位置。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/HandlingEventsActionScript/" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);"> private function clickHandler ( event:Event ):void { = "Hello, World!"; } ]]> 闲云无衣 /xvridan title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。在 Flex 应用程序中定位组件的方法有三种: •••使用自动定位 使用绝对定位 使用基于限制的布局 使用自动定位对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。可以通过指定容器属性控制布局的各个方面。下列属性是最常见的: •layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时, 容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。 horizontalAlign: 可能的值有 "left"、 "center"或 "right"。 verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。 ••此示例覆盖 Application 容器的 horizontalAlign 属性的 "left" 的默认设置和Application 容器的 verticalAlign 属性的 "top" 的默认设置以分别指定 "center" 和 "middle"。此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label 和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutAutomatic/" horizontalAlign="center" verticalAlign="middle" width="380" height="150"> title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" layout="horizontal" verticalAlign="middle" 闲云无衣 /xvridan > id="myButton" label="Click Me!" click=" = 'Hello, World!';" /> 使用绝对定位有三个容器支持绝对定位: ••如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。 Canvas 容器始终使用绝对定位。 使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局；否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutAbsolute/" horizontalAlign="center" verticalAlign="middle" width="280" height="170"> title="My Application" layout="absolute" width="220" height="90" > id="myLabel" 闲云无衣 /xvridan x="10" y="10" width="180" fontWeight="bold" fontSize="24" /> id="myButton" x="60" y="10" label="Click Me!" click=" = 'Hello, World!';" /> xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsBottomRight/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> 闲云无衣 /xvridan title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" bottom="10" right="10" /> 如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。 示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsEdges/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" top="10" bottom="10" left="10" right="10" 闲云无衣 /xvridan /> 锚定组件的中心您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离；一个负数会从中心向左或向上移动组件。horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraintsCenter/" horizontalAlign="center" verticalAlign="middle" width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myButton" label="A button" verticalCenter="0" horizontalCenter="0" /> 的完全长度。 将 Label 控件的 top 属性设置为 10 以限制它看起来与 Panel 的顶部的距离为 10 像素。 将其 horizontalCenter 属性设置为 10 以完美地将它在 Panel 中居中。 将 Button 控件的 left 和 right 属性设置为 10 以使它拉伸至距离 Panel 的每一边都在 10 像素内。 将其底边属性设置为 10 以限制其底边距离 Panel 的下边为 10 个像素。下面的图说明您以可视方式设置的属性的效果。 可视布局控件是 Flex Builder 2 的设计视图的组成部分。提示: 不要使用 verticalCenter 样式属性指定 top 或 bottom 样式属性, verticalCenter 值会覆盖其他属性。 类似地, 不要使用 horizontalCenter 样式属性指定 left 或 right 样式属性。由基于限制的布局确定的大小会覆盖任何显式或基于百分比的大小规范。 例如, 如果您指定 left 和 right 样式属性, 产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/LayoutConstraints/" horizontalAlign="center" verticalAlign="middle" 闲云无衣 /xvridan width="360" height="200"> title="My Application" layout="absolute" width="300" height="130" > id="myLabel" fontWeight="bold" fontSize="24" top="10" horizontalCenter="0" /> id="myButton" label="Click Me!" click=" = 'Hello, World!';" bottom="10" height="22" left="10" right="10" /> •••••••••图像 (多个实例) 图像 (单一实例) 使用 scale-9 拉伸的图像 用于与 CSS 和外观一起使用的图像 SWF 文件 SWF 库资源 声音文件 SVG 文件 字体 嵌入图像 (多个实例) 可以在 Flex 应用程序中嵌入具有 PNG、JPEG 或 GIF 文件格式的图像并创建它的一个或多个实例。此示例使用 [Embed] 元数据标签在您的应用程序中嵌入图像并将它与可绑定的 ActionScript 类相关联。 接着它将 Image 控件的 source 属性绑定到 Logo 类。 可以将 Logo 类绑定到采用某个图像的任何组件属性, 比如 Button 控件的 icon 属性。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImages/" layout="horizontal" width="350" height="250"> ]]> 嵌入图像 (单一实例) 可以使用线上 @Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像。此示例将一个图像组件添加到一个应用程序中并使用其 source 属性中的 @Embed 指令。 若要在另一个 Image 控件中使用这一相同的图像, 则还必须将它嵌入到该组件中。 如果希望显示嵌入的图像的多个实例, 请使用 [Embed]元数据标签。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingAnImage/" width="200" height="240"> 您 可以将某个图像文件嵌入到您的 Flex 应用程序并以类似组件的方式智能地缩放它。 通过使用 scale-9 功能, 您的图像的四个角根本没有缩放, 水平边框仅在水平方向上缩放, 而垂直边框仅在垂直方向上缩放。 例如, 这对于以下情况很有用: 创建使用圆角的框, 或在您希望在缩放组件时保持边框清晰的位置进行组件样式调整。 此示例使用 Embed 元数据标签的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 网格线位置属性来创建您的 scale-9 网格。提示: 获得网格线位置的值的一种比较容易的方法是将指南与 Adobe® Photoshop® 中的 Rectangular Marquee 工具和 Info 选项板一起使用。提示: 旋转嵌入的 scale-9 图像的实例会关闭该图像的 scale-9 以在将来进行任意大小转换。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImagesScale9/" layout="vertical" width="400" height="480"> scaleGridTop="55", scaleGridBottom="137", scaleGridLeft="57", scaleGridRight="266" )] [Bindable] public var FancyBorderImage:Class; ]]> 使用 CSS 为外观嵌入图像 您可以在 Flex 应用程序中嵌入图像并将它用于设置组件的外观。 您可以定义一个 CSS 类型选择器为给出类型的所有组件设置外观。 在此示例中, 您为 Button 控件创建了一个类型选择器。 类型选择器通过使用 Embed指定这些图像用作您的组件的外观属性。 您还可以定义一个类选择器来创建可作为样式应用到特定组件的自定义 CSS 类。提示: 类选择器创建可用来设置单独的组件的样式的已命名样式类, 方法是通过使用 闲云无衣 /xvridanstyleName 属性将类选择器分配给该组件。 类型选择器为给出类型的所有组件设置样式, 如下面的示例所示。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingImagesCSS/" layout="horizontal" width="270" height="100" horizontalAlign="center" verticalAlign="middle" > { upSkin: Embed("assets/box_"); overSkin: Embed("assets/"); downSkin: Embed("assets/box_"); } 嵌入 SWF 文件嵌 入 SWF 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SWF 文件的实例当作 MovieClip 类的实例处理。 (它们实际上是 MovieClipAsset 类的子类, MovieClipAsset 类是 MovieClip 类的子类。) 注意: 您无法直接访问嵌入的 SWF 文件的属性或方法。 但是, 您可以使用 LocalConnection 以允许它们进行通信。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingSwfFiles/" 闲云无衣 /xvridan layout="horizontal" width="290" height="290" horizontalAlign="center" verticalAlign="middle" > ]]> 嵌入 SWF 库资源 您 可以在应用程序中嵌入来自现有 SWF 库中的特定符号。 Flash 定义三种类型的符号: Button、MovieClip 和 Graphic。 您可以在 Flex 应用程序中嵌入 Button 和 MovieClip 符号, 但您不能嵌入 Graphic 符号, 因为无法为 ActionScript 导出 Graphic 符号。 此示例使用 [Embed] 元数据标签的 source 属性来指定包含您的库的 SWF 文件, 并使用 [Embed] 元数据标签的 symbol 属性来指定您要在该库中嵌入的符号的链接 ID。 示例 xmlns:mx="/2006/mxml" viewSourceURL="src/EmbeddingSwfLibraryAssets/" layout="horizontal" width="450" height="240" horizontalAlign="center" verticalAlign="bottom" > 闲云无衣 /xvridan [Embed(source="assets/", symbol="Pumpkin")] [Bindable] public var Pumpkin:Class; ]]> 嵌入声音文件 您可以在 Flex 应用程序中通过使用 [Embed] 元数据标签嵌入 MP3 文件并播放它。 注意: 记住嵌入的声音文件会成为您的应用程序 (最终的 SWF 文件) 的一部分, 而 MP3 文件会很大, 从而会使您的应用程序变得很大并会对应用程序的下载速度产生负面影响。 此实例将该 MP3 的一个新实例创建为一个 SoundAsset。它使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例, 并存储返回的 SoundChannel 对象, 从而您可以稍后调用 SoundChannel 对象的 stop() 方法以结束播放。示例 horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/"> 闲云无衣 /xvridan public function playSound():void { // Make sure we don't get multiple songs playing at the same time stopSound(); // Play the song on the channel channel = (); } public function stopSound():void { // Stop the channel, but only if it exists if ( channel != null ) (); } ]]> Attribution License)]]> 可以将 SCG 文件嵌入到 Flex 应用程序中。 嵌 入 SVG 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SVG 文件的实例当作 Sprite 类的实例处理。 (它们实际上是 SpriteAsset 类的实例, SpriteAsset 类是 Sprite 类的子类。) 嵌入的 SVG 文件还保留它们的矢量属性, 且在被缩放或转换时不会显示像素。 注意: 不能在运行时导入 SVG 文件；仅可以在编译时在 Flex 应用程序中嵌入它们。 示例 xmlns:mx="/2006/mxml" layout="horizontal" viewSourceURL="srcEmbeddingSvgFiles/" width="600" height="470"> ]]> 提示: SVG 青娃图形是 Architetto Francesco Rollandin 创建的, 他慷慨地将它发布到 Open Clip Art Library 的公共区域中。 您可以在网站找到其他可免费使用和试验的 SVG 文件。 闲云无衣 /xvridan嵌入字体 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。 下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。详细信息: 有关使用字体的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用字体”。示例 xmlns:mx="/2006/mxml" layout="horizontal" horizontalAlign="center" verticalAlign="center" viewSourceURL="src/EmbeddingFonts/"> { font-family: Copacetix; src: url("assets/"); unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Copacetix; font-size: 24pt; } 使用基于按钮的控件 使用基于列表的控件 使用基于文本的控件基于文本的控件用于显示文本和/或接收来自用户的文本输入。在 Flex 中提供的基于文本的控件有 Label、Text、TextArea、TextInput 和 RichTextEditor 控件。TextInput 和 TextArea 组件既可以显示文本又可以接受用户输入, 而 Label 和 Text 控件仅用于显示文本。Text 和 TextArea 控件可以显示跨多行的文本, 而 Label 和 TextInput 控件用于显示单行文本。使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。所有基于文本的组件都有一个 text 属性, 可用来设置要显示的文本。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsTextBased/" layout="horizontal" width="380" height="320" horizontalAlign="center" verticalAlign="middle" > title="Leave a comment" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" > text="Fill out this form to leave us a comment:" width="100%" /> Button 控件就会保持其被按下的状态。切换 Button 控件直到您又一次选中它之后, 才会保持被按下的状态。当用户选中控件时, 按钮通常使用事件监听器来执行操作。 当用户在 Button 控件上单击鼠标, 且 Button 控件被启用时, 它会发出一个 click 事件和一个 buttonDown 事件。LinkButton 控件创建一个支持可选图标的单行超文本链接。 它根本上是一个没有边框的 Button 控件。 可以使用 LinkButton 控件在 Web 浏览器中打开 URL。CheckBox 控件是一个常用的图形控件, 它可以包含一个复选标记或者未被选中 (空)。 在需要收集一组并不相互排斥的 true 或 false 值的地方, 可以使用 CheckBox 控件。 可以给 CheckBox 控件添加文本标签, 并将文本标签置于复选框的左侧、右侧、顶部或底部。 Flex 会裁剪 CheckBox 控件的标签以适合控件的边界。使用 RadioButton 控件, 用户可以在一组相互排斥的选项内作单一选择。RadioButtonGroup 控件由具有相同组名的两个或更多 RadioButton 控件组成。该组可以指由 UIComponent 对象。PopUpButton 控件的一个常见的用途是让弹出按钮打开 List 控件或 Menu 控件, 这两个控件更改主按钮的功能和标签。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsButtonBased/" layout="absolute" width="460" height="400"> private const NL:String = "r"; private function submitButtonClickHandler (event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + + NL; userDetails += "Email: " + + NL; userDetails += "Hide email? " + (ed ? "Yes" : "No") + NL + NL; userDetails += "Comment:" + NL + NL + ; (userDetails); } private function emailButtonClickHandler (event:MouseEvent):void { var msg:String = "You can use the navigateToURL() method to open a URL" msg += " using a call similar to the following:rr"; msg += "navigateToURL (new URLRequest ('mailto:comments@'));"; (msg); } ]]> title="Leave a comment" left="10" top="10" right="10" bottom="10" layout="absolute" > text="Fill out this form to leave us a comment:" width="250" x="10" y="10" fontWeight="bold" /> bottom="40"/> id="hideEmail" y="103" left="90" label="Hide my email address" selected="true" /> id="emailButton" y="272" horizontalCenter="0" label="Having trouble? Email us!" click="emailButtonClickHandler(event);" /> id="submitButton" label="Submit" click="submitButtonClickHandler(event);" /> ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。几 个 Flex 框架组件 (包括所有基于列表的控件) 表示来自某个数据提供程序的数据, 数据提供程序是一个包含控件所需数据的对象。例如, 一个 Tree 控件的数据提供程序确定树的结构和分配给每个树节点的相关联的数据, 而一个 ComboBox 控件的数据提供程序确定控件的下 闲云无衣 /xvridan拉列表中的项目。注意: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也从数据提供程序获取数据。显示应用程序数据的控件有时被称为数据提供程序控件。有关使用数据提供程序的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用数据提供程序和集合”。您 可以使用两种方法设置组件的数据提供程序: 第一种方法是通过将 Array 或 Collection 定义为取得数据提供程序的控件的子标签, 在线上在 MXML 中定义数据提供程序。这种方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。第二种方法是使用数据绑定将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。这后一种方法用于显示由服务器端调用引起的数据及用于绑定到在 ActionScript 中创建的数据结构。这种方法也是这两种方法中较有可伸缩性的。下面的示例说明这两种方法。示例 xmlns:mx="/2006/mxml" viewSourceURL="src/ControlsListBased/" layout="horizontal" width="460" height="360"> private const NL:String = "r"; // A data provider created by using ActionScript [Bindable] private var subscriptions:ArrayCollection = new ArrayCollection ( [ {data:0, label:"Print"}, {data:1, label:"Website"}, {data:2, label:"RSS (text)"}, {data:3, label:"Podcast"} ] ); private function submitButtonClickHandler(event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + + NL; userDetails += "Email: " + + NL; userDetails += "Site rating: " + + NL + NL; userDetails += "Subscriptions:"; var selectedSubscriptionItems:Array = edItems; for ( var i:String in selectedSubscriptionItems) 闲云无衣 /xvridan { // Display the selected subscriptions, separated by commas userDetails += selectedSubscriptionItems[i].label + ", "; } // Remove the last comma and space from the string we're displaying userDetails = ing(0, -2); ( userDetails ); } ]]> title="Feedback form" width="99%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" layout="vertical" > text="Thank you for giving us feedback:" width="100%" fontWeight="bold" /> id="userSubscriptions" rowCount="3" allowMultipleSelection="true" width="100%" dataProvider="{subscriptions}" /> id="submitButton" label="Submit" click="submitButtonClickHandler(event);" /> 使用导航器 使用布局容器使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器: Panel名称描述Panel 容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 "absolute" 或 "horizontal"来覆盖此设置。HDividedBox 容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。Tile 容器以多行或多列的形式排列其子级。Form 容器以标准的表单格式排列其子级。ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。HDividedBoxTileFormApplicationControlBarControlBarControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。此外, 该示例使用 Spacer 控件 (它不是一个容器) 来帮助进行界面的布局。提示: Spacer 控件是用于在自动定位的容器内准确定位元素的一个不可见控件。 在此示例中, Spacer 控件是 ApplicationControlBar 容器中唯一基于百分比的组件。 Flex 调整 Spacer 控 闲云无衣 /xvridan件的大小以占据容器中其他组件不需要的所有可用空间。 通过扩展 Spacer 控件, Flex 将 Button 控件推到该容器的右边缘。示例 xmlns:mx="/2006/mxml" width="525" height="400" viewSourceURL="src/LayoutContainers/"> text="ApplicationControlBar" fontFamily="Verdana" fontWeight="bold" fontSize="12" /> layout="horizontal" title="Panel" width="100%" height="100%" > width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" > width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" > 导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件；控件必须是导航器容器的子容器的子级。下面的表格描述下面的示例使用的导航器容器: 闲云无衣 /xvridan 名称Accordion描述Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容TabNavigator器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。ViewStack示例 xmlns:mx="/2006/mxml" layout="absolute" width="550" height="550" viewSourceURL="src/NavigationContainers/"> layout="absolute" left="10" top="10" right="10" bottom="10" title="Navigators" > id="myViewStack" width="47.5%" height="200" right="10" bottom="10" borderColor="#000000" borderStyle="solid" 闲云无衣 /xvridan > Application 容器”、“使用 Layout 容器”和“使用 Navigator 容器”。 闲云无衣 /xvridan设置组件的样式样式对于定义 Adobe® Flex™ 应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。在 Flex 中, 可以使用以下几种方法将样式应用到控件: ••••使用本地样式定义 使用外部样式表 使用线上样式 使用 setStyle() 方法 Flex 不支持使用层叠样式表 (CSS) 来控制组件的所有可视方面。属性, 比如 x, y, width 和 height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。主 题是定义 Flex 应用程序的外观和感觉的一组样式。主题可以将一些事项定义得像应用程序的配色方案或常见字体一样简单, 或者它可以成为应用程序所使用的所有组件的完全重新设置的外观。主题通常采取 SWC 文件的形式。但是, 主题也可以是 CSS 文件和嵌入式图形资源, 如来自 SWF 文件的符号。有关主题中支持的样式属性的详细信息, 请参阅 Flex 2 开发人员指南*中的“关于支持的样式”。若要确定特定可视组件所支持的样式, 请参阅 Adobe Flex 2 语言参考中该组件的样式部分。使用本地样式定义可以使用 语法的样式表定义。 这些定义应用到当前文档和当前文档的所有子级。下面的示例创建两个类选择器, .solidBorder 和 .solidBorderPaddedVertically , 并通过使用它们的 styleName 属性来使用它们设置两个 VBox 容器的样式。 如此示例所示, 使用类选择器使您能够为相同组件的多个实例提供不同的样式。示例 xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesStyleTag/"> .solidBorderPaddedVertically { padding-top: 12; 闲云无衣 /xvridan padding-bottom: 12; border-style: solid; } styleName="solidBorderPaddedVertically" > 标签的 source 属性。 注意: 您应尝试限制在应用程序中使用的样式表的数量, 并在应用程序中仅设置处于顶层文档的样式表 (顶层文档是包含 示例: 外部 CSS 文件/* An external CSS file */.solidBorder{ borderStyle: "solid";}.solidBorderPaddedVertically{ borderStyle: "solid"; 闲云无衣 /xvridan paddingTop: 12px; paddingBottom: 12px;}MXML 文件 xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesExternal/"> xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesTagAttributes/"> > xmlns:mx="/2006/mxml" width="150" height="140" viewSourceURL="src/StylesSetStyle/"> { le("paddingTop", 12); le("paddingBottom", 12); } ]]> id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" initialize="initVBox();" 闲云无衣 /xvridan > 提供具有默认属性的一组内置效果。作为对某些用户或编程操作的响应, 行为使您可以将动画、动作和声音添加到应用程序中。 例如, 您可使用行为在获得焦点时弹出对话框, 或是在用户输入无效的值时发出声音。Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。 在 Adobe Flex 2 语言参考中, 触发器被列出在标题“效果”的下面。若要创建行为, 您定义一个具有唯一 ID 的特定效果并将它绑定到触发器。 例如, 下面的代码创建两个缩放效果: 一个用于轻微缩小组件, 一个用于将组件还原至其原始大小。 这些效果通过使用它们的唯一 ID 被分配到“按钮”组件上的 mouseDownEffect 和 mouseUpEffect 触发器上。注意如何将 Panel 容器的 autoLayout 属性设置为 "false"。这样是为了阻止在按钮改变大小时面板改变大小。示例 xmlns:mx="/2006/mxml" width="170" height="140"> title="Bouncy Button" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" autoLayout="false" left="41" top="24" right="42"> id="bouncyButton" label="Click me!" mouseDownEffect="{shrink}" mouseUpEffect="{revert}" /> 当效果开始和效果结束时, 它也会发出 startEffect 和 endEffect 事件。 您可以监听这些事件并响应您的事件状态中的更改。下面的示例使用“移动”效果的方法和事件来创建一个简单的游戏。 该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。 靠得越近, 赢得的点数越多。 该游戏使用取自 SWF 文件库的电影剪辑符号来表示靶、直升飞机和爆炸动画。 有关这如何工作的详细信息, 请参阅嵌入资源。示例 xmlns:mx="/2006/mxml" width="525" height="450" viewSourceURL="src/EffectsChopperGame/"> import tic; // Embed movie clip symbols from the library of a Flash SWF. [Embed(source="assets/", symbol="DartBoard")] public var DartBoard:Class; [Embed(source="assets/", symbol="Helicopter")] public var Helicopter:Class; [Embed(source="assets/", symbol="Explosion")] public var Explosion:Class; // Event handler for the effectEnd event. private function endEffectHandler():void { e = false; e = true; 闲云无衣 /xvridan = "0"; d = d = d = false; } // Event handler for the "Play Again!" button. private function playAgainHandler():void { // Call resume() to make sure effect is not // in paused state before it ends or calling // pause() on it later will not work. (); // End the effect (); // Reset assets to their original states. e = true; e = false; d = d = d = d = true; } private function pauseChopperHandler():void { // Pause the Move effect on the helicopter. (); // Calculate player's score based on the inverse of the // distance between the helicopter and the dart board. = String((1/(helicopter.x - dartBoard.x)*10000)); d = false; d = true; } private function resumeChopperHandler():void { (); d = false; d = true; } ]]> id="flyChopper" target="{helicopter}" xBy="-290" easingFunction="" duration="{(()*1500+500)}" effectEnd="endEffectHandler();" />
发布评论