Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局

本文的相关文章：

Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局

Flex学习笔记_05 使用容器控制界面布局_02窗口布局

 

3. 动态控制对象的布局

 

3.1 使用Tile 显示多个按钮

Tile直接继承Container，使用起来非常方便。适合重复排列的元素。

direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。

tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			//导入 Button对象
			import mx.controls.Button;
			internal function addItem():void{
				//创建Button实例
				var btn:Button = new Button();
				btn.label = "btn_10";
				btn.height = 50;
				btn.width = 75;
				//向Tile容器中添加该按钮
				holder.addChild(btn);
			}
		]]>
	</mx:Script>
	<mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2"
		 direction="horizontal" tileHeight="80" tileWidth="80">
		<mx:Button label="btn_1" height="50" width="75"/>
        <mx:Button label="btn_2" height="50" width="75"/>
        <mx:Button label="btn_3" height="50" width="75"/>
        <mx:Button label="btn_4" height="50" width="75"/>
        <mx:Button label="btn_5" height="50" width="75"/>
        <mx:Button label="btn_6" height="50" width="75"/>
        <mx:Button label="btn_7" height="50" width="75"/>
        <mx:Button label="btn_8" height="50" width="75"/>
        <mx:Button label="btn_9" height="50" width="75"/>
	</mx:Tile>
	<mx:Button x="266" y="340" label="增加一个按钮" fontSize="12" click="addItem()"/>
</mx:Application>

 

3.2 更强大的 Grid组件

Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。

colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
		<mx:Grid x="62" y="96" horizontalGap="2">
			<mx:GridRow width="100%" height="79">
				<mx:GridItem width="100%" height="100%">
					<mx:Button label="Button1"/>
				</mx:GridItem>			
				<mx:GridItem width="100%" height="100%" colSpan = "2">
					<mx:Button label="Button2" height="60"/>
				</mx:GridItem>
				<mx:GridItem width="100%" height="100%">
					<mx:Button label="Button3"/>
					<mx:Button label="Button4"/>
				</mx:GridItem>
			</mx:GridRow>
			<mx:GridRow width="100%" height="79">
				<mx:GridItem width="100%" height="100%">
					<mx:Button label="Button"/>
				</mx:GridItem>			
				<mx:GridItem width="100%" height="100%">
					<mx:Button label="Button" height="60" width="98"/>
				</mx:GridItem>
				<mx:GridItem width="112" height="100%">
					<mx:Button label="Button" width="41" height="55"/>
					<mx:Button label="Button" width="85"/>
				</mx:GridItem>
			</mx:GridRow>		
		</mx:Grid>	
</mx:Application>

 

4. 方便的导航容器

导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。

 

4.1 Accordion 组件

Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。

selectedChild 和 selectedIndex  表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			internal function doSkip():void{
				tab_menu.selectedIndex = 1;
			}
		]]>
	</mx:Script>

	<mx:Accordion id="tab_menu" x="57" y="67" width="194" height="270" fontSize="12">
		<mx:Canvas label="Item 1" width="100%" height="100%">
			<mx:Label text="Canvas1" />
			<mx:ColorPicker x="10" y="38"/>
		</mx:Canvas>		

		<mx:VBox label="Item 2" width="100%" height="100%">
			<mx:Text text="这里插入内容" height="28"/>
			<mx:ComboBox>
				<mx:Array>
					<mx:Object label="请选择性别"/>					
					<mx:Object label="女"/>
					<mx:Object label="男"/>
				</mx:Array>
			</mx:ComboBox>
		</mx:VBox>

		<mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%">
		</mx:Panel>
	</mx:Accordion>	

	<mx:Button x="259" y="315" label="跳到第二个菜单" fontSize="14" labelPlacement="right" click="doSkip()"/>
</mx:Application>

 

4.2 ViewStack 组件

由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。

一般用来做向导类的应用。就是有那种下一步下一步的。

selectedChild 表示当前处于激活状态的子级对象。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			internal function doChange():void{
				if(viewstack_1.selectedChild == child2){
					viewstack_1.selectedChild = child1;
				}else{
					viewstack_1.selectedChild = child2;
				}
			}
		]]>
	</mx:Script>
	<mx:ViewStack x="46" y="72" id="viewstack_1" width="200" height="200">
		<mx:Canvas id="child1" label="View 1" width="100%" height="100%">
			<mx:List fontSize="12">
				<mx:Array>
					<mx:Object label="请选择您感兴趣的技术："/>					
					<mx:Object label="Flash"/>
					<mx:Object label="Flex"/>
					<mx:Object label="Flash Media server"/>
					<mx:Object label="Breeze"/>
				</mx:Array>
			</mx:List>
		</mx:Canvas>
		<mx:Canvas id="child2" label="View 2" width="100%" height="100%">
			<mx:TextInput text="请输入您的邮箱地址"  fontSize="12"/>
		</mx:Canvas>
	</mx:ViewStack>
	<mx:Button x="46" y="304" label="切换按钮" fontSize=" 12" click="doChange()"/>
</mx:Application>

 

4.3 使用 TabNavigator 进行快速导航

继承自ViewStack，还提供了用户却换内容的界面接口。

类似标签页却换面板。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:TabNavigator x="70" y="91" width="200" height="200" >
		<mx:Canvas label="Tab 1" width="100%" height="100%">
			<mx:CheckBox x="10" y="31" label="选中我" fontSize="12"/>
		  
		</mx:Canvas>
		<mx:Canvas label="Tab 2" width="100%" height="100%">
			<mx:Label x="20" y="41" text="第二个面板" fontSize="12"/>
		</mx:Canvas>
	</mx:TabNavigator>
	
</mx:Application>

 

5. 表单布局

Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。

Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem 和 FormHeading。

 

5.1 简单的用户输入表单

FormHeading 表示表弟标题，这里也可以放置顶部的导航控制。

FormItem 可以容纳多个组件，且组件的布局方向有 horizontal 和 vertical。FormItem 还有一个属性required 表示本栏的值是否为空。

 

5.2 表单验证

最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：

StringValidator 字符验证，property="text " 为文本属性，minLength 和 maxLength 表示字符最短长度和最长长度。tooShortError 提示信息。

PhoneNumberValidator 电话号码验证

DataValidator 日期验证

EmailValidator 邮箱验证

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Panel title="用户注册信息" width="359" height="303" x="24.5" y="37" fontSize="12">
		<mx:Form width="100%" height="100%" horizontalGap="0">
			<mx:FormHeading label="用户资料" width="100%"/>
			<mx:FormItem label="用户名：" width="100%" required="true">
				<mx:TextInput width="100%" id="user_txt"/>				
			</mx:FormItem>
			<mx:FormItem label="密码：" width="100%" required="true">
				<mx:TextInput width="100%" displayAsPassword="true" id="pass_txt"/>				
			</mx:FormItem>
			<mx:FormItem label="性别：" width="100%" direction="horizontal">
				<mx:RadioButton groupName="isMale" label="男" />	<mx:RadioButton groupName="isMale" label="女" />	
			</mx:FormItem>
			<mx:FormItem label="邮箱：" width="100%">
				<mx:TextInput width="100%" id="email_txt"/>				
			</mx:FormItem>
			<mx:FormItem label="电话：" width="100%">
				<mx:TextInput width="100%" id="phone_txt"/>				
			</mx:FormItem>
			<mx:FormItem label="出生年月：" width="100%">
				<mx:TextInput width="100%" id="birth_txt"/>				
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="32" paddingBottom="0" paddingTop="0" horizontalAlign="center">
			<mx:Button label="确定"/>
			<mx:Button label="重写"/>
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了"/>
	<mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12"/>
    <mx:PhoneNumberValidator source="{phone_txt}" property="text"/>
    <mx:DateValidator source="{birth_txt}" property="text"/>
    <mx:EmailValidator source="{email_txt}" property="text"/>
 
</mx:Application>

 

评论

2 楼 wangcheng 2008-06-25  

Great

1 楼 soni 2008-06-25  

支持一下。