Flex笔记_处理用户输入原

LeoXu

发布于 2018-08-15 14:48:16

1.1K0

发布于 2018-08-15 14:48:16

文章被收录于专栏：LeoXu的博客

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属性支持如下标签：

<?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="Yes" groupName="Spam"
						   click="showMsg('Yes')" label="Yes"/>
			<s:RadioButton id="rbNo" value="No" groupName="Spam"
						   click="showMsg('No')" label="No"/>
		</s:HGroup>
		<s:HGroup>
			<s:Label fontWeight="bold" text="Favorite car maker:"/>
			<s:DropDownList id="combo"
							close="showMsg('Favorite car is ' + event.currentTarget.selectedItem)">
				<s:ArrayCollection>
					<fx:String>Ferrari</fx:String>
					<fx:String>Porsche</fx:String>
					<fx:String>Hyundai</fx:String>
				</s:ArrayCollection>
			</s:DropDownList>
		</s:HGroup>
		<s:Label fontWeight="bold" text="With the color of:"/>
		<mx:ColorPicker id="clr"
						change="showMsg('Color ' + event.currentTarget.selectedColor)"/>
	</s:Panel>
</s:Application>

访问控件的值

向函数传递值

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>

应该选用哪种方式

考虑程序规模、预计的生命周期，以及其它问题。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014/08/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度