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&#xd;asas NicjY&#xd;dd BBCide&#xd;"/>
	<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 &#xd;down as construction is finished.&quot;"/>
		</s:NavigatorContent>
		<s:NavigatorContent width="100%" height="100%" label="Tab2">
			<s:TextArea x="10" y="0"
						text="Beijing will set a cap for the &#xd;population and then allocate &#xd;basic urban resources, such&#xd; 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&#xd; resources cannot support an &#xd;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控件：