11 Replies Latest reply on Jul 25, 2007 2:18 PM by TheTyrant

    Adding/Removing from a ViewStack

    TheTyrant
      Hi,

      I've got a ViewStack tied to a LinkBar:

      <mx:LinkBar dataProvider="{steps}" direction="vertical" styleName="wizNavigator" id="stepsLinkBar"/>
      <mx:ViewStack id="steps" height="100%" width="100%" change="onChangeWizardStep(event)">
      <local:ReqWizardStep1/>
      <local:ReqWizardStep2/>
      <local:ReqWizardStep3/>
      <local:ReqWizardStep4/>
      <local:ReqWizardStep5/>
      <local:ReqWizardStep6/>
      </mx:ViewStack>

      Everything works great until I try and programatically remove an item from the ViewStack:

      parentDocument.steps.removeChildAt(3)

      The list of items in the LinkBar changes appropriately, but items that were marked enabled="false" previously suddenly become re-enabled, and the bindings on the removed child continue to run, which is causing other errors.

      I found the following in LiveDocs:
      "A LinkBar control creates LinkButton controls based on the value of its dataProvider property. Even though LinkBar is a subclass of Container, do not use methods such as Container.addChild() and Container.removeChild() to add or remove LinkButton controls. Instead, use methods such as addItem() and removeItem() to manipulate the dataProvider property."

      This doesn't make a whole lot of sense to me, as neither the LinkBar nor the ViewStack have addItem/RemoveItem methods.

      Any help would be greatly appreciated.
        • 1. Re: Adding/Removing from a ViewStack
          JabbyPandaUA Level 3
          You should use addItem and removeItem on dataProvider property of mx: Linkbar

          stepsLinkBar.dataProvider.addItem(myItem)
          stepsLinkBar.dataProvider.removeItem(myItem)
          • 2. Re: Adding/Removing from a ViewStack
            TheTyrant Level 1
            I tried that, but all I get is "removeItem is not a method of class ViewStack"
            • 3. Re: Adding/Removing from a ViewStack
              TheTyrant Level 1
              More specifically...this is the exact error when I try to use stepsLinkBar.dataProvider.removeItem(myItem):

              ReferenceError: Error #1069: Property removeItem not found on mx.containers.ViewStack and there is no default value.
              at ReqWizardStep1/::onChangeServiceMethod()
              at ReqWizardStep1/___ComboBox3_change()
              at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
              at flash.events::EventDispatcher/dispatchEvent()
              at mx.core::UIComponent/dispatchEvent()
              at mx.controls::ComboBox/::dispatchChangeEvent()
              at mx.controls::ComboBox/close()
              at mx.controls::ComboBox/::dropdown_changeHandler()
              at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
              at flash.events::EventDispatcher/dispatchEvent()
              at mx.core::UIComponent/dispatchEvent()
              at mx.controls.listClasses::ListBase/mx.controls.listClasses:ListBase::mouseUpHandler()
              at mx.controls::List/mx.controls:List::mouseUpHandler()
              • 4. Re: Adding/Removing from a ViewStack
                ntsiii Level 3
                Yeah, LinkBar is weird in that its dataProvider is the viewstack and not a normal data source.

                Instead, just use removeChild() and removeChildAt, which are method directly on the ViewStack container. The linkbar should update automatically

                Tracy
                • 5. Re: Adding/Removing from a ViewStack
                  TheTyrant Level 1
                  Right...that's my problem. removeChild and removeChildAt don't work properly. When I use them, I get the issues I reported originally. LiveDoc mentions that when using these methods on a ViewStack the child doesn't actually get removed. It's parent is just set to null. Thus any listeners set to run in the removed child still run, and cause errors.

                  LiveDocs says that if I want it truely removed, I should manually destroy it, but makes no mention of how that might be accomplished. I attempted to do so by assigning an ID to the item I wanted destoryed and doing:

                  parentDocument.childToBeRemoved = null

                  This had no effect.
                  • 6. Re: Adding/Removing from a ViewStack
                    ntsiii Level 3
                    Ah, sorry, I didn't read far enough back up the chain. I'll post if if I can figure anything out.

                    Tracy
                    • 7. Re: Adding/Removing from a ViewStack
                      TheTyrant Level 1
                      Thanks Tracy. This has been a rather frustrating issue...
                      • 8. Re: Adding/Removing from a ViewStack
                        JabbyPandaUA Level 3
                        OK, right, I gave a wrong advice at my previous post.

                        Try this sample of code, works for me:

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                        <mx:Script>
                        <![CDATA[
                        protected function onRemove() : void {
                        steps.removeChildAt(0);
                        }
                        ]]>
                        </mx:Script>
                        <mx:LinkBar dataProvider="{steps}" direction="vertical" id="stepsLinkBar"/>
                        <mx:ViewStack id="steps" height="100%" width="100%">
                        <mx:Box label="1"/>
                        <mx:Box label="2"/>
                        <mx:Box label="3"/>
                        <mx:Box label="4"/>
                        <mx:Box label="5"/>
                        <mx:Box label="6"/>
                        </mx:ViewStack>
                        <mx:Button id="button" label="Remove" click="onRemove()">

                        </mx:Button>
                        </mx:Application>
                        • 9. Re: Adding/Removing from a ViewStack
                          TheTyrant Level 1
                          Well...I've circled back to this issue. The steps outlined by JabbyPandaUA, above, are exactly the steps I've been adhering to all along, and my problem persists.
                          • 10. Re: Adding/Removing from a ViewStack
                            JabbyPandaUA Level 3
                            You said:
                            "but items that were marked enabled="false" previously suddenly become re-enabled, and the bindings on the removed child continue to run, which is causing other errors"

                            Can you post some code for me in order to test this code against Flex 2.0.1?
                            • 11. Re: Adding/Removing from a ViewStack
                              TheTyrant Level 1
                              This appears to be a problem specific to the LinkBar. I swapped it out for some of the other controls (TabBar, et al) and the problem does not persist. Here's a small app wich demonstrates the problem. Just change the values in the ComboBox to see the enabled/disabled state of the link bar items get messed up.

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                              <mx:Script>
                              <![CDATA[
                              import mx.containers.Canvas;
                              private function toggleSteps(evt:Event):void{
                              switch(evt.target.selectedItem.value){
                              case 5:
                              this.steps.removeChildAt(3)
                              break;
                              case 6:
                              var canvas:Canvas = new Canvas()
                              canvas.label = 'Step 4'
                              var text:Text = new Text;
                              text.text = 'Step 4'
                              canvas.addChild(text)
                              this.steps.addChildAt(canvas,3)
                              break;
                              }
                              }
                              ]]>
                              </mx:Script>
                              <mx:VBox>
                              <mx:ComboBox change="toggleSteps(event)">
                              <mx:dataProvider>
                              <mx:Array>
                              <mx:Object value="6" label="6 Steps"/>
                              <mx:Object value="5" label="5 Steps"/>
                              </mx:Array>
                              </mx:dataProvider>
                              </mx:ComboBox>
                              <mx:LinkBar dataProvider="steps"/>
                              <mx:ViewStack id="steps" height="100%" width="100%">
                              <mx:Canvas label="Step 1" height="100%" width="100%">
                              <mx:Text text="Step 1"/>
                              </mx:Canvas>
                              <mx:Canvas label="Step 2">
                              <mx:Text text="Step 2"/>
                              </mx:Canvas>
                              <mx:Canvas label="Step 3">
                              <mx:Text text="Step 3"/>
                              </mx:Canvas>
                              <mx:Canvas label="Step 4">
                              <mx:Text text="Step 4"/>
                              </mx:Canvas>
                              <mx:Canvas label="Step 5" enabled="false">
                              <mx:Text text="Step 5"/>
                              </mx:Canvas>
                              <mx:Canvas label="Step 6" enabled="false">
                              <mx:Text text="Step 6"/>
                              </mx:Canvas>
                              </mx:ViewStack>
                              </mx:VBox>
                              </mx:Application>