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