Actionscript3.0 addChild removeChild XML

Question

I dont know if for my problem addChild and removeChild method is what i exactly need but as i read around the web that's the technique i need to work with.

This is my Xml file:

<projects>
   <category name = "Branding">
      <project>Logo e effekt Medias1</project>
      <project>Portali Logo1</project>
      <project>Skena  Logo1</project>
   </category>
   <category name = "Web">
      <project>Logo e effekt Medias2</project>
      <project>Portali Logo2</project>
      <project>Skena  Logo2</project>
   </category>
   <category name = "Print">
      <project>Logo e effekt Medias3</project>
      <project>Portali Logo3</project>
      <project>Skena  Logo3</project>
   </category>

From this XML file first of all i am creating an Menu from name attribute of the category and with an for loop i create this menu and it looks like this:

Branding Web Print

After that when i click lets say Branding i create another movieclip and on that movieclip all projects under Branding are displayed. Till here everything is ok.

The problem appears when i click on the other menu. Let's say i click on Web, at this time all projects from Branding stay on the stage plus all projects under web display on the stage. This way all the time i click on the menu new data appear.

Which is the best technique to use so when i click on menu only data related with that category will appear on the stage.

Here you have the link if you want to check my mess: LINK

Answer 1

Well, it's not really about adding or removing children. The real issue is about your development perspective.

First of all, you're building a menu, so let the menu be just that, an Object that sends signals to inform what button has been clicked.

After that, you need some form of container that will display the relevant screen when receiving the menu's message.

This container can contain three screens , Branding , Web & Print.

You can set all this screens visible property to false.

When the container receives the menu information , it sets the selected screen visible property to true and the other screens to false.

This way , you don't have to keep adding or removing children, trying to keep track of your DisplayList structure.

Use Event Dispatching for the menu.

Anyway, here's a rough example, it's not complete but should give you an idea...

public class Menu extends Sprite 
{
    //A basic button instance
    private var button:Sprite = new Sprite();

    //The dispatcher dispatches & listen to events
    //it acts as a connector between your container 
    //and the menu
    private var dispatcher:EventDispatcher;

    //The menu will be created in the Container
    //the dispatcher will be passed as a parameter
    //this is the connection between the two classes
    //Please note that there are other ways to achieve
    //a similar result..
    public function Menu (dispatcher:EventDispatcher) 
    {
        //assign the dispatcher instantiated in the container
        //to a variable in order to manipulate it in this class
        this.dispatcher = dispatcher;

        //takes care of creating the menu
        createMenu();
    }

    private function clickHandler( event:MouseEvent):void
    {
        //each time a button is click an event is dispatched
        //that contains the name of the clicked button
        dispatcher.dispatchEvent
                ( new MenuEvent(event.currentTarget.name));
    }

    private function createMenu():void
    {
       //here you load the XML, create the buttons
       // and add the event listeners

       //this is just an example for the logic
       //it's irrelevant since the button will 
       //be created from the XML
        button.name = "Branding";
            addChild( button );
            button.addEventListener
                ( MouseEvent.CLICK , clickHandler );
    }
}


public class Container extends Sprite 
{
   private var button:Sprite = new Sprite();

   //Here we instantiate a dispatcher
   private var dispatcher:EventDispatcher = new EventDispatcher;
   private var menu:Menu;

   //a basic screen instance that could contain
   //all that has to do with Branding for instance
   private var screen1:Sprite = new Sprite();
   //etc...

   public function Container () 
   {
        //The dispatcher is set to listen to the events 
        //dispatched in the Menu class
        dispatcher.addEventListener( MenuEvent.MENU , eventListener );
        screen1.visible = false;

        //now the menu can be created
        menu = new Menu( dispatcher);
        addChild( menu );
   }

   private function eventListener( event:MenuEvent):void
   {
        //set all the screens visibility to false
        //here...

        //get the event name and react accordingly
        //here you can implement a switch

       switch(event.name)
       {
            case "Branding":
            //show Branding screen
            screen1.visible = true;
            break;

            //etc...

       }                                
   }
}

public class MenuEvent extends Event
{
    public const MENU:String = "Menu Event";
    public var name:String;

    //Check custom events for the rest of the code...
    //Do a Google search for custom events 
    //shouldn't be too difficult to find
}