FlexViewer学习资料希望对初学者有帮.docx

1、FlexViewer学习资料希望对初学者有帮1 Sample Flex Viewe架构1.1 架构介绍Sample Flex Viewer框架的构建有助于开发和部署针对GeoWeb的应用程序，使得能够充分的发挥服务器端的空间服务的能力。服务器端的服务通过ArcGIS服务器和ArcGIS在线数据提供。如下图所示，地球空间信息服务可以由工作在软件即服务方式的伺服机提供商获得，比如ArcGIS在线数据库，ArcGIS服务器或者是像GeoRSS反馈，KML文件库以及JSON/REST数据等网络数据源。基于Sample Flex Viewer框架开发的应用程序所消耗的数据可以由服务器端提供，也可以是从移

2、动设备运行动态生成的数据，如现场项目师的笔记本电脑或智能手机。图1 地球空间信息服务1.2 Sample Flex Viewer实例的生命周期一个Sample Flex Viewer框架的实例从开始应用程序的设计到用户看到带微件的界面经历了一个简单的生命周期。期间主要的5个事件如下：1.Flash播放器从加载和运行容器文件开始一个Sample Flex Viewer框架的应用程序。2.这个Flex Viewer容器再从网络服务器加载XML格式的配置文件和皮肤文件并应用于整个应用程序。3.在配置文件的基础上，Flex Viewer容器会从ArcGIS在线数据和ArcGIS9.3服务器下载相关的地

3、图信息，然后会从配置文件中加载并且在控制条上显示菜单和来自配置文件的标记信息。 4.Flex Viewer容器的微件管理器会从XML配置文件指定的URLs下载并加载相关的微件文件（一般是swf文件）。 5.用户利用微件来实现各种业务逻辑。1.3 Sample Flex Viewer容器Sample Flex Viewer容器使设计人员能够摆脱地图管理、地图导航、应用配置、组件间的通信、数据管理等繁重复杂的编程工作，专注于核心业务功能开发，尤其是那些利用ERSI公司的ArcGIS技术的网络应用开发人员。而且只需要在Flex Viewer应用程序的配置文件中增加配置项，就可以将功能以widget的

4、形式快速部署到已有的Flex Viewer应用中。Sample Flex Viewer容器由一系列高内聚、低耦合组件组成（如下图所示）。容器会把关注的任务交给相应的组件去完成。这种设计方法不但简化了代码维护和定制，而且缩小了模块编写过程中产生的阻力。图2 Sample Flex Viewer容器整体架构1.4 理解Widget编程模型经过编译的widget是一个独立的SWF(Flash)文件，可在Flex Viewer程序中共享、移动和配置。Widget封装了一系列独立并且针对性很强的业务逻辑，用户可以在其中执行任务。在一个面向服务的环境下，一个widget可以代表是一种服务或者是一套相关的服

5、务，用户可以很明了的用它来执行一个业务功能。widget不仅为用户提供了可视化的界面，也能够连到服务器端的资源，像是来自ArcGIS服务器或是ArcGIS在线数据库的地图服务。一系列相互关联的widget加上清晰定义好的业务操作流程组成了业务解决方案。而且这样的方案可以应用于企业级的业务进程中。轻量级的Flex Viewer Widget编程模型使得开发人员可以轻易定制widget，避免了将widget整合到Flex Viewer应用程序中所需的底层代码开发。widget编程模型包含了两个ActionScript类（其中一个后为mxml类）以及两个ActionScript接口。后面一个章节将会

6、讲述如何使用这些类以及接口的相关细节。IBaseWidget Interface (IBaseWidget.as) 这个接口定义了WidgetManager管理微件的通信方法。而基础widget类BaseWidget则要来实现这个接口。BaseWidget Class (BaseWidget.as) 这个是widget的基类，所有的微件都要继承这个类。通过扩展BaseWidget这个父类，WidgetManager会验证所有扩展了BaseWidget的MXML或AS类是否为可部署的微件。另外，扩展了BaseWidget的类能够被编译为一个独立的SWF文件。每个Flex Viewer框架下的微件

7、必须继承BaseWidget这个父类。IWidgetTemplate (IWidgetTemplate.as) 这个接口定义了widget模板能够被BaseWidget识别所需要的一般操作。是使用一个widget模板还是使用内置的widget模板通常是可选的。内置的WidgetTemplate类要实现IWidgetTemplate这个接口。WidgetTemplate (WidgetTeamplate.mxml) 这是一个内置的widget模板，它是一个为widget提供基本的布局和行为的用户界面组件。这些布局和行为包括一个标准的窗口面板，带有自定义图标按钮的标题栏等组件。使用这类模板，使得w

8、idget开发者能够把更多的时间和精力放在核心的业务需求上面。内置的widget模板通常也能被widget开发者用来定制属于自己的widget模板，前提是必须实现IWidgetTemplate这个接口。1.5 Widget命名习惯Widget 类: 一般来讲一个widget类得有”Widget”这样一个后缀，比如”NameWidget.mxml” ；Widget 的配置文件: 一个好的习惯就是，将widget的配置文件取相同的文件名，只是扩展名采用xml，比如NameWidget.xml。2 开发一个widget尽管前面两个章节讲述了两种widget项目开发的途径，但其实它们实际的核心功能开发

9、的原理是一样的。这一章我们会用第一种开发方式来做更深入的讲解。我们先假设widge的开发员很熟悉Flex的开发环境。 2.1 使用WidgetTemplate模板在接着2.1节所创建的一个widget文件MyFirstWidget.mxml讲，它的代码如下：BaseWidget xmlns=com.esri.solutions.flexviewer.* xmlns:mx=在widget编程模型汇中的WidgetTemplate模板提供的默认widget窗口给出了一套很丰富的内置组件。使用这个模板添加两行如下代码：BaseWidget xmlns=com.esri.solutions.flexv

10、iewer.* xmlns:mx=按照如下几个步骤进行配置和部署就能看到运行结果：第一步：在config.xml中添加创建的widget；打开config.xml文件添加下面几行代码到标记块，你可以为创建的widget使用自己的图标，可以是4040的一个png图像文件，或者gif、jpg文件。mywidgets/MyFirstWidget.swf第二步：保存文件并编译整个项目；具体编译方法参考上一章内容。第三步：运Flex Viewer应用程序；右键项目中的index.mxml文件并点击Run Application。第四步：从工具菜单，点击MyFirstWidget；下面将会加载并输出显示你

11、的widget。图3 My First Widget菜单前面给widget添加的两行代码，是的当前的widget能够有一个标准的视图和感官效果，并且能够有一些基本功能，比如能够最小化，最大化以及关闭的效果。而且，当前的widget还可以和Sample Flex Viewer进行内部通信。接下来就可以在WidgetTemplate模板上添加自己的UI元素并且写自己的业务逻辑了。2.2 获取地图信息Sample Flex Viewer是一个基于地图服务开发的应用。一旦这个应用被初始化，通常widget能够从ArcGIS的地图服务上连接到一个或者多个地图资源。在基类BaseWidget中定义了一个公

12、共属性map，一个widget被加载以后widget管理器就会把当前激活的一个地图对象传给这个widget。这个widget的map属性来自com.eari.ags.Map类，继承于ArcGIS API for Flex。你就能够访问到ArcGIS提供的所有的地图参数。widget的代码写起来就像一个常规的ArcGIS Flex的应用程序一样。这里有一个例子，在MyFirstWidget中添加了一个按钮。当点击这个按钮时，地图就会自动的以当前设置的坐标为中心。在编译并且配置完widget后重新运行Sample Flex Viewer应用程序，如图：图4 My First Widget微件图2.

13、3 在地图上显示widget数据添加图层建议为每一个新创建的widget添加一个图层，这个图层能够被添加到地图服务中去，具体是在widgetConfigLoaded这个事件处理器中的init方法进行相关初始化操作。当所有的widget的配置信息加载完毕并且待命时就会传出一个widgetConfigLoaded事件。相应代码如下：!CDATAprivate function init():voidgraphicPointSym = new PictureMarkerSymbol(widgetIcon, 30, 30)graphicsLayer = new GraphicsLayer(); gra

14、phicsLayer.symbol = graphicPointSym; map.addLayer(graphicsLayer);一旦添加了图层，你接下来就能使用标准的ArcGIS API for Flex中的各个方法来给图层加上各种图形元素。当点击open/minimize的图标时打开/关闭widget图层。WidgetTemplate模板设置了两个窗口状态事件：widgetOpened以及widgetClosed事件。他们都是扩展于flash.events.Event这个类。你可以使用这两个事件来同步同步图层的可见性。在这个例子里，我们先添加两个事件处理器到WidgetTemplate模板

15、：private function widgetClosedHandler(event:Event):voidgraphicsLayer.visible = false;private function widgetOpenedHandler(event:Event):voidgraphicsLayer.visible = true;2.4 从地图接收数据(通过单击，画线等操作实现)对于GIS网络应用，除了可视化数据这个特殊用途外，地图还是一个允许用户收集并且处理地图数据的数据源。或许在用户与地图进行交互的过程中，我们创建的widget需要接收如点和直线或多边形这一类的数据来进行处理。那么Sa

16、mple 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 MapPoint

17、Alert.show(Click location: + pt.x + , + pt.y);在上面的示例中，点击widget中的按钮会调用activeTool()方法。当一个指定的任务需要用户点击widget上的按钮时，程序就能够随时从地图上获取一个点的坐标信息。用户下一步需要做的就是点击地图上任意位置，然后widget就能够接收这个点击行为传送的点信息。具体由一个回调函数drawEnd()传回参数到setMapAction()方法来实现具体操作。setMapAction方法公共方法setMapAcion定义在BaseWidget类里（在BaseWidget.as文件中），这样所有继承该类的w

18、idget就能够自动继承这个特性。该方法定义如下：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

19、)multipoint (Draw.MULTIPOINT)freehandpolyline (Draw.FREEHAND_POLYLINE)freehandpolygon (Draw.FREEHAND_POLYGON)status:在控制条的状态栏显示的文本文字；callback:画图操作完成后Map Manager回调的函数。2.5 在widget中控制导航当开发一个widget时，为了能够全屏显示，放大或是缩小地图，往往在用例中会需要控制地图的导航。比如，当一个widget被关闭后，你需要关闭相应的图层，并且使得地图处于默认的全屏状态。BaseWidget类提供了一个public方法set

20、MapNavigation用来进行这些操作。代码如下：WidgetTemplate id=wTemplate widgetClosed=widgetClosedHandler(event)private function widgetClosedHandler(event:Event):voidgraphicsLayer.visible = false;setMapNavigation(Navigation.PAN, “Pan Map”);在上面的代码里，我们给WidgetTemplate这个模板一个事件处理器来相应widget关闭这个事件。在widgetClosedHandle处理器内部，p

21、ublic方法setMapNavigation被调用来将地图的导航显示为全屏状态。setMapNavigation方法在BaseWidget中setMapNavigation定义如下：public function setMapNavigation(navMethod:String, status:String):void，其中参数：navMethod:地图导航的标记列表如下：（定义了Flex API类中的导航或者Sample Flex Viewer类的SiteContainer容器）pan (Navigation.PAN) zoomin(Navigation.ZOOM_IN) zoomout

22、(Navigation.ZOOM_OUT)zoomfull(SiteContainer.NAVIGATION_ZOOM_FULL)zoomprevious(SiteContainer.NAVIGATION_ZOOM_PREVIOUS)zoomnext (SiteContainer.NAVIGATION_ZOOM_NEXT)status: 在控制条的状态栏显示的文本文字2.6 不使用WidgetTemplate模板开发Widget开发widget并不一定会用到WidgetTemplate这个模板，再有的情况下，widget模板的窗口并不一定是必要的。比如，或许在你的应用程序中需要用一个与时钟相关

23、的widget来显示当前的时间。这个时钟并不需要一个window框架，其代码如下：BaseWidget xmlns=com.esri.solutions.flexviewer.* xmlns:mx=在上面的代码中，我们使用一个SWFLoader来加载外部的flash文件到要开发 的widget中。然而，在这个时钟微件中，会发现WidgetTemplate模板所提供的很多有用的特性我们根本没用到。所以，作为widget的开发员要有这样一个共识，那就是随时需要自己写代码来增加开发widget时所想到，而不是仅仅依赖既有模板所提供的那些特性。2.7 开发一个自己的Widget模板Widge编程模型允

24、许开发者创建自己的widget模板。当然，新的widget模板类也需要实现iWidgetTemplate这个模板接口，因为他是BaseWidget类与widget的模板之间进行交互的核心接口。实现一个接口就意味着里面所有的方法都必须得以实现。这样，新的widget模板类需要实现iWidgetTemplate接口中的setTitle，setIcon和setState这三个方法。下面说明如何创建一个基于Flex组件TitleWindow的widget模板MyTemplate：接下来向MyTemplate组件中添加一些代码，上面展示的只是一个最简单的widget模板，它能够接收widget的标题，图

25、标并在TitleWindow组件中进行配置。下一步我们在mywidgets空间（文件夹）下创建一个新的widget并，命名为MyTempWidget，使用我们自己的模板，然后在其中添加一个按钮。2.8 修改或创建一个主题Sample Flex Viewer应用程序的整体观感都能够自定义或是根据需要进行修改。这个主题（或者叫做皮肤）它跟我们编程代码是分开的。内置的主题名字叫做DarkAngle。DarkAngle皮肤是使用web上标准的层叠样式列表文件com/esri/solutions/flexviewer/themes/darkangel/style.css进行构建的。这个CSS文件也能被编

26、译成一个独立的主题文件，一个SWF。它在运行时被从配置文件config.xml所指定的位置加载到应用程序中。在config.xml配置文件中stylesheet标签用来提供主题的swf文件的URL地址共应用程序访问。注意: 对Sample Flex Viewer应用程序作的修改会在运行时自动的应用到各个微件。下面的步骤说明如何新建一个自己的主题：第一步：修改DarkAngle的css文件或者新建一个css文件；新建css文件的话要遵循css标准，可以参考Flex开发文档。第二步 ：改变或者是替换原有图标：在css文件中有一些使用到内置图标的图像文件元素，你可以修改这些css文件中对于的图标。第三步：编译css文件到swf文件中；这一步很重要只有编译到swf文件才能被Sample Flex Viewer应用在运行时所识别和加载。要编译这个css文件，只需要右键之并从弹出菜单选择Compile CSS to SWF 命令。选择了这个命令以后，下次build这个Flex Viewer项目时css文件会被自动编译到一个独立的swf文件中去。为了能够重新生成主题文件，你可以再编译一下当前的项目。第四步：添加新建主题文件的URL到config.xml配置文件。要使用新建的主题文件，只需要修改config.xml中的stylesh