flex基礎學習

Flex是Adobe開發的一種RIA，富互聯網應用，用Flex開發的東西均可以使用Flash作出來，可是Flex主要是面向的程序開發人員，前臺使用ActionScript和MXML。

上面介紹了flex是什麼，下面針對flex項目本身寫一下本身的認識。ActionScript相似於web開發的javascript，不過他的語法有強類型int，string等,mxml他相似於web中的html中的標籤。二者結合能夠很好的將代碼分離開來。

對於mxml來講<mx:Application 中Application至關於舞臺的更節點就像html中的html爲根節點同樣。其餘向<mx:TitleWindow等容器都是在Application的節點上創建的，不然界面是沒法展示的這個我是深有體會。

對於ActionScript.as文件能夠認爲他裏面主要就是對命名空間的導入和一些定義函數，類在裏面。

flex開發我的理解也是基於事件驅動來渲染界面的。

flex加載模塊的組件能夠用ModuleLoader來加載，此類繼承自vbox。vbox是垂直佈局，hbox爲水平佈局。

對於flex遠程交互，項目中主要用到的是RemoteObject此對象來進行交互的，不過對於返回的結果接受要用兩個函數來接受， addEventListener(ResultEvent.RESULT,pOnOk);addEventListener(FaultEvent.FAULT,pOnEr);一個是用來監聽成功，一個是用來監聽失敗。這一點與ajax調用很類似。

flex的開發給個人我的感受有點像Extjs，不少地方都須要註冊事件，而後將方法註冊進去。

下面給貼出一段代碼登陸界面與總體界面佈局的

登陸界面代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	horizontalScrollPolicy="auto" verticalScrollPolicy="auto" title="登陸" height="200" width="400"
	showCloseButton="false" creationComplete="init()" >
	<mx:Script source="Login_As.as" />
	<mx:Label x="47" y="37" text="登陸名稱" />
	<mx:Label x="47" y="70" text="登陸密碼"/>
	<mx:TextInput x="107" y="35" width="218" id="tbox_userName" text="" maxChars="10" enter="Logins()"
		restrict="a-zA-Z0-9"/>
	<mx:TextInput x="107" y="69" width="218" id="tbox_password" text="" displayAsPassword="true" maxChars="25"
		enter="Logins()"/>
	<mx:Button id="btnLogin" x="271" y="104" label="登 錄"/>
</mx:TitleWindow>

 總體模板佈局以下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	horizontalScrollPolicy="off" verticalScrollPolicy="off" 
	paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
	layout="absolute" creationComplete="init()" themeColor="#ffffff" backgroundColor="#ffffff">
	<mx:Script source="Index_As.as" />
	<mx:Style source="style.css"/>
	<mx:VBox id="controls" width="100%" height="100%" horizontalGap="0" verticalGap="0"  backgroundColor="#ffffff">
		<mx:HBox styleName="TitleBar" id="idTitleBar" width="100%" height="32" paddingTop="2" backgroundColor="#eaeaea">
			<mx:Label id="idTitle" fontSize="18" text="XXXX業務管理系統"/>
			<mx:Label id="idAreaName" verticalCenter="0" fontSize="18" text=""/>
		</mx:HBox>
		<mx:Canvas id="idOperBar" width="100%" height="24" x="2" y="-5">
			<mx:Label id="lbAgentInfo" left="10" verticalCenter="0" text="" />
		</mx:Canvas>
		<mx:VBox id="vbox_middle" width="100%" height="100%">
			<mx:HDividedBox id="HDBox" width="100%" height="100%" paddingLeft="5" paddingBottom="5" paddingRight="5">
				<mx:VBox id="vbox_menu" width="200" height="100%" borderColor="#aaaaaa" borderStyle="solid">
					<mx:Tree id="tree_menu" width="100%" height="100%" verticalScrollPolicy="auto" 
							horizontalScrollPolicy="auto" borderStyle="none" openItems="true" scroll="true"/>
				</mx:VBox>
				<mx:VBox id="vbox_content" width="100%" height="100%" borderColor="#aaaaaa" borderStyle="solid">
					<mx:ApplicationControlBar id="idModuleNameBar" width="100%">
						<mx:Label id="idModuleName" text="" fontWeight="bold"/>
					</mx:ApplicationControlBar>
					<mx:ModuleLoader id="MLoader" url="desktop.swf" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
				</mx:VBox>
			</mx:HDividedBox>
		</mx:VBox>	
		
	</mx:VBox>
</mx:Application>

 具體flex裏面某個組件幹什麼用的，這裏就不詳細寫了。