示例一：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
>
<fx:Declarations>
</fx:Declarations>
<!--Flex 4 与 Flex 3中的Style使用有点区别，注意命名空间-->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ApplicationControlBar
{
color: #111111
}
</fx:Style>
<s:BorderContainer backgroundColor="#000000"
backgroundAlpha="0.67"
width="100%"
height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle">
</s:VerticalLayout>
</s:layout>
<!--使用ApplicationControlBar装载MenuBar,
使用XMLList为MenuBar提供子项MenuItem-->
<mx:ApplicationControlBar dock="true" paddingTop="0"
paddingBottom="0" >
<s:Label text="Docked" fontWeight="bold" color="0x000000"/>
<mx:MenuBar id="myMenuBar" labelField="@label">
<fx:XMLList>
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem A-1" type="check"/>
<menuitem label="SubMenuItem A-2" type="check"/>
</menuitem>
<menuitem label="MenuItem B"/>
<menuitem label="MenuItem C"/>
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem D-1" type="radio" groupName="one"/>
<menuitem label="SubMenuItem D-2" type="radio" groupName="one"/>
<menuitem label="SubMenuItem D-3" type="radio" groupName="one"/>
</menuitem>
</fx:XMLList>
</mx:MenuBar>
</mx:ApplicationControlBar>
<s:Label color="0xACACAC" text="A docked ApplicationControlBar
appears at the top of the application window."/>
<mx:Spacer height="100%"/>
<!--使用ApplicationControlBar控制组件-->
<mx:ApplicationControlBar width="80%">
<s:Label text="Normal" fontWeight="bold" color="0x000000"/>
<s:Label text="Search:" color="0x323232" />
<s:TextInput width="100%" maxWidth="200" />
<mx:Spacer height="100%"/>
<s:Button label="Go adobe.com" color="0x000000" />
</mx:ApplicationControlBar>
<s:Label color="0xACACAC" text="A normal ApplicationControlBar
can appear anywhere in the application."/>
</s:BorderContainer>
</s:Application>
示例二:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout>
</s:VerticalLayout>
</s:layout>
<mx:ApplicationControlBar>
<mx:Form>
<mx:FormItem label="x:">
<s:HSlider
id="xSlider"
minimum="-100"
maximum="100"
value="0"
snapInterval="1"
liveDragging="true"
/>
</mx:FormItem>
<!--在mx中，HSlider的属性tickInterval表示：
刻度线相对于控件 maximum 值的间距。
将 tickInterval 属性设置为非零值时，Flex 会显示刻度线。
例如，如果 tickInterval 为 1 而 maximum 为 10，
则沿 Slider 每隔 1/10 处都会放置一条刻度线。如果值为 0，
则不会显示刻度线。如果 tickValues 属性设置为非空 Array，则将忽略此属性。
-->
<!--在spark中，HSlider没有tickInterval-->
<mx:FormItem>
<mx:HSlider
id="ySlider"
minimum="-100"
maximum="100"
value="0"
snapInterval="1"
tickInterval="25"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem>
<mx:HSlider id="rotationSlider"
minimum="-360"
maximum="360"
value="0"
snapInterval="1"
tickInterval="45"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
<s:Graphic>
<s:Rect id="rect" width="300" height="200">
<s:stroke>
<!--x表示：沿 x 轴平移每个点的距离。-->
<!--默认情况下，LinearGradientStroke 定义控件进行从左到右的过渡。
使用 rotation 属性可以控制过渡方向。
例如，当值为 180.0 时，将会发生从右到左的过渡，而非从左到右的过渡。-->
<s:LinearGradientStroke id="linearGrad"
x="{xSlider.value}"
y="{ySlider.value}"
rotation="{rotationSlider.value}"
weight="5">
<s:GradientEntry color="red" />
<s:GradientEntry color="white" />
<s:GradientEntry color="blue" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
</s:Graphic>
<s:Graphic>
<s:Rect width="300" height="200">
<s:fill>
<!--x表示：沿 x 轴平移每个点的距离。-->
<!--默认情况下，LinearGradientStroke 定义控件进行从左到右的过渡。
使用 rotation 属性可以控制过渡方向。
例如，当值为 180.0 时，将会发生从右到左的过渡，而非从左到右的过渡。-->
<s:RadialGradient
x="{xSlider.value}"
y="{ySlider.value}"
rotation="{rotationSlider.value}"
>
<s:GradientEntry color="red" />
<s:GradientEntry color="white" />
<s:GradientEntry color="blue" />
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label text="使用了ApplicationControlBar"/>
</mx:ApplicationControlBar>
<!--使用controlBarContent-->
<s:controlBarContent>
<mx:Form>
<mx:FormItem label="x:">
<s:HSlider
id="xSlider1"
minimum="-100"
maximum="100"
value="0"
snapInterval="1"
liveDragging="true"
/>
</mx:FormItem>
<!--在mx中，HSlider的属性tickInterval表示：
刻度线相对于控件 maximum 值的间距。
将 tickInterval 属性设置为非零值时，Flex 会显示刻度线。
例如，如果 tickInterval 为 1 而 maximum 为 10，
则沿 Slider 每隔 1/10 处都会放置一条刻度线。如果值为 0，
则不会显示刻度线。如果 tickValues 属性设置为非空 Array，则将忽略此属性。
-->
<!--在spark中，HSlider没有tickInterval-->
<mx:FormItem>
<mx:HSlider
id="ySlider1"
minimum="-100"
maximum="100"
value="0"
snapInterval="1"
tickInterval="25"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem>
<mx:HSlider id="rotationSlider1"
minimum="-360"
maximum="360"
value="0"
snapInterval="1"
tickInterval="45"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
<!--画图-->
<s:Graphic>
<s:Rect id="rect1" width="300" height="200">
<s:stroke>
<!--x表示：沿 x 轴平移每个点的距离。-->
<!--默认情况下，LinearGradientStroke 定义控件进行从左到右的过渡。
使用 rotation 属性可以控制过渡方向。
例如，当值为 180.0 时，将会发生从右到左的过渡，而非从左到右的过渡。-->
<s:RadialGradientStroke id="RadialGrad"
x="{xSlider1.value}"
y="{ySlider1.value}"
rotation="{rotationSlider1.value}"
weight="5">
<s:GradientEntry color="red" />
<s:GradientEntry color="white" />
<s:GradientEntry color="blue" />
</s:RadialGradientStroke>
</s:stroke>
</s:Rect>
</s:Graphic>
<s:Graphic>
<s:Rect id="rect2" width="300" height="200">
<s:fill>
<s:RadialGradient x="{xSlider1.value}"
y="{ySlider1.value}"
rotation="{rotationSlider1.value}"
>
<s:GradientEntry color="red" />
<s:GradientEntry color="white" />
<s:GradientEntry color="blue" />
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label text="使用了controlBarContent"/>
</s:controlBarContent>
</s:Application>
还是比较喜欢旧版的ApplicationControlBar
- 大小: 48.3 KB
分享到：
相关推荐
- **VDividedBox**：与HDividedBox类似，但将子组件垂直布局，并在它们之间插入一个可调节的分割条。 - **Tile**：将子组件排列成多行或多列的形式，适用于网格布局。 - **Form**：按照标准表单格式排列子组件，常...
本文档“flex3动态创建[参考].pdf”似乎提供了关于如何在Flex 3环境中创建和操纵图形元素的示例，特别是与图表相关的功能。下面将详细讨论这些知识点： 1. **MX容器和组件**： - `mx:Application` 是Flex 3中的...
与大多数其他容器不同，Canvas 不会自动对子元素进行布局，而是需要用户明确指定子元素的位置。 - **Absolute 模式** - 在 Absolute 模式下，用户可以通过设置 `x` 和 `y` 属性来精确控制子元素的位置。这些坐标是...
以上仅为《Flex 3 组件实例与应用（2009版）》书中部分知识点的概述，该书详细介绍了每一个组件的使用方法、属性、事件以及示例代码，对于希望深入学习和掌握Flex 3开发技术的读者来说，是一本不可多得的实战指南。
#### ControlBarlayout容器与ApplicationControlBar容器 ControlBarlayout容器专门用于创建控制条或工具栏，而ApplicationControlBar容器则是专为应用程序顶部的控制栏设计的。这些容器通常包含按钮、菜单和其他...
在代码中，<ApplicationControlBar>是一个用来存放控制组件的区域，其中包含了表单（Form）和表单项（FormItem）。每个表单项中都包含有一个标签（label）和一个具体的控件，如ComboBox和HSlider。ComboBox用于让...
在MXML中，我们可以设置一个具体的数值，如`strokeWidth="5"`，或者像示例代码中那样，将其与滑块组件（HSlider）绑定，允许用户动态调整线条宽度。例如： ```xml ``` 2. **strokeColor**：此属性控制线条的...
### Flex 3 组件实例与应用...此外，本书还提供了大量的实例和代码示例，有助于读者更好地理解并应用这些组件。对于希望深入学习Flex 3及其组件的新手来说，《Flex 3 组件实例与应用》无疑是一个非常有价值的资源。
Flex3界面布局中文教程 Canvas layout 容器 1 Absolute模式 1 constraint-based模式： 2 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 7...
在探讨"FLEX主要容器关系图"这一主题时，我们深入解析Flex框架中各种容器组件的层次结构与相互关联，这对于理解和应用Flex布局至关重要。Flex，作为Adobe推出的一款用于开发跨平台应用程序的开源框架，其核心优势...
本文档是基于阿树对Adobe Flex UI组件库的全面整理，并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架，尤其适用于创建丰富的互联网应用程序(RIA)。它包含了一...
此外，我们还需要使用ApplicationControlBar和Form来构建用户界面，并添加一个ColorPicker控件，允许用户选择颜色。 ColorPicker控件允许用户通过图形界面选择颜色。其中，selectedColor属性表示ColorPicker当前...
2. ApplicationControlBar元素：这个容器用来放置界面控制元素，如CheckBox和HSlider滑块。 3. CheckBox元素：它是一个复选框控件，用于切换BitmapGraphic对象的smooth属性。当CheckBox被选中时，smooth属性设置为...