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里面某个组件干什么用的，这里就不详细写了。