`
zhuobinzhou
  • 浏览: 136529 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类

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

  • 大小: 48.3 KB
分享到:
评论

相关推荐

    flex quick starts 中文版(翻译by dreamer)

    - **VDividedBox**:与HDividedBox类似,但将子组件垂直布局,并在它们之间插入一个可调节的分割条。 - **Tile**:将子组件排列成多行或多列的形式,适用于网格布局。 - **Form**:按照标准表单格式排列子组件,常...

    flex3动态创建[参考].pdf

    本文档“flex3动态创建[参考].pdf”似乎提供了关于如何在Flex 3环境中创建和操纵图形元素的示例,特别是与图表相关的功能。下面将详细讨论这些知识点: 1. **MX容器和组件**: - `mx:Application` 是Flex 3中的...

    Flex3 界面布局教程

    与大多数其他容器不同,Canvas 不会自动对子元素进行布局,而是需要用户明确指定子元素的位置。 - **Absolute 模式** - 在 Absolute 模式下,用户可以通过设置 `x` 和 `y` 属性来精确控制子元素的位置。这些坐标是...

    《Flex 3 组件实例与应用(2009版)》(PDF)

    以上仅为《Flex 3 组件实例与应用(2009版)》书中部分知识点的概述,该书详细介绍了每一个组件的使用方法、属性、事件以及示例代码,对于希望深入学习和掌握Flex 3开发技术的读者来说,是一本不可多得的实战指南。

    Flex3界面布局中文教程--一路风尘制作

    #### ControlBarlayout容器与ApplicationControlBar容器 ControlBarlayout容器专门用于创建控制条或工具栏,而ApplicationControlBar容器则是专为应用程序顶部的控制栏设计的。这些容器通常包含按钮、菜单和其他...

    Flex Gumbo 通过textJustify样式设置TextBox文字对齐的例子

    在代码中,&lt;ApplicationControlBar&gt;是一个用来存放控制组件的区域,其中包含了表单(Form)和表单项(FormItem)。每个表单项中都包含有一个标签(label)和一个具体的控件,如ComboBox和HSlider。ComboBox用于让...

    Flex 创建一个自定义风格的HRule或VRule

    在MXML中,我们可以设置一个具体的数值,如`strokeWidth="5"`,或者像示例代码中那样,将其与滑块组件(HSlider)绑定,允许用户动态调整线条宽度。例如: ```xml ``` 2. **strokeColor**:此属性控制线条的...

    Flex 3 组件实例与应用(2009版)

    ### Flex 3 组件实例与应用...此外,本书还提供了大量的实例和代码示例,有助于读者更好地理解并应用这些组件。对于希望深入学习Flex 3及其组件的新手来说,《Flex 3 组件实例与应用》无疑是一个非常有价值的资源。

    Flex3界面布局中文教程

    Flex3界面布局中文教程 Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 7...

    FLEX主要容器关系图

    在探讨"FLEX主要容器关系图"这一主题时,我们深入解析Flex框架中各种容器组件的层次结构与相互关联,这对于理解和应用Flex布局至关重要。Flex,作为Adobe推出的一款用于开发跨平台应用程序的开源框架,其核心优势...

    Flex UI组件使用全集

    本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建丰富的互联网应用程序(RIA)。它包含了一...

    Flex Gumbo中通过baseColor样式 设置FxHScrollBar背景颜色

    此外,我们还需要使用ApplicationControlBar和Form来构建用户界面,并添加一个ColorPicker控件,允许用户选择颜色。 ColorPicker控件允许用户通过图形界面选择颜色。其中,selectedColor属性表示ColorPicker当前...

    Flex Gumbo 通过smooth属性设置BitmapGraphic对象平滑度的例子

    2. ApplicationControlBar元素:这个容器用来放置界面控制元素,如CheckBox和HSlider滑块。 3. CheckBox元素:它是一个复选框控件,用于切换BitmapGraphic对象的smooth属性。当CheckBox被选中时,smooth属性设置为...

Global site tag (gtag.js) - Google Analytics