FLEX开发_入门宝典_+_实例.ppt

《FLEX开发_入门宝典_+_实例.ppt》由会员分享，可在线阅读，更多相关《FLEX开发_入门宝典_+_实例.ppt（28页珍藏版）》请在三一办公上搜索。

1、Flex培训,Eclipse IDEBuliding Flex SDK Applications with Ant Introduction to Flex Applications-Introducing MXML and ActionScript-Handing Flex in Data-Creating Custom Components with ActionScriptS Using Flex Libraries Flex and Spring Integration Architecture,开发环境Flex Builder,、JDK。、Eclipse 3.4.2D:￥、Flex

2、BuilderFlexBuilder_EclipsePlugins.exe、以下画面呼出。,、OK,、次。,、”使用許諾契約条項同意”項目選択、次。,、次。,、画面選択、以下画面呼出。,、Eclipse選、ok,、次、待、完了。,Flex介绍,一个Flex应用程序有ActionScript和MXML两种语言代码组成。从3.0开始ActionScript已经从基于原型脚本语言进化到完全面向对象的，强类型的符合ECMAScript标准的脚本语言。MXML则是一种标记语言，非常类似于大家所熟悉的超文本标记语言(HTML)，扩展标记语言(XML)。如何把MXML和ActionScript相互关联起来呢

3、？对于编译器来说，解析这两种语法后最终被翻译成同一个对象，比如：和varbtn:Button=newButton();btn.label=MyButton;btn.height=100;,产生的是同一个对象，两者的主要不同是，ActionScript创建的对象(上面第二个例子)除了Button就没有别的了，而MXML中创建的对象将Button添加到包含MXML代码的任何组件上。Flex框架根据MXML中的对象描述来调用构造函数，然后将其添加到父对象上或设置其为父对象的某个属性。,建立Flex项目时需注意,要一致,Introducing MXML and ActionScript,MXMLAct

4、ionScript,MXML介绍,MXML是一种基于XML的标记语言，在Flex技术中，MXML用于设计用户界面，实现丰富的 Flex表现层。从作用上说，MXML和HTML的功能是基本一致的，都是设计用户界面，但是MXML提供了较HTML更为丰富的界面组件，并且在开发上 更为结构化，条理更加清晰。MXML的编写同样类似于HTML，它通过标签来定义和描述组件。这点可以从本文前面部分体会到。在MXML的编程模型中，需要注意的主要有三点：1、标记 2、标记 3、用户自定义可视化组件标记 第一点就不用多说了，这是每一个MXML应用必须具备的配置节点，然后便上标记，我们可以通过标签来嵌入ActionSc

5、ript代 码（详见本本前面部分的资料图），除了在里面直接嵌入ActionScript代码外，我们还可以引入外部ActionScript类/接口等文件(.as),这点和Java的编程模型是一样的，通过Import 类/接口的全限定名d的方式导入相应的接口或是对象。最后便是用户自定义组件了，这个很简单就可以理解，这里就不用多说了，如便是用户根据实际需要而定义的组件。,Flex控件,flex控件分为2种，一种是布局控件，另外一种是元素控件。CanvasCanvas容器绘置一个长方形的区域用来放置子组件（其他容器或者控件），与其他容器不同，Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。

6、Box,HBox,and VBoxBox容器用来横向或者纵向的放置子组件，使用direction属性来决定是横向布局还是纵向布局。HBox,VBox就是指定了direction属性的Box。ControlBarControlBar容器一般与Panel容器或者TitleWindow容器配合使用，比如在Panel容器的底部放置一个ControlBar作为Footer。ApplicationControlBarApplicationControlBar容器一般起到导航的作用，作用于整个应用程序的运行期间，比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。ApplicationCon

7、trolBar容器有2种模式，分别是Docked模式和Normal模式。Docked模式将ApplicationControlBar容器一直显示的停靠在应用程序的顶部，并且自动将宽度调整为应用程序的宽度。Normal模式可以将ApplicationControlBar容器以任意的大小放置在应用程序的任何位置。,DividedBox,HDividedBox,and VDividedBoxDividedBox容器类似与Box容器，用来横向或者纵向的放置子组件，不同的是DividedBox用显示的间隔物将自组件分割开，你可以拖动间隔物来扩大或缩小每个子组件所占的空间，HDividedBox和VDiv

8、idedBox相与DivideBox的区别与HBox和VBox相对与Box的区别一样。Form,FormHeading,and FormItemForm是Web应用最为常见的容器了，常见的有用户注册，帐单信息等。FormHeading用来区分每一组Form信息，如用户注册的过程中，可以指定2个FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目，包含一个Label和若干个控件。GridGrid容器用来以表格的形式放置组件，好比Html中没有Border的Table。Grid容器的每一个单元格(cell)都可以放置0个或1个子组件，如果想要在一个单元格中放

9、置多个控件，那么就在这个单元格中再多加一个容器。Grid中使用GridRow来创建行，用GridItem来创建单元格。类似与Html的table，你也可以使用rowSpan,colSpan来合并单元格。PanelPanel容器是一个比较常用的容器，包含标题(title)区域，放置子组件的容器(content)区域，以及边框(border)。content区域有3种形式，分别是横向布局(horizontal)，纵向布局(vertical)，绝对坐标布局(absolute)。Panel会很普遍的与Form结合起来使用，当然还有前面提到的ControlBar组件也是Panel容器中很常用的一个子容器

10、。,TileTile容器将子组件按照表格的形式放置，与Grid容器的区别是，Tile容器每个单元格的大小都是一样的。Tile容器子组件具体的放置位置由Flex来安排，而Tile容器的宗旨是将所有的子组件都能以横竖排列最佳的位置摆放。比如Tile容器有16个子组件，就将16个子组件以4行4列的位置摆放，如果是15个子组件，也是4行4列摆放，只不过最后一行的最后一列是空着的。TitleWindowTitleWindow容器继承与Panel容器，所以TitleWindow拥有Panel的所有特性，而不同的是TitleWindow容器是用来做弹出(popup)面板的。如图：,ActionScript介

11、绍,MXML文件中可用标签包含ActionScript，不过ActionScript文件是不能包含在MXML里的。你可以这样理解：MXML是描述应用程序外观及其组件，而ActionScript则描述如何处理应用程序的事件和自定义逻辑，虽然这么说不完全确切，但可以让你明白这两者之间的大致关系。在某些方面，比如循环，函数定义，条件语句等等都必须通过ActionScript实现，除了最简单程序可能不需要ActionScript外，绝大多数都是需要MXML和ActionScript来相互协作。,Handing Data in Flex,Data BindingValidating DataFormat

12、ting Data,数据绑定,Flex 为基于组件的应用程序提供了一种健全的架构模式，在这个强大的框架里，是一个基于事件的系统，在这个事件系统中通过数据绑定，可以通过其它的对象来修改另外一个对象的内部的属性值。数据绑定使得在应用程序中不同的层间传递数据的变得简单和方便，通过将源属性与目标属性进行关联来实现。当源属性的值有更新时，会产生一个事件来通知目的属性来进行更新。当一个变量标记为可绑定后，其它对象就可以修改该变量的其它目的属性的值。将一个变量上进行数据绑定，你必须使用下面三种方式中的一种来定义Bindable标记。1 在一个类的定义之前package com.oreilly.flexcoo

13、kbookimport flash.events.EventDispatcher;Bindablepublic class DataObject extends EventDispatcher,在一个类创建之前添加Bindable标记创建一个绑定的表达式从而使得类的所有共有属性变得可以绑定。所有可以绑定的类必须由IEventDispatcher 类实现，因为数据绑定是基于事件驱动，来复制源数据到目的数据。2 在变量的前面进行声明Bindable private var _lastName:String;Bindable protected var _age:Number;Bindable pu

14、blic var firstName:String;声明为私有的变量标记为可绑定时，则只能在类中进行绑定。保护的变量则只能在继承或者类本身可见。而共有变量都可见。3 在属性的前面通过隐含的getter/setter 方法来变向的进行绑定：private var _lastName:String;.Bindablepublic function get lastName():Stringreturn _lastName;,public function set lastName(str:String):void_lastName=str;当你通过添加Bindable标记在getter 的声明的上

15、方，来定义隐含的getter/setter 为可绑定的方法，则该变量可以通过点标语法进行存取。这样可以你通过同样的语法来存取非绑定的变量，自有变量等来设置数据源绑定。在框架内部，当绑定的变量值更新时，框架会发送propertyChange 事件来更新数据。Bindable标记接受一个事件属性，通过定义一个自定义的事件类型：Bindable(event=myValueChanged)默认情况下事件属性被设置为propertyChange。如果不进事件类型进行修改，则目的变量会被内部使用该类型进行提示。如果你自定义了该属性，则必须在类的内部进行声明。绑定是通过事件通知来实现的，当应用程序中的源变量

16、修改或者在初始化时，就会被触发。你可以通过执行绑定的方法，来强制要求目标为mx.core.UIComponent 子类的对象的数据绑定执行。数据绑定提供一层而达到在不同的对象间进行数据同步，从而帮助创建富应用程序。这一节的多种数据绑定的技巧到你的应用程序的架构中去。,数据服务和服务端通信,使用Flex 最重要的部分之一就是和服务器以及数据库的通讯。本章的内容主要关注与配置一个Flex 应用程序来与服务器通讯以及处理从服务器发到应用程序的数据，这些数据从三种主要的服务器应用之间的通讯方式传送。Flex 提供了三个类来与服务器通讯：HTTPService，RemoteObject 以及WebSer

17、vice。HTTPService 类提供了使用超文本传输协议（HTTP）与服务器通讯的方式。一个Flex 应用程序可以使用GET 或者POST 请求来发送数据到一个服务器并且处理这个请求返回的XML 或者字符串。使用HTTPService 类，你可以与PHP 页面,ColdFusion 页面，JavaServer页面（jsp），Java servlet，Ruby onRails，以及ASP 动态网页通讯。你可以使用RemoteObject类通过AMF格式对象来和服务器通讯。RemoteObject也可以与Java 或者ColdFusion remoting网关或者使用了开源项目的.NET 以及

18、PHP 程序来通讯，开源项目包括AMFPHP，SabreAMF 以及WebORB。WebService 类可以和使用web 服务描述语言（WSDL）所预先定义接口的Web 服务通过XML 以及基于SOAP 的XML 来通讯。,例如：,Flex实例,接下来就让我们看看如何在五分钟之内完成一个Flex城市天气预报小应用，我想这应该比写HelloWorld更有成就感。首先，我们会先使用已经准备好的一个天气预报的WebService服务，WebService服务来自WebXML，免费，而且查询信息来自国家气象局，地址如下：http:/你可以试着在浏览器内打开上面的这个连接，你会看到浏览器内返回的是XM

19、L结构的WSDL文档描述，从中，你可以找到这样的一部分代码：,其中getWeatherbyCityName就是请求WS返回特定城市天气预报的函数名称，而theCityName就是城市名的参数（其实这个参数你只 要将合法的城市名以String格式传给getWeatherbyCityName就可以了。至于哪个城市在它WebService的服务之列，你可以自己来挖掘WebService发现。接下来，你可以通过访问这里去进一步测试此WebService，而且可以在着手写代码前，先看看城市天气预报返回的XML数据构成，以及SOAP1.1和1.2的标准请求 和响应示例，包括HTTP的GET和POST示例。

20、你试着，输入城市为“北京”，你将会得到的返回数据是基于XML格式的数据 http:/你看到了这就是北京近三天的天气预报和北京这个城市的基本信息（来自国家气象局）。作为一名开发者，你会发现这个WebService返回的数据是 XML结构，但是各个元素的名称却都是string，没有其他特征，这种结构最适合通过Flex的ArrayCollection来承载，而不是e4x。,接下来，你要开始使用Flex Builder开发一个非常简单的天气预报查询的小应用。我们这里所实现的就是简单的查询，获取WebService结果，显示出来。我们构造这个 Flex应用，首先，我们需要使用ArrayCollectio

21、n，需要使用WebService类，需要处理响应，同时，需要有个简单的错误响应。有了 这些想法，我们开始着手写代码，首先在应用场景Application上加入三个标签，一个TextInput，用来输入要查询的城市；一个按钮，用来点 击时候调用WebService服务；一个Text文本区域，用来显示返回的天气预报结果。代码也非常简单：接下来，你要引入WebService服务，你需要加入一个WebService标签来帮你完成任务 showBusyCursor=true result=onLoad(event)fault=faultHandler(event)/这里有几个属性，实例化id是webService，wsdl地址就是我们上面的那个wsdl地址，showBusyCursor设置为true，表示工作 状态，result事件就是当WebService返回结果时，调用一个方法，这个方法，我们叫onLoade，传递的参数是result event对象，同样，fault事件的响应函数将faultHandler。然后，我们给Button控件的click事件加入对于 WebService的调用webService.getWeatherbyCityName(cityname.text)。,最后，引入我们对于Onload和faultHandler的处理，也很简单：,然后看一下效果,