Flex4.5--组件
1 Label, TextInput. TextArea, RichText，RichEditableText 以及 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"> <s:layout> <s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:RichText width="300" height="300" text="RichText"/> <s:RichEditableText text="RichEditableText"/> <s:TextArea text="Welcome You sdas sdsds dfdfdfd sdsdfsds
asas NicjY
dd BBCide
"/> <s:Label width="100" height="50" backgroundColor="#FFFFFF" color="#000000" fontFamily="Courier New" fontSize="18" fontWeight="bold" text="Welcome" textAlign="center" verticalAlign="middle"/> <!--密码框--> <s:TextInput displayAsPassword="true"/> </s:Application>
2 image 组件
<?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">
<s:layout>
<s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Image width="250" height="180" smooth="true" smoothingQuality="default"
source="@Embed('assets/Hydrangeas.jpg')"/>
</s:Application>
3 ALert 控件
<?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">
<s:layout>
<s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
protected function buttonHandlerA():void{
mx.controls.Alert.show("Are you sure exec the opeartion","Promotion",1,this,closeHandler1);
}
private function closeHandler1(e:CloseEvent):void{
mx.controls.Alert.show(e.detail.toString());
}
protected function buttonHandlerB():void{
mx.controls.Alert.yesLabel="Yes";
mx.controls.Alert.noLabel="No";
mx.controls.Alert.show("Are you sure exec the opeartion","Promotion",1|2,this,closeHandler2);
}
private function closeHandler2(e:CloseEvent):void{
mx.controls.Alert.show(e.detail.toString());
}
protected function buttonHandlerC():void{
mx.controls.Alert.yesLabel="是";
mx.controls.Alert.noLabel="否";
mx.controls.Alert.cancelLabel="取消";
mx.controls.Alert.show("你确认要执行此操作吗？","提示信息",1|2|8,this,closeHandler3);
}
private function closeHandler3(e:CloseEvent):void{
mx.controls.Alert.show(e.detail.toString());
}
]]>
</fx:Script>
<s:Button width="100" height="50" label="ButtonA" fontFamily="Courier New"
fontSize="18" fontWeight="bold" click="buttonHandlerA()"/>
<s:Button label="ButtonB" width="100" height="50" fontFamily="Courier New"
fontSize="18" fontWeight="bold" click="buttonHandlerB()"/>
<s:Button label="ButtonC" width="100" height="50" fontFamily="Courier New"
fontSize="18" fontWeight="bold" click="buttonHandlerC()"/>
</s:Application>
ComboBox， DropList and DataGrid 控件：
<?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">
<s:layout>
<s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var data:ArrayCollection = new ArrayCollection([
{label:"please select :"},{label:"male"},{label:"female"}
]);
]]>
</fx:Script>
<s:DataGrid requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Month"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Salary"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="Tax"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:ArrayList >
<fx:Object dataField1="6" dataField2="13000" dataField3="120"></fx:Object>
<fx:Object dataField1="7" dataField2="14000" dataField3="130"></fx:Object>
</s:ArrayList>
</s:DataGrid>
<s:DropDownList dataProvider="{data}" selectedIndex="0"></s:DropDownList>
<!--默认选中第0个-->
<s:ComboBox dataProvider="{data}" selectedIndex="0"/>
</s:Application>
List and Repeator 控件的使用：
<?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">
<s:layout>
<s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var data:ArrayCollection = new ArrayCollection([
{label:"Nicky"},{label:"Carlor"},
{label:"Nicky"},{label:"Carlor"},
{label:"Nicky"},{label:"Carlor"},
{label:"Nicky"},{label:"Carlor"},
{label:"Nicky"},{label:"Carlor"}
]);
]]>
</fx:Script>
<s:List width="150" height="200" dataProvider="{data}" />
</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"> <s:layout> <s:HorizontalLayout gap="20" verticalAlign="middle" horizontalAlign="center"/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <mx:TabNavigator width="200" height="200"> <s:NavigatorContent width="100%" height="100%" label="Tab 1"> <s:TextArea x="5" y="10" text="I don't want our officials to fall 
down as construction is finished.""/> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Tab2"> <s:TextArea x="10" y="0" text="Beijing will set a cap for the 
population and then allocate 
basic urban resources, such
 like gas and electricity. "/> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Tab3"> <s:TextArea x="10" y="10" text="The water, land and other natural
 resources cannot support an 
infinite number of people"/> </s:NavigatorContent> </mx:TabNavigator> <mx:Accordion width="200" height="200"> <s:NavigatorContent width="100%" height="100%" label="Accordion Pane 1"> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Panel2"> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Panel3"> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Panel4"> </s:NavigatorContent> </mx:Accordion> </s:Application>
Tree控件：