addChild / removeChild oop best practice?

[Pouradam]

Hi there,

I wonder what is the best practice for Adding and Removing pages of a simple application in flash? (as3)

Lets say we have a small introduction app for a company, contains:

Main.as (main class)

Home.as (homepage)

About.as (about us)

Contact.as (contact us)

And user should simply be able to go back and forth in the app, showing and hiding pages.

Well, now who should be responsible for Adding and Removing of app pages, from library?

1- The main class of application?

2- A specific class just to Add / Remove pages?

3- Each class itself should have a public Birth() and Death() method? (Home / About / Contact)

Is there any sample application (i.e approved by Adobe) confirmed as the best practice oop design in as3, so that developers can use that as a best practice or guide?

Thanks a lot

[kglad · Accepted solution]

you're going to get different opinions from different people.

but i like to have a main class that does nothing other than add and remove pages from the display.  so, it creates the all page instances (once) and adds listeners to events dispatched from the various pages so it knows what pages to remove and add.

[Pouradam]

Thanks a lot for both replies!

So far I have checked the method of kglad, made a Page movieclip with instance name of "page", placed it on the stage.

As the empty frame for all pages to be added and removed in it (P1=Home , P2=About,  ...)

here is a sample code for Page:

package  {

import flash.display.MovieClip;

public class Page extends MovieClip{

  private var p1:P1;

  private var p2:P2;

  public function Page() {  

  }

  public function addPage(pgeNme:String):void{

   if(pgeNme == "p1"){

    p1 = new P1();

    addChild(p1);

   } else if(pgeNme == "p2"){

    p2 = new P2();

    addChild(p2);

   }

  }

  public function remPage(pgeNme:String):void{

   if(pgeNme == "p1"){   

    removeChild(p1);

   } else if(pgeNme == "p2"){

    removeChild(p2);

   }

  }

}

}

Then here is the code for P1 (and similarly for P2 and others):

package  {

import flash.display.MovieClip;

import flash.events.Event;

public class P1 extends MovieClip {

  public function P1() {

   addEventListener(Event.ADDED_TO_STAGE, onBirth);

   addEventListener(Event.REMOVED_FROM_STAGE, onDeath);

  }

  private function onBirth(e:Event):void{

   removeEventListener(Event.ADDED_TO_STAGE, onBirth);

   trace("birth of page 1");

  }

  private function onDeath(e:Event):void{

   removeEventListener(Event.REMOVED_FROM_STAGE, onDeath);

   trace("death of page 1");

  }

}

}

Then I can easily from other classes, like Main, call the page and add / remove classes, like this:

package  {

import flash.display.MovieClip;

public class Main extends MovieClip {

  public function Main() {

   page.addPage("p1");

   page.addPage("p2");

   page.remPage("p2");

  }

}

}

the output is :

birth of page 1

birth of page 2

death of page 2

It works very well but I also will check and reply to the second approach, that is in more details. thanks a lot!

[kglad]

you're welcome.

p.s. your Page class can be even more general and require less editing by using

public function addPage(pgeName:String):void{

var C:Class=Class(getDefinitionByName(pgeName));

p=new C();

addChild(p);

}

p.p.s.  but i wouldn't do this.  you're creating a class (Page) that creates displayobjects and adds them to the display.  if  you wanted to have a class that creates pages, i would just do that in Page so it's more like a factory class and return the class instance:

public function createPageF(s:String):DisplayObject{

C=Class(getDefinitionByName(s));

return new C();

}

// though this createPageF doesn't have to be limited to creating displayobjects.

[dmennenoh]

I agree with what kglad said, and pretty much do exactly the same thing. Main is the document class and instantiates Home, About and Contact classes. All of those classes extend EventDispatcher and use a similar structure - each has a clip property that gets loaded with a clip from the library in the constructor. Each also has a show and a hide method that Main can call. Main listens to events from those classes... for instance from Main I might do something like so:

var home:Home = new Home();

home.container = myMainDisplayContainer; (I always have a setter to allow setting the container the clip will be placed in - makes it easy to move layers around later if you need to)

home.addEventListener(Home.SHOWING, homeIsShowing, false, 0, true);

home.show();

function homeShowing(e:Event) can be used to hide a different screen now that Home is showing.