3 Replies Latest reply on Sep 10, 2010 12:59 AM by RandomReado

    Removing child content from ViewStack

    RandomReado Level 1

      In my application I can add content inside a ViewStack but when I try to remove it, the app breaks.

       

      // TestProject.mxml (main application)

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx">
          <s:layout>
              <s:VerticalLayout/>
          </s:layout>
          <fx:Script>
              <![CDATA[
                  import com.NewContent;
                 
                  private function addContent():void
                  {
                      var content:NewContent = new NewContent();
                      var navContent:NavigatorContent = new NavigatorContent();
                      navContent.id = 'newContent';
                      navContent.label = 'newContent';
                      navContent.width = Number('100%');
                      navContent.height = Number('100%');
                      navContent.addElement(content);
                     
                      viewStack.addElement(navContent);
                      viewStack.selectedChild = navContent;
                  }
              ]]>
          </fx:Script>
          <mx:ViewStack id="viewStack" width="100%" height="100%">
              <s:NavigatorContent id="defaultContent"
                                  label="defaultContent">
                  <s:Button click="addContent()" label="Add Content"/>
              </s:NavigatorContent>
          </mx:ViewStack>
      </s:WindowedApplication>

       

      // NewContent.mxml (component)

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="100%" height="100%">
          <fx:Script>
              <![CDATA[
                  import mx.containers.ViewStack;
                 
                  public function removeContent():void
                  {
                      ViewStack(this.parent).selectedIndex = 0;
                      this.parent.removeChild(this);
                  }
              ]]>
          </fx:Script>
          <s:Button click="removeContent()" label="Remove Content"/>
      </s:Group>

       

      Any help would be greatly appreciated trying to get this to work (if this is the best way to do it). Thanks in advance.

        • 1. Re: Removing child content from ViewStack
          Subeesh Arakkan Level 4

          Hi ,

           

          Check this code.

          private function addContent():void
          {
               var content:NewContent = new NewContent();
               content.addEventListener("removeMe",onRemove,false,0,true);
               var navContent:NavigatorContent = new NavigatorContent();
               navContent.id = 'newContent';
               navContent.label = 'newContent';
               navContent.width = Number('100%');
               navContent.height = Number('100%');
               navContent.addElement(content);
               
               viewStack.addElement(navContent);
               viewStack.selectedChild = navContent;
          }

          private function onRemove(event:Event):void
          {
               var content:NewContent = event.currentTarget as NewContent;
               content.removeEventListener("removeMe",onRemove,false);
               viewStack.removeChild(content.parent.parent.parent);
          }

           

          //Component

          <?xml version="1.0" encoding="utf-8"?>
          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="100%" height="100%">
               <fx:Script>
                    <![CDATA[
                         public function removeContent():void
                         {
                              dispatchEvent(new Event("removeMe"));
                         }
                    ]]>
               </fx:Script>
               <s:Button click="removeContent()" label="Remove Content"/>
          </s:Group>

           

          To access the NavigatorContent, content.parent.parent.parent is used. I am not sure if there is a better way to access the parent of the child added using addElement() method.

          • 2. Re: Removing child content from ViewStack
            RandomReado Level 1

            Thanks, that works great! Any chance you could explain why 3 parents are used and what each parent is for please?

            • 3. Re: Removing child content from ViewStack
              Subeesh Arakkan Level 4

              I tried content.parent first and it didnt work.I had to debug to find out the actual location of the NavigatorContent in the variable tree. Not sure if there is a property or method which gives a reference to the element Parent.

              1 person found this helpful