Flex教程

Flex教程(一)Flex是什么Flex是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe®Flash®Player作为前台的“富客户端互联网应用程序/richInternetapplications/RIA”，以满足用户更为直观和极具交互性的在线体验(二)Flex和Flash的比较1相同点最终都生成SWF文件，通过FlashPlayer来解释运行。2产品市场定义的差异和针对不同的开发人员Flex是一个RIA解决方案，针对的是企业级的网络应用（数据通信Flex表现得非常好）。flash主要应用在平面动画、广告设计、移动应用、多媒体应用等方面，同时也可以用于网络应用开发。(三)Flex的MVC模型为了增强系统的复用性和可维护性，应该采用具有良好体系架构的模型，即Model-View-Controller（MVC）。1.模型/Model组件封装了数据和与数据相关的行为。2.视图/View组件定义了应用程序的用户界面。3.控制器/Controller组件则负责处理程序中的数据连接。(四)开发Flex应用程序的典型步骤如下（通常是这样）：1.在一个文本编辑器或集成开发环境（IDE）中，如AdobeFlexBuilder、Eclipse或IntelliJ中插入MXML根标签。2.添加一个或更多容器。3.在容器中添加控件，如输入栏、按钮和输出栏等或者选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）。4.定义一种数据模型。5.为数据输入添加验证。6.为组件添加脚本（例如程序部件之间的相互作用）。7.布置组件、使用样式和主题来增强视觉方面的设计以设计美观且符合用户需求的用户界面8.将应用程序编译成SWF文件，然后在FlashPlayer中运行。(五)Flex的特性使用矢量图形继承Flash的矢量图形表达能力。矢量图形在放大时不失真，但运行较负责的图形时，会消耗较多的CPU运算时间。并提供了矢量图形API的访问权限，允许用户动态地创建和修改矢量图形。丰富的组件库使用组件，极大提高代码的重用性。比Flash组件更多，运行小赖也有很大的改进。采用全新的架构，使得组件的样式定制和外观修改更简单。支持CSS可以创建自己的组件对多媒体的广泛支持支持多媒体，比如FLV流媒体可以对多媒体的播放进行动态控制提供了与FlashMediaServer（FMS）等其他流媒体服务器进行通信的功能可以在本地存储数据（本地共享对象）与服务器端的通信除了可以加载XML文件和其他文本资料，还可以和ASP、JSP等多种服务器端程序通信，连接远程WebService支持Remoting和Socket等高级数据通信方式Remoting采用AMF（actionMessageFormat）协议，AMT是一种二进制格式，专门用于AS和后台服务器端的通信，比HTTP通信的速度要快很多，而且支持多种数据类型，Java、。NET、PHP等都有相应的Remoting服务端。通过Remoting服务端接口，AS直接调用服务端对象的方法。Socket套接字通信，可以使用一个特定的通道（端口）来收发消息。支持任意字符串格式的通信。在Flex中，开发人员可以开发出符合各种需求类型的应用程序，它们是：1.用户数据收集2.配置3.在客户端处理用户的输入，包括过滤和数据校验4.直接反馈用户5.多步骤处理6.支持大数据集7.实时数据推进8.偶尔的客户端连接(六)一个典型的Flex应用程序包括如下元素：1.FlexframeworkAdobe®Flex2framework包含了创建RIA所需要的所有组件，它们是：用于应用程序布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。Flexframework被包含在公用组件库（SWC）文件中。2.MXML每个Flex应用程序至少包含有一个MXML文件，它被作为该程序的主文件。MXML是一种标记语言，它是基于XML的一种实现，用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。3.ActionScript3.0你可以使用ActionScript3.0为应用程序添加动态行为，它是基于ECMAScript的一种实现，类似于JavaScript。你可以将ActionScript作为一个脚本块，在MXML文件中直接进行添加；或者创建一个单独的ActionScript文件，然后将它们导入到MXML文件中。4.CSS你可以通过设置组件的属性（properties）来改变组件（按钮、列表框等）的视觉样式。例如，按钮组件有一个fontFamily属性，你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制：通过主题(theme)；在CSS文件中进行定义；在MXML文件中的样式块中进行定义；在组件的实例中进行设置。1.简单地指定新的样式定义来改变默认的主题样式?xmlversion=1.0encoding=utf-8?mx:Applicationxmlns:mx==absolutemx:StyleTextArea{font-size:36px;font-weight:bold;}/mx:Stylemx:Panellayout=absolutewidth=80%height=80%x=122y=24mx:TextAreatext=SayhellotoFlex!top=10bottom=70left=10right=30/mx:Buttonlabel=Closeright=30bottom=40//mx:Panel/mx:Application2.将一个样式单导入到MXML文件中mx:Stylesource=styles.css/3.使用编译好的CSSSWF文件配置文件中CSSSWF文件路径指定：stylesheetcom/esri/solutions/flexviewer/themes/lighterside/style.swf/stylesheet加载：packagecom.esri.solutions.flexviewer{...publicclassUIManagerextendsEventDispatcher{...publicfunctionUIManager(){super();SiteContainer.addEventListener(AppEvent.CONFIG_LOADED,config);}privatefunctionconfig(event:AppEvent):void{configData=event.dataasConfigData;for(vari:Number=0;iconfigData.configUI.length;i++){varid:String=configData.configUI[i].id;varvalue:String=configData.configUI[i].value;if(id==stylesheet){StyleManager.loadStyleDeclarations(value);}}}}}5.图形资源与很多应用程序一样，Flex包含了各种各样的图形资源，如图标和图象。6.数据一些组件被使用来进行数据显示（combobox或者datagrid）的工作。同时，你还可以使用各种方式来将这些组件与数据联系起来，如使用数组、收集对象、数据模型、以及外部XML数据资源，等等。1.数据的生成你可以使用HTTPService组件来请求获取数据，就象这样：mx:Applicationxmlns:mx==absolutemx:HTTPServiceid=productsRequesturl=外部数据与数据驱动控制的绑定通过数据与数据驱动控制（data-drivencontrol）的绑定，你就可以处理HTTPService的结果（XML数据），就象这样：mx:DataGridx=20y=80id=productGridwidth=400dataProvider={productRequest.lastResult.products.items}mx:columnsmx:DataGridColumnheaderText=NamedataField=name/mx:DataGridColumnheaderText=PricedataField=price//mx:columns/mx:DataGrid数据绑定的语法显示在数据控制的dataProvider属性中（在波浪形的括号里），它包含了HTTPService请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中，XML数据源的数据结构看起来就象这样：XMLproductsitemnameMobilePhone/nameprice$199/price/itemitemnameCarCharger/nameprice$34/price/item…通过设置dataField属性，项目数据（name和price）作为数据栅格中每一列的数据。3.在运行时加载数据你还可以在Flex程序开始运行时加载数据，就象随后所示，在HTTPService中向某个特定的URL发送一个请求：mx:Applicationxmlns:mx==absolutecreationComplete=productsRequest.send()当你将creationComplete方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制。你还可以将HTTPService请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：mx:Buttonx=50y=8label=GetDataclick=productsRequest.send();/4.使用数据服务器Flex提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。Flex被设计为可以与许多类型的服务器打交道，从而提供对本地和远端逻辑的访问。提供数据访问的MXML组件被称之为数据服务器组件/dataservicecomponents。MXML包含了如下几种类型的数据服务器组件：1.WebService提供对使用SOAP的web服务器的访问。2.HTTPService提供对返回数据的HTTPURLs的访问。3.RemoteObject通过使用AML协议提供对Java对象（JavaBeans、EJBs、POJOs）的访问。该选项目前仅适用于FlexDataServices或MacromediaColdFusionMX7.0.2.(七)事件和行为的使用HTML应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的是，Flex应用程序是基于事件的/event-based。举个例子，当用户单击一个按钮时，便会触发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。当事件被触发时修改组件的属性对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个ID值，如下所示：mx:Panelid=myPanellayout=absolutewidth=80%height=80%x=122y=24随后你就可以将行为/behavior添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样：mx:Butto