Can I create a dashboard layout on the fly?

Question

Hi all, I am trying to create a dashboard layout "on-the-fly"
(dynamically).
for example: I can create the following layout using MXML
very easily:
[CODE]
<mx:VBox width="100%" height="100%"
horizontalAlign="center">
<mx:Canvas id="dashboardCanvas" width="90%"
height="90%">
<mx:HBox width="100%" height="100%">
<mx:Panel title="panel 1" width="50%" height="100%">
<mx:VBox width="100%" height="100%"
borderStyle="solid">
<myDashboarComp borderStyle="solid" />
<myDashboarComp borderStyle="solid" />
<myDashboarComp borderStyle="solid" />
</mx:VBox>
</mx:Panel>
<mx:Panel title="panel 2" width="50%" height="100%">
<mx:HBox width="100%" height="100%">
<myDashboarComp borderStyle="solid" />
<myDashboarComp borderStyle="solid" />
<myDashboarComp borderStyle="solid" />
</mx:HBox>
</mx:Panel>
</mx:HBox>
</mx:Canvas>
</mx:VBox>
[/CODE]
You can see that I want to build my dashboard up using
HBox's, VBox's, Panels and the individual custom components
(myDashboarComp) - keepinng the layout and structure quite simple.
The above MXML creates a simple Dashboard consisting of the
canvas (where it all starts - it constructed from -
"dashboardCanvas"). the canvas has 2 panels within a HBox (so are
side by side) called "panel 1" and "panel 2". panel 1 contains a
VBox containing 3 components (displayed vertically) and panel 2
contains a HBox containing 3 components (displayed horizontally) -
so very simple.
However - I want to control this layout externally e.g.
passing an object or array (some sort of descriptor) to describe
the layout to my app.
I then want to loop through this descriptor item and build my
dashboard using ActionScript rather than MXML to more control and
flexibility.
this is the object I have created and have been experimenting
with in ActionScript:
[CODE]
[Bindable]
public var descriptorObj:Object =
{item:"dashboard", children: [
{item:"vbox", id:"vbox1", percentWidth:100,
percentHeight:100, children:[
{item:"panel", id:"panel1", percentWidth:50,
percentHeight:100, children:[
{item:"vbox", children: [
{item:"myDashboarComp"},
{item:"myDashboarComp"},
{item:"myDashboarComp"}
{item:"panel", id:"panel2", percentWidth:50,
percentHeight:100, children:[
{item:"hbox", children: [
{item:"myDashboarComp"},
{item:"myDashboarComp"},
{item:"myDashboarComp"}
[/CODE]
This is as far as I got as I kept hitting hurdles from here.
Basically - all I want to do is somehow read / loop through
this object and build my dashboard.
First of all I was unsure of the best way to loop through the
object - as I have to do it in order to get the correct layout...
i.e. the first 3 "myDashboarComp's" are added to the >
VBox that is added to > "panel1" that is added to the > HBox
that is added to the > Canvas.
This is where I ran into my second problem. I managd to loop
through and read the elements checking there "item" in the object
and adding them accordingly.... I could loop though and add each
item to the canvas ok, e.g:
[CODE]
private function initApp():void
for(var i:int=0; i<descriptorObj.children.length; i++)
var itemType:String = descriptorObj.children
.item.toString();
var percentWidth = descriptorObj.children.percentWidth;
var percentHeight = descriptorObj.children
.percentHeight;
addContainer(itemType, percentWidth, percentHeight);
private function addContainer(conType:String, pWidth:int,
pHeight:int):void
if(conType == "panel")
addPanel(pWidth, pHeight);
else if(conType == "vbox")
addVBox(pWidth, pHeight);
private var newPanel:Panel;
private function addPanel(pWidth:int, ptHeight:int):void
newPanel = new Panel();
newPanel.percentWidth = percentWidth;
newPanel.percentHeight = percentHeight;
newPanel.title = "test panel";
dashboardCanvas.addChild(newPanel);
[/CODE]
in the above actionScript the canvas "dashboardCanvas" is
already set up in the MXML (but is the only MXML container added as
the rest should be built using the create object "descriptorObj" in
AS).
This is my next problem - when I have added a container,
e.g. a panel the next items e.g. my "myDashboarComp's" should then
be added to the previously added panel and not to the canvas
anymore - I need some way of telling the app to add children to the
last added container and not to the canvas (and each container can
change type from a panel to VBox to HBox etc....)
I hope what I am trying to say makes sense, and any help on
this one would be greatly appreciated.
I just need pointing in the right direction and some ideas on
how to continue would be good - and if my thinking / method / ideas
are actually possible.
Kind Regards,
Jon.

Answer 1

There are several ways to do this. The third chapter in the
cookbook is a good place to start.
All things in ActionScript are based on objects. Constructing
them with the data needed for the ui information you will need and
then binding that data to your dashboard objects is basically what
you are going to be doing.
For me it makes the most sence to have an idea of what
different types of objects you will be creating and create some
extended components for those objects. Then when you recieve your
data, binary or xml, you can digest the configuration settings from
the layout and populate the constructor for each of your
components.
It sounds like you need to organize your layout structure in
a heirarchy and from that you can walk each branch and create each
set of things as you parse your data.
Without a bit more information as to what you are
specifically doing that is about as far as I can go minus adding in
some code along some line that I think might work.
Hope that helps some.
-D