8 Replies Latest reply on Aug 4, 2009 2:19 PM by rexdtripod

    Resize components the same percentage their container is resized

    rexdtripod Level 1

      Not a scenario where I just make say a panel 80% of the canvas that contains it.  Different.

       

      I don't want to link the parent and child sizes.  I want to link the percentages resized while maintaining aspect ratios.

       

      Let's say, for example, I have three panels inside a canvas.  The panels are draggable and resizeable by the user.   Let's say he plays with them, drags them every which way, and makes each it's own funky size.  Now he reduces the size of the browser window.  I'd like everything to maintain its coordinates and resize the same percentage the window was resized with no effect on aspect ratios.

       

      Can this be done?

        • 1. Re: Resize components the same percentage their container is resized
          Gregory Lafrance Level 6

          I may be over-simplifying here, but you could have an x and y aspect variable, and change it if the user drags to resize a Panel, and then if browser is resized use those aspect variables. The Panel sizes would always have their size based on the app width and height and also on the x and y aspect variables.

           

          This is vague, but I think you'll understand.

           

          If this post answered your question or helped, please mark it as such.

          1 person found this helpful
          • 2. Re: Resize components the same percentage their container is resized
            rexdtripod Level 1

            You're onto something there with aspect ratio.  I can't seem to get that far though.  What I mean is there are a few issues in the problem space and aspect ratio is the last of them.  I will have to solve it and will try your suggestion.


            Beforehand though I have to address the issue of "how much" to resize.  To simplify things I'll throw out width and aspect ration for now and just concentrate on getting one thing resized correctly - height.

             

            Attached is some code that adds two different sized panels to an app.  There's an EventListener on the app to detect a resize.  When it fires there's a handler that calculates the percentage the app's height changed.  The handler then transforms the height of the apps two panels by that percentage.

             

            If you run the code and drag your browser window to a new height, it kind of seems to work.  But if you drag your browser window taller and shorter like ten times in a row, your panels gradually shrink because it appears height is taken away faster than it is replaced.

             

            I'm not even sure if headed down the right path here.  Just have to start somewhere.

            • 3. Re: Resize components the same percentage their container is resized
              rexdtripod Level 1

              You're onto something there with aspect ratio.  I can't seem to get that far though.  What I mean is there are a few issues in the problem space and aspect ratio is the last of them.  I will have to solve it and will try your suggestion.


              Beforehand though I have to address the issue of "how much" to resize.  To simplify things I'll throw out width and aspect ration for now and just concentrate on getting one thing resized correctly - height.

               

              Attached is some code that adds two different sized panels to an app.  There's an EventListener on the app to detect a resize.  When it fires there's a handler that calculates the percentage the app's height changed.  The handler then transforms the height of the apps two panels by that percentage.

               

              If you run the code and drag your browser window to a new height, it kind of seems to work.  But if you drag your browser window taller and shorter like ten times in a row, your panels gradually shrink because it appears height is taken away faster than it is replaced.

               

              I'm not even sure if headed down the right path here.  Just have to start somewhere.

              • 4. Re: Resize components the same percentage their container is resized
                rexdtripod Level 1

                You're onto something there with aspect ratio.  I can't seem to get that far though.  What I mean is there are a few issues in the problem space and aspect ratio is the last of them.  I will have to solve it and will try your suggestion.

                 

                 

                Beforehand though I have to address the issue of "how much" to resize.  To simplify things I'll throw out width and aspect ration for now and just concentrate on getting one thing resized correctly - height.

                 

                 

                 

                Attached is some code that adds two different sized panels to an app.  There's an EventListener on the app to detect a resize.  When it fires there's a handler that calculates the percentage the app's height changed.  The handler then transforms the height of the apps two panels by that percentage.

                 

                 

                 

                If you run the code and drag your browser window to a new height, it kind of seems to work.  But if you drag your browser window taller and shorter like ten times in a row, your panels gradually shrink because it appears height is taken away faster than it is replaced.

                 

                 

                 

                I'm not even sure if headed down the right path here.  Just have to start somewhere.

                 

                 

                 

                 

                 

                 

                 

                <?xml version="1.0" encoding="utf-8"?>

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                creationComplete="init();">

                 

                 

                <mx:Script>

                  <![CDATA[

                   import mx.events.ResizeEvent;

                    

                   //Add an event listener to the app to detect a resize and

                   //call a handler that redoes the height of the panels

                   //in the app

                   private function init():void {

                    this.addEventListener(ResizeEvent.RESIZE, redoPanelSizes);

                   }

                    

                   //Adjust the height of the application's two panels accordingly

                   //by first determining the percentage that the container app's

                   //height changed. You can find the app's old height in the

                   //ResizeEvent object.  Compare it to the new height?  Is this

                   //even a good way to go about this?  Seems there would be floating

                   //point precision issues that would evenually add up with enough

                   //resize attempts?

                   private function redoPanelSizes(event:ResizeEvent):void{

                    //Determine percentage the app height has changed

                    var appHeightChangeRatio:Number = height/event.oldHeight;   

                     

                    panel_1.height = panel_1.height * appHeightChangeRatio;

                    panel_2.height = panel_2.height * appHeightChangeRatio;   

                   }

                    

                  ]]>

                </mx:Script>

                 

                <mx:Canvas id="containerCanvas"

                   width="100%"

                   height="100%"

                   horizontalScrollPolicy="off"

                   verticalScrollPolicy="off">

                 

                   <!-- Throw a couple of different sized panels into a -->

                   <!-- box and play with the app size.  Try to get the -->

                   <!-- boxes to maintain aspect ratio and consistent -->

                   <!-- sizes with respect to each other after multiple -->

                   <!-- resizing operations -->

                    

                   <mx:Box id="gameContainerBox"

                     width="100%"

                     height="100%">

                      

                     <mx:Panel id="panel_1"

                      width="400" height="300" >

                     </mx:Panel>

                      

                     <mx:Panel id="panel_2"

                      width="200" height="150" >

                     </mx:Panel>    

                 

                   </mx:Box>

                 

                </mx:Canvas>

                </mx:Application

                • 5. Re: Resize components the same percentage their container is resized
                  rexdtripod Level 1

                  My apologies for the multiple posts.  I was receiving an error message and didn't think it was making it there.

                  • 6. Re: Resize components the same percentage their container is resized
                    Gregory Lafrance Level 6

                    What you are attempting is quite complex, but this code should help move you forward a bit. I'm looking to your future posts as you move this forward.

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      resize="updatePanelSizes(event);"
                      creationComplete="calculatePanelSizes(this.width, this.height);">
                      <mx:Script>
                        <![CDATA[
                          import mx.events.ResizeEvent;
                          //Adjust the height of the application's two panels accordingly
                          //by first determining the percentage that the container app's
                          //height changed. You can find the app's old height in the
                          //ResizeEvent object.  Compare it to the new height?  Is this
                          //even a good way to go about this?  Seems there would be floating
                          //point precision issues that would evenually add up with enough
                          //resize attempts?

                          private var p1WidthPercent:uint = 25;
                          private var p2WidthPercent:uint = 25;
                          private var p3WidthPercent:uint = 25;
                          private var p1HeightPercent:uint = 25;
                          private var p2HeightPercent:uint = 25;
                          private var p3HeightPercent:uint = 25;

                          private var p1WidthAspect:uint = 100;
                          private var p2WidthAspect:uint = 100;
                          private var p3WidthAspect:uint = 100;
                          private var p1HeightAspect:uint = 100;
                          private var p2HeightAspect:uint = 100;
                          private var p3HeightAspect:uint = 100;

                          private function calculatePanelSizes(appOldWidth:Number, appOldHeight:Number):void{
                            if(appOldWidth > 0 && appOldHeight > 0){
                              var appWidthChangeRatio:Number = this.width/appOldWidth;   
                              var appHeightChangeRatio:Number = this.height/appOldHeight;   
                              panel_1.height = panel_1.height * appHeightChangeRatio;
                              panel_2.height = panel_2.height * appHeightChangeRatio;   
                              panel_3.height = panel_3.height * appHeightChangeRatio;   
                              panel_1.width = panel_1.width * appWidthChangeRatio;
                              panel_2.width = panel_2.width * appWidthChangeRatio;   
                              panel_3.width = panel_3.width * appWidthChangeRatio;   
                            }
                          }

                          private function updatePanelSizes(evt:ResizeEvent):void{
                            calculatePanelSizes(evt.oldWidth, evt.oldHeight);
                          }
                        ]]>
                      </mx:Script>
                      <mx:Canvas id="containerCanvas" width="100%" height="100%"
                        horizontalScrollPolicy="off" verticalScrollPolicy="off">
                        <mx:Box>
                          <mx:Panel id="panel_1" title="PanelOne" width="{this.width/4}" height="{this.height/4}"/>
                          <mx:Panel id="panel_2" title="PanelTwo" width="{this.width/4}" height="{this.height/4}"/>
                          <mx:Panel id="panel_3" title="PanelThree" width="{this.width/4}" height="{this.height/4}"/>           
                        </mx:Box>
                      </mx:Canvas>
                    </mx:Application>

                    • 7. Re: Resize components the same percentage their container is resized
                      rexdtripod Level 1

                      You're very kind to take the time here.  Thank you.

                       

                      I think you are correct.  I get the sense I've stumbled into something very complicated - more complicated than I realized. 

                       

                      I get the feeling I'm missing something simpler.  I think I'm supposed to be approaching this from an SWF scaling perspective.  The behavior I'm trying to emulate has not only the panels scaling smoothly but all panel children as well - buttons, text fields, labels, etc. therein. That can't be Flex behavior.  Then there are other items in the app like menus that do not scale.  Pretty interesting.

                       

                      I'll be on it today.  I'll continue to report what I find.

                      • 8. Re: Resize components the same percentage their container is resized
                        rexdtripod Level 1

                        This is the behavior I see:

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application
                            xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="absolute"
                            applicationComplete="appComplete()">
                           
                              <mx:Script>
                                    <![CDATA[
                                          import flash.display.Stage;
                                         
                                          private function appComplete():void {
                                               
                                                stage.scaleMode = StageScaleMode.EXACT_FIT;
                                          }
                                    ]]>
                              </mx:Script>     
                                 
                              <mx:Panel id="panel1"
                                  width="250" height="250" 
                                  title="Panel 1">
                              </mx:Panel>

                         

                        </mx:Application>

                         

                        That StageScaleMode.EXACT_FIT line provides the scaling behavior I'm after but it impacts so much more that I don't understand yet.  I'm again wondering if I'm heading down the right path given the goal - individually resizeable panels/windows in a Flex app that behave as the one panel in the code above does, but that do not impact other items in the app (e.g., menus)?  It does seem like the right scaling behavior.