7 Replies Latest reply on Oct 21, 2011 2:37 PM by MatteoLegittimo

    Width Height Custom Component

    MatteoLegittimo Level 1

      Hi!

      Im building a mobile application, so im trying to scale and optimize the application for different mobile.

      My problem it's that i dont know how to resize a custom component that i made, when canging the orientation or the device.

       

      Im my view i have the component:

       

      <components:MyComponent/>

       

      In this component there is just an fxg from illustrator:

       

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

      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark" title="MyComponent" xmlns:assets="assets.*">

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

         <assets:MenKshirt/>

      </s:View>

       

      If i do like this:

       

      <assets:MenKshirt width="90%"/>

       

      It's correctly scaling in the component, but not im myView:

       

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

      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark" title="MyView" xmlns:component="component.*">

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

         <component:MyComponent/>

      </s:View>

       

      How can i do it?

      Thanks a lot!

        • 1. Re: Width Height Custom Component
          Shongrunden Adobe Employee

          You'll probably want to set <assets:MenKshirt width="100%"/> then set <component:MyComponent width="90%"/>.

          • 2. Re: Width Height Custom Component
            MatteoLegittimo Level 1

            yes you right, but i need to scale also the height!

            When im in portrait state im gonna set the width to 100% but the height??? I need to scale proportionally

             

            I need to find a way to fit my component proportionally inside an area!

             

            Thanks again!

            • 3. Re: Width Height Custom Component
              pramod.rao Level 1

              Try using scaleX and scaleY properties. I think that should help you.

              • 4. Re: Width Height Custom Component
                Shongrunden Adobe Employee

                I would recommend setting the component size to width="100%" height="100%" and then inside that component you will want to calcuate what size to make the things inside of it based on the width/height it is given and the aspect ratio you want to preserve.  Here's a simple (buggy) 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:local="*">

                 

                    <fx:Declarations>

                        <fx:Component className="MyComponent">

                            <s:Group resize="group1_resizeHandler()">

                                <fx:Script>

                                    <![CDATA[

                                        private var targetAspectRatio:Number = 2;

                                       

                                        protected function group1_resizeHandler():void

                                        {

                                            // get the size of the target's parent

                                            var parentWidth:Number = this.width;

                                            var parentHeight:Number = this.height;

                                            var parentAspectRatio:Number = parentWidth / parentHeight;

                                           

                                            // start with the adjusted target size being the same as the parent

                                            var adjustedTargetWidth:Number = parentWidth;

                                            var adjustedTargetHeight:Number = parentHeight;

                                           

                                            // then if the the parent and source aspect ratios don't match we

                                            // want either the width or height of the source to equal the parent

                                            // size, then adjust the other appropriately

                                            if (targetAspectRatio > parentAspectRatio)

                                                adjustedTargetHeight = parentWidth / targetAspectRatio;

                                            else

                                                adjustedTargetWidth = parentHeight * targetAspectRatio;

                                           

                                            target.width = adjustedTargetWidth;

                                            target.height = adjustedTargetHeight;

                                        }

                                    ]]>

                                </fx:Script>

                                <s:Button id="target" label="maintain my aspect ratio" />

                            </s:Group>

                        </fx:Component>

                    </fx:Declarations>

                   

                    <local:MyComponent width="100%" height="100%" />

                   

                </s:Application>

                • 5. Re: Width Height Custom Component
                  MatteoLegittimo Level 1

                  Hi Shongrunden,

                  thanks for your replay!

                  I tried to use your code and i did a new flex mobile project in flash builder like this:

                   

                  The first View:

                   

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

                  <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:component="component.*">

                      <fx:Declarations>

                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                      </fx:Declarations>

                      <component:MyComponent width="100%" height="100%"/>

                  </s:View>

                   

                   

                  The Component:

                   

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

                  <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark" title="MyComponent"

                          creationComplete="creationCompleteHandler(event)"

                          resize="resizeHandler(event)">

                      <fx:Script>

                          <![CDATA[

                              import mx.events.FlexEvent;

                              import mx.events.ResizeEvent;

                              private var targetAspectRatio:Number = 1;

                             

                              // get the size of the target's parent

                              private var parentWidth:Number

                              private var parentHeight:Number

                              private var parentAspectRatio:Number

                             

                              // start with the adjusted target size being the same as the parent

                              private var adjustedTargetWidth:Number

                              private var adjustedTargetHeight:Number

                             

                              protected function creationCompleteHandler(event:FlexEvent):void {

                                  onResize()

                              }

                             

                              protected function resizeHandler(event:ResizeEvent):void {

                                 

                                  onResize()

                                 

                                  // then if the the parent and source aspect ratios don't match we   

                                  // want either the width or height of the source to equal the parent

                                  // size, then adjust the other appropriately

                                 

                                 

                                  if (targetAspectRatio > parentAspectRatio){               

                                      adjustedTargetHeight = parentWidth / targetAspectRatio;

                                  } else {

                                      adjustedTargetWidth = parentHeight * targetAspectRatio;

                                      target.width = adjustedTargetWidth;

                                      target.height = adjustedTargetHeight;   

                                  }

                              }

                             

                              private function onResize():void {

                                 

                                  // get the size of the target's parent

                                  parentWidth = width;

                                  parentHeight = height;

                                  parentAspectRatio = parentWidth / parentHeight;

                                 

                                  // start with the adjusted target size being the same as the parent

                                  adjustedTargetWidth = parentWidth;

                                  adjustedTargetHeight = parentHeight;

                                 

                                  trace('targetAspectRatio: '+targetAspectRatio+'        parentAspectRatio: '+parentAspectRatio)

                                 

                              }

                             

                          ]]>

                         

                      </fx:Script>

                      <fx:Declarations>

                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                      </fx:Declarations>

                      <s:Group>

                          <s:Button id="target" label="maintain my aspect ratio" />

                      </s:Group>

                  </s:View>

                   

                  I didn't understood why in my creationCompleteHandler when i call the on resize event the width is not setting (it's 0, the default value)

                  And why did u set the targetAspectRatio to 2?

                   

                  thanks a lot!

                   

                  Matteo

                  • 6. Re: Width Height Custom Component
                    Shongrunden Adobe Employee

                    Does it work if you use viewActivate instead of creationComplete?

                     

                    I just set targetAspectRatio to some random number, you will probably want to calculate the aspect ratio that you wish to maintain.

                    • 7. Re: Width Height Custom Component
                      MatteoLegittimo Level 1

                      like this it's working:

                       

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

                      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark" title="MyComponent"

                              resize="resizeHandler(event)" xmlns:assets="assets.*" creationComplete="creationCompleteHandler(event)">

                          <fx:Script>

                              <![CDATA[

                                  import mx.events.FlexEvent;

                                  import mx.events.ResizeEvent;

                                  private var targetAspectRatio:Number = 1;

                                 

                                  private var parentWidth:Number

                                  private var parentHeight:Number

                                  private var parentAspectRatio:Number

                                  private var targetWidth:Number

                                 

                                  private var adjustedTargetWidth:Number

                                  private var adjustedTargetHeight:Number

                                 

                                  protected function creationCompleteHandler(event:FlexEvent):void{

                                      targetWidth = target.width

                                  }

                                 

                                  protected function resizeHandler(event:ResizeEvent):void {

                                      setSize()

                                      onResize()

                                      //getScale()

                                      trace(getScale())

                                  }

                                 

                                  private function setSize():void {

                                      //trace('w: '+target.width+'    h:'+target.height)

                                     

                                      // get the size of the target's parent

                                      parentWidth = width;

                                      parentHeight = height;

                                      parentAspectRatio = parentWidth / parentHeight;

                                     

                                      // start with the adjusted target size being the same as the parent

                                      adjustedTargetWidth = parentWidth;

                                      adjustedTargetHeight = parentHeight;

                                  }

                                 

                                  private function onResize():void {

                                     

                                      // then if the the parent and source aspect ratios don't match we   

                                      // want either the width or height of the source to equal the parent

                                      // size, then adjust the other appropriately

                                     

                                      if (targetAspectRatio > parentAspectRatio){

                                          trace('adjustedTargetHeight    '+parentAspectRatio)

                                          adjustedTargetHeight = parentWidth / targetAspectRatio;

                                      } else {

                                          adjustedTargetWidth = parentHeight * targetAspectRatio;

                                          trace('adjustedTargetWidth    '+parentAspectRatio)

                                      }

                                     

                                      target.width = adjustedTargetWidth;

                                      target.height = adjustedTargetHeight;   

                                      //trace('targetAspectRatio: '+targetAspectRatio+'        parentAspectRatio: '+parentAspectRatio)

                                      //trace('w: '+target.width+'    h:'+target.height)

                                  }

                       

                                  public function getScale():Number {

                                      //targetWidth : 100 = adjustedTargetWidth : x

                                      return (adjustedTargetWidth*100)/targetWidth

                                  }

                       

                              ]]>

                             

                          </fx:Script>

                          <fx:Declarations>

                              <!-- Place non-visual elements (e.g., services, value objects) here -->

                          </fx:Declarations>

                          <s:Group>

                              <!--<s:Button id="target" label="maintain my aspect ratio" />-->

                              <assets:ManKshirt id="target"/>

                          </s:Group>

                      </s:View>

                       

                      thanks for help me!