Constraining number of children in a ViewStack issue

Question

I have the following code to create a ViewStack which is used as a dataprovider for a TabBar:

    <s:TabBar id="objectTab" dataProvider="{vs_objects}"/>
       <mx:ViewStack id="vs_objects" width="100%" />

I want to constrain the number of children the ViewStack to avvoid the tabs going out of the screen when the user opens many tabs without closing any. I attempt to do this by removing the oldest element in the ViewStack when the user opens a new tab and the size of the ViewStack is above 9.

private function openTab(object:Object): void {
  //Create a new NavigatorContent(form) and add it to the ViewStack
  ........
  vs_objects.addChild(form);
  if(vs_objects.numChildren > 9) {
    vs_objects.removeChildAt(0);     
  }
  //vs_objects.selectedChild = form;
  vs_objects.selectedIndex = (vs_Tiltaksbanken.numChildren -1);
}

The image below illustrates my problem, where the dark grey color illustrates the selected Tab. There should only be one selected tab, which works perfectly fine with both the child selection approaches above, when i don't remove a child before selecting a new. When i remove a child and then open a new Tab, the new Tab does not get selected properly, it only gets "painted" in the selected color. In This case Tab 40 is still shown when i open Tab 41 (exceeding 9 tabs). The result of this issue is that Tab 41 is not rendered completely.

enter image description here

Does anyone know how i can fix this problem, or have a different approach for constraining the number of Tab's/ViewStack-children?

UPDATE: The problem was my AS3 code inside the childrens NavigatorContent's that caused the application to behave this way. The solution was using the callLater method:

The solution to my problem was using the callLater method as shown below with Adnan Doric's code example:

 protected function openTab():void
 {
    var form:Container = new Container();
    form.name = "Tab " + counter++;
    vs_objects.addChild(form);
    vs_objects.selectedChild = form;
    callLater(removeTab);
 }
 private function removeTab(): void {
    if (vs_objects.numElements > 10)
      vs_objects.removeElementAt(0);
 }

score 1 · Accepted Answer · answered Mar 07 '12 at 12:35

Try this, even though I'm not sure it is the correct solution, maybe it's better to implement some kind of scrolling.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.core.Container;

            private var counter:int = 1;

            protected function openTab():void
            {
                var form:Container = new Container();
                form.name = "Tab " + counter++;
                vs_objects.addChild(form);
                if (vs_objects.numElements > 10)
                    vs_objects.removeElementAt(0);
                vs_objects.selectedChild = form;
            }

        ]]>
    </fx:Script>

    <s:TabBar id="objectTab" top="32" labelField="name" dataProvider="{vs_objects}"/>
    <mx:ViewStack id="vs_objects" width="100%" />
    <s:Button label="addTab" click="openTab()" />
</s:Application>

Hope that helps :)

Thanks for your answer, but this solution seems to cause the same problem as my intial removeChildAt approach. But your answer combined with a cup of coffee lead me to the solution below. +1 — Sebastian, Mar 07 '12 at 12:55
I don't have two "colored" tabs with my example, but if you fixed your problem, I'm glad it helped you :) — a.s.t.r.o, Mar 07 '12 at 12:58
Adnan Doric: That was what helped me find the answer. Since obviously ur example worked for you, then it had to be something else. The problem was somewhere in the AS3 code inside my child NavigatorContent's that caused an error. This problem was fixed by the callLater method. — Sebastian, Mar 07 '12 at 13:03

Constraining number of children in a ViewStack issue

1 Answers1