Form标签

在Flex中，Form标签的意义仅限于布局我们称之为控件的UI组件。

id属性

MXML的id属性是ActionScript访问组件所包含值的重要途径。

示例：使用id属性访问控件的值

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function showText():void {
				mx.controls.Alert.show("idMe is " + meId.text);
			}
		]]>
	</fx:Script>
	<s:Label id="meId" text="HELLO WORLD!!!" click="showText()"/>
</s:Application>

Flex控件分类

Text控件：

Label、RichText、RichEditableText、TextInput、TextArea、RichTextEditor(MX)

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function showMsg(msg:String):void {
				Alert.show(msg);
			}
		]]>
	</fx:Script>
	<s:Panel title="Profile" verticalCenter="0" horizontalCenter="0">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="Enter your name" fontWeight="bold"/>
		<s:TextInput id="yourName" valueCommit="showMsg(yourName.text)"/>
		
		<s:Label text="Profile Summary" fontWeight="bold"/>
		<s:TextArea id="aboutYou" textAlign="center" width="100%" height="40"
					valueCommit="showMsg(aboutYou.text)"/>
		
		<s:Label text="Enter your profile"
				 fontWeight="bold"
				 color="#ff0000"/>
		<mx:RichTextEditor id="fullProfile" height="150"
						   valueCommit="showMsg(fullProfile.text)"/>
	</s:Panel>
</s:Application>

RichText、RichEditableText 需要通过制定content属性来提供数据，content属性支持如下标签：
<p> <span> <br/>

<?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>
	<fx:Script>
		<![CDATA[
		]]>
	</fx:Script>
	<s:Panel title="Howdy" verticalCenter="0" horizontalCenter="0" width="300">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:RichText textAlign="center" color="#127892" width="100%">
			<s:content>
				Greetings
				<s:span fontWeight="bold" color="#ff0000">People</s:span>
				of<s:br/>
				<s:span fontSize="20">
					EARTH!
				</s:span>
			</s:content>
		</s:RichText>
	</s:Panel>
</s:Application>

Date控件：

DateChooser(MX)、DateField(MX)

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function showMsg(msg:String):void{
				mx.controls.Alert.show(msg);
			}
		]]>
	</fx:Script>
	<s:Panel title="Profile" verticalCenter="0" horizontalCenter="0">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<mx:DateField text="12/05/2010"
					  id="thisDateField"
					  change="showMsg(thisDateField.selectedDate.toString())"/>
		
		<mx:DateChooser id="thisDateChooser"
						maxYear="2012" minYear="2010"
						selectedDate="{new Date(2010, 10, 15)}"
						change="showMsg(thisDateChooser.selectedDate.toString())">
			
		</mx:DateChooser>
	</s:Panel>
</s:Application>

Numeric控件：

NumericStepper、Spinner、HSlider(MX)、VSlider(MX)

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function showMsg(msg:String):void{
				mx.controls.Alert.show(msg);
			}
		]]>
	</fx:Script>
	<s:Panel title="Profile">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:VGroup>
			<s:Label fontWeight="bold" text="how many kids do you have?"/>
			
			<s:NumericStepper id="kids" minimum="0" maximum="10"
							  stepSize="1" change="showMsg(kids.value.toString())"/>
			
			<s:HGroup>
				<s:Label fontWeight="bold" text="Kids in college?"/>
				<s:Spinner minimum="0" maximum="10" id="collegeKids"/>
				<s:Label text="{collegeKids.value} in College"/>
			</s:HGroup>
			
			<s:Label fontWeight="bold" text="How long is your commute (mins)?"/>
			
			<mx:HSlider id="commuteTimeRange" minimum="0" maximum="180"
						snapInterval="5" tickInterval="15"
						labels="[0 mins, 180 mins]"
						thumbCount="1"
						change="showMsg(commuteTimeRange.value.toString())">
				
			</mx:HSlider>
		</s:VGroup>
		<s:VGroup>
			<s:Label fontWeight="bold" text="How tall are your commute (cm)?"/>
			<mx:VSlider id="yourHeight" minimum="0" maximum="300"
						snapInterval="1" tickInterval="50"
						labels="[0, 50, 100, 150, 200, 250, 300]"
						change="showMsg(yourHeight.value.toString())">
				
			</mx:VSlider>
		</s:VGroup>
	</s:Panel>
</s:Application>

按钮

Button、ButtonBar、LinkButton(MX)、LinkBar(MX)、ToggleButtonBar(MX)、PopUpButton(MX)、PopUpMenuButton(MX)

<?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>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			public function showMsg(msg:String):void{
				mx.controls.Alert.show("You just clicked on " + msg);
			}
			
			[Bindable]
			public var myArray:ArrayCollection = 
				new ArrayCollection(["one", "two", "three"]);
		]]>
	</fx:Script>
	<s:Panel title="profile" width="360" height="240"
			 horizontalCenter="0" verticalCenter="0">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		
		<s:VGroup>
			<s:Button id="thisBtn" label="Button" click="showMsg(‘button‘)"/>
			<mx:LinkButton id="thisLinkBtn" label="LinkButton" click="showMsg(‘linkButton‘)"/>
		</s:VGroup>
		
		<s:VGroup>
			<s:ButtonBar id="thisBtnBar" dataProvider="{myArray}"
						 click="showMsg(ButtonBar(event.currentTarget).selectedItem)"/>
			
			<mx:LinkBar id="thisLinkBar"
						dataProvider="{myArray}"
						itemClick="showMsg(event.label)"/>
			
			<mx:ToggleButtonBar id="thisToggleBar"
								dataProvider="{myArray}"
								itemClick="showMsg(event.label)"/>
		</s:VGroup>
	</s:Panel>
</s:Application>

注意：只有Halo组件才支持itemClick，Spark的ButtonBar使用的是通用的click事件，所以必须使用currentTarget属性才可以访问按下的按钮。itemClick添加了label和index属性，更容易知道单击的是哪个按钮。

PopUpMenuButton

<?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>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			public function showMsg(msg:String):void{
				mx.controls.Alert.show("You just clicked on " + msg);
			}
			
			[Bindable]
			public var myArray:ArrayCollection = 
				new ArrayCollection(["one", "two", "three"]);
		]]>
	</fx:Script>
	<mx:PopUpMenuButton id="menuBtn"
						dataProvider="{myArray}"
						click="showMsg(‘left side‘)" 
						itemClick="showMsg(‘right side with ‘+event.label)"/>
</s:Application>

PopUpButton能够显示更多的元素，但没有指定任何默认元素。

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Menu;
			import mx.events.MenuEvent;
			public var menuItems:Object = 
				[{label:‘One‘},{label:‘Two‘},{label:‘Three‘}];
			
			[Bindable]
			public var thisMenu:Menu = Menu.createMenu(null, menuItems, false);
			
			public function handleItemClick(event:MenuEvent):void {
				menuBtn.label = event.label;
			}
		]]>
	</fx:Script>
	<mx:PopUpButton id="menuBtn" 
					creationComplete="thisMenu.addEventListener(‘itemClick‘, handleItemClick);"
					popUp="{thisMenu}"/>
</s:Application>

选单

CheckBox、DropDownList、ColorPicker

<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function showMsg(msg:String):void {
				Alert.show(msg);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:RadioButtonGroup id="Spam"
							itemClick="showMsg(‘User picked ‘ + event.currentTarget.selectedValue)"/>
	</fx:Declarations>
	<s:Panel title="Profile" width="400" height="150" horizontalCenter="0" verticalCenter="0">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:HGroup>
			<s:Label text="Your Hobbies"/>
			<s:CheckBox id="cbVideoGames" label="Video Games"
						click="showMsg(‘Video Games is ‘ + cbVideoGames.selected)"/>
			<s:CheckBox id="cbFishing" label="Fishing"
						click="showMsg(‘Fishing is ‘ + cbFishing.selected)"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label fontWeight="bold" text="Do you like spam:"/>
			<s:RadioButton id="rbYes" value=http://www.mamicode.com/"Yes" groupName="Spam"> 

 访问控件的值  

 向函数传递值  
import mx.controls.Alert;
public function showMsg(msg:String):void {
	Alert.show(msg);
} 
 
  
 
  

 向函数传递事件  传递事件的关键在于，必需知道事件的类型，并导入相应的类。 

 
<?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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.ItemClickEvent;
			public function showMsg(anEvent:ItemClickEvent):void {
				Alert.show(anEvent.currentTarget.seletedeValue);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:RadioButtonGroup id="Spam"
							itemClick="showMsg(event)"/>
	</fx:Declarations>
</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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.ItemClickEvent;
			public function showMsg():void {
				Alert.show(Spam.seletedeValue.toString());
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:RadioButtonGroup id="Spam"
							itemClick="showMsg()"/>
	</fx:Declarations>
</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>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function checkValue(inputValue:String):void {
				if(inputValue.length < 5){
					Alert.show("Are you sure there‘s not that much new?");
				}
			}
			
			public function submitClicked():void {
				Alert.show("User says :" + whatsnew.text + " is new."); 
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:Label text="What‘s new"/>
		<s:TextInput valueCommit="checkValue(event.currentTarget.text)"
					 id="whatsnew"/>
		<s:Button label="Submit" click="submitClicked()"/>
	</s:VGroup>
</s:Application> 

 应该选用哪种方式  
 考虑程序规模、预计的生命周期，以及其它问题。Flex笔记_处理用户输入

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Flex笔记_处理用户输入

Flex笔记_处理用户输入

Form标签

id属性

Flex控件分类

访问控件的值

向函数传递值

向函数传递事件

直接访问属性

应该选用哪种方式

看完仍有疑问？有类似问题直接问程序猿