ApplicationControlBar与controlBarContent示例

示例一：

 

<?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