3 Replies Latest reply on Jul 14, 2010 7:48 AM by james.lyon

    Simple Layout Question

    VirtualCoder Level 1

      I need to create an application with the following layout properties:


      a) It's always in the 4;3 ratio with default size of 800x600 and resizeable from 640x480 to 1024x768


      b) It needs to be divided into left side that takes up 20% of space and right side that takes up 80% of space.


      c) Left and right sides are to be independent rectangular areas within which widgets can be docked.


      What is the simplest way for a noob ( : me : ) to do this?



        • 1. Re: Simple Layout Question

          Set the layout property of the Application to horizontal


          If your using Flex 3, use <mx:Canvas /> tags

          If using Flex 4, use <s:Group /> tags


          Here's a Flex 4 example:;


          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
               width="800" height="600" >
                    <s:HorizontalLayout />
               <s:Group width="20%" />
               <s:Group width="80%" />
          1 person found this helpful
          • 2. Re: Simple Layout Question
            VirtualCoder Level 1

            How do I keep a fixed "aspect ratio" of the resized application so that width:height is always 4:3 ?


            I tried to wire the following into the "resize" event but it's firing only at the beginning of a resize.


            (this.width / this.height > 4 / 3) ? (this.width = this.height * 4 / 3) : (this.height = this.width * 3 / 4)

            • 3. Re: Simple Layout Question
              james.lyon Level 1

              All browsers will tell the plugin to resize when resizing has stopped, so listening for resize events will work.  I'm not sure why you would only be receiving the first event because I get spammed with events in when the browser is resized.