技术专栏

gis培训

FlexViewer学习讲堂(3)

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

FlexViewer学习讲堂(3

5  Widget开发

Flex Viewer是由多个Widget组成,这些Widget即是组成系统的独立的业务功能插件。它们的本质就是Flex模块(Module)。Flex Viewer已经提供了框架和事件机制,因此开发者可以基于该框架,更专心地投入到业务功能组件(Widget)上来。从这个意义上讲,Flex Viewer开发其实就是在Flex API基础上Widget开发,并通过框架和事件将Widget与主程序以及Widget之间关联起来,进而快速构建RIA应用。

Widget开发的具体步骤如下:

1、新建MXML Component,输入包的名称widgets.test、名称FirstWidget以及定义宽高。最关键的是:这个Widget必须从父类BaseWidget继承,这样才可以加入到主程序,并与之通信;同时也可获得BaseWidget的map、configXML等重要属性。BaseWidget的本质是一个模块(Module),它定义了所有Widget通用的属性和事件。

图1 新建组件

2、双击FirstWidget.mxml文件,查看其源代码,其根标签就是父类BaseWidget。读者可参照自带的HelloWorldWidget示例,其中WidgetTemplate是Widget模版,用户自定义的各种界面控件都可放在其中,并通过皮肤(Skin)设置样式。

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

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"

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

                  xmlns:mx="library://ns.adobe.com/flex/mx"

                  xmlns:viewer="com.esri.viewer.*"

                  widgetConfigLoaded="init()">

<fx:Script>

       <![CDATA[

//放置AS脚本

       ]]>

</fx:Script>

<viewer:WidgetTemplate id="helloWorld"

                          width="300" height="300">

<viewer:layout>

<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>

</viewer:layout>

<!--此处放置与业务功能相关的各种界面控件-->

</viewer:WidgetTemplate>

</viewer:BaseWidget>

    3、添加业务功能代码。如下示例,添加了一个Button按钮,并为其添加了click事件的处理函数onClick方法。

<s:Button label="显示比例尺" click="onClick()"/>

protectedfunction onClick():void

   {

       mx.controls.Alert.show("当前比例尺为:"+map.scale.toString());

   }

4、设置项目属性的模块列表。右键点击Flex Viewer项目属性,点击左侧Flex Modules,在右侧列表中查找创建的FirstWidget,并将其添加至模块列表中。由于模块是动态按需加载,只有列表中的模块才会编译成swf;只有已编译成swf,主程序才能在需要的时候加载该Widget。

图2 添加模块列表

5、配置config.xml文档。之前已经讲到,该文档是Flex Viewer的主配置文件,程序要加载的Widget也是在该文档中完成的。新建的Widget放置在<widgetcontainer>节点中。示例如下:

<widgetcontainer layout="float">

       <widget label="My Widget" left="430" top="90"

               icon="assets/images/i_widget.png"

               config="widgets/test/FirstWidget.xml"

url="widgets/ test/FirstWidget.swf"/>

</widgetcontainer>

其中,label是Widget的显示标签,left和top表示位置,icon表示图标。最主要的就是url属性,它是Widget编译之后的swf文件。Config节点表示Widget的配置文件(可选),通常用于配置与业务功能(Widget)相关的信息。该配置文件的解析内容,可通过BaseWidget的configXML属性获得。

6、编译项目,运行。点击菜单栏上的Project——Build Project编译整个项目,待编译完成后点击运行或调试按钮,运行效果如下:

图3 运行效果图

至此,Flex Viewer基础入门教程结束了。Flex Viewer作为RIA应用的快速开发框架,国内的诸多Flex地图应用都是以此为原型构建的。稍后,培训中心也将推出FlexViewer的高级案例应用。

 

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

HiGIS技术交流QQ群:336076300

关键词:FlexViewer、Widget、开发

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

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

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

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