Dinamic MXML Flex 3 components

Well, this is very simple but very very useful:

I begin with a basic sample code:


//Another sample view: otherSampleView (path: com.samples.otherSampleView)
import com.samples.myOwnMainView;

public var MyOwnView:myOwnMainView = new myOwnMainView();

// remember to assign the event dispatcher creationComplete="onCreationComplete()"
// in your MXML Header Definition
function onCreationComplete(){
removeAllChildren();
addChild(MyOwnView);
}


This code only erases all of children of the com.samples.otherSampleView component instance, and inserts a com.samples.myOwnMainView instance into it.

Now, the follow code sample manipulates the myOwnMainView instance to add another MXML component dinamically.


//The same sample view: otherSampleView (path: com.samples.otherSampleView)
import com.samples.myOwnMainView;

//now import the other custom components
import com.samples.HeaderComponent
import com.samples.CenterComponent
import com.samples.FooterComponent

public var MyOwnView:myOwnMainView = new myOwnMainView();
public var MyOwnHeader:HeaderComponent = new HeaderComponent();
public var MyOwnCenter:CenterComponent = new CenterComponent();
public var MyOwnFooter:FooterComponent = new FooterComponent();

// remember to assign the event dispatcher creationComplete="onCreationComplete()"
// in your MXML Header Definition
function onCreationComplete(){
var chlds:Array = this.getChildren();
removeAllChildren();

if (chlds && chlds.length > 0){
for(var i:int=0; i < chlds.length; i++) {
MyOwnCenter.addChild(chlds[i]);
}
}

MyOwnView.addChild(MyOwnHeader);
MyOwnView.addChild(MyOwnCenter);
MyOwnView.addChild(MyOwnFooter);
addChild(MyOwnView);
}



With this, you can centralize the custom navigation components in only generic header, center and footer views and to insert the custom template otherSampleView into CenterComponent instance for centralized graphic design convenience.

Enjoy!