Flex笔记_处理用户输入
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控件：
<?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控件：
<?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控件：
<?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>
- 按钮
<?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>
- 选单
<?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>