arcgis server Flex开发入门.docx

1、arcgis server Flex开发入门 ArcGIS Server10 For Flex API1、环境搭建1.1ArcGIS Flex APIArcGIS Server Flex API从最初的1.0现在，最新的已经到2.3.1了，当前都是基于ArcGIS Server10做开发，具体ArcGIS Flex API，见如下地址，如下图所示，右边红框中点击Down API Liabrary可以下载。解压缩以后的目录结构如下如所示： libs文件夹：下面是agslib-2.3.1-2011-04-26.swc，这个是基于Flex开发的包。 Samples文件夹：下面是一个src文件夹，sr

2、c里面是一些Esri在线Demo，可以把这些demo可以加载在Flex Builder里面运行，也可以在上面的在线帮助里面执行。 Skins文件夹：里面是一些图标样式。 Readme.txt：是告诉你如何将下载的这个工程在FlexBuilder里面运行起来。1.2FlexBuilderFlex SDK4下载地址：有了Flex SDK和ArcGIS Flex API就可以进行RIA开发了，开发环境我们可以选择FlexBuilder，也可以选择Eclipse，这里我们选择FlexBuilder。Flex Builder4下载地址：http:/121.52.219.171/download/flas

3、h_builder4_beta2_win_standalone_253292.exe（安装完Flex Builder4以后，在C:Program Files (x86)AdobeAdobe Flash Builder 4sdks路径下就有SDK了，所以如果用FlexBuilder开发就可以不用单独下载SDK了；如果用Eclipse开发，就需要单独下载SDK，将这个插件安装到eclipse环境中再进行开发）Flash Player10.3下载Flex程序的主要构成部分中有mxml文件，这个文件最终编译后会生成相应的swf文件，浏览器中运行和加载的是swf文件，所以需要安装Flash插件。1.3建

4、立第一个Flex工程在程序中打开Adobe Flash Builder4打开后在包资源管理器中右键，新建Flex项目：给工程取名为MyFirstProject：配置SDK，点击上面红框中的配置Flex SDK：点击添加：点击浏览，选择sdk的路径，选择4.1.0：点击确定，并在刚才加载的sdk前面打勾号：点击确定，然后下一步，指定Flex程序编译后的的路径（Flex的mxml文件编译后会产生两个文件，一个是html，一个是swf）：下一步：添加swc包(上图红框所示)，浏览到arcgis_api_for_flex2.3.1/ArcGIS_Flex/libs下：点击打开，确定：完成！建立好的Fl

5、ex工程目录如下图所示：注意：Flex程序的编译，有自动编译和手动编译两种。自动编译是编译当前修改的文件，只要在菜单，项目下设置“自动构建”，在保存文件的时候就会自动编译。手动编译是对所有的mxml文件进行编译，当点击菜单，项目/清理时会进行编译。2、加载地图加载如下代码，编译后直接运行即可看到地图服务：运行后如下效果：到此为止，是基本的环境搭建和地图浏览，关于详细的Flex开发的内容可以参考ArcGIS Server 9_3 for Flex API 初级教程.pdf，这个是基于9.3的文档，但里面相关的类和接口使用都是一样的，使用方法相似。3、将Flex开发的程序发布到web容器中 在实际

6、项目中，我们的要求不仅仅局限于把地图在本机上展现出来，还希望能够通过url地址访问，这个时候FlexBuilder就不能够满足J2EE开发，所以还是需要用Myeclipse或eclipse进行开发。具体环境如下： Eclipse必要有J2EE开发环境； Eclipse需要安装flex插件 在这个eclipse中，需要进行Flex和java通讯，用于和后台业务数据交互（请详看flex和java通讯配置.pdf，需要下载Blaseds.war包） Eclipse需要安装arcgissever插件（如果需要用到Arcobjects包，还必须安装这个插件）注意：（1）eclipse里面安装flex s

7、dk插件，我比较习惯用的分别将sdk下的features和plugs下面的文件拷贝到eclipse下面的这两个文件中，同时，需要很重要一点是将sdk下的AMT拷贝的elicpse根目录下，否则会出错。（2）将flex开发的程序发布到web容器，其实质就是在jsp或html页面中潜入swf文件，则会给swf就是flex的mxml编译后产生的。所以在开发的过程中，需要将flex编译后的文件路径指到java工程里面，这些在flex和java通讯配置.pdf中有详细介绍。（3）要进行java和flex通讯时，一定注意要将java编译的class文件的路径知道Web-Content。（4）在进行开发的过

8、程中经常会用到flex和jsp页面的通信，jsp页面传到flex，然后再进行处理，请参考Flash外部传参数到flex 内容.pdf。4、FlexViewer框架以FlexViewer2.2为例说明，在FlexBuilder中加载。将从官网上下载的flexviewer-2.2-src解压到FlexBuilder的工作空间中，我这里是D:/test。在FlexBuilder中：确定完成！展开目录结构如下：在源代码的根目录src下，存在4个子目录和3个文件，它们的功能分别是：A、（默认包） 在目录下存在两个文件（FlexUnitCompilerApplication.mxml是FB自动生成的文件，

9、可忽略），其中1、 index.mxml。它是整个框架的总入口，也就是说在运行时Flash Player也就是调用该文件所对应的flash文件来启动整个系统的；2、defaults.css。它是整个系统的css样式表文件。B、assets.image 该目录主要用于管理工程中的图片文件，工程中的其它文件可以通过相对路径的方式来访问其中的图片资源。C、com.esri.viewer 该目录管理了Flex Viewer框架相关的所有核心代码，其中关键文件如下：该目录管理了Flex Viewer框架相关的所有核心代码，其中关键文件如下：文件名作用AppEvent.as定义了用于在消息总线(Event

10、Bus)中使用的消息类BaseWidget.as定义了Widget的基类，所有自定义的Widget均需继承该类ConfigData.as定义了系统在初始化时将config.xml文件中的配置项加载内存后，用于管理这些配置项的类型IBaseWidget.as定义了接口BaseWidget，同时类BaseWidget实现了该接口IInfowindowTemplate.as定义了接口InfowindowTemplate，所有自定义的InfoWindowTemplate均需实现该接口，同时自定义模板用于InfoWindow的窗口定义中。IWidgetContainer.as定义了接口IWidgetCo

11、ntainer，所有自定义的WidgetContainer均需实现该接口。WidgetContainer是用于管理Widget的一个可视化容易。IWidgetTemplate.as定义了接口IWidgetTemplate，所有自定义的WidgetTemplate均需实现该接口，同时自定义模板用于Widget的窗口定义中。ViewerContainer.mxml定义了可视化容器ViewerContainer，该容器是Flex Viewer中构件树的根ConfigManager.as定义了类configmanager，该类负责从config文件中加载兵解析全部配置信息，然后将这些信息存储于数据结构

12、configData，最后通过触发事件AppEvent.CONFIG_LOADED将configData发布给其它组件使用DataManager.as定义了类DataManager，负责管理与维护系统内部的公共数据，使得系统中的各组件、Widget均能将公共数据发布到DataManager中或从其中获取其它组件发布的数据。EventBus.as继承了EventDispatcher接口，并使用单例模式向整个提供中的所有组件提供统一的消息注册和发布功能，从而使得各组件之间的完全做到低耦合、高内聚的效果MapManager.mxml负责根据config文件中的配置信息初始化地图控件、底图、optla

13、yer，以及optlayer所对应的InfoWindowWidget， 并提供对事件SET_MAP_NAVIGATION（设置地图浏览工具）、BASEMAP_SWITCH（设置底图切换）、 SET_MAP_ACTION（设置绘图工具）、SHOW_INFOWINDOW（显示InfoWindow）、MAP_RESIZE（改变地图控件大 小）、DATA_OPT_LAYERS（请求OptLayersTable）、MAP_LAYER_VISIBLE（设置指定图层可见性）等的响应。ScriptingManager.as保留类，暂无特别用途SecurityManager.as保留类，暂无特别用途UIMana

14、ger.as负责根据config文件中style的配置信息定义一套系统的UI样式表WidgetManager.as负责根据config文件的配置自动初始化Widget Container，及其包含的Widget控件，同时提供对事件WIDGET_RUN（打开Widget）、 DATA_CREATE_INFOWIDGET（创建OptLayer对应的InfoWindow）、WIDGET_FOCUS（设置Widget获得焦 点）、WIDGET_STATE_CHANGED（关闭Widget事件响应）的响应。D、Widgets目录 该目录管理了系统中所有Widget的代码。E、根目录下的config.xml文件 config.xml文件主要用于记录系统的配置项，以使得使用者能够在不修改框架代码的情况下来自定义系统的UI或功能。构件的逻辑结构视图 在系统架构的逻辑结构上，框架大体上可分解为8个主要的架构元素：Viewer Container、Config Manager、UI Manager、Control Bar、Map Manager、Widget Manager、Data Manager，以及消息总线(EventBus)。它们之间的关系如下图所示：图2 系统的架构图其中该架构中存在着以下几个关键点：A、消息总线 图中的Delegate即为消息总线(EventB