Flex开发实例


土木水电学院 3S 实验室 肖泽云 第 1 页 共 137 页 Email:xwebsite@163.com Flex 开发实例 三峡大学土木水电学院 3S 实验室 肖泽云 目 录 第一篇 Flex 基础 ................................................................................................3 1、Flex 简介 .............................................................................................................3 2、MXML 与 ActionScript 简要说明.......................................................................3 3、ActionScript 使用方式.........................................................................................5 4、程序组件布局......................................................................................................6 5、Canvas 控件.........................................................................................................6 6、分割界面容器......................................................................................................6 7、Panel 组件 ...........................................................................................................7 8、弹出窗口 .............................................................................................................8 9、TitleWindow 组件................................................................................................9 11、ViewStack 组件................................................................................................10 12、表单 Form........................................................................................................11 13、基本组件 .........................................................................................................13 14、多页面(States) ............................................................................................16 15、ActionScript 基础知识.....................................................................................20 16、导入 ActionScript 类到 Flex............................................................................23 17、数据绑定 .........................................................................................................23 18、事件对象 .........................................................................................................25 19、DataGrid 控件..................................................................................................25 20、Tree 控件 .........................................................................................................38 21、AdvancedDataGrid 控件 ..................................................................................42 22、CSS..................................................................................................................47 23、数据验证 .........................................................................................................51 24、打印.................................................................................................................54 25、绘制饼图 .........................................................................................................54 26、绘制柱状图......................................................................................................60 27、简单动画效果..................................................................................................64 第二篇 Flex for GIS 开发...............................................................................75 1、新建项目 ...........................................................................................................75 2、使用地图 ...........................................................................................................76 3、地图使用范围设置............................................................................................77 4、添加工具栏 .......................................................................................................78 土木水电学院 3S 实验室 肖泽云 第 2 页 共 137 页 Email:xwebsite@163.com 5、绘制工具 ...........................................................................................................80 6、地图图层介绍....................................................................................................82 7、获取鼠标当前位置............................................................................................85 8、显示点击位置....................................................................................................88 第三篇 实例开发...............................................................................................91 1、用户注册界面....................................................................................................91 2、小型 Flex 网站...................................................................................................92 3、Flex 与 WebService 通信.................................................................................105 4、Flex 与 Ajax 交互............................................................................................111 参考文献: ...........................................................................................................132 附录:...................................................................................................................132 土木水电学院 3S 实验室 肖泽云 第 3 页 共 137 页 Email:xwebsite@163.com 第一篇 Flex 基础 需要注意的是,Flex Builder 中主要以 MXML 标记语言和 ActionScript 语言 来编写,要严格区分大小写。 1、Flex 简介 Flex 开发是基于 XML,所以,Flex 开发语法规则遵循 XML 的语法规则。 MXML 中是严格要求大小写的。一般 Flex 程序由以下三种文件组成:*.mxml 的程序文件;*.as 的 ActionScript 文件;*.css 的样式表文件。一个 MXML 文件 的最基本的代码就是: 之间添加程序代码,按 F11 运行程 序。 2、MXML 与 ActionScript 简要说明 一般 MXML 代码中添加注释,同 XML 中一样,格式为: ActionScript 代码中有两种添加注释的方式://注释(用于单行注释);/* 注释 */ (用于多行注释)。 注意:在 MXML 中严格区分大小写。 1)在MXML中都是标记语言,以<开始,以/>结束。在 MXML 中注释 采用。MXML中采用层层包裹的编程模式。 在 ActionScript 中注释采用//注释,或/*注释*/ 2)在MXML中插入 ActionScript,有固定的标记,如下: 若要导入对象,直接在程序体中添加 import com……。在 ActionScript 中, 每行都以分号结尾。在 ActionScript 中定义函数有 private、protected 和 public 类 型。 3)下拉列表控件 mx:ComboBox。如下: 北京 上海 武汉 广州 香港 土木水电学院 3S 实验室 肖泽云 第 4 页 共 137 页 Email:xwebsite@163.com 4)为添加下拉列表控件添加事件,如下: 北京 上海 武汉 广州 香港 土木水电学院 3S 实验室 肖泽云 第 5 页 共 137 页 Email:xwebsite@163.com 3、ActionScript 使用方式 在 MXML 中使用 ActionScript,有两种方式: 1)在组件的事件属性中使用 ActionScript 来处理事件,如下: 土木水电学院 3S 实验室 肖泽云 第 6 页 共 137 页 Email:xwebsite@163.com 2)在 MXML 文件中插入 ActionScript 块 MXML 为我们提供了专门的编写代码: 同时必须使用CDATA将代码包装起来,CDATA是XML中专门用于处理特殊 字符的专用标签。在中编写代码,而且CDATA不能嵌套使用。 4、程序组件布局 程序组件布局,在 Application 标签的相关属性中,有三个和布局息息相关, 分别是:layout、horizontalAlign 和 verticalAlign。其中 layout 起决定作用,它有 三个可选值:absolute、vertical、horizontal。当使用 absolute 时界面上的元素将 由各自的坐标来定,如设置属性 X、Y 值,如果为空,则默认都为 0。 5、Canvas 控件 Canvas 控件是常用的一种容器,放置在 Canvas 中的元素只能由 x 和 y 值来 指定它的位置。如果 Canvas 中的组件坐标超出了 Canvas 的尺寸,它会自动添加 滚动条。 HBox 是水平方向分布的容器,VBox 是垂直方向分布的容器。 6、分割界面容器 分割界面容器也有两种:HDividedBox 和 VDividedBox。如下代码: 土木水电学院 3S 实验室 肖泽云 第 7 页 共 137 页 Email:xwebsite@163.com 7、Panel 组件 Panel 组件具有 Canvas、HBox 和 VBox 组件的所有功能。只需要设置 Panel 的 layout 属性值。但是和前面的容器不一样的是,前面的主要用于布局,Panel 组件还具有窗体的性质,如标题等。如下代码: 土木水电学院 3S 实验室 肖泽云 第 8 页 共 137 页 Email:xwebsite@163.com 8、弹出窗口 使用 PopUpManager 弹出 Panel 面板,PopUp 被称为弹出窗口。PopUpManager 是专门用于处理弹出窗口的对象,addPopUp 函数可以将现有的对象置于父级对 象的顶层,同样对应的 removePopUp 9、TitleWindow 组件 TitleWindow 继承了 Panel 组件,就只是比 Panel 多了一个关闭按钮。 10、可折叠的导航器 可折叠的导航器 According,里面可以嵌套 Panel、Box 等。 土木水电学院 3S 实验室 肖泽云 第 10 页 共 137 页 Email:xwebsite@163.com 11、ViewStack 组件 ViewStack 组件是由若干重叠在一起的子容器组成,每次只显示一个容器, 主要用于界面的转换。如下面的例子: 土木水电学院 3S 实验室 肖泽云 第 11 页 共 137 页 Email:xwebsite@163.com 12、表单 Form 表单 Form,其相关的组件还有 FormItem 和 FormHeading。常见的表单元素 有输入文本、复选框、多选框、下拉选择框等等。如下面的例子: 土木水电学院 3S 实验室 肖泽云 第 12 页 共 137 页 Email:xwebsite@163.com 土木水电学院 3S 实验室 肖泽云 第 13 页 共 137 页 Email:xwebsite@163.com 其中 PhoneNumberValidator 是验证电话号码的,StringValidator 用于字符验 证,DateValidator 用于验证日期,EmailValidator 用于验证邮箱。 13、基本组件 Flex中包含很多基本组件,如 Label、Button、ComboBox、Image、Text、TextInput 等,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 14 页 共 137 页 Email:xwebsite@163.com 结合几种常用的组件设计如下图所示的界面: 土木水电学院 3S 实验室 肖泽云 第 15 页 共 137 页 Email:xwebsite@163.com 里面涉及 Label、Panel、Image、Button、TextInput 和 ComboBox 等,整个 程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 16 页 共 137 页 Email:xwebsite@163.com 其中,@Embed(source='images/2647103890.jpg')是使图片内置于程序中。 14、多页面(States) 前面介绍的很多程序都是在一个界面中完成的,包括 TabBar 等导航器虽说 实现了几个页面,但是并没有实现多状态。States 在 Flex 应用程序中非常重要, 如页面之间的相互转换等。下面介绍如何利用 States: 1)打开 States 面板,通过主菜单上的 Windows——States 打开,如下图所 示: 2)在 States 窗口上点击按钮 创建一个新的 State,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 17 页 共 137 页 Email:xwebsite@163.com 3)在创建新的 State 窗体中,输入新 State 的名称,如下图所示,并可以指 定其状态是否基于原始的 State,是否设置为起始 State,点击 OK 完成创建: 4)在 States 窗口中将会出现新创建的 State,如下图所示: 5)选中新的 State,现在可以对程序开始设计,如添加某些控件或代码,如 下图所示: 土木水电学院 3S 实验室 肖泽云 第 18 页 共 137 页 Email:xwebsite@163.com 6)设置“提交信息”按钮的 Click 事件为 currentState='State01',即设置状态 的转换。至此,整个程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 19 页 共 137 页 Email:xwebsite@163.com 运行程序,其结果如下图所示: 点击“提交信息”按钮后: 土木水电学院 3S 实验室 肖泽云 第 20 页 共 137 页 Email:xwebsite@163.com 15、ActionScript 基础知识 本节主要介绍运用到 ActionScript 中一些常用的关键词和技术 1)包 packages Packages 是一种在目录中用于组织类的方式。在 ActionScript 中,假定我的 包全部都放在 org\xzy\ myPackage\目录下, 其名称为 myClass,则 Packages 的定 义格式如下: package org.xzy. myPackage{ class myClass{ //类中的代码 } } 2)类和对象 此处类和对象的概念与其他语言如 C、VB、Java 等中的概念是一样的。现 在举一个例子来说明包、类以及对象之间的关系,假如说 Animal 是一个包,可 以认为 Dog 是一个类,而 Dog 中某一特定的就是对象,如下: package org.xzy. myAnimal { public class Dog function Dog() { trace(“Hello!”); } } 在使用 Dog 类时,就采用如下格式: 土木水电学院 3S 实验室 肖泽云 第 21 页 共 137 页 Email:xwebsite@163.com public var myDog:Dog=new Dog(); 3)方法 方法是进行实际操作的代码函数。它一般可以返回值,也可以不返回值。 它也可以要求带有参数,如一个计算两个数字相乘的函数。其格式如下: public function bark():void { //函数代码 } 其中 void 为不返回参数,同 C 语言中 void 的概念是一样的。当然()内可以 为引用参数。函数或方法一般都具有三种访问方式: private: 私有成员数据及函数; protected: 保护成员数据及函数; public: 如下: private function sum(num1:Number,num2: Number): Number { var newValue:Number=num1+num2; return newValue; } 其中说明一下,在 ActionScript 中定义变量时都用关键字 var,定义函数的关 键字为 function,Number 为数字类型数据,在变量 num1 后加“:Number”是指定 其数据类型为 Number。 4)变量和数组 定义变量时前面用关键字 var,需要指定变量的数据类型则在变量后加冒号 “:”然后指定数据类型,若需要在定义变量时就赋予值,可以直接在后面用等号 “=”来指定值。如下: var myFirstVariable : int = 5; var mySecondVarible : int = myFirstVariable:int; var myString : String = “Hello!”; 定义数组时用关键字 Array,而不是具体的数据类型。同样,在定义数据的 时候就可以设置数组中的数据。如下: public var myArray:Array=new Array{"Xiao","Ze","Yun"}; 其中,public 为访问类型,可以不设置;var 是变量定义的关键字,必须要 有;在{}内即初始化的数组数据,数据之间用逗号“,”隔开,该数组的类型为 String。若要调用数组中的某个数据,如调用第 3 个数据,则在数组名后用方括 号并在括号内指定数据 Index,如下: trace(myArray[2]); 同样还可以获取数组的长度,如:trace(myArray.length); 另外,两个数组之间可以直接用等号“=”来赋值。 5)接收外部数据 接 收或 导入外部数据的方式有很多,下面介绍一种常用的方式: HTTPService 土木水电学院 3S 实验室 肖泽云 第 22 页 共 137 页 Email:xwebsite@163.com 它在 MXML 中的引用方式如下: 其中,url 为设置数据的来源路径,在 此假定它为同一目录下的 myXML.xml; resultFormat 是设置数据结构的格式,一般有六种类型:array、e4x、flashvars、 object、text 和 xml。同时,要在 Application 中执行发送数据命令,在此以程序 的 creationComplete 事件为例,如下: 6)E4X ECMA(European Computer Manufacturers Association 欧洲计算机厂商协会) 为 XML 介绍了一种很方便的方式来操作和提取数据。如下是一个典型的例子: Xiaozeyun male xwebsite@163.com 保存该数据文件到 mxml 同一目录下,并命名为 CTGUXML.xml,如下图所 示: mxml 文件中的代码如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 23 页 共 137 页 Email:xwebsite@163.com 16、导入 ActionScript 类到 Flex 在Flex中可以通过在包的路径后添加如 xzy.*即可把所有该目录下所有的类 导入到 Flex 中去。但是这种方式也有很多缺点,如导入的类不明确,在编译的 时候为了寻找类速度降低等问题。一种很直接的方式就是利用关键字 import 来 导入外部的类,如下: import mx.rpc.events.ResultEvent; 17、数据绑定 一般的控件都有一个 dataProvidew 属性,它主要用于绑定数据到控件上。 如下: 土木水电学院 3S 实验室 肖泽云 第 24 页 共 137 页 Email:xwebsite@163.com 运行程序,其结果如下图所示: 还有一种情况,那就是当 MXML 中需要用到 ActionScript 中的数据( 变量) 时,一般采用“{变量名}”的形式,如下代码: 但 是运行程序时会出现警告“Data binding will not be able to detect assignments to "mytext".”而且程序无法实现预期的效果,为了解决问题,只需要 在需要被外部调用的变量前加关键字[Bindable]即可,至此整个程序代码如下: 允许程序,最终效果如下图所示: 18、事件对象 在 ActionScript 中当一个事件发生时,产生的这个对象就叫做事件对象 (event object)。这个对象包含两个重要的部分:目标 target 和类型 type。 target 属性几乎包含了产生事件主体的所有信息,如 id、x 位置、y 位置等。 type 属性返回产生事件的类型,如点击等。如下代码: 19、DataGrid 控件 DataGrid 控件主要用于显示数据表格。如下图所示: 土木水电学院 3S 实验室 肖泽云 第 26 页 共 137 页 Email:xwebsite@163.com 1)与 XML 结合 首先,新建一个 XML 文件(任意一个文本文档即可,只须将后缀名改为 xml 即可)。该文件名为 ChinaProvice.xml,且其中数据如下: 湖北省 武汉 宜昌 湖南省 长沙 湘潭 广东省 广州 深圳 浙江省 杭州 宁波 河南省 郑州 南阳 河北省 石家庄 承德 土木水电学院 3S 实验室 肖泽云 第 27 页 共 137 页 Email:xwebsite@163.com 山东省 济南 青岛 新建一个 MXML 文件,采用 HttpService 连接 XML 数据,其代码如下: 运行程序,其结果如下图所示: 2)修改数据列 先 将 “”改为如下: 然后在 DataGrid 标记间添加 columns,通过 columns 属性容器我们可以对 DataGrid 中列数据进行控制管理。如下: 在 columns 标记间添加 DataGridColumn,DataGridColumn 用于完成控制列 的格式、标题和内容等。一旦用这个标记定义了所有列中的一个列,就必须用分 开的标记对每个列进行定义。其中第一个属性就是 dataField,它链接要显示的数 据列。如要显示 name,如下: headerText 用于显示列的标题,如下: 土木水电学院 3S 实验室 肖泽云 第 28 页 共 137 页 Email:xwebsite@163.com 整个程序代码如下: 运行程序,其结果如下图所示: 按同样的方式添加其他几列,整个代码如下: 土木水电学院 3S 实验室 肖泽云 第 29 页 共 137 页 Email:xwebsite@163.com 运行程序,其结果如下图所示: 3)数据格式类 ActionScript 提供了 5 种类文件用于数据格式,分别是:CurrencyFormatter、 DateFormatter、NumberFormatter、PhoneFormatter 和 ZipCodeFormatter。 在此我们采用一个新的 xml 文件 StudentsInfo.xml,其数据如下: 张三 1985-01-05 zhangshan@example.com 李四 1985-07-05 lisi@example.com 王五 1984-11-09 wangwu@example.com 赵六 1984-12-11 zhaoliu@example.com DateFormatter 类有一个叫 formatString 的属性,用于设置时间的格式。在 MXML 中添加如下标记: 土木水电学院 3S 实验室 肖泽云 第 30 页 共 137 页 Email:xwebsite@163.com 此时需要告诉 DataGrid 控件 birthday 列要用这个日期格式,但是不能直接 运用,而要通过一个函数来实现。先创建一个 Script 块,并定义一个名称为 dateFormat 的函数,其代码如下: dateColumn.dataField 是获取列的字段,数据从 DataGrid 到 DateFormatter 是通过 dateItem,DateFormatter 通过它的格式化函数返回它的格式化数据到 dateColumn 中去。添加如下代码,用于 return birthdayDate.format(dateItem[dateColumn.dataField]); 在 birthday 字段的 DataGridColumn 中添加 labelFunction,如下: 至此,整个程序代码如下: 运行程序,其结果如下图所示: 如果将 formatString 改为"MM-DD,YYYY",则显示日期格式为例如“03-15, 1987”。 4)修改数据 修改表格中的数据必须使用 DataGrid 中的 editable 属性,如下: 如果在 DataGrid 中的 editable 属性为 true,而不再在下面的 DataGridColumn 中设置 editable 属性,那整个 DataGrid 中的数据都可以修改,若需要某些数据不 能修改,则只需在 DataGridColumn 中设置 editable 属性为 false 即可。如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 32 页 共 137 页 Email:xwebsite@163.com 5)添加一列新的数据 在 DataGrid 中添加一列新的数据之需要在 DataGrid 标记内添加一个 DataGridColumn 标记即可,如下: 运行程序,其结果如下图所示: 定 义列的输入为文本输入控件类型,只需要设置其 itemEditor 为 土木水电学院 3S 实验室 肖泽云 第 33 页 共 137 页 Email:xwebsite@163.com "mx.controls.TextArea",如下: 6)导入列的组建 前面的 mx.controls.TextArea 为一个文本输入组建,设置列的 itemEditor 可 以为一个组建,也可以为多个组建。 首先,新建一个 MXML Component 组件,如下图所示: 设置新建组件的名称为 NewComponent,并基于 Canvas,设置如下图所示: 土木水电学院 3S 实验室 肖泽云 第 34 页 共 137 页 Email:xwebsite@163.com 设计其界面如下图所示: 其代码为: 土木水电学院 3S 实验室 肖泽云 第 35 页 共 137 页 Email:xwebsite@163.com 保存 NewComponent.mxml 文件,返回到原程序中。原来的 itemEditor 只设 置其控件属性,并不能表示其真实属性,如控件的大小等,所以要将 itemEditor 改成 itemRenderer。现在要将新增的一列设置成前面新建的 NewComponent,只 需要将 mx.controls.TextArea 改为 NewComponent 即可,并设置 editable="false"。 运行程序,其结果如下图所示: 至此,整个程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 36 页 共 137 页 Email:xwebsite@163.com 7)显示选中的信息(图片) 首先,创建一个 DataGridImages.xml 文件,其内容如下: 向上 张三 Images/up.gif 向下 李四 Images/down.gif 向左 张三 Images/left.gif 向右 张三 Images/right.gif 然后将四个图片文件 up.gif 、down.gif 、left.gif 和 right.gif 保存至项目下 的 Images 文件夹内。新建一个 MXML 文件,添加 DataGrid 以及数据链接,如 下: 然后添加两个 Label、一个 Image,分别用于显示图片名称(name)、作者名 称(authorname)和图片(通过 XML 文件中的 filepath),如下: 为 DataGrid 添加选择项目的事件,这需要定义 Script,如下: 在 DataGrid 中添加事件 change="ChangeImage(event)"。至此,整个程序代 码如下: 运行程序,其结果如下图所示: 20、Tree 控件 Tree 控件用 mx:Tree,其中 dataProvider 属性用于提供数据来源。前面例子 中的数据都来源于 XML 文件,在本例中以在 Script 建立数据为例。 1)在 Script 中定义数据 首先添加 Script 标记,并添加如下代码: 土木水电学院 3S 实验室 肖泽云 第 39 页 共 137 页 Email:xwebsite@163.com ]]> 2)添加 Tree 控件 Tree 控件用 mx:Tree,代码如下: 运行程序,其结果下图所示: Tree 控件中显示的并不是一个树杈型,而是 XML 格式,我们要求显示的是 name 属性,所以要在 Tree 的 labelField 属性中指定位"@name",如下: 运行程序,其结果下图所示: 土木水电学院 3S 实验室 肖泽云 第 40 页 共 137 页 Email:xwebsite@163.com 3)选中事件 Tree 控件选中事件由事件的 target.selectedItem 获取到 Item。首先定义一个 变量 selectedData 用于获取到选中的 XML 数据,如下: [Bindable] private var selectedData:XML; 定义一个函数用于获取对象: private function SelectedChange(evt:Event):void { selectedData=evt.target.selectedItem; } 添加一个 Label 标签用于显示选中的对象,如下: 至此,整个程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 41 页 共 137 页 Email:xwebsite@163.com private function SelectedChange(evt:Event):void { selectedData=evt.target.selectedItem; } ]]> 运行程序,其结果下图所示: 土木水电学院 3S 实验室 肖泽云 第 42 页 共 137 页 Email:xwebsite@163.com 此外,还可以通过selectedData.parent来获得选择的Item的上一级Item,如选中的 是“宜昌”,那么通过selectedData.parent获得的就是“湖北省”。 21、AdvancedDataGrid 控件 首先采用下面的 books.xml 文件: The Picasso Code Dan Blue Fiction Cubist paintings reveal a secret society of people who really look like that Here With the Wind Margaret Middle Fiction In this edition, nobody in the south really gives a damn Harry Potluck and the Chamber of Money J.K. Roughly Fiction Young wizard finds the real pot-of-gold and retires No Expectations Chuck Dickens 土木水电学院 3S 实验室 肖泽云 第 43 页 共 137 页 Email:xwebsite@163.com Fiction Dickens finally reveals what he really thinks of people Atlas Stretched Ann Rind Fiction Great inventors finally just take the money and run Recycling Software Big Gates Nonfiction How to just change the name and interface of the same old software and sell it as new Make Tons of Money Donald Rump Nonfiction Rump explains how he became a billionaire while constantly declaring bankruptcy How to Win Enemies and Lose Friends Dale Crochety Nonfiction The Ultimate how-to book for people who want to stay loners My Lies Swill Clinton Nonfiction This former American president tries to define what a lie is The Complete History of the World David McClutz Nonfiction McClutz gives you the entire history of all civilization is less than 300 pages 土木水电学院 3S 实验室 肖泽云 第 44 页 共 137 页 Email:xwebsite@163.com 1)创建 AdvancedDataGrid 控件。 创建 AdvancedDataGrid 控件主要用 mx:AdvancedDataGrid,并连接到前面的 XML 文件,如下: 运行程序,其显示结果如下: 2)另一种数据链接方式 除了上面的直接在 AdvancedDataGrid 中设置 dataProvider 属性来获得数据, 还可以通过 AdvancedDataGrid 标记内添加 dataProvider 标记,通过 GroupingCollection 标记的 source 属性来获得数据。如下: 其中,一定要有 myGroup.refresh(),如果不刷新将无法显示数据。 运行程序,其显示结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 46 页 共 137 页 Email:xwebsite@163.com 3)分组 通过 GroupingCollection 内的 Grouping 标记可以对链接的 XML 数据进行分 组,如对 category 分组,如下: 运行程序,其显示结果如下图所示: 至此,整个程序代码如下: 22、CSS CSS(CASCADING STYLE SHEET)即层叠式样式表,主要用于格式属性 设置,如设置按钮的颜色、字体等,文本的大小等等。一个 CSS 文件可以包含 很多控件的样式。它主要通过标记来识别控件类型,通过属性设置值。 1)认识 CSS 一个 CSS 中包含内容有控件类型,如 Label、Button、DataGrid 等,然后在 控件类型标记内设置其属性,如 color、fontSize 等,如下: Label{ fontSize:18; fontWeight:bold; } Button{ fontSize:26; 土木水电学院 3S 实验室 肖泽云 第 48 页 共 137 页 Email:xwebsite@163.com color:#57D1EB; } 但是一定要注意大小写。使用CSS文件有两种方式:一种就是直接在 MXML 程序中添加标记;第二种就是通过创建一个 CSS 文件来实现。 2)程序内添加 CSS 内容 在 MXML 程序中添加标记,然后设置各个控件的样式属性,如 下: Label{ fontSize:18; fontWeight:bold; } Button{ fontSize:26; color:#57D1EB; } 运行程序,其显示结果如下图所示: 如果对控件的样式属性不清楚,可以通过在控件内先添加某个属性,如设 置按钮的字体颜色为红色,在编辑窗体下更改 Button 的字体颜色为红色,如下: 土木水电学院 3S 实验室 肖泽云 第 49 页 共 137 页 Email:xwebsite@163.com 在程序窗体下对应的代码为: color 为 Button 对应的控件的颜色属性名称,#FD0000 为红色。在 mx:Style 内设置 Button 的 color: #FD0000,同时删除 mx:Button 内的 color 属性。运行程 序,其显示结果如下图所示: 至此,程序代码为: 土木水电学院 3S 实验室 肖泽云 第 50 页 共 137 页 Email:xwebsite@163.com Label{ fontSize:18; fontWeight:bold; } Button{ fontSize:26; color:#FD0000; } 3)创建一个 CSS 文件 通过菜单栏“File—New—CSS File”来创建一个 CSS 文件,如下图所示: MXML 文件中代码为: 运行程序,其显示结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 51 页 共 137 页 Email:xwebsite@163.com 由于此时没有使用任何样式,所以都为默认的样式。在新建的 myStyle.css 文件中添加如下样式代码并保存: /* myStyle.css CSS file */ Label{ fontSize:18; fontWeight:bold; } Button{ fontSize:26; color:#FD0000; } 然后再在 MXML 程序代码中添加 mx:Style 标记,如下: 运行程序,其显示结果如下图所示: 23、数据验证 数据验证主要用于验证用户输入的数据是否有效。 1)数字验证 数字数据验证主要通过 mx:NumberValidator 来实现。首先新建一个 MXML 文件,并添加数据输入控件,如下所示: 土木水电学院 3S 实验室 肖泽云 第 52 页 共 137 页 Email:xwebsite@163.com 添加数字验证 mx:NumberValidator,设置其 source 属性为需要验证的值, 设置 property 为提示类型,invalidCharError 用于提示出错信息,如下: 运行程序,其显示结果如下图所示: 2)字符验证 字符验证主要用 mx:StringValidator 来验证,它可以通过属性 minLength 和 maxLength 可以设置字符的最小长度和最大长度,通过属性 required 可以指定该 项是否为必要项,通 过 属性 requiredFieldError 可以设置错误时信息。如下面的例 子代码: 土木水电学院 3S 实验室 肖泽云 第 53 页 共 137 页 Email:xwebsite@163.com 运行程序,其显示结果如下图所示: 除了上面的介绍两种数据验证,还有用于验证 Email 地 址 的 土木水电学院 3S 实验室 肖泽云 第 54 页 共 137 页 Email:xwebsite@163.com mx:EmailValidator,验证日期的 mx:DateValidator,验证电话号码(11 位)的 mx:PhoneNumberValidator。 24、打印 打印主要通过mx.printing.FlexPrintJob 来实现,通 过 start属性开始启动打印, 通过 addObject 属性添加打印的范围,通过 send 属性发送打印事件。如下: 其中设置打印的范围为 myPanel。 25、绘制饼图 绘制饼图主要通过 mx:PieChart 控件来实现。 1)定义数据 首先新建一个 MXML 文件,定义绘图的数据( 也可以从外部数据中导入), 如下: 然后添加一个 mx:PieChart 控件,并设置其 dataProvider 为前面定义的数据, 如下: 2)指定数据字段 虽然指定了数据,但是还没有指定具体的数据值,所以需要在 mx:PieChart 标签内添加 mx:series 标签,并添加饼状图的序列 mx:PieSeries,设置 field 属性 为 number,如下: 运行程序,其显示结果如下图所示: 3)显示数据标签 通过设置 mx:PieSeries 内的属性 labelPosition 可以将标签标于饼状图内,如 下: 运行程序,其显示结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 56 页 共 137 页 Email:xwebsite@163.com 上面只是显示了数字,如果要显示其对应的其他 Label,如数据的 comeFrom 值,则就需要设置 labelFunction 属性,如下: 在 Script 中定义函数如下: private function chartLabel(DataItem:Object,field:String,index:int,dataPercent:Number):String { return DataItem.comeFrom; } 其中定义函数 chartLabel 的格式主要根据 mx:PieSeries 的 labelFunction 属性 来定。 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 57 页 共 137 页 Email:xwebsite@163.com 还可以显示其他的信息,只需要修改一下函数 chartLabel(),如显示百分 比等,如下: return DataItem.comeFrom+"籍\n占所有学生数目的 \n"+dataPercent+"%"; 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 58 页 共 137 页 Email:xwebsite@163.com 此外,还可以设置数字四舍五入,如下: var num:Number=Math.round(dataPercent); return DataItem.comeFrom+"籍\n 占所有学生数目的\n"+num+"%"; 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 59 页 共 137 页 Email:xwebsite@163.com 还可以设置标签显示的形式为引出式,只需要在 mx:PieSeries 内设置属性 labelPosition 为 callout,如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 60 页 共 137 页 Email:xwebsite@163.com 26、绘制柱状图 绘制柱状图主要通过 mx:ColumnChart 来实现。 1)创建柱状图 本例中仍然使用前面例子中的数据,代码如下: 土木水电学院 3S 实验室 肖泽云 第 61 页 共 137 页 Email:xwebsite@163.com 其中 mx:horizontalAxis 为水平轴,mx:CategoryAxis 为指定分类。运行程序, 其结果如下图所示: 2)设置柱状图数据 设置柱状图的数据主要通过在 series 标记中添加 ColumnSeries 标记,设置 其 xField 和 yField,如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 62 页 共 137 页 Email:xwebsite@163.com 3)显示提示 在柱状图中显示提示主要通过在 mx:ColumnChart 标记内设置 showDataTips 属性为 true,如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 63 页 共 137 页 Email:xwebsite@163.com 4)添加图例 添加图例主要通过 mx:Legend 来设置,如下: 其中 myChart 为 ColumnChart 的 id。运行程序,除了只显示颜色并没有其 他显示。为了使对应值的标签也相应显示,需要在 ColumnSeries 标记内设置其 displayName,如下: 运行程序,其结果如下图所示: 至此,整个程序代码如下: 27、简单动画效果 一般简单的动画效果都在 mx.effects 类中,主要有 Blur、Dissolve、Fade、 Glow、Iris、Move、Parallel、Rotate、Sequence、SoundEffect、WipeDown、WipeLeft、 WipeRight、WipeUp、Zoom 等。使用简单动画效果的方式很简单,只需要先添 加一个动画效果并设置其参数,然后在控件相应的事件效果中调用这个动画效果 即可。下面就几种常用的动画效果分别介绍: 1)模糊 Blur Blur 标记的必要设置如下: 其中 blurXFrom 和 blurYFrom 分别是模糊开始时的 X、Y 值,blurXTo 和 blurYTo 分别是模糊结束时的 X、Y 值。如下面的例子: 运行程序,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 65 页 共 137 页 Email:xwebsite@163.com 将程序改进一下,该为如下: 其中通过 duration 可以设置效果持续的时间(单位为秒)。 2)溶解 Dissolve Dissolve 标记的必要设置如下: 其中 alphaFrom 是溶解开始时的透明度,alphaTo 是溶解结束时的透明度, color 为溶解颜色。如下例子: 3)褪色 Fade Fade 标记的必要设置如下: 其效果和 Dissolve 差不多,在此就不举例说明了。 土木水电学院 3S 实验室 肖泽云 第 66 页 共 137 页 Email:xwebsite@163.com 4)发光 Glow Glow 标记的必要设置如下: 如下例子: 运行程序,如下图所示: 5)Iris Iris 标记的必要设置如下: 如下例子: 土木水电学院 3S 实验室 肖泽云 第 67 页 共 137 页 Email:xwebsite@163.com 运行程序,如下图所示: 6)移动Move Move 标记的必要设置如下: 其中可以通过设置 xFrom、yFrom、xTo 和 yTo 来指定对象移动的起始位置 和结束位置,也可以直接设置 xBy 和 yBy来指定对象移动的相对位置。 如下例子: 运行程序,如下图所示: 7)Parallel Parallel 主要用于将几个动画效果进行整合同时显示,其标记的必要设置如 土木水电学院 3S 实验室 肖泽云 第 68 页 共 137 页 Email:xwebsite@163.com 下: 如下例子: 运行程序,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 69 页 共 137 页 Email:xwebsite@163.com 8)旋转 Rotate Rotate 标记的必要设置如下: 土木水电学院 3S 实验室 肖泽云 第 70 页 共 137 页 Email:xwebsite@163.com 其中,angleFrom 为开始旋转的角度,angleTo 为旋转后的角度,originX 和 originY 为旋转原点的位置。如下例子: 运行程序,如下图所示: 9)顺序 Sequence 土木水电学院 3S 实验室 肖泽云 第 71 页 共 137 页 Email:xwebsite@163.com Sequence 用于几个动画效果按顺序来显示,其标记的必要设置如下: 如下面的例子: 其中,在第一个 mx:Move 中设置移动的放开方式 easingFunction 为 Bounce.easeOut。Bounce.easeOut 需要引用 mx.effects.easing.*库。运行程序,如 下图所示: 10)声音 SoundEffect SoundEffect 标记的必要设置如下: 土木水电学院 3S 实验室 肖泽云 第 72 页 共 137 页 Email:xwebsite@163.com 其中,useDuration 表示是否根据 Duration 值来设定音乐的播放时间,如果 选择 false 则其播放时间为声音文件的长度,若为 true 则声音的播放时间根据 Duration 值来指定。 如下例子: 11)滚动动画 滚动动画主要有 WipeDown、WipeLeft、WipeRight、WipeUp。其定义格式 类似,下面以 WipeDown 为例: 运行程序,如下图所示: 除了可以滚动 Image 控件外,还可以滚动 Panel,如下例所示: 土木水电学院 3S 实验室 肖泽云 第 73 页 共 137 页 Email:xwebsite@163.com 运行程序,如下图所示: 12)缩放 Zoom Zoom 标记的必要设置如下: 其中,zoomWidthFrom和zoomHeightFrom为缩放开始时的宽度和高度比例, zoomWidthTo 和 zoomHeightTo 为缩放后的宽度和高度的比例。 如下例子: 土木水电学院 3S 实验室 肖泽云 第 74 页 共 137 页 Email:xwebsite@163.com 运行程序,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 75 页 共 137 页 Email:xwebsite@163.com 第二篇 Flex for GIS 开发 1、新建项目 1)启动 Flex Builder,新建一个项目。 2)打开项目的属性窗体,如下图所示: 3)在 Flex Build Path 的 Library Path 下点击 Add SWC 按钮,添加 arcgis_api_for_flex_1_0 的 swc 文件,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 76 页 共 137 页 Email:xwebsite@163.com 2、使用地图 1)首先,在标记内部添加一个页面标题(并不重要)。 2)然后在 Application 内部插入地图,用如下代码: 地图以结束。 3)从 ArcGIS Online 为地图添加一个层。 在 ags flex api 中有以下几种类型的 layer: ArcGISDynamicMapServiceLayer ArcGISImageServiceLayer ArcGISMapServiceLayer ArcGISTiledMapServiceLayer ArcIMSMapServiceLayer GPResultImageLayer GraphicsLayer 其中 GraphicsLayer 是支持客户端添加 Graphic features 的图层,需 要 在 客 户 端 表 现 的,或者交互操作中产生的要素都要加到这个 layer 上。 例如下列代码: url 后是发布地图的服务地址。 4)设置地图范围。如下: 所有的程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 77 页 共 137 页 Email:xwebsite@163.com 3、地图使用范围设置 设置范围主要通过 esri:Extent 来实现,但是它一定要包含在 esri:Map 内。 1)设置使用范围 用 extent 属性来设置地图的使用范围,其步骤:1)添加地图;2)插入 标记并指定 ID 和 坐 标 系 统 ; 3 )添加 标记。 代码类似如下: 其中是定义一个坐标系统。 对应于坐标系统的 ID 可以参考附录一。 另外一种方式就是将 Extent 类置于 Map 中,如下: 2)使用多种地图时设置范围 很多时候需要用到一个图层的范围,而这个图层又不是内部的图层或基础 地图的。为了达到这一目标,需要设置地图范围为期望图层的范围。 下 面 的代码中使用了两个层:the base layer—ArcGIS Online world extent—and a second layer—the state of Kansas 为了设 Kansas 范围为地图范围,添加如下一个属性来设置地图的范围。 load="{myMap.extent=myKansasLayer.fullExtent}" 土木水电学院 3S 实验室 肖泽云 第 78 页 共 137 页 Email:xwebsite@163.com 代码如下: 如果需要使用原始范围,使用 myKansasLayer.initialExtent 属性。 3)获取当前地图的范围 获取当前地图的范围用 extent 属性。如点击按钮得到地图的高度: 4)监听地图范围 地图可以使用一个 ExtentEvent 事件来监听用户移动或缩放地图。你可以用 MXML 或 ActionScript 来建立一个监听器。例子代码如下: MXML example: ActionScript example: myMap.addEventListener(ExtentEvent.EXTENT_CHANGE, extentChangeHandler); 4、添加工具栏 地图浏览包括放大,缩小,漫游,复位,上级窗口,下级窗口等在 arcgis api for flex 中,esri 已经封装好了一个地图浏览。 1)首先添加一个浏览工具 esri:Navigation,并设置其 map 为添加的 map 对 象,如下: 2)放大地图主要通过 esri:Navigation 的 activate(Navigation.ZOOM_IN)来获 得,如下: 3)缩小地图主要通过 esri:Navigation 的 activate(Navigation.ZOOM_OUT)来 获得,如下: 土木水电学院 3S 实验室 肖泽云 第 79 页 共 137 页 Email:xwebsite@163.com 4)平移地图主要通过 esri:Navigation 的 activate(Navigation.PAN)来获得, 如下: 5)前一窗口主要通过 navToolbar.zoomToPrevExtent()来获得,如下: 如果是第一个范围,则不可用。 6)后一窗口主要通过 navToolbar.zoomToNextExtent ()来获得,如下: 如果是最后一个范围则不可用。 7)全图主要通过 navToolbar.zoomToFullExtent()来获得,如下: 8)至此,整个程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 80 页 共 137 页 Email:xwebsite@163.com 运行程序,其结果如下图所示: 5、绘制工具 绘制点、线、面等都是在 esri:Draw 中进行。 1)定义一个 esri:Draw,并设置它的 map 对象为 mymap,图像所在图层位 置为 myGraphicsLayer,如下: 2)在 esri:Map 中定义一个用于保存图形的图层 esri:GraphicsLayer,如下: 3)绘制点使用 drawToolbar.activate(Draw.MAPPOINT),如下: 4)绘制线使用 drawToolbar.activate(Draw.POLYLINE),如下: 5)绘制流线使用 drawToolbar.activate(Draw.FREEHAND_POLYLINE),如 下: 6)绘制矩形使用 drawToolbar.activate(Draw.EXTENT),如下: 7)绘制多边形使用 drawToolbar.activate(Draw.POLYGON),如下: 土木水电学院 3S 实验室 肖泽云 第 81 页 共 137 页 Email:xwebsite@163.com 8)绘制流多边形使用 drawToolbar.activate(Draw.FREEHAND_POLYGON), 如下: 9)结束绘制使用 drawToolbar.deactivate(),如下: 10)至此,整个程序代码如下: 运行程序,其结果如下图所示: 6、地图图层介绍 地图图层对象都在 com.esri.ags.layers 包内,常用的地图图层主要有: ArcGISDynamicMapServiceLayer:由 ArcGIS Server REST AP 发布的常用的 动态地图资源图层 土木水电学院 3S 实验室 肖泽云 第 83 页 共 137 页 Email:xwebsite@163.com ArcGISImageServiceLayer:由 ArcGIS Server REST AP 发布的图像资源图层 ArcGISTiledMapServiceLayer:由 ArcGIS Server REST AP 发布的缓冲地图 资源图层 ArcIMSMapServiceLayer:可以使用 ArcIMS 发布的图片服务 其 中,ArcGISDynamicMapServiceLayer 是最常用的图层; ArcGISImageServiceLayer 主 要 是 遥感地图、卫星图片等; ArcGISTiledMapServiceLayer 主要用于缓冲的图层,如鼠标现在的位置等等。下 面就这三种类型的图层分别举例说明: 1) ArcGISDynamicMapServiceLayer 图层 其中,url后面的是MapServer的地址。一般使用ArcGIS Server发布MapServer 的URL格式都是:“http://{服务器名或网址}/arcgis/services/地图名称/MapServer”, 但是在Flex中使用时需要在arcgis和services之间添加一个“/rest”,即地址为: “http://{服务器名或网址}/arcgis/rest/services/地图名称/MapServer”,如本例中的 就是http://192.168.134.243/arcgis/rest/services/main/MapServer,在 URL中大小写不 敏感。 运行程序,其结果显示如下: 土木水电学院 3S 实验室 肖泽云 第 84 页 共 137 页 Email:xwebsite@163.com 2)ArcGISImageServiceLayer 图层 运行程序,其结果显示如下: 同样,也可以在地图上再添加一个 Image,如下代码: 其中,将要放置在上面的图层在 MXML 编程中放在下面,如上面代码中 YichangRaster 就在 CTGURaster 前面,在显示中 YichangRaster 就在 CTGURaster 图层的下面。运行程序,其结果如下图所示: 3)ArcGISTiledMapServiceLayer 图层 ArcGISTiledMapServiceLayer 像其他图层一样,是扩展的 UIComponent,因 此它包含一些基本的鼠标事件,如 click, mouseOut, mouseOver, mouseDown, 7、获取鼠标当前位置 获取鼠标当前位置主要通过在 Map 里面的鼠标移动事件来获得。具体是通 过 Map.toMapFromStage 从鼠标当前状态位置转换到 Map 地图坐标。 1)首先添加一个 esri:Map,并设置范围(必须),添加图层,如下: 土木水电学院 3S 实验室 肖泽云 第 86 页 共 137 页 Email:xwebsite@163.com 2)添加 Script 代码,主要获取 Map 的地图坐标,代码如下: 其中,event.stageX 和 event.stageY 分别为当前鼠标在控件中的位置,左上 角位置为(0,0)。 3)在 esri:Map 中调用 onMouseMove 函数,如下: 4)显示当前坐标值,如下: 其中,mapCoordY.toFixed(4)是将坐标设定为 4 位小数位。 至此,整个程序代码如下: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 88 页 共 137 页 Email:xwebsite@163.com 8、显示点击位置 在地图上点击,并显示该位置及信息窗体主要通过Map.infoWindow来实现。 1)新建一个 MXML 文件,添加一个 Map 并添加图层,如下: 2)添加 Script 代码,设置点击事件,如下: 3)在 Map 中调用鼠标点击事件,代码如下: 运行程序,其效果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 89 页 共 137 页 Email:xwebsite@163.com 4)此外,还可以添加点击处的坐标到 infoWindow 上面,如下: myMap.infoWindow.label = "点击了这里! \nX:"+event.mapPoint.x+"\nY:"+event.mapPoint.y; 运行程序,其效果如下图所示: 至此,整个程序代码如下: 土木水电学院 3S 实验室 肖泽云 第 90 页 共 137 页 Email:xwebsite@163.com 土木水电学院 3S 实验室 肖泽云 第 91 页 共 137 页 Email:xwebsite@163.com 第三篇 实例开发 1、用户注册界面 本例中主要用到表单 Form 以及数据的验证。 代码: 最后的 mx:StringValidator 是用来验证用户输入名称的,如果太短将会提示" 用户名太短了!"。errorString="在这里输入您的用户名!"是在用户输入时给与 用户的提示信息。通 过 mx:EmailValidator 验证 Email 地址,通 过 mx:DateValidator 验证日期,通过 mx:PhoneNumberValidator 验证电话号码(11 位)。 土木水电学院 3S 实验室 肖泽云 第 92 页 共 137 页 Email:xwebsite@163.com 2、小型 Flex 网站 1)新建一个 Flex 项目,设置其名称为 Website,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 93 页 共 137 页 Email:xwebsite@163.com 2)添加 ctgu.png 文件到项目的 src\assets 文件夹下,Website.mxml 文件的代 码如下图所示: 运行程序,其结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 94 页 共 137 页 Email:xwebsite@163.com 3)新建一个文件夹,其名称为 Components,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 95 页 共 137 页 Email:xwebsite@163.com 4)在 Components 文件夹内新建一个 component,其名称为 Home,如下图 所示: 土木水电学院 3S 实验室 肖泽云 第 96 页 共 137 页 Email:xwebsite@163.com 5)复制 xzy.png 文件至项目的 src\assets 文件夹下,Home.mxml 文件的内容 如下: 土木水电学院 3S 实验室 肖泽云 第 97 页 共 137 页 Email:xwebsite@163.com 其界面如下图所示: 6)定义一个名称空间用于调用前面定义的组件 component,如下图所示: 7)在 mx:Image 标记后添加定义的组件,如下: 其界面如下图所示: 土木水电学院 3S 实验室 肖泽云 第 98 页 共 137 页 Email:xwebsite@163.com 8)在 Components 文件夹内新建一个 component 用于留言,其名称为 Message_board,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 99 页 共 137 页 Email:xwebsite@163.com Message_board.mxml 文件的内容如下: 其界面如下图所示: 土木水电学院 3S 实验室 肖泽云 第 101 页 共 137 页 Email:xwebsite@163.com 9)在 Components 文件夹内新建一个 component 用于链接一些网站,其名 称为 WebsiteLink,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 102 页 共 137 页 Email:xwebsite@163.com 10)添加文件 down.png 到项目的 src\assets 文件夹下,WebsiteLink.mxml 文件的内容如下: 其界面如下: 11)利用 mx:ViewStack 将各个组件连接起来,然后通过 mx:LinkBar 链接到 mx:ViewStack,这样点击 mx:LinkBar 上的按钮就可以直接连接到界面。 Website.mxml 文件中的内容如下: 运行程序,其结果如下图所示: 同时,还可以为这些界面直接的转换添加动画,如把 Website.mxml 文件中 的内容改为如下: 在页面之间转换时会以上下滚动的形式出现。 3、Flex 与 WebService 通信 首先介绍几个常用的 WebService 地址: 2400 多个城市 5 日天气预报 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 国内手机号码归属地查询 WEB 服务 http://www.webxml.com.cn/WebServices/MobileCodeWS.asmx 国内飞机航班时刻表 WEB 服务 http://www.webxml.com.cn/webservices/DomesticAirline.asmx 股票行情数据 WEB 服务(支持香港、深圳、上海基金、债券和股票;支持多股票同 时查询) http://www.webxml.com.cn/WebServices/StockInfoWS.asmx 腾讯 QQ 在线状态 http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx Email 电子邮件地址验证 http://www.webxml.com.cn/WebServices/ValidateEmailWebService.asmx 中国电视节目预告(电视节目表) http://www.webxml.com.cn/webservices/ChinaTVprogramWebService.asmx 火车时刻表 http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx 中文 <-> 英文双向翻译 http://www.webxml.com.cn/WebServices/TranslatorWebService.asmx 中国邮政编码 http://www.webxml.com.cn/WebServices/ChinaZipSearchWebService.asmx IP 地址来源搜索 http://www.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx 天气预报 Web 服务,数据来源于中国气象局( 预 报 数据每 0.5 小时左右自动更新一次) http://www.webxml.com.cn/WebServices/WeatherWebService.asmx Flex 可以通过 WebService 组件来获取数据。下面开始以一个使用 WebService 调取 天气预报信息的例子来说明 Flex 与 WebService 之间的通信。 天气预报的 WebService 网址为: http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 土木水电学院 3S 实验室 肖泽云 第 106 页 共 137 页 Email:xwebsite@163.com 1)在 MXML 中添加 WebService 标签,如下: 其中,wsdl 为 WebService 网址,showBusyCursor 表示是否显示忙碌光标,result 用于用于调用返回的信息,fault 表示出现错误时返回的信息。 2)添加常用组件,如文本输入框用于输入城市名称,按钮用于查询事件,文本区域用于 显示返回的信息,如下: 3)为 WebService 定义 onLoad()函数及 faultHandler()函数。 当 WebService 获得数据后要设置其返回结果到文本区域控件 myWeatherReport 中, 如下: 4)在按钮中启动 WebService 事件。 一般来说,发布的 WebService 中包含有很多对象、函数,可以通过城市的名称来查 询天气、也可以通过代码来查询,还可以通过其他方式来查询等等(至于具体有哪些方式主 要根据发布服务者的设计而定)。发布的 WebService 中具体包括哪些方法,可以通过将 WebService 网 址 后 删除?wsdl 然后再打开,如天气预报的 WebService 网 址 为 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl , 要获取该 WebService 中发布所有的方法,只需要输入 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 即可,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 107 页 共 137 页 Email:xwebsite@163.com 通过浏览该地址就可以获取发布的方法,其中有一个方法为 getWeatherbyCityName, 点击该方法,其输入参数只有一个,即城市的名称。所有在按钮的 click 事件中调用 “webService.getWeatherbyCityName(cityname.text)”,其中 getWeatherbyCityName 为 WebService 服务中发布的函数名,cityname.text 为输入的城市名称。具体如下: 运行程序,其显示结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 108 页 共 137 页 Email:xwebsite@163.com 5)从上面的查询天气返回的信息可以看到,虽说查询到了相关的信息,但是该信息 比较混乱。如何整理这些数据?首先必须获取到返回信息的数据结构,即 weatherInfo 的结 构 类 型。然后获取它的数据结构,可以通过前面打开的网页 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中点击函数 getWeatherbyCityName 打开该函数的一些相关信息。如下图所示,可只该函数有一个输入 参数,即 theCityName。 同时我们还知道,它的返回数据为一个一维数组 String(22),共有 23 个元素。String(0) 到 String(4):省份,城市,城市代码,城市图片名称,最 后 更 新 时 间。String(5) 到 String(11): 当天的 气温,概况,风向和风力,天气趋势开始图片名称(以下称:图标一),天气趋势结 束图片名称(以下称:图标二),现在的天气实况,天气和生活指数。String(12) 到 String(16): 第二天的 气温,概况,风向和风力,图标一,图标二。String(17) 到 String(21):第三天 的 气温,概况,风向和风力,图标一,图标二。String(22) 被查询的城市或地区的介绍。 对于前面我们运行程序返回的一些杂乱信息我们通过这个解释就清楚了。它的返回数 据为典型的 XML 数据结构,我们可以通过 Flex 的 ArrayCollection 数据结构来定义。如下: 运行程序,其显示结果如下图所示: 完整实例源代码见附录,编译程序,其显示结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 110 页 共 137 页 Email:xwebsite@163.com 土木水电学院 3S 实验室 肖泽云 第 111 页 共 137 页 Email:xwebsite@163.com 4、Flex 与 Ajax 交互 Flex 与 Ajax 都是开发 AIR 非常好的技术,它们各有优缺点。Flex 更简单,效果更加酷! 但是在功能开发等方面不及 Ajax 成熟。最理想的就是全部用 Flex 来开发实现,但这只是一 种理想状态,很多时候我们还是要用到 Ajax。我们经常需要将嵌入到 Ajax 应用程序中的 基于 Flash 的资源集成在一起。FABridge(Adobe Flex Ajax Bridge)是由 Adobe 开 发的代码库,用于 Flex 与 Ajax 之间的交互,意味着连接 Flex 与 Ajax 的桥梁。本文将介 绍如何使用 FABridge 将 Flash 内容与现有 Ajax 内容集成在一起。 1)准备工作 (1)FABridge 库文件 FABridge 库包含两个文件:FABridge.as 和 FABridge.js。 一般情况,如果用户安装了 Flex Builder ,则在安装路径下的 \sdks\3.1.0\frameworks\javascript\fabridge\src\bridge 路径下,如 C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\javascript\fabridge\src\bridge,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 112 页 共 137 页 Email:xwebsite@163.com 如果用户没有这两个文件,可以参考附录,将代码复制到文本中,然后保存为 FABridge.as 文件和 FABridge.js 文件。 (2)新建一个 Flex 项目,项目名称为 FlexAjax,如下图所示: (3)新建一个文件夹,其名称为 bridge,并把文件 FABridge.as 复制到该文件夹中, 如下图所示: 土木水电学院 3S 实验室 肖泽云 第 113 页 共 137 页 Email:xwebsite@163.com (4)新建一个文本,其内容如下: Flex 与 Ajax 交互 把该文本文件名称及后缀改为 index.html,并保存至项目的 bin-debug 文件夹内。同时 将 FABridge.js 文件保存至 bin-debug\bridge 文件夹内,如下图所示: (5)在 FlexAjax.mxml 文件的名称空间内引用前面复制的 FABridge.as 文件,代码如 下: 土木水电学院 3S 实验室 肖泽云 第 114 页 共 137 页 Email:xwebsite@163.com 编译FlexAjax.mxml文件,它将在项目的bin-debug文件夹内生成一个FlexAjax.swf文件。同时 可以通过修改index.html文件来添加swf到网页中去,如在和之间添加如下代 码: 2)在 JavaScript 中调用 Flex 对象 ( 1 )获得 Flex 应 用程序的引用。在 index.html 文 件 中编辑,在 其中 height 和 width 分别为 Flash 的高度和宽度,id 为前面 JS 中定义的 Flash 对象 变量,value 为连接到的 Flash 文件。 (3)使用 ActionScript 对象 现在获得了 Flex 应用程序的全局引用,就可以使用 ActionScript 对象了。但是在 JS 中无法显示 AS 对象的方法与属性,于是 AS 提供了一种使用 get 关键字的方法,现在 举一个例子说明:在 Flex 的 mxml 文件中,假如定义了一个 TextInput 文本输入控件, 它的 id 为 txt_test,在 JS 中要获得这个文本输入控件,只需要通过 flexApp.getTxt_test 即可获得该对象。若要获得该控件中输入的文字,在 Flex 中 TextInput 文本输入控件中输 入的文字在它的 text 属性里面,所以在 JS 中只要通过 getText 即可获得文本输入控件中 输入的文字,即 flexApp.getTxt_test().getText()。值得注意的是:无论在 MXML 中对象的 id、属性或方法的首写字母大写还是小写,在 JS 中使用关键字 get 和 set 后必须为大写。 如下例所示: Flex与Ajax交互 土木水电学院 3S 实验室 肖泽云 第 115 页 共 137 页 Email:xwebsite@163.com
保存代码,在浏览器中打开网页,其效果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 116 页 共 137 页 Email:xwebsite@163.com (4)设置对象。前面是通过 get 关键字来获取对象的属性、方法,还可以通过 set 关键 字来设置对象的属性等,方式和前面一样。如下代码: Flex与Ajax交互
保存代码,在浏览器中打开网页,其效果如下图所示: 3)在 JS 中调用 AS 中事件 在 JS 中调用 AS 中事件。如下: var txtCallback = function( event ) { var swf_source = event.getTarget(); document.getElementById( "copy" ).innerHTML = swf_source.getText(); return; } txt.addEventListener( "change", txtCallback ); 如果文本输入有变化那么在下面的 Div 中对应显示输入的文本,这也是 Ajax 技术中非 常经典的一个用法。整个 HTML 文件如下: 土木水电学院 3S 实验室 肖泽云 第 118 页 共 137 页 Email:xwebsite@163.com Flex与Ajax交互
点击按钮,开始监听文本的输入事件。 保存代码,在浏览器中打开网页,其效果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 119 页 共 137 页 Email:xwebsite@163.com 4)JS 创建 Flash 组件 首先在 MXML 文件中将代码改为如下: 在此创建了一个 Panel 面板,定义了一个函数,编译程序。 将 HTML文件中的代码改为如下: Flex与Ajax交互
其中,“alert(flexApp.getMyPanel().getTitle());”是显示获取到的Panel 面板的标题,即“Flex与Ajax交互”。“var btn = FABridge.flex.create("mx.controls.Button");”是创建按钮。 “flexApp.getMyPanel().addChild(btn); ”是将新建的按钮添加到Panel面板 中。 保存代码,在浏览器中打开网页,其效果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 122 页 共 137 页 Email:xwebsite@163.com 土木水电学院 3S 实验室 肖泽云 第 123 页 共 137 页 Email:xwebsite@163.com 5)Flex 调用 JS 函数 Flex 调用外部网页中的 JS 函数有两种方式:第一种就是前面经常介绍和使用的,在 JS 中获取 Flex 的函数和对象;第二种方式就是在这里要介绍的,通过 ExternalInterface API 来 获得 JS。ExternalInterface API 中包含一个单个的类——flash.external.ExternalInterface,这个 类有一个静态的 call()方法,用来完成 JS 与 Flex 之间的通信。其语法格式如下: flash.external. ExternalInterface.call(JS 中的函数名:String[,参数 1,参数 2,…]):Object; (1)首先在网页中定义 JS 函数并添加 Flash 对象,代码如下: Flex与Ajax交互
(2)在 Flex 中添加相应的组件,其代码如下所示: (3)为 Flex 添加调用 JS 函数的 AS 代码,如下: 其中,JSfunction为字符串,其值为JS 中对应的函数名称,ExternalInterface.call ()函数的参数中必须包含有 JSfunction(即 JS 中的函数名),如果 JS 函数还有参数(如 此处的 changeWebTitle(TitleString)),还需要在 ExternalInterface.call()函 数中输入参数。 (4)为按钮添加 click 事件,如下: 编译 Flex 程序,然后打开网页,其运行结果如下图所示: 土木水电学院 3S 实验室 肖泽云 第 125 页 共 137 页 Email:xwebsite@163.com 6)一个综合实例 (1)Flex 中 FlexAjax.mxml 文件内容如下: 编译程序,其界面如下图所示: (2)index.html 文件内容如下: Flex与Ajax交互
选择图片:

同时,复制文件 smile.gif,anger.gif,fire.gif 和 cry.gif 四个文件到 index.html 目录下的 images 文件夹中。保存网页编辑,在浏览器中打开,如下 图所示: (3)显示图片路径 ① 如果要使用 JS 的 alert 函数来显示图片的路径,需要在 JS 中添加一个函数,用于获 取 Image 对象并监听其动作,当点击图片时调用 JS 的 alert 函数。如下: function showImagePath() 土木水电学院 3S 实验室 肖泽云 第 129 页 共 137 页 Email:xwebsite@163.com { var flexApp = FABridge.flex.root(); var image=flexApp.getMyImage(); var callback=function(event){ var pathString=image.getSource(); alert("图片的路径为:"+pathString); } image.addEventListener("click",callback); } 然后在 selectChange()函数中调用 showImagePath(): function selectChange(){ var flexApp = FABridge.flex.root(); //设置Flex应用程序图片组件的source属性 flexApp.getMyImage().setSource(imgSelect.value); showImagePath(); } 保存网页,并用浏览器浏览,其结果如下图所示: ② 如果要使用 Flex的 Alert 函数来显示图片的路径,则需要在 Flex 中为 Image添加 click 事件: public function showImagePath():void { Alert.show("图片的路径为:"+ myImage.source.toString()); 土木水电学院 3S 实验室 肖泽云 第 130 页 共 137 页 Email:xwebsite@163.com } 然后在 Image 中定义它的 click 事件,如下: 然后编译 Flex 程序,打开网页,其结果如下图所示: (4)网页输入与 Flex 同步。在网页的文本输入框中输入文字时,设定 Flex 中的对象 为文本输入框中输入文字。 在 JS 中添加函数: function changeFlexTxt(){ var flexApp = FABridge.flex.root(); var txt=flexApp.getTxt_test(); txt.setText(myTXT.value); } 然后在网页的文本中引用这个函数,如下: 保存网页,在浏览器中打开网页,如下图所示: 土木水电学院 3S 实验室 肖泽云 第 131 页 共 137 页 Email:xwebsite@163.com 土木水电学院 3S 实验室 肖泽云 第 132 页 共 137 页 Email:xwebsite@163.com 参考文献: 1 The Essential Guide to Flex 3,Charles E. Brown. 2 Foundation Flex for Designers, Greg Goralski & LordAlex Leon 附录: 天气预报 系统共有两个自定义组件(DateWeather.mxml 和 WeatherComp.mxml),如下图所 示: DateWeather.mxml 代码如下: WeatherComp.mxml 代码如下: WebService.mxml 文件的代码如下: 土木水电学院 3S 实验室 肖泽云 第 137 页 共 137 页 Email:xwebsite@163.com
还剩136页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 20 金币 [ 分享pdf获得金币 ] 9 人已下载

下载pdf

pdf贡献者

yiditushe

贡献于2010-09-09

下载需要 20 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf