Flex_Viewer编程的详细图解教程.doc

开发指南目 录1简介. . 41.1准备知识. 41.1.1技能与软件需求. 41.1.2获取源代码与所需库. 41.2文件组织. 52Sample Flex Viewe架构 . 52.1架构介绍 .52.2 Sample Flex Viewer实例的生命周期. 62.3 Sample Flex Viewer容器. 72.4 理解Widget编程模型. 82.5Widget命名习惯. 93为Widget开发建一个Flex Builder项目. 93.1用Sample Flex Viewer FlexBuilder项目开发一个微件. 103.2在Sample Flex Viewer的FB项目之外开发一个widget. 123.3 为Flex Builder设置测试服务器. 144开发一个widget . 154.1使用WidgetTemplate模板 . 164.2获取地图信息. 174.3在地图上显示widget数据 . 194.4从地图接收数据(通过单击，画线等操作实现). 204.5 在widget中控制导航. 214.6 不使用WidgetTemplate模板开发Widget . 224.7开发一个自己的Widget模板 . 234.8修改或是创建一个主题 . 244.9Widget的配置. 255了解Sample Flex Viewer核心代码. 265.1事件总线容器 . 265.2依赖注入(DI，也叫控制反转). 295.3国际化 . 305.3.1使用Flex的国际化特性 .30 5.3.2本地化设置 . 325.4日志和错误处理 . 336Sample Flex Viewer框架和Widget部署. 356.1部署一个Sample Flex Viewer应用程序. 356.2部署一个widget到Sample Flex Viewer . 356.3安全性考虑 . 366.3.1crossdomain.xml . 366.3.2网络资源代理. 377附录A: Configuration XML.37第 36 页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 文件组织这一节主要列出了文件组织以及发布包中的主要文件文件类型扩展名包括的文件文件描述MXML.mxml源代码FLex中定义用户界面的基于XML的标识语言ActionScript.as源代码开发Flex应用程序的语言XML.xmlconfig.xml and individualwidget configuration files.用于配置应用程序和微件Style Sheet.cssstyle.css定义Sample Flex Viewer的视觉效果Flash.swfIndex.swfSample Flex Viewer主文件编译后的应用程序编译后的微件例如： AboutWidget.swf编译后的、独立的微件style.swf编译后的样式表，也叫做主题文件2 Sample Flex Viewe架构Flex Library.swcagslib-1.0-2008-10-22.swcArcGIS应用程序接口库flexviewer-1.0.swcSample Flex Viewer微件编程模型库2.1 架构介绍Sample Flex Viewer框架的构建有助于开发和部署针对GeoWeb的应用程序，使得能够充分的发挥服务器端的空间服务的能力。服务器端的服务通过ArcGIS服务器和ArcGIS在线数据提供。如下图所示，地球空间信息服务可以由工作在软件即服务方式的伺服机提供商获得，比如ArcGIS在线数据库，ArcGIS服务器或者是像GeoRSS反馈，KML文件库以及JSON/REST数据等网络数据源。基于Sample Flex Viewer框架开发的应用程序所消耗的数据可以由服务器端提供，也可以是从移动设备运行动态生成的数据，如现场项目师的笔记本电脑或智能手机。menu controlArcGIS在线数据Sample Viewer架构ArcGIS 服务器其他服务和反馈 手持移动设备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容器由一系列高内聚、低耦合组件组成（如下图所示）。容器会把关注的任务交给相应的组件去完成。这种设计方法不但简化了代码维护和定制，而且缩小了模块编写过程中产生的阻力。Sample Flex Viewer容器Config ManagerUI ManagerControl Bar Map ManagerWidget ManagerData ManagerConfigObjectCSS ThemeSkinMenusItemsMap Layers Widgets Last DataSetsSymbolsBrandingBrandNavigation2.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这个接口。2.5 Widget命名习惯Widget 类: 一般来讲一个widget类得有”Widget”这样一个后缀，比如”NameWidget.mxml”Widget 的配置文件: 一个好的习惯就是，将widget的配置文件取相同的文件名，只是扩展名采用xml，比如NameWidget.xml。3为Widget开发建一个Flex Builder项目即使你已经能够在盒外部署并运行一个编译好的Flex Viewer程序，开发过程中也有许多的用例使得你不得不参考Sample Flex Viewer的完整源代码。比如说，你可能会想修改原来的示例代码程序或者是为了开发自定义的微件而扩展Sample Flex Viewer的程序。这一章将会讲述如何使用Sample Flex Viewer示例程序建一个Flex项目并且进行编译。有了示例代码Sample Flex Viewer就能够容易建一个自己的Flex Builder项目。下面介绍了解压源代码并导入到Flex Builder项目中的步骤：第一步: 解压缩项目包；压缩文件flexviewer-src-1.0.zip包括了发布包flexviewer-1.0.zip，根文件夹为FlexViewer。这样就不需要手工创建一个根文件夹，除非要另外命名。在电脑选择一个放置项目文件的文件夹并把zip文件解压出来。使用Flex Builder创建widget有两种方法，后面一部分将会更加详细地讲述这两张方法。第二步: 导入解压的文件到 Flex Builder项目；具体可以按照下图所示步骤进行导入：在导入的对话窗口，找到前面解压的文件夹并导入所有项目文件，点击Finish。第三步: 创建Sample Flex Viewer；现在需要开始创建Sample Flex Viewer项目。在导航栏选择“项目”，返回在项目菜单选择“创建项目”命令。如图所示：一旦项目创建成功，就可以进行widget开发了。3.1 用Sample Flex Viewer FlexBuilder项目开发widget创建一个widget，就需要在Sample Flex Viewer项目中新建一个widget类，具体步骤如下：第一步: 新建一个 MXML类，文件名为 MyFirstWidget.mxml；在Flex导航中右键Flex Viewer项目名，并选择“New MXML Component”命令。第二步: 填写MXML组件创建对话框；一定要使用BaseWidget作为新建的widget类的父类，这点很重要。你可以把新建的widget文件放到项目里面任何位置，建议给微件专门建一个文件夹，这样便于和其他的文件分开。一旦填写完对话框中相关的选项和内容点击“Finish”按钮。下图创建了一个新的文件夹并在里面建了一个微件，名字是MyFirstWidget.mxml。第三步: 将MyFirstWidget添加到Flex Builder工程模块列表；提醒: 这一步很关键，它使得Flex Builder能够编译你的微件并生产一个相应的独立的swf文件。R右键项目名并选择“属性”，在属性窗口进行如下操作： 在左边列表中选择“Flex Modules” 点击“Add ”按钮并找到新建的MyFirstWidget.mxml文件 点击OK.这个新建的widget能够被自动优化到index.mxml文件中。第四步: 编译所创建的微件。对整个Sample Flex Viewer执行build命令，现在新建的widget已经是整个项目的一部分了。一旦build命令成功执行完毕，整个项目会在bin-debug文件夹或者是其子文件夹（跟src文件夹下widget文件位置对应）下会创建一个新的widget的swf文件。只有编译成swf文件才能被用来单独用来在Sample Flex Viewer应用程序中共享或者是进行部署。然而，现在也只是建了一个空的微件，并没有向其中添加任何用户界面的组件或者是功能逻辑。后面一个章节将会讲述如何进一步开发这个微件。这种开发方式的好处在于: 不需要为建一个widget创建整个Sample Flex Viewer项目 编译的时候，widget将自动被优化。这会减小widget文件的大小，优化加载运行widget的性能需要注意的是: 你需要获取Sample Flex Viewer的源代码并且能够成功编译之。3.2 在Sample Flex Viewer的FB项目之外开发一个widget其实我们要开发一个widget的话并不需要导入整个的Sample Flex Viewer的代码，可以只需要导入widget编程模型的组件库flexviewer-1.0.swc，同样还需要Flex的应用程序接口库来开发一个ArcGIS API for Flex的应用程序。这一章将会展示如何使用widget编程模型库而不是整个的Sample Flex Viewer示例代码来开发一个widget。第一步：新建一个Flex项目；然后点击”Next”接受默认的设置，并点击”Finish”完成创建向导。第二步：导入项目所需的Flex库；默认情况下，Flex Builder会提取libs文件夹下面的所有库文件并将之导入项目文件夹结构中。这样的话，你只需要把所需要的库文件放到libs文件夹下即可。同样，你也可以根据需要把库文件放到其他位置，但是需要修改项目属性向导中相关内容。 如下图所示：到目前为止我们共拷贝了两个库文件，一个是widget编程模型库文件，另外一个是ArcGIS的Flex应用接口库文件。注意:新建的项目里面有一个Flex Builder自动生成的文件WidgetSample.mxml，尽管对于开发widget没有多大用处但我们最好不要删掉它。第三步：调整编译器以减小widget的大小；这一步的操作将会告诉Flex Builder不要把Flex软件开发工具的相关代码都导入到widget 的编译文件中，这样就能显著减小生成的swf文件的大小。打开项目属性对话框，在Flex Build Path中改变framework linkage ，在下拉列表中选择 Runtime shared library (RSL)。第四步：创建一个widget类；在组建创建对话框中：必须使widget扩展BaseWidget这个父类，所以Based On中要选择BaseWidget，然后点击Finish。第五步：把新建的widget添加到Flex Builder的模块列表；注意：这一步非常关键，使得Flex Builder把创建的widget编译到一个独立的swf文件中。在”Flex Modules”中添加新建的widget文件MyFirstWidget.mxml到列表，选择”Do not optimize”，然后点击OK，新建的文件中的代码如下：第六步：创建整个项目；一旦创建了这个项目你会发现在bin-debug文件夹下面多了一个名字为MyFirstWidget.swf的swf文件，这个是所创建的widget能够用来共享和部署的swf文件。当前生成的widget还没有任何的用户界面元素和功能逻辑。这个章节表示了如何不用整个Sample Flex Viewer的源代码来创建一个widget的另一种方法。后面一章会进一步讲述如何创建功能更强大的widget并在Flex Viewer的应用程序中进行部署。3.3 为Flex Builder设置测试服务器当用Flex Builder测试一个Flex应用时，它默认情况下会调用系统自带浏览器直接从bin-debug文件夹打开相应的html文件。浏览器中URL地址形式如file:/C:/AllESRI/moxie/dev/FlexViewer/bin-debug/index.html.然而，尽管用这种方法也能运行程序，但这却不是测试Flex应用程序的最好办法。如果要模拟一个从HTTP服务器运行的Flex应用程序配置的环境，最好还是需要用一个本地的服务器做测试。注意: The best practice is to always setup a local web server to test your Flex application. 最好的方法是设置一个本地的网络服务器来测试Flex应用。使用Windows开发环境作说明如下：第一步：创建一个IIS服务器的虚拟目录，如图；新创建的虚拟目录应该绑定到所创建的Flex Viewer的FB项目下bin-debug文件夹的磁盘路径，这里面有生成的测试程序。在这个例子里，虚拟目录的名字为flexviewer，这样就可以用http:/moxie1/flexviewer作为URL从网络服务器访问这个虚拟目录了，其中moxie1是电脑名称。第二步：在Flex Builder中配置指定到所创建的虚拟目录；打开Sample Flex Viewer应用程序的项目属性窗口，在flex Build Path中进行设置如下，键入虚拟目录的URLhttp:/moxie1/flexviewer作为输出文件夹的位置。一旦这个URL设置完成，接下来就可以从Flex Builder中运行自己的程序，它就会从指定的网络服务器路径下加载运行了。4开发一个widget尽管前面两个章节讲述了两种widget项目开发的途径，但其实它们实际的核心功能开发的原理是一样的。这一章我们会用第一种开发方式来做更深入的讲解。我们先假设widge的开发员很熟悉Flex的开发环境。4.1 使用WidgetTemplate模板在接着2.1节所创建的一个widget文件MyFirstWidget.mxml讲，它的代码如下：在widget编程模型汇中的WidgetTemplate模板提供的默认widget窗口给出了一套很丰富的内置组件。使用这个模板添加两行如下代码：按照如下几个步骤进行配置和部署就能看到运行结果：第一步：在config.xml中添加创建的widget；打开config.xml文件添加下面几行代码到标记块。mywidgets/MyFirstWidget.swf你可以为创建的widget使用自己的图标，可以是4040的一个png图像文件，或者gif、jpg文件。第二步：保存文件并编译整个项目；具体编译方法参考上一章内容。第三步：运行Sample Flex Viewer应用程序右键项目中的index.mxml文件并点击Run Application。第四步：从工具菜单，点击MyFirstWidget；下面将会加载并输出显示你的widget。前面给widget添加的两行代码，是的当前的widget能够有一个标准的视图和感官效果，并且能够有一些基本功能，比如能够最小化，最大化以及关闭的效果。而且，当前的widget还可以和Sample Flex Viewer进行内部通信。接下来就可以在WidgetTemplate模板上添加自己的UI元素并且写自己的业务逻辑了。4.2 获取地图信息Sample Flex Viewer是一个基于地图服务开发的应用。一旦这个应用被初始化，通常widget能够从ArcGIS的地图服务上连接到一个或者多个地图资源。在基类BaseWidget中定义了一个公共属性map，一个widget被加载以后widget管理器就会把当前激活的一个地图对象传给这个widget。这个widget的map属性来自com.eari.ags.Map类，继承于ArcGIS API for Flex。这样的话，你就能够访问到ArcGIS提供的所有的地图参数。widget的代码写起来就像一个常规的ArcGIS Flex的应用程序一样。这里有一个例子，在MyFirstWidget中添加了一个按钮。当点击这个按钮时，地图就会自动的以当前设置的坐标（洛杉矶）为中心。var point:MapPoint = new MapPoint(-118.24799,33.975004);map.centerAt(point);在编译并且配置完widget后重新运行Sample Flex Viewer应用程序，如图：4.3 在地图上显示widget数据添加图层建议为每一个新创建的widget添加一个图层，这个图层能够被添加到地图服务中去，具体是在widgetConfigLoaded这个事件处理器中的init方法进行相关初始化操作。当所有的widget的配置信息加载完毕并且待命时就会传出一个widgetConfigLoaded事件。相应代码如下：!CDATAprivate function init():voidgraphicPointSym = new PictureMarkerSymbol(widgetIcon, 30, 30)graphicsLayer = new GraphicsLayer(); graphicsLayer.symbol = graphicPointSym; map.addLayer(graphicsLayer);一旦添加了图层，你接下来就能使用标准的ArcGIS API for Flex中的各个方法来给图层加上各种图形元素。当点击open/minimize的图标时打开/关闭widget图层WidgetTemplate模板设置了两个窗口状态事件：widgetOpened以及widgetClosed事件。他们都是扩展于flash.events.Event这个类。你可以使用这两个事件来同步同步图层的可见性。在这个例子里，我们先添加两个事件处理器到WidgetTemplate模板：然后定义两个事件处理方法来实现图层可见与不可见的切换。private function widgetClosedHandler(event:Event):voidgraphicsLayer.visible = false;private function widgetOpenedHandler(event:Event):voidgraphicsLayer.visible = true;4.4 从地图接收数据(通过单击，画线等操作实现)对于GIS网络应用，除了可视化数据这个特殊用途外，地图还是一个允许用户收集并且处理地图数据的数据源。或许在用户与地图进行交互的过程中，我们创建的widget需要接收如点和直线或者多边形这一类的数据来进行处理。那么Sample Flex Viewer以及widget编程模型就能够用微件通过内置的setMapAction方法来请求或是接收这一类的地图数据。下面这段示例代码展示了如何激活画图工具来追踪用户在地图上面的点击操作：private function activateTool():voidsetMapAction(Draw.POINT, Click Point, drawEnd);private function drawEnd(event:DrawEvent):voidvar geom:Geometry = event.geometry;var pt:MapPoint = geom as MapPointAlert.show(Click location: + pt.x + , + pt.y);在上面的示例中，点击widget中的按钮会调用activeTool()方法。当一个指定的任务需要用户点击widget上的按钮时，程序就能够随时从地图上获取一个点的坐标信息。用户下一步需要做的就是点击地图上任意位置，然后widget就能够接收这个点击行为传送的点信息。具体由一个回调函数drawEnd()传回参数到setMapAction()方法来实现具体操作。setMapAction方法公共方法setMapAcion定义在BaseWidget类里（在BaseWidget.as文件中），这样所有继承该类的widget就能够自动继承这个特性。该方法定义如下：public function setMapAction(action:String, status:String, callback:Function):void参数:action: 这个字符串标记表示ArcGIS API相应的画图工具被激活。下面列出的是ArcGIS Flex API提供的能够用来访问各种画图工具的字符串标记:extent (Draw.EXTENT) point(Draw.MAPPOINT) line(Draw.LINE) polyline(Draw.POLYLINE) polygon(Draw.POLYGON)multipoint(Draw.MULTIPOINT)freehandpolyline(Draw.FREEHAND_POLYLINE)freehandpolygon(Draw.FREEHAND_POLYG