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

}

        }

    }