FlexViewer开发教程

所需积分/C币:10 2015-05-26 10:30:11 1.18MB PDF
2
收藏 收藏
举报

FlexViewer开发教程,对FlexViewer框架进行了深入浅出的论述。是flex开发必备的文档资料
F| ex Viewer的设计原则是 SIMPLICITY(简单)。因为简单原则, Flex viewer易于 部署、配置和扩展。为了达到“简单”这个目的, Flex viewer在设计和实现上木 引入第三方框架。但是从其框架结构上,我们能捕捉到一·些Flex框架中最佳实践 的影子,比如事作机制就与 PureMVc中的 Notification机制类似。 其实, Flex viewer本身就可以被认为是一个框架。在这个框架基础上,可以通过 扩展快速实现业务系统原型。本文档将详细介绍如何在“简单”原则下实现自定 义 Widget,以及 Widget如何与其它模块交互。 说明 本文档使用的代码位于 widgets. FlexviewerIn Action月录下。 1 Flex viewer配置文件 Flex viewer通过配置文件配置系统数据和功能,配置文件内容如下: < xml version=1.0?> figuration <title>ArcGIS Viewer for Flex</title>( title configurable web mapping application</subtitle> loco>assets/images/logo. png</logo>8 <style co1ors>0×FF彐FFF,0×333333,0×101010,0×000000,0xFFD700</c01ors> <alpha.8</aloha> style> key="AlovE jsmagxk4LFghXGIKSJSHECOtk-eHRubZv eMYm6wzgQastIks8g-w Wcak3"1/> UI elements -- <widget left=10" top-50 config="widgets/Navigation/Navigationwidget xml url="widgets/Navigation/NavigationWidget swf"/>5 <widget right=-2 bottom=-2 config-"widgets/OverviewMap /OverviewMapwidget xml't url-"widgets/OverviewMap/ OverviewMapWidget swf"/>6 <widget right=20 0p=55 config-"widgets/Mapswitcher/MapSwitcherwidget xml ar1="widgets/ MapSwitcher/ tcherWidge <widget left="0" top="0 onfig="widgets/HeaderController/HeaderControllerwidget xm1 url=widget./HeaderController/HeaderControllerwidget swf"/>8 < map initia1 extent="-140830003139000-108790005458000"tcp="40" wraparound180=true <oasemaps> layer abel=Streets type="tiled" visible=true alpha="1 url=http://server.arcgisonline.com/arcgis/rest/seRvices/ World Street Map/ MapServer"/> yer abel="Aerial type=tiled" visible="false Ipha="I arl="http://server.arcgisonline.com/arcgts/rest/serVices/ World Imagery / MapServer/> <layer label=Iopo" type= tiled" visible=false" alpha="1 arl=http://server.arcgisonline.com/arcgis/rest./sErvices/ World Topo Map/MapServer"/> </basemaps> Koperationallayers> <layer Label="Boundaries and Places" type="tiled" visible=mfalse' url=http://server.arcgisonline.com/arcgis/rest/seRvices/ Reference/World Boundaries and Places Alternate/Mapserver layer label="Fires" type=feature visible="false I pha= 1 info-"widget/InfoTemplates/simpleInfcWinwidget swf nfoconfig="widgets/InfoTemplates/IWI Fires. xIm url-http://sampleserver3.arcgisonline.com/arcgis/rest/sE rvices/Fire/Sheep/Featureserver/0"/> </operationallayers> <!-- widgets organized into widget containers that manage close/open ported layout pre t⊥ons: horizontal (default)lfI verticallfix <widgetcontainer layout=horizontal> <widget label="Bookmarks h left=430 top=90 icon="assets/images/i bookmark. png config="widgets/Bookmark/Bookmarkwidget xml url="widgets/Bookmark/BcokmarkWidget swf"/> get. label=Find an addres t="100"tp="90 preload-"open" icon-"assets/images/i target. png fig="widgets/Locate/Locatewidget Bing xml diets/locate/located < widget label="louisville Police "left=590" top=280 Icon=ll assets/images/i police. png config="widgets/Query/Querywidget Louisville Pclicestationsx 1=widgets/Query/QueryWidge <widget label="Search" left=80 top=280 icon="assets/images/i search. png config=widgets/Search/Searchwidget Louisville xml url="widgets/Search/SearchNidget swE"/> <widget label=Earthquakes (GeoRSS) left=410 top=280 con="assets/images/i rss. png" fig="widgets/GeoRSS/GeoRSSWidget xml dgets/ GeoRSS/GeoRSSWidget swf <widget label="Draw and Measure" left=60 top=400 sets/images/i dra fig-"widgets/Draw/Drawwidget arl=widgets/Draw/Drawwidcet swf"/> get label-"Print left=390 top=400 icon="assets/images/i print pn onfig="widgets/Print/Printwidget xml arl=widgets/Print/Printwidget swf"/> </widgetcontainer> </confiquration> ① title: Flex viewer自带 Banner实现的标题 ② subtitle: Flex viewer自带 Banner实现的副标题; ③logo: Flex viewer自带 Banner实现的Logo图标; ④stye:用来设置全局的组件样式,具体详见∪ IManager代码; ⑤⑥⑦⑧U| Elements:指 Control Widget,比如 HeaderS。 ntrollerWidget、 Navigation Widget等这些提供系统级别功能的 Widget; ⑨map: Flex viewer用来设置地图属性,包括底图、业务图层; ⑩0 widgetcontainer: Business Widget的容器,用来管理 Business Widget, Business Widget指提供业务功能的 Widget。 上述配置文件并末使用到所有可用的属性,比如在 style中设置font属性,map 屮设置 fullextent等,此处不一一列举,详见 Config Manager代码。 需要说明的是,基于 Flex viewer开发业务系统,一般通过实现自定义的 Business Widget来实现具体的业务功能,通过修改或者自定义 Control Widget实现符合需 求的系统级别功能组件。所以,配置文件中的前三项并不是必须的,通常我们的 业务系统需要更具特色的 Banner实现。F| ex viewer各部分与配置文件的对应关 系见下图: 10 的订拍面了 Data i 2 Widget配置文件 在 Flex viewer的设计中,每个 Widget都可以有一个配置文件,来配置 Widget 所需要的各种资源,提倡的做法是配置文件名与 Widget名称保持·致,并且位 于同一目录下。当然, Widget的配置文件不是必须的,当不需要配置信息时 配置文件可省略。在《 Flex viewer解析》中,我们以 Hello Worldwidget为例,说 明如何在 Flash builder中实现自定义 Widget。下面我们同样以 HelloWorld Widget 为例,来说明 Widget如何从其配置文件获取资源信息 先来看下 HelloWorldWidget xm,也就是配置文件的内容: <?xml version=1. 0 <configuration> <hellocontent>Hello, Flex viewer!s/hellocontent> </configuration> 再来看一下 HelloWorldwidget的实现代码,如下: <?xmI version="1.0" encoding=utf-8"?> <viewer:Basewidgetxmlns:fx=http://ns.adobecom/mxm1/2009 xmlns:s="library://ns. adobe. com/flex/spark xmlns: mx="library: //ns. adobe. com/flex/mx xmlns: viewer=com. esrl vlewer.*n layout-absolute width=400 height-"300 widcetconfigLcaded="init()">O fx: Script <! ICDATA L [Bindable] private var helloConcent: stringi private function inic(): void(2 f (configXML)I hellocontent=String(configXML hellocontent): 4 Ex: Scr viewer: WidgetTemplate> <s: HGroup width="100 height=100 horizontalAlign="center verticalAligr="middle> <s: Label text="thelloCortent"/ </s: HGroup> </viewer: WidgetTemplate> </viewer: BaseWidget> ① widgetConfigLoaded事件 widget ConfigLoaded事件是 Base widget中设计的一个事件,用来说明 Widget 对应的配置文件已经成功读取通常在这个事件的响应方法屮解析ⅩML数据, 获取所需的资源信息。如果自定义 Widget需要配置文件中的信息,如①所示, 设置 widgetConfigLoaded事件的响应方法即可。 ②响应方法 widgetConfigLoaded事件的响应方法,在该方法中对XML配置信息进行解析。 ③ configXML对象 Midget配置文件是个XML文档, configXML是在 Base Widget中定义的XML 对象,用来表示配置文件的XML数据。通常, widget configLoaded事件的响 应方法中,直接访问 configXML即可 ④解析配置信息 从 config XML中获取所需资源信息,此处是 Action Script中对于XML数据的操 作,可参考相关教程 ⑤使用配置信息 配置信息可以有多种使用方式,此处只是简单的把字符串信息显示出来。除 此之外,配置信息可以是各种资源的url、对 Timer设置的时间间隔等等。 在具体系统的开发过程中,应尽可能多的将 Widget用到的资源放到配置文件中, 这样的话,即便在系统交付之后,用户可以通过修改配置文件达到特定需求,而 不需要更改源代码。下图是 Helloworldwidget打开时的画面 Helloworld Hello. Flex viewer! 500km m 6 3 Widget g WidgetTemplate HelloWorld Widget中短短几行代码,却能实现如此cool的·个 Widget,这要归 功于 WidgetTemplateo WidgetTemplate是 I WidgetTemplate接口的默认实现,提 供组成 Widget的各个部分,包括标题栏、内容面板、控制按钮、工具按钮、 Widget 图标等等。Wdge将 Widget Template作为Ul容器,比如在 HelloWorld Widget中, 我们将显示信息的Labe放在 WidgetTemplate中。当然,也可以实现自定义 Widget Template,只要实现 IWidgetTemplate接口即可。在 Flex viewe2.0以后, Widget Template的外观通过皮肤(Skin)来定义,详见 WidgetTemplate Skin代码。 要想实现其它风格的 Widget Template,自定义一个 Widget TemplateSkin即可。下 图是一个自定义 Widget Template Skin的效果。 HellowidgetTemplate 日er 5 Hello, WidgetTempla sal go Widget Template定义了三个事件:打开(open)最小化( minimized)、关闭( closed)。 这三个事件分别在 Widget打开、最小化和关闭的时候发生。这三个事件在某些 特殊业务需求下能发挥很大的作用,比如某个 Widget对应的一个 GraphicsLayer (见 ArcGis API for flex),当 Widget打开时需要显示,当 Widget最小化或者关闭 时需要隐藏。此需求可以分别在三个事件的响应方法中实现。在 Hellowidget Template Widget中我们分别对三个事件进行响应,每个响应中显示 个弹出框来说明当前所发生的事件类型。窗口打开时的情形如下图所示 Cardan HellowidgetTemplate fancl HellowidgetTemplateWidget open Hello, WidgetTemplate Vegas Flagstaff Prescott AR∠ONA ings Angeles Phoenix lellowidgetTemplate widget代码如下: <?xml version-10 encoding=utf-8"?> <viewer:Basewidgetxnlns:fx="http://ns.adobecom/mxm1/2009 Ins: s ry: //ns. adobe. com/flex/spar xmlns: mx="library: //ns. adobe. com/flex/mx xmlns: viewer=com. esri, viewer. A layout=absolute width=400 height=300 wiacetConfiglcaded=init() pt [CDA冖A[ import m.x. controls.Alert [Bindable] private var he l loConzent: Stringi private function ini=(): void if (configXMl)( helloContent=String(configXML. hellocontent) private function openEandler(): void(5

...展开详情
试读 29P FlexViewer开发教程
立即下载
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 分享精英

关注 私信
上传资源赚钱or赚积分
最新推荐
FlexViewer开发教程 10积分/C币 立即下载
1/29
FlexViewer开发教程第1页
FlexViewer开发教程第2页
FlexViewer开发教程第3页
FlexViewer开发教程第4页
FlexViewer开发教程第5页
FlexViewer开发教程第6页

试读结束, 可继续读3页

10积分/C币 立即下载