Flex_控件
1、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"> <fx:Script> <![CDATA[ import mx.controls.Alert; public function showMsg(msg:String):void { Alert.show(msg); } ]]> </fx:Script> <s:Panel title="TextSample" verticalCenter="0" horizontalCenter="0"> <s:layout> <s:VerticalLayout/> </s:layout> <s:Label text="TextInput" fontWeight="bold"/> <s:TextInput id="TextInput"/> <s:Label text="TextArea" fontWeight="bold"/> <s:TextArea id="TextArea" textAlign="center" width="100%" height="40"/> <s:Label text="RichTextEditor" fontWeight="bold" color="#ff0000"/> <mx:RichTextEditor id="RichTextEditor" height="150" width="650" borderSkin="mx.skins.spark.BorderSkin" borderColor="0x000fff"/> <s:Label text="RichEditableText" fontWeight="bold"/> <s:RichEditableText textAlign="center" color="#127892" backgroundColor="0xfff000" 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:RichEditableText> </s:Panel> </s:Application>
2、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"> <fx:Script> <![CDATA[ import mx.controls.Alert; public function showMsg(msg:String):void { Alert.show(msg); } ]]> </fx:Script> <s:Panel title="DateSample" verticalCenter="0" horizontalCenter="0"> <s:layout> <s:VerticalLayout/> </s:layout> <s:Label text="DateField" fontWeight="bold" backgroundColor="0xff0022"/> <mx:DateField text="12/05/2008" id="thisDateField" change="showMsg(thisDateField.selectedDate.toString())"/> <s:Label text="DateChooser" fontWeight="bold" backgroundColor="0xff0022"/> <mx:DateChooser id="thisDateChooser" maxYear="2010" minYear="2006" selectedDate="{new Date(2008,10, 15)}" change="showMsg(thisDateChooser.selectedDate.toString())"> </mx:DateChooser> </s:Panel> </s:Application>
3、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"> <fx:Script> <![CDATA[ import mx.controls.Alert; public function showMsg(msg:String):void { Alert.show(msg); } ]]> </fx:Script> <s:Panel title="NumericSample" width="360" height="240" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:VGroup> <s:Label text="NumericStepper" fontWeight="bold" backgroundColor="0xff0022"/> <s:NumericStepper id="kids" minimum="0" maximum="10" stepSize="1" change="showMsg(kids.value.toString())"/> <s:HGroup> <s:Label text="Spinner" fontWeight="bold" backgroundColor="0xff0022"/> <s:Spinner minimum="0" maximum="10" id="collegeKids"/> <s:Label text="{collegeKids.value} in college"/> </s:HGroup> <s:Label text="HSlider" fontWeight="bold" backgroundColor="0xff0022"/> <mx:HSlider id="commuteTimeRange" minimum="0" maximum="180" tickInterval="15" labels="[0 mins,180 mins]" thumbCount="2" snapInterval="5" change="showMsg(commuteTimeRange.values.toString())"> </mx:HSlider> </s:VGroup> <s:VGroup> <s:Label text="VSlider" fontWeight="bold" backgroundColor="0xff0022"/> <mx:VSlider id="yourHeight" minimum="0" maximum="300" tickInterval="50" snapInterval="1" labels="[0,50,100,150,200,250,300]" change="showMsg(yourHeight.values.toString())"/> </s:VGroup> </s:Panel> </s:Application>
4、Button组件
外观:
代码:
<?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"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; [Bindable] public var myArray:ArrayCollection = new ArrayCollection(['One','Two','Three']); public function showMsg(msg:String):void { Alert.show('You just clicked on ' + msg); } ]]> </fx:Script> <s:Panel title="ButtonSample" width="360" height="240" horizontalCenter="0" verticalCenter="0"> <s:VGroup> <s:Button id="thisBtn" label="Button" click="showMsg('button')"/> <mx:LinkButton id="thisLinkBtn" label="LinkButton"/> <s:Label text="ButtonBar" fontWeight="bold" backgroundColor="0xff0022"/> <s:ButtonBar id="thisBtnBar" labelField="ButtonBar" dataProvider="{myArray}" click="showMsg(ButtonBar(event.currentTarget).selectedItem)" /> <s:Label text="LinkBar" fontWeight="bold" backgroundColor="0xff0022"/> <mx:LinkBar id="thisLinkBar" dataProvider="{myArray}" itemClick="showMsg(event.label)" /> <s:Label text="ToggleButtonBar" fontWeight="bold" backgroundColor="0xff0022"/> <mx:ToggleButtonBar id="thisToggleBar" dataProvider="{myArray}" itemClick="showMsg(event.label)"/> </s:VGroup> </s:Panel> </s:Application>
5、选单控件
外观:
代码:
<?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"> <fx:Script> 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 width="400" height="150" title="SelecterSample" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:VerticalLayout/> </s:layout> <s:HGroup> <s:Label text="CheckBox" fontWeight="bold" backgroundColor="0xff0022"/> <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="RadioButton" backgroundColor="0xff0022"/> <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="DropDownList" backgroundColor="0xff0022"/> <s:DropDownList id="combo" close="showMsg('Favorite car is ' + event.currentTarget.selectedItem)" > <mx:ArrayCollection> <fx:String>Ferrari</fx:String> <fx:String>Porsche</fx:String> <fx:String>Hyundai</fx:String> </mx:ArrayCollection> </s:DropDownList> </s:HGroup> <s:HGroup> <s:Label fontWeight="bold" text="ColorPicker" backgroundColor="0xff0022"/> <mx:ColorPicker id="clr" change="showMsg('Color ' + event.currentTarget.selectedColor)"/> </s:HGroup> </s:Panel> </s:Application>