5 Replies Latest reply on Dec 2, 2008 8:27 AM by ljonny18

    Can I create a dashboard layout on the fly?

    ljonny18 Level 1
      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.