topic Re: Remove a UI element in ArcGIS Viewer for Flex Questions

Remove a UI element

philippschnetzer — Tue, 15 May 2012 18:12:14 GMT

A widget can be closed using something like this:

for each (var widgetId:Number in ViewerContainer.getInstance().widgetManager.getAllLoadedWidgetIds())    {     if(ViewerContainer.getInstance().widgetManager.getWidget(widgetId).widgetTitle == "widget title")      AppEvent.dispatch(AppEvent.WIDGET_CLOSE, widgetId); }

My question: how can this same thing be done for a 'widget' in the 'UI elements' section of config.xml. I used the test open/close widget and found out that these UI elements are not considered widgets at all and the above code does not work for widgets placed in this section....thanks!

Re: Remove a UI element

RobertScheitlin__GISP — Tue, 15 May 2012 18:35:34 GMT

Phillip,

It can be done with a couple of mods to the viewer.

Add a label attribute to your UI element:

<widget label="Navi" left="10"  top="50"    config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf"/>

Change the WidgetManager.mxml getWidgetId function to this:

            public function getWidgetId(widgetLabel:String, isController:Boolean = false):Number

.label == widgetLabel)
                        {
                            id = configData.controls.id;
                        }
                    }
                }else{
                    for (var c:Number = 0; c < configData.widgets.length; c++)
                    {
                        if (configData.widgets.label == widgetLabel)
                        {
                            id = configData.widgets.id;
                        }
                    }
                }
                return id;
            }
Call this code block from some function:
                var cId:Number = ViewerContainer.getInstance().widgetManager.getWidgetId("Navi",true);

                var data:Object = {
                    id: cId,
                    state: WidgetStates.WIDGET_CLOSED
                }
                AppEvent.dispatch(AppEvent.WIDGET_STATE_CHANGED, data); and import this:
import com.esri.viewer.WidgetStates;

Re: Remove a UI element

philippschnetzer — Wed, 16 May 2012 12:06:55 GMT

Perfect! Thank you, Robert!

I am having some troubles trying to get this to work for 2 'widgets' at the same time...can you help me out once more?

Re: Remove a UI element

RobertScheitlin__GISP — Wed, 16 May 2012 12:09:09 GMT

Phillip,

Two at the same time?... Not sure that can be done. Care to share your code?

Re: Remove a UI element

philippschnetzer — Fri, 10 Dec 2021 22:36:19 GMT

Well, I don't have much to share. I thought maybe the following would do the trick but having the Collapse2() there seems to negate Collapse(), meaning the following code only closes the 'Search' widget and leaves the 'TOC' open..

public function Collapse():void
   {
    
   AppEvent.dispatch(AppEvent.MAP_RESIZE,{left: -372, top: 0, right:0, bottom:0});
   
   var cId:Number = ViewerContainer.getInstance().widgetManager.getWidgetId("TOC",true);
   var data:Object = {
    id: cId,
    state: WidgetStates.WIDGET_CLOSED
   }
   AppEvent.dispatch(AppEvent.WIDGET_STATE_CHANGED, data);
   
   Collapse2();  
   }
   
   public function Collapse2():void
   {    
    var cId:Number = ViewerContainer.getInstance().widgetManager.getWidgetId("Search",true);
    var data:Object = {
     id: cId,
     state: WidgetStates.WIDGET_CLOSED
    }
    AppEvent.dispatch(AppEvent.WIDGET_STATE_CHANGED, data);            
   }

Also tried making a duplicate of the arrow image (and placing it overtop of the existing arrow image) and calling Collapse2() when it is clicked but it turns out only the top most image is clickable...

Not much to go on, I know.....

Re: Remove a UI element

RobertScheitlin__GISP — Wed, 16 May 2012 13:04:03 GMT

Phillip,

Try this: There is a slight delay in between them closing but that's just the way it is.

                var cId:Number = ViewerContainer.getInstance().widgetManager.getWidgetId("Navi",true);                 var data:Object = {                     id: cId,                     state: WidgetStates.WIDGET_CLOSED                 }                 AppEvent.dispatch(AppEvent.WIDGET_STATE_CHANGED, data);                                  var timer:Timer = new Timer(501, 1);                 timer.addEventListener(TimerEvent.TIMER_COMPLETE, function():void{                     var cId2:Number = ViewerContainer.getInstance().widgetManager.getWidgetId("headctrl",true);                     var data2:Object = {                         id: cId2,                         state: WidgetStates.WIDGET_CLOSED                     }                     AppEvent.dispatch(AppEvent.WIDGET_STATE_CHANGED, data2);                 });                 timer.start();