码迷，mamicode.com
首页 > 其他好文 > 详细

Flex笔记_处理用户输入

时间：2014-08-30 01:19:09      阅读：180      评论：0      收藏：0      [点我收藏+]

标签：style   http   color   os   使用   io   strong   ar   for   

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

应该选用哪种方式

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

Flex笔记_处理用户输入

标签：style   http   color   os   使用   io   strong   ar   for   

原文地址：http://my.oschina.net/xuleo/blog/308237
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！