Remove a UI element

[philippschnetzer]

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!

[RobertScheitlin__GISP]

Phillip,

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

1. 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"/>



2. Change the WidgetManager.mxml getWidgetId function to this:

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


            {
                var id:Number = Number.NaN;
                if (isController){
                    for (var i:Number = 0; i < configData.controls.length; i++)
                    {
                        if (configData.controls.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;
            }

3. 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;

[philippschnetzer]

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?

[RobertScheitlin__GISP]

Phillip,

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

[philippschnetzer]

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.....

[RobertScheitlin__GISP · Accepted solution]

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();