`
honley
  • 浏览: 118441 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

FlexViewer优化之HeaderControlWidget和Widget开关闭

 
阅读更多

FlexViewer是个非常优秀的ArcGIS地图开发框架,但其中有些地方如果作部分调整,功能上或者交互上会有很大提升。本此主要修改HeaderControlWidget打开和关闭Widget的功能,以及Widget打开和关闭的功能优化。

 

 

在FlexViewer2.4、FlexViewer2.5,、FlexViewer3.0中,HeaderControlWidget中只能打开Widget,并不能关闭打开的Widget。

=================HeaderControlWidget中Widget的打开与关闭==============

做如下修改,即可实现HeaderControlWidget中Widget的打开与关闭:

1)修改HeaderControllerWidget.mxml中的widgetItemDG_widgetItemClickHandler(event:Event)方法。

 

private function widgetItemDG_widgetItemClickHandler(event:Event):void

            {

                var widgetItem:WidgetItem = ItemRenderer(event.target).data as WidgetItem;

                if (widgetItem.isGroup)

                {

                    groupWidgetArrCol = new ArrayCollection();

                    // check the array of widgets if they are open before hand

                    for each (var widgetObj:Object in widgetItem.widgets)

                    {

                        var widgetItem1:WidgetItem = new WidgetItem;

                        widgetItem1.id = widgetObj.widget.id;

                        widgetItem1.label = widgetObj.widget.label;

                        widgetItem1.icon = widgetObj.widget.icon;

                        widgetItem1.url = widgetObj.widget.url;

                        widgetItem1.open = widgetObj.open;

 

                        groupWidgetArrCol.addItem(widgetItem1);

                    }

                    menuToolTip.visible = false;

                    widgetList.visible = true;

                }

                else

                {

             if (!widgetItem.open)

            {

                AppEvent.dispatch(AppEvent.WIDGET_RUN, widgetItem.id);

            }        

           else

           {

          AppEvent.dispatch(AppEvent.WIDGET_CLOSE, widgetItem.id);

           }

                }

            }

2)修改WidgetItemDataGroupRenderer.mxml中的

 private function itemrenderer_clickHandler(event:MouseEvent):void

   {

      if (!WidgetItem(data).open)

         {

           moveEffect.end();

            moveEffect.play();

         }

else{

dispatchEvent(new Event(WIDGET_ITEM_CLICK, true));

}

  }

 

 

=======================Widget中图片按钮的打开与关闭功能====================

1)修改WidgetTemplateSkin.mxml

    <mx:Image id="icon"

              x.minimized="10" x.open="-20" y="12" y.minimized="-2" width="40" height="40"

              buttonMode="true"

          useHandCursor="true"

              source="{hostComponent.widgetIcon}"

              visible="{hostComponent.enableIcon}"

              visible.closed="false">

        <mx:filters>

            <mx:DropShadowFilter blurX="10" blurY="10"/>

        </mx:filters>

    </mx:Image>

 

2)修改WidgetTemplate.as

    protected function icon_clickHandler(event:MouseEvent):void

    {

        if (_baseWidget)

        {

       if (_baseWidget.getState()== WIDGET_OPENED)

        {

       minimize_clickHandler(event);

       return;

        }

       else if (_baseWidget.getState()== WIDGET_MINIMIZED)

        {

            _baseWidget.setState(WIDGET_OPENED);

        this.widgetFrame.toolTip = "";

        this.icon.toolTip = "";

}

        }

    }

 

分享到:
评论
1 楼 bcabchappy 2013-01-18  

相关推荐

    FlexViewer解析之示例源码

    FlexViewer解析之示例源码,是一篇详细介绍FlexViewer从基础概念到架构设计再到自定义和扩展的详细文章。FlexViewer,是基于ArcGIS API for Flex(简称AGSFlexAPI)设计的一个WebGIS应用程序。最初的版本为...

    flexviewer widget自由移动代码

    在FlexViewer应用开发中,创建自定义的可自由移动的Widget是提高用户体验的重要一环。FlexViewer是一款基于Adobe Flex技术的轻量级GIS(地理信息系统)应用框架,它允许开发者构建交互式的地图应用。本教程将详细...

    FlexViewer开发教程开发指南和相关实例

    2. 性能调优:优化代码,减少不必要的计算和网络请求,提升应用响应速度。 八、部署与测试 1. 将编译后的SWF文件和相关资源部署到Web服务器上。 2. 使用浏览器测试应用,确保所有功能正常运行。 通过这个...

    ESRI-FlexViewer解析

    - Widget间通信:FlexViewer支持Widget之间直接和间接的通信机制,使得组件之间的信息交换变得灵活和高效。 了解FlexViewer的这些知识点对于开发和应用基于此平台的Web GIS应用至关重要。无论是在进行系统定制、...

    FlexViewer开发教程

    FlexViewer是一个针对GIS(地理信息系统)应用开发的框架,它允许开发者通过简单的配置就能快速部署和开发Web Mapping应用。FlexViewer设计的核心原则是SIMPLICITY(简单),意味着该框架易于使用、配置和扩展,同时...

    FlexViewer解析

    FlexViewer是由Esri公司开发的,它构建在Flash Player之上,利用ActionScript编程语言和Flex框架。由于Flex是MXML和ActionScript的混合,因此FlexViewer的应用程序设计既可以用XML来定义界面布局,也可以用脚本来...

    flexviewer1.3框架源代码

    3. **优化性能**:优化源代码以提高应用程序的加载速度和运行效率。 4. **扩展功能**:引入新的服务接口,实现与其他系统集成,如数据同步、数据分析等。 5. **创建个性化界面**:利用html-template修改用户界面,...

    flexviewer2.3源代码

    `src`目录是源代码存放的地方,这里包含了FlexViewer 2.3的类文件和资源,开发者可以通过阅读和修改这些源代码来定制自己的GIS应用程序。 总的来说,FlexViewer 2.3源代码提供了一个强大的基础,让开发者能够快速...

    flexviewer2.3

    在GIS领域,FlexViewer为地理信息系统提供了强大的可视化和交互能力。 本文将深入探讨FlexViewer2.3的核心特性、主要功能、使用场景以及如何进行二次开发。 1. **核心特性** - **开源**:FlexViewer2.3源码开放,...

    flexViewer 3.1 src

    总之,FlexViewer 3.1 src是一个宝贵的资源,对于想要从事GIS开发,特别是基于Flex和ActionScript的开发者来说,它是理解GIS应用内部工作原理、学习自定义地图功能和提升开发技能的重要参考。通过这个源代码包,你...

    flexviewer简单登陆(新版本能用)

    在FlexViewer的开发中,创建一个简单的登录功能是至关重要的,特别是当涉及到权限控制和用户个性化体验时。这里我们讨论如何在FlexViewer的新版本中实现一个基础的登录系统。 FlexViewer是一个基于Adobe Flex的轻量...

    FlexViewer2.4(用户界面为FlexViewer1.3样式)

    FlexViewer2.4相较于1.3版,通常会包含更多的功能和改进,如性能优化、新API的引入或UI元素的更新。但在这个项目中,开发者选择回归到1.3的界面设计,可能是因为用户更熟悉旧版界面,或者1.3的界面布局更适合特定的...

    FlexViewer2.5

    7. **兼容性和性能优化**:FlexViewer2.5在保持良好兼容性的同时,也注重性能优化,确保在不同设备和浏览器上运行顺畅。 8. **API文档与示例**:Esri提供了详尽的API文档和示例代码,帮助开发者快速掌握FlexViewer...

    flexviewer2.2

    总的来说,FlexViewer 2.2 是一个学习和实践GIS Web开发的理想平台,通过深入研究其源代码,开发者可以提升在Flex和ArcGIS API for Flex方面的技能,同时也能了解到如何构建高效、可定制的地图应用。

    flexviewer-3.0-src 源码

    flex viewer 3.0 源码 下载

    FlexViewer开发者帮助

    - **Widget编程模型**:Widget是Sample Flex Viewer的核心组成部分之一,这一章节详细介绍了Widget的创建、配置和使用方法。 - **Widget命名规范**:为了确保代码的一致性和可维护性,文档规定了一套Widget的命名...

    flexviewer-2.0beta2-src

    FlexViewer 2.0 Beta2版本的发布,不仅在功能上进行了升级,还对源代码进行了深度优化,为开发者提供了更多的自定义空间和扩展可能性。本文将围绕FlexViewer 2.0 Beta2的源代码进行详尽解析,带你深入理解这一强大的...

    flexviewer-2.4

    1. **性能优化**:FlexViewer 2.4在渲染速度和响应时间上进行了显著的优化,使得地图加载更快,用户操作更加流畅。这对于处理大规模数据和复杂地图应用尤其重要。 2. **用户体验提升**:在界面设计上,2.4版本提供...

    FlexViewer2.3开发教程.rar

    10. **性能优化**:学习如何提高FlexViewer应用的加载速度和运行效率,减少内存占用。 11. **部署**:学习将开发完成的应用部署到Web服务器上,让其他人访问和使用。 这个教程可能还包含了示例代码、问题排查技巧...

Global site tag (gtag.js) - Google Analytics