示例一：
?
<?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