6 Replies Latest reply on Dec 9, 2010 4:39 PM by 10chars

    Auto-Resizing Container?

    10chars

      Been coding Java for a while but this week decided to give flex a go for the first time and use it for a little project I'm working on so am very new to everything flex/as3.

       

      I've had a search around but still haven't come up with what I've been looking which is a container that will resize automatically with the application window size, as well as automatically resizing the images that it contains.  Is there one anyone can recommend or even some recommended reading I can do to help me solve my problem.  The container needs to be able to take a grid type layout and will contain between 9-16 images of the same dimensions (3x3 or 4x4).

       

      Any suggestions would be much appreciated...

        • 1. Re: Auto-Resizing Container?
          nikos101 Level 2

          use percentages ie

          width = "100%"

          • 2. Re: Auto-Resizing Container?
            10chars Level 1

            From what I can tell, that works fine for single components like a label etc, but most of the containers in flex don't resize the children contained within them so this method doesn't work.

             

            Actually...the Canvas container resizes the images within it, but I am now having trouble with the constraints and when you resize the images overlap all over each other and I can't apply a layout to it to handle it for me.

             

            So if, for example in the code below, I wanted a canvas set out in a 3x3 grid, what sort of constraint/dimension values would I need for each of my images to ensure they always kept an equal distance whenever they resized with the main canvas keeping a perfect 3x3 grid of images?

             

             

            <s:BorderContainer width="100%" height="100%" backgroundImage="@Embed('background.png')">
            
                      <mx:Canvas backgroundColor="0x6699FF" width="50%" height="50%"> 
            
                                
                           <mx:constraintColumns>
                                <mx:ConstraintColumn id="col1" width="*SOME VALUE*"/>
                                <mx:ConstraintColumn id="col2" width="*SOME VALUE*"/>
                                <mx:ConstraintColumn id="col3" width="*SOME VALUE*"/>
                           </mx:constraintColumns>               
            
                           <mx:constraintRows>
                                <mx:ConstraintRow id="row1" height="*SOME VALUE*"/>
                                <mx:ConstraintRow id="row2" height="*SOME VALUE*"/>
                                <mx:ConstraintRow id="row3" height="*SOME VALUE*"/>
                           </mx:constraintRows>
            
                              <!-- Need top/bottom/left/right constraint values for the images -->      
                           
                                    <mx:Image source="image1.png" />
                           <mx:Image source="image2.png" />
                           <mx:Image source="image3.png" />
                           <mx:Image source="image4.png" />
                           <mx:Image source="image5.png" />
                           <mx:Image source="image6.png" />
                           <mx:Image source="image7.png" />
                           <mx:Image source="image8.png" />
                           <mx:Image source="image9.png" />
            
            
                      </mx:Canvas>
            
                 </s:BorderContainer>
            
            
            
            
            

            • 3. Re: Auto-Resizing Container?
              nikos101 Level 2

              Use

               

              <s:layout>
                      <s:TileLayout>

              instead of Canvas?

              • 4. Re: Auto-Resizing Container?
                bKartik.b Level 1

                u can listen for the "resize" event on the main application and act accordingly.

                • 5. Re: Auto-Resizing Container?
                  Flex harUI Adobe Employee

                  Usually you can use 100% and if the totals add up to more than 100 it will

                  do the right thing.

                  • 6. Re: Auto-Resizing Container?
                    10chars Level 1

                    Thanks for your replies!  I have sort of got it working now by listening out for the resize on my main BorderContainer.  The only thing is the images are spaced miles apart, even with the Gridlayout gaps set to 0?  I'll have a play around and see what I can do, probably something in my calculations.  Anyway, at least the images are resizing now and are nicely laid out in a grid so I'm on the right track

                     

                     

                    I also realized that it wasn't the containers not being able to resize the images, because they do that fine when you use percentages as you suggested.  It was when I applied a layout to the container, it screwed things up and stopped the container from being able to resize them, which is kind of strange.  Unless I'm missing something, doesn't if make the flex layouts a little pointless if they can't inherit properties of the container they are applied to?