5 Replies Latest reply on Dec 3, 2008 10:02 AM by Newsgroup_User

    Dynamically adding containers

    ljonny18 Level 1
      Hi Guys.

      I have an object that looks like:

      Code:
      [Bindable]
      public var dashboardDP:Object =
      {item:"dashboard", children: [
      {item:"vbox", id:"vbox 1", children: [
      {item:"panel", id:"panel 1", children: [
      {item:"hbox", id:"hbox 1", children: [
      {item:"view" id:"view 1"},
      {item:"view" id:"view 2"},
      {item:"view" id:"view 3"}
      ]},
      {item:"hbox", id:"hbox 2", children: [
      {item:"view" id:"view 4"},
      ]},
      ]},
      {item:"panel", id:"panel 2", children: [
      {item:"vbox", id:"vbox 2", children: [
      {item:"view" id:"view 5"},
      {item:"view" id:"view 6"},
      ]},
      ]},
      ]},
      ]};


      I want to use this object to dynamically create a "Dashboard" like structure using containers.
      The "dashboard" item will represent a canvas for the containers to be added.
      You will notice the item names in the object: "panel", "vbox", and "hbox". These names will represent the MX containers to be added relevantly:
      - <mx:Panel ..... />
      - <mx:VBox ..... />
      - <mx:HBox ..... />

      e.g. if item = vbox: var container:VBox=new VBox(); addChild(cantainer) etc...

      the item "view" is a custom component I have created that I want to add ...


      I want to add the containers to a canvas in the structure they are in the object, so for example my dashobard canvas would contain:

      - A VBox ("vbox 1") containing 2 Panels ("panel 1" and "panel 2")
      - "panel 1" would contain 2 HBoxes ("hbox 1" and "hbox 2")
      - "hbox 1" would contain 3 views ("view 1", "view 2" and "view 3")
      - "hbox 2" would contain 1 view ("view 4")
      - "panel 2" would contain 1 VBox ("vbox 2")
      - "vbox 1" would contain 2 views ("view 5", and "view 6")

      etc....


      if this object was to be hard coded in MXML it would look something like:

      Code:

      <mx:Canvas id="dashboard" >
      <mx:VBox id="vbox 1">
      <mx:Panel id="panel 1">
      <mx:HBox id="hbox 1">
      <comp:View id="view 1" />
      <comp:View id="view 2" />
      <comp:View id="view 3" />
      </mx:HBox>
      <mx:HBox id="hbox 2">
      <comp:View id="view 4" />
      </mx:HBox>
      </mx:Panel>
      <mx:Panel id="panel 2">
      <mx:HBox id="vbox 2">
      <comp:View id="view 5" />
      <comp:View id="view 6" />
      </mx:HBox>
      </mx:Panel>
      </mx:VBox>
      </mx:Canvas>

      However I don't want to hard code it as the object can change and could be different therefore I need to created the layout on the fly using the provided object.

      I am not sure how I can loop through / read the object items create them and add them to the relevant parent.
      I have looked for examples and have spent hours trying to get this to work with no success

      Any help on this would be much appreciated.

      Thanks in advance,
      Jon.
        • 1. Re: Dynamically adding containers
          Level 7

          "ljonny18" <webforumsuser@macromedia.com> wrote in message
          news:gh3ngl$1of$1@forums.macromedia.com...
          > Hi Guys.
          >
          > I have an object that looks like:
          >
          > Code:
          > [Bindable]
          > public var dashboardDP:Object =
          > {item:"dashboard", children: [
          > {item:"vbox", id:"vbox 1", children: [
          > {item:"panel", id:"panel 1", children: [
          > {item:"hbox", id:"hbox 1", children: [
          > {item:"view" id:"view 1"},
          > {item:"view" id:"view 2"},
          > {item:"view" id:"view 3"}
          > ]},
          > {item:"hbox", id:"hbox 2", children: [
          > {item:"view" id:"view 4"},
          > ]},
          > ]},
          > {item:"panel", id:"panel 2", children: [
          > {item:"vbox", id:"vbox 2", children: [
          > {item:"view" id:"view 5"},
          > {item:"view" id:"view 6"},
          > ]},
          > ]},
          > ]},
          > ]};
          >
          >
          > I want to use this object to dynamically create a "Dashboard" like
          > structure
          > using containers.
          > The "dashboard" item will represent a canvas for the containers to be
          > added.
          > You will notice the item names in the object: "panel", "vbox", and "hbox".
          > These names will represent the MX containers to be added relevantly:
          > - <mx:Panel ..... />
          > - <mx:VBox ..... />
          > - <mx:HBox ..... />
          >
          > e.g. if item = vbox: var container:VBox=new VBox(); addChild(cantainer)
          > etc...
          >
          > the item "view" is a custom component I have created that I want to add
          > ...
          >
          >
          > I want to add the containers to a canvas in the structure they are in the
          > object, so for example my dashobard canvas would contain:
          >
          > - A VBox ("vbox 1") containing 2 Panels ("panel 1" and "panel 2")
          > - "panel 1" would contain 2 HBoxes ("hbox 1" and "hbox 2")
          > - "hbox 1" would contain 3 views ("view 1", "view 2" and "view 3")
          > - "hbox 2" would contain 1 view ("view 4")
          > - "panel 2" would contain 1 VBox ("vbox 2")
          > - "vbox 1" would contain 2 views ("view 5", and "view 6")
          >
          > etc....
          >
          >
          > if this object was to be hard coded in MXML it would look something like:
          >
          > Code:
          >
          > <mx:Canvas id="dashboard" >
          > <mx:VBox id="vbox 1">
          > <mx:Panel id="panel 1">
          > <mx:HBox id="hbox 1">
          > <comp:View id="view 1" />
          > <comp:View id="view 2" />
          > <comp:View id="view 3" />
          > </mx:HBox>
          > <mx:HBox id="hbox 2">
          > <comp:View id="view 4" />
          > </mx:HBox>
          > </mx:Panel>
          > <mx:Panel id="panel 2">
          > <mx:HBox id="vbox 2">
          > <comp:View id="view 5" />
          > <comp:View id="view 6" />
          > </mx:HBox>
          > </mx:Panel>
          > </mx:VBox>
          > </mx:Canvas>
          >
          > However I don't want to hard code it as the object can change and could be
          > different therefore I need to created the layout on the fly using the
          > provided
          > object.
          >
          > I am not sure how I can loop through / read the object items create them
          > and
          > add them to the relevant parent.
          > I have looked for examples and have spent hours trying to get this to work
          > with no success
          >
          > Any help on this would be much appreciated.
          >
          > Thanks in advance,
          > Jon.

          Check out Q4 in the FAQ I posted earlier today.


          • 2. Re: Dynamically adding containers
            ljonny18 Level 1
            What FAQ and where?

            Kind Regards,
            Jon.
            • 3. Re: Dynamically adding containers
              Level 7

              "ljonny18" <webforumsuser@macromedia.com> wrote in message
              news:gh5hbg$a0o$1@forums.macromedia.com...
              > What FAQ and where?

              Didn't you notice the post called "Flex FAQ 11-02-08" right next to
              yours????


              • 4. Re: Dynamically adding containers
                Gregory Lafrance Level 6
                But that post is no longer next to this one, so for people searching the forums the answer is not easy to find. Better to always provide the link.
                • 5. Re: Dynamically adding containers
                  Level 7

                  "Greg Lafrance" <webforumsuser@macromedia.com> wrote in message
                  news:gh6cvh$dlo$1@forums.macromedia.com...
                  > But that post is no longer next to this one, so for people searching the
                  > forums the answer is not easy to find. Better to always provide the link.

                  Spoilsport :-p
                  http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf