2 Replies Latest reply on May 12, 2009 9:05 PM by Gregory Lafrance

    Question about layout

    coryb891

      I am new to Flex, but I am an experienced programmer.  I'm having some trouble getting the type of layout I am looking for.  I am attempting to use HDividerBox and VDividerBox containers to layout some controls.  The behaviors I am looking for in the layouts are:

       

           - The divider boxes must auto-size to the the maximum possible size.

           - The components on each side of the divider boxes must fill their entire cell.

           - One side of the divider boxes must be set to an absolute width or height (or perhaps to the control's default width or height?) for its initial default size.  The other side must size itself to take up the remaining available space.

       

      The first two items I think can be done by setting the width and height of the divider box and its two components to "100%".  The last item I am not sure about.  I haven't been able to find information about how to accomplish this exact type of behavior anywhere.  I should be able to do it with actionscript in the initializer, but I'd prefer to do it with MXML.  Does anybody have some ideas?

       

      Thanks,

      Cory

        • 1. Re: Question about layout
          BennyBeta Level 4

          This should work:

           

              <mx:HDividedBox width="100%" height="100%">
                  <mx:VBox width="150">
                      <mx:Label text="Left" width="100%" height="100%" />
                  </mx:VBox>
                  <mx:VBox>
                      <mx:Label text="Right" width="100%" height="100%" />
                  </mx:VBox>
              </mx:HDividedBox>

           

          I hope that helps...

           

          Ben

          • 2. Re: Question about layout
            Gregory Lafrance Level 6

            Here is a good example of using HDividedBox and VDividedBox for good use of your screen real estate:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:HDividedBox width="100%" height="100%"
                backgroundColor="0x000000">
                <mx:VBox width="35%" height="100%">
                  <mx:Accordion width="100%">
                    <mx:VBox width="100%" height="100%"
                      backgroundColor="0xFF0000" label="Red">
                      <mx:Form width="100%" height="400">
                        <mx:FormItem label="Name"/>
                      </mx:Form>
                    </mx:VBox>
                    <mx:VBox width="100%" height="100%"
                      backgroundColor="0x00FF00" label="Green">
                      <mx:Form width="100%" height="400">
                        <mx:FormItem label="Name"/>
                      </mx:Form>
                    </mx:VBox>
                    <mx:VBox width="100%" height="100%"
                      backgroundColor="0x0000FF" label="Blue">
                      <mx:Form width="100%" height="400">
                        <mx:FormItem label="Name"/>
                      </mx:Form>
                    </mx:VBox>
                    <mx:VBox width="100%" height="100%"
                      backgroundColor="0xCCCCCC" label="Gray">
                      <mx:Form width="100%" height="400">
                        <mx:FormItem label="Name"/>
                      </mx:Form>
                    </mx:VBox>
                  </mx:Accordion>
                  <mx:TextArea width="100%" height="100%"
                    backgroundColor="0xFFFFFF"/>
                </mx:VBox>
                <mx:VDividedBox width="65%" height="100%"
                  backgroundColor="0x000000">
                  <mx:DataGrid width="100%" height="25%">
                    <mx:columns>
                      <mx:DataGridColumn headerText="ID" width="30"/>
                      <mx:DataGridColumn headerText="Name" width="120"/>
                      <mx:DataGridColumn headerText="Email" width="120"/>
                    </mx:columns>
                  </mx:DataGrid>     
                  <mx:TextArea width="100%" height="75%" backgroundColor="0xCCCCCC"/>
                </mx:VDividedBox>
              </mx:HDividedBox>
            </mx:Application>