2 Replies Latest reply on Dec 31, 2009 7:09 AM by codetown

    How do I resize my application?

    codetown

      I have an air application that I have designed using all mx components.

       

      When I resize the application the change that occurs is that the TabNavigator element grows to fill the available space (because it is sized using constraints) and all the inner elements stay the same (they are positioned absolutely).

       

      What I would like to happen is that my application would scale to fill the available space. When the window becomes wider by 20%  would like every sub component to become wider by 20%.

       

      I thought that changing the stage.scaleMode property from StageScaleMode.NO_SCALE to something like StageScaleMode.NO_BORDER would cause my application to start scaling on resize, instead of changing the width and height of components based on constraints.

       

      This does happen to an extent, the problem is that my application is now initially too large for the chrome. The application starts and I have a chrome window, but the TabNavigator extends beyond the bounds of the application window and there are no scroll bars.

       

      Am I going down the correct track for trying to impliment the resize behavior I am looking for? If not how should I implement this behavior?

       

      I have attached an initial screen shot, as well as one where I have set the stage.scaleMode = StageScaleMode.NO_BORDER;

       

      Thanks,

      Dan

        • 1. Re: How do I resize my application?
          jrpruitt

          This line causes the form to totally scale... all components stay correct relative to each other.

           

          addedToStage="event.currentTarget.stage.scaleMode = StageScaleMode.SHOW_ALL"

           

          Works in either MX or S.

           

          Here's a working example in Flash Builder Beta 2

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/halo"
                                 width="604"
                                 height="364"
                                 showStatusBar="false"
                                 addedToStage="event.currentTarget.stage.scaleMode = StageScaleMode.SHOW_ALL"
                                  backgroundColor="#C8C8C8">
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
              <s:Border x="2" y="2" width="600" height="360" id="baseLevel">
                  <mx:Image x="0" y="0" source="metalBlue-600x360.jpg"/>
                  <s:Border x="10" y="10" width="580" height="332" cornerRadius="20"
                            borderWeight="1" borderColor="#CAD0D0" dropShadowVisible="true">
                  </s:Border>
              </s:Border>
          </s:WindowedApplication>

           

           

          Note: Size doesn't seem to be an issue in FB beta 2 when creating an AIR app, but if you create a WEB app and your initial size is much larger than 600 x 360, things will not scale down correctly and will always overflow the window.  I was able to use 1200x720 in Flex Builder 2 by using action script to set baseLayer.scaleX=.5; and baseLayer.scaleY=.5;  where baseLayer is the name of my lowest level canvas.  I don't know why Flash Player can't scale correctly in those situations, but I've verified it's still not fixed in the most current version of Flash Player using the latest version of Flex Builder (Flash Builder).

           

           

          Here is the MX line from my Flex Builder 2 app.

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="absolute"
              autoLayout="false"
              addedToStage="event.currentTarget.stage.scaleMode = StageScaleMode.SHOW_ALL"   

              >

           

          Hope this helps.

          John

          1 person found this helpful
          • 2. Re: How do I resize my application?
            codetown Level 1

            John,

             

            Thank you for the reply. I was able to get it to work using your method. I had to change the scale factors pretty drastically to get everything to size correctly.

             

            scaleX = 0.732

            scaleY = 0.8

             

            but it now looks correct.

             

            The next issue I am going to have to go after is that a bunch of elements seem to be outside off the parent windows scale.

             

            Alert's, PopUp's and DateFields for example.

             

            Again thank you for the help!

             

            Dan