前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flex笔记_处理用户输入 原

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属性访问控件的值

代码语言:javascript
复制
<?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)

代码语言:javascript
复制
<?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/>

代码语言:javascript
复制
<?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)

代码语言:javascript
复制
<?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)

代码语言:javascript
复制
<?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)

代码语言:javascript
复制
<?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

代码语言:javascript
复制
<?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能够显示更多的元素,但没有指定任何默认元素。

代码语言:javascript
复制
<?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

代码语言:javascript
复制
<?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>

访问控件的值

向函数传递值

代码语言:javascript
复制
import mx.controls.Alert;
public function showMsg(msg:String):void {
	Alert.show(msg);
}

向函数传递事件

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

代码语言:javascript
复制
<?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>

直接访问属性

耦合程度最高的方式

代码语言:javascript
复制
<?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>

使用组合技术

代码语言:javascript
复制
<?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 条评论
热度
最新
推荐阅读
目录
  • Form标签
  • id属性
  • Flex控件分类
  • 访问控件的值
    • 向函数传递值
      • 向函数传递事件
        • 直接访问属性
          • 应该选用哪种方式
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档