技术专栏

gis培训

FlexViewer学习讲堂(2)

作者:周岳昆 邮箱:actc@lreis.ac.cn 发布时间:2014-01-02 19:17:43 阅读(1531)

FlexViewer学习讲堂(2

3  模块

在讲解FlexViewer的Wodget开发之前,首先要掌握Flex的模块(Module)技术。模块是Adobe为了解决Flex应用程序文件较大、加载较慢而设计的一种解决方案,其主要思路在于将应用程序分割成几个独立的swf文件,配合延迟策略按需加载,尽可能的保证应用程序的加载时间较短。Widget正是基于Flex 的模块(Module)而构建的。

模块经过编译生成swf文件,它必须经过主程序加载、调用才能;同样当主程序不需要某个模块时,也可以卸载模块,从而释放模块所占用的内存和其它资源。FlexViewer正是基于模块技术,按需加载实现了业务功能的Widget,从而减小了主程序swf文件的体积,并缩短了初始化时的加载时间。

在应用程序中使用模块一般分为两个步骤,即:1、创建模块,并编译成swf文件;2、在主程序中调用模块,并与模块通信。

1、创建模块可通过继承Flex提供的Module类,如图1所示;在弹出的对话框中输入模块名称,并选择调用该模块的主程序。

图1 创建模块

    2、在代码编辑器中可以看到新建模块的代码。本示例在模块中添加了一个标签(Label),如下代码所示:

<?xml version="1.0" encoding="utf-8"?>

<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="400" height="300">

<fx:Declarations>

</fx:Declarations>

<s:Label text="Test Module" horizontalCenter="0"/>

</mx:Module>

3、在项目的属性对话框中,选择Flex Modules,在右侧的列表中是当前项目中的所有模块列表。只有出现在该列表中的模块,编译时才会把模块单独编译成swf文件。单击Add按钮,添加模块。如图2所示。

图2 添加模块列表

4、在模块创建完成后,接下来就是在主程序中加载模块,可以通过Flex提供的处理模块的ModuleManager完成,主要代码如下:

privatevar moduleInfo:IModuleInfo;

protectedfunction init(event:FlexEvent):void

           {

               moduleInfo=ModuleManager.getModule("widgets/TestModule.swf");

               moduleInfo.addEventListener(ModuleEvent.READY,onModuleReady);

               moduleInfo.load(null,null,null,moduleFactory);

           }

protectedfunction onModuleReady(event:ModuleEvent):void

           {

var info:IModuleInfo=event.module;

var element:IVisualElement=info.factory.create() as IVisualElement;

if(element)

               {

this.addElement(element);

               }

           }

4  理解Flex Viewer配置文档

在讲堂1中已经讲到,Flex Viewer中有一个config.xml配置文档,开发人员可通过配置文档,灵活地配置程序的界面效果、功能组件等。支撑该框架的关键即是模块的动态加载和配置文档的解析。在config.xml中包含很多节点,这些节点大致可以分为四类:程序的一般属性、组件、地图图层和业务逻辑组件(Widget)。

1、程序的一般属性包括:大标题、小标题、图标、字体、样式以及全局的Geometry Service等,如下:

   <title>      大标题

   <subtitle>   小标题

   <logo>  图标

   <style>  样式

<geometryservice>  Geometry Service的REST地址

2、程序的界面属性主要指界面的UI组件,其中包括:HeaderController、地图导航器、鹰眼视图等,它们都是位于独立的<widget>节点下(不是位于widgetcontainer节点中),其中包括left、right、top、bottom、url等属性,如下示例:

<widget left="190"  top="50"    config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf"/>

<widget right="-2" bottom="-2" config="widgets/OverviewMap/OverviewMapWidget.xml" url="widgets/OverviewMap/OverviewMapWidget.swf"/>

<widget right="20" top="55"    config="widgets/MapSwitcher/MapSwitcherWidget.xml" url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>

3、地图及图层配置信息位于<map>节点中,其标签有多个属性:initialextent、fullextent、center、level等。Flex Viewer把地图图层分为两类:背景基础图层(basemaps)和业务操作图层(operationallayers)。

<basemaps>标签(背景基础图层)通常作为背景,其标签中可包含多个<mapservice>子标签,每一个<mapservice>子标签对应一个地图服务。<mapservice>子标签的属性包括label、type、visible、url等,其中type表示地图服务的类型,如dynamic、tiled、bing、feature、image等;url则是地图服务对应的REST服务接口。如下示例:

<mapservice  label="China"  type="dynamic"  visible="true" url="http://localhost/ArcGIS/rest/services/WebChina/MapServer" />

<operationallayers>标签是业务操作图层,该标签中包含了多个<layer>子标签。该子标签同<mapservice>子标签相同,包括label、type、visible、url等属性。如下示例:

<operationallayers>

    <layer label="Country" type="feature" visible="true" mode="snapshot"  

               url="http://localhost/ArcGIS/rest/services/WebWorld/MapServer/3"/>

</operationallayers>

4、业务功能组件所对应的节点是<widgetcontainer>节点,该标签可以看作是业务功能组件的容器,也就是Widget的容器。该节点中包含了Widget的标签、图表、配置文档(config)、以及url属性,其中url即是Widget模块编译之后的swf文件。关于Widget,我们将在下一讲中重点讲到。业务功能组件的节点示例如下:

<widgetcontainer layout="float">

       <widget label="Bookmarks"    left="430" top="90"

               icon="assets/images/i_bookmark.png"

               config="widgets/Bookmark/BookmarkWidget.xml"

               url="widgets/Bookmark/BookmarkWidget.swf"/>

       <widget label="Draw and Measure" left="60" top="400"

               icon="assets/images/i_draw2.png"

               config="widgets/Draw/DrawWidget.xml"

               url="widgets/Draw/DrawWidget.swf"/>

</widgetcontainer>

作者:周岳昆 邮箱:actc@lreis.ac.cn

HiGIS技术交流QQ群:336076300

关键词:FlexViewer、模块、配置

中科地理信息系统培训中心-原创文章
转载请注明出处:www.higis.cn/Tech/tech/tId/18/

创新地理知识,共享地理价值

http://www.higis.cn

中科地理信息系统培训中心

关于我们

gis培训

苏州高新区中科地理信息系统培训中心是“国家专业技术人员继续教育基地”指定培训点,是3S方向唯一指定的培训点。同时也是国内唯一获得Esri授权的ArcGIS专业培训与认证机构,为广大用户提供ArcGIS培训、开发和咨询服务,中心已经为中国用户服务20年...详细情况...

联系方式

Email:actc@lreis.ac.cn
苏州总部电话: 0512-68076858
        0512-68075672
北京分部电话: 010-64855687
苏州总部地址:苏州市高新区科灵路78号苏高新软件园5号楼3层
北京分部地址:北京市朝阳区大屯路甲11号中科院地理所2406

顶部 返回
地理信息系统国际培训中心