欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

FlexViewer优化之HeaderControlWidget和Widget开关闭

程序员文章站 2022-07-15 20:14:50
...

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 = "";

}

        }

    }