Flex-Viewer编程的详细图解教程

1 简介

此文档可供使用Sample Flex Viewer框架来开发基于Flex的ArcGIS API应用程序的开发人员使用。

1.1 准备知识

1.1.1 技能和软件需求

Sample Flex Viewer框架通过已编译的发布包和源代码包两种形式提供给开发人员。已编译的开发包 “即开即用”，部署方面快捷；而源代码包是提供给GeoWeb应用程序的开发人员使用。利用Sample Flex Viewer框架开发应用程序应该充分熟悉Adobe Flex这套软件并且具备足够的开

发基于Flash的RIA网页应用程序的经验。

Adobe Flex的编程语言是ActionScript，一种基于标准JAVA-SCRIPT的强类型的面向对象语言。对于有过Java，C# ，Javascript等面向对象语言编程经验的开发人员会发现ActionScript这门语言相对比较容易上手。

要能够开发与GIS相关的程序，首先要具备熟练运用Flex的ArcGIS应用程序接口的知识和经验。所需软件：

† Adobe Flex 3 Builder 标准版 (如果需要用到先进的可视化交互数据, 性能配置文件, 或者需要用的第三方集成测试工具的话，推荐安装Adobe Flex 3 Builder企业版)

† Adobe的软件开发包 (如果无法获取Flex Builder的话)

† 针对Eclipse的Subversion插件 (仅适用于需要用到Svn代码版本控制软件的开发人员)

† Flex的ArcGIS 应用程序接口 (如果需要开发GIS应用程序的话)

1.1.2 获取源代码和所需库

源代码将会以zip压缩文件的格式包含在发布包中，文件名为flexviewer-src-1.0-.zip。发布包的压缩文件可以从ESRI公司的资源网站ArcGIS API for Flex代码库下载，文件名为AS15905.zip（当上传更新的版本文件名上的数字会相应更新）。压缩文件的根文件夹FlexViewer包所有的源文件，库文件，文档以及FB项目文件。库文件的子文件夹libs中包含Flex的ArcGIS应用程序接口组件集swc文件，它是用来创建这个发布包的。Widget 编程模型库也包括在源代码的压缩文件中。用它开发微件不需要访问和编译整个Sample Flex Viewer架构的源码。库文件flexviewer-1.0.swc在根文件夹Flex Viewer下面。

下一章的方法将会讲述如何运用这个库区创建一个Sample Flex Viewer微件。

1.2 文件组织

这一节主要列出了文件组织以及发布包中的主要文件

2 Sample Flex Viewe架构

2.1 架构介绍

文件类扩展名

Sample Flex Viewer框架的构建有助于开发和部署针对GeoWeb的应用程序，使得能够充分的发挥服务器端的空间服务的能力。服务器端的服务通过ArcGIS服务器和ArcGIS在线数据提供。

如下图所示，地球空间信息服务可以由工作在软件即服务方式的伺服机提供商获得，比如ArcGIS在线数据库，ArcGIS服务器或者是像GeoRSS反馈，KML文件库以及JSON/REST数据等网络数据源。基于Sample Flex Viewer框架开发的应用程序所消耗的数据可以由服务器端提供，也可以是从移动设备运行动态生成的数据，如现场项目师的笔记本电脑或智能手机。

2.2 Sample Flex Viewer实例的生命周期

一个Sample Flex Viewer框架的实例从开始应用程序的设计到用户看到带微件的界面经历了一个简单的生命周期。期间主要的5个事件如下：

1. Flash播放器从加载和运行容器文件开始一个Sample Flex Viewer框架的应用程序。

2. 这个Flex Viewer容器再从网络服务器加载XML格式的配置文件和皮肤文件并应用于整个应用程序。

3. 在配置文件的基础上，Flex Viewer容器会从ArcGIS在线数据和ArcGIS9.3服务器下载相关的地图信息，然后会从配置文件中加载并且在控制条上显示菜单和来自配置文件的标记信息。

4. Flex Viewer容器的微件管理器会从XML配置文件指定的URLs下载并加载相关的微件文件（一般是swf文件）

5. 用户利用微件来实现各种业务逻辑.

2.3 Sample Flex Viewer容器

The Sample Flex Viewer容器使设计人员能够摆脱地图管理、地图导航、应用配置、组件间的通信、数据管理等繁重复杂的编程工作，专注于核心业务功能开发，尤其是那些利用ERSI公司的ArcGIS技术的网络应用开发人员。而且只需要在Flex Viewer应用程序的配置文件中增加配置项，就可以将功能以widget的形式快速部署到已有的Flex Viewer应用中。Sample Flex Viewer容器由一系列高内聚、低耦合组件组成（如下图所示）。容器会把关注的任务交给相应的组件去完成。这种设计方法不但简化了代码维护和定制，而且缩小了模块编写过程中产生的阻力。

2.4 理解Widget编程模型

经过编译的widget是一个独立的SWF(Flash)文件，可在Flex Viewer程序中共享、移动和配置。

Widget封装了一系列独立并且针对性很强的业务逻辑，用户可以在其中执行任务。在一个面向服务的环境下，一个widget可以代表是一种服务或者是一套相关的服务，用户可以很明了的用它来执行一个业务功能。widget不仅为用户提供了可视化的界面，也能够连到服务器端的资源，像是来自ArcGIS服务器或是ArcGIS在线数据库的地图服务。

一系列相互关联的widget加上清晰定义好的业务操作流程组成了业务解决方案。而且这样的方案可以应用于企业级的业务进程中。轻量级的Flex Viewer Widget编程模型使得开发人员可以轻易定制widget，避免了将widget整合到Flex Viewer应用程序中所需的底层代码开发。

widget编程模型包含了两个ActionScript类（其中一个后为mxml类）以及两个ActionScript接口。后面一个章节将会讲述如何使用这些类以及接口的相关细节。

IBaseWidget Interface (IBaseWidget.as)

这个接口定义了WidgetManager管理微件的通信方法。而基础widget类BaseWidget则要来实现这个接口。

BaseWidget Class (BaseWidget.as)

这个是widget的基类，所有的微件都要继承这个类。通过扩展BaseWidget这个父类，WidgetManager会验证所有扩展了BaseWidget的MXML或AS类是否为可部署的微件。另外，扩展了BaseWidget的类能够被编译为一个独立的SWF文件。每个Flex Viewer框架下的微件必须继承BaseWidget这个父类。

IWidgetTemplate (IWidgetTemplate.as)

这个接口定义了widget模板能够被BaseWidget识别所需要的一般操作。是使用一个widget模板还是使用内置的widget模板通常是可选的。内置的WidgetTemplate类要实现IWidgetTemplate这个接口。

WidgetTemplate (WidgetTeamplate.mxml)

这是一个内置的widget模板，它是一个为widget提供基本的布局和行为的用户界面组件。这些布局和行为包括一个标准的窗口面板，带有自定义图标按钮的标题栏等组件。使用这类模板，使得widget开发者能够把更多的时间和精力放在核心的业务需求上面。内置的widget模板通常也能widget开发者用来定制属于自己的widget模板，前提是必须实现IWidgetTemplate这个接口。

【下载地址】

百度网盘链接：https://pan.baidu.com/s/1aimQINk2IU-1DK4dc5YBOQ

提取码：fw9z