Flex笔记_处理用户输入

Flex 2020-10-28

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","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>

应该选用哪种方式

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

相关文章

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以...
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些...
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周...
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后...
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...