Closing Multiple Widgets

CraigPlacek

I am developing a set of themes for a project that the user can choose within the Flex viewer.  Each theme will have a certain set of widgets available in the header.  When the user moves from one theme to the next I loop through the widgets that are currently loaded from the header and determine which should be closed because the next selected theme does not include them.  I am dispatching the MouseEvent.Click on the closeButton of the widget template for each of the widgets that I close.  This works when there is only one that needs to be closed, but when there is more than one only one closes properly and the remaining widgets that were dispatched to close, everything accept the background of the widget appears to unload (looks like a widgettemplate but there are no close or minimize buttons... nothing remains).  I attached 2 images that show a before and after look at what happens to the widgets affected.

I have developed a work around for this by creating a timer for each of the widgets that need to be closed and running the function on them at least a second apart from one another, and they all close using that as a solution.  But it slows down the process.

Has anyone seen the behavior I described when closing multiple widgets within a function?

widgets-after.jpg

widgets-before.jpg

Anonymous User

Original User: mehu11111

TO CLOSE MULTIPLE WIDGETS:

In your widget :
--------------

var widgetIdxUnLoadArray:Array = [6,7,8];
private var closeMultiple:Boolean = false; 

          protected function button2_clickHandler(event:MouseEvent):void
              
           {
               closeMultiple = true;
               preUnloadNextWidget();
           }
           
           private function preUnloadNextWidget():void
          {
               if (widgetIdxUnLoadArray.length > 0)
               {
                   var id:Number = widgetIdxUnLoadArray[0];
                   widgetIdxUnLoadArray.splice(0, 1);
                   ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_STOP, id));
               }
           }
           private function myWidgetRemovedHandler(event:AppEvent):void
          {
               if (closeMultiple)
               { 
                   closeMultiple=false;
                   preUnloadNextWidget();
               }
           }

In WidgetContainer.MXML,
-------------
add elementRemove as shown below
 

<s:Group id="widgetContainer"
            width="100%" height="100%"
            left="{_left}" left.collapsedRight="{containerWidth}" left.resized="{_left}" right="{_right}" right.normal="{_right}" right.resized="{_right}" top="{_top}" top.collapsedDown="{containerHeight}" top.resized="{_top}" bottom="{_bottom}" bottom.resized="{_bottom}"
            clipAndEnableScrolling="true"
            elementAdd="widgetAddedHandler(event)"
            elementRemove="widgetRemoveHandler(event)" />

And

protected function widgetRemoveHandler(event:ElementExistenceEvent):void
{
var wObj:IVisualElement = event.element;
ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_REMOVED, wObj));
}

In AppEvent.as
---------

public static const WIDGET_REMOVED:String = "widgetRemoved";
public static const WIDGET_STOP:String = "widgetStopRequested";

In WidgetManager.mxml
----------------
add following line in Init() Method:

 ViewerContainer.addEventListener(AppEvent.WIDGET_STOP, onStopWidget);

Add following method:

private function onStopWidget(event:AppEvent):void
          {
               var id:Number = event.data as Number;
               var idx:Object = configData.widgetIndex[id];
               
               var wgtContainer:IWidgetContainer = configData.widgetContainers[idx.container].container.obj;
               var wgt:Object = configData.widgetContainers[idx.container].widgets[idx.widget];
               
               widgetAdded = false;
               
               var widget:IBaseWidget;
               if (widgetTable.containsKey(id))
               {
                   widget = widgetTable.find(id) as IBaseWidget;
                   widget.setState(BaseWidget.WIDGET_CLOSED);
               }
         
}

TO OPEN MULTIPLE WIDGETS

Add following code in widget

<s:Button label="Open Multiple Widget" click="button1_clickHandler(event)" />
 
var widgetIdxArray:Array = [6,7,8]; // 6,7,8 are widget Ids. This can be obtained from configData object
           protected function button1_clickHandler(event:MouseEvent):void
          {
               ViewerContainer.addEventListener(AppEvent.WIDGET_ADDED, myWidgetAddedHandler);
               preloadNextWidget();
           }
           
           private function preloadNextWidget():void
          {
               if (widgetIdxArray.length > 0)
               {
                   var id:Number = widgetIdxArray[0];
                   widgetIdxArray.splice(0, 1);
                   ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, id));
               }
           }
           private function myWidgetAddedHandler(event:AppEvent):void
          {
               preloadNextWidget();
           }

hope this helps.