3 Replies Latest reply on Nov 19, 2009 8:39 AM by mewk

    How can I scale Flex smoothly?

    tvn studios Level 1

      I have a flex application that fills the browser window completely using percentages, but there are a total of 12 components within the application that act as graphs/charts.  I want the components to scale smoothly and sty consistent when the browser window is resized.  Sometimes they overlap and even spread away from each other in significant distances.  What are my options here?  I'm guessing the scalex and scaley methods, but I was hoping to get some help on using them.  I also think the idea of a container around each chart/graph would work, but I wanted to post the question first before spending more hours making myself crazy.  Please find the application mxml file below and THANK you so much for your help!!!!!!!

      -Tyler

       

       

       

      <?xml version="1.0"?>

       

      <!-- mxml/WipeLeftEffect.mxml -->

       

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

       

        pageTitle="FredEA" width="100%" height="100%"

       

        layout="absolute" backgroundColor="#18188A"

       

        creationComplete="continueUpdate();" resize="onResize();">

       

        <mx:Style>

       

       

       

        </mx:Style>

       

        <mx:Script>

       

          <![CDATA[

       

            import mx.events.DropdownEvent;

       

            import mx.events.ListEvent;

       

            import mx.events.IndexChangedEvent;

       

            import mx.collections.ArrayCollection;

       

            import flash.events.Event;

       

            import flash.net.URLLoader;

       

            import flash.net.URLRequest;

       

            import flash.net.URLRequestHeader;

       

            import flash.utils.Timer;

       

            import flash.events.TimerEvent;

       

       

       

       

       

            private function onResize():void

       

            {

       

              if(pair_1_m1==null)

       

              {

       

                return;

       

              }

       

       

       

              var rate_w:Number = this.width/this.measuredWidth;

       

              var rate_h:Number = this.height/this.measuredHeight;

       

       

       

              var rate:Number = rate_w;

       

       

       

              pair_1_m1.scaleX = rate;

       

              pair_1_m1.scaleY = rate;

       

              pair_1_m5.scaleX = rate;

       

              pair_1_m5.scaleY = rate;

       

              pair_1_m5.x = pair_1_m1.x+pair_1_m1.width+5;

       

              pair_1_m15.scaleX = rate;

       

              pair_1_m15.scaleY = rate;

       

              pair_1_m15.x = pair_1_m5.x+pair_1_m5.width+5;

       

              pair_1_m30.scaleX = rate;

       

              pair_1_m30.scaleY = rate;

       

              pair_1_m30.x = pair_1_m15.x+pair_1_m15.width+5;

       

              pair_1_h1.scaleX = rate;

       

              pair_1_h1.scaleY = rate;

       

              pair_1_h1.x = pair_1_m30.x+pair_1_m30.width+5;

       

              pair_1_h4.scaleX = rate;

       

              pair_1_h4.scaleY = rate;

       

              pair_1_h4.x = pair_1_h1.x+pair_1_h1.width+5;

       

       

       

              pair_2_combo.y = pair_1_m1.height+80;

       

              pair_2_lastupdate.y = pair_2_combo.y+2;

       

              pair_2_time.y = pair_2_combo.y+2;

       

       

       

              pair_2_m1.scaleX = rate;

       

              pair_2_m1.scaleY = rate;

       

              pair_2_m1.y = pair_2_time.y+28;

       

              pair_2_m5.scaleX = rate;

       

              pair_2_m5.scaleY = rate;

       

              pair_2_m5.x = pair_2_m1.x+pair_2_m1.width+5;

       

              pair_2_m5.y = pair_2_m1.y;

       

              pair_2_m15.scaleX = rate;

       

              pair_2_m15.scaleY = rate;

       

              pair_2_m15.x = pair_2_m5.x+pair_2_m5.width+5;

       

              pair_2_m15.y = pair_2_m1.y;

       

              pair_2_m30.scaleX = rate;

       

              pair_2_m30.scaleY = rate;

       

              pair_2_m30.x = pair_2_m15.x+pair_2_m15.width+5;

       

              pair_2_m30.y = pair_2_m1.y;

       

              pair_2_h1.scaleX = rate;

       

              pair_2_h1.scaleY = rate;

       

              pair_2_h1.x = pair_2_m30.x+pair_2_m30.width+5;

       

              pair_2_h1.y = pair_2_m1.y;

       

              pair_2_h4.scaleX = rate;

       

              pair_2_h4.scaleY = rate;

       

              pair_2_h4.x = pair_2_h1.x+pair_2_h1.width+5;

       

              pair_2_h4.y = pair_2_m1.y;

       

       

       

            }

       

       

       

            public var server_host:String = "http://www.fgccenter.info";//"http://kolier.li";//"http://fredworthy.com";

       

            public var server_path:String = "/fredea/metatrader/experts/files/Sea_Data/";

       

            public var pairs:ArrayCollection = new ArrayCollection(

       

            [ {label:"Pair_1", data:1},

       

              {label:"Pair_2", data:2},

       

              {label:"Pair_3", data:3},

       

              {label:"Pair_4", data:4},

       

              {label:"Pair_5", data:5},

       

              {label:"Pair_6", data:6},

       

              {label:"Pair_7", data:7},

       

              {label:"Pair_8", data:8},

       

              {label:"Pair_9", data:9},

       

              {label:"Pair_10", data:10},

       

              {label:"Pair_11", data:11},

       

              {label:"Pair_12", data:12},

       

              {label:"Pair_13", data:13},

       

              {label:"Pair_14", data:14},

       

              {label:"Pair_15", data:15},

       

              {label:"Pair_16", data:16},

       

              {label:"Pair_17", data:17},

       

              {label:"Pair_18", data:18},

       

              {label:"Pair_19", data:19},

       

              {label:"Pair_20", data:20},

       

              {label:"Pair_21", data:21},

       

              {label:"Pair_22", data:22},

       

              {label:"Pair_23", data:23},

       

              {label:"Pair_24", data:24},

       

              {label:"Pair_25", data:25},

       

              {label:"Pair_26", data:26},

       

              {label:"Pair_27", data:27},

       

              {label:"Pair_28", data:28},

       

              {label:"Pair_29", data:29},

       

              {label:"Pair_30", data:30},

       

              {label:"Pair_31", data:31} ]); 

       

       

       

            private var xml_loader:URLLoader = new URLLoader();

       

            private var xml:XML = new XML();

       

            private function pairChange(event:Event):void

       

            {

       

              var xml_file:String = server_host + server_path + "pair_" + (Number(ComboBox(event.target).selectedIndex)+1) + ".xml";

       

              var xml_request:URLRequest = new URLRequest(xml_file);

       

              xml_request.requestHeaders.push(new URLRequestHeader("Cache-Control", "no-store"));

       

              xml_request.requestHeaders.push(new URLRequestHeader("pragma", "no-cache"));

       

              xml_loader.load(xml_request);

       

              xml_loader.addEventListener(Event.COMPLETE, chartUpdate);

       

            }

       

       

       

            private function pairChange1(event:TimerEvent):void

       

            {

       

              pair_1_combo.dispatchEvent(new ListEvent("change"));

       

            }

       

       

       

            private function pairChange2(event:TimerEvent):void

       

            {

       

               pair_2_combo.dispatchEvent(new ListEvent("change"));

       

            }

       

       

       

            private function continueUpdate():void

       

            {

       

              var myTimer1:Timer = new Timer(1000);

       

              myTimer1.addEventListener(TimerEvent.TIMER, pairChange1);

       

       

       

              var myTimer2:Timer = new Timer(1000);

       

              myTimer2.addEventListener(TimerEvent.TIMER, pairChange2);

       

       

       

              myTimer1.start();

       

              myTimer2.start();

       

            }

       

       

       

            private function chartUpdate(event:Event):void

       

            {

       

              xml = new XML(xml_loader.data);

       

              var pair_name:String = xml.attribute("name");

       

              var time_update:int = xml.attribute("time");

       

              var pair_num:Number = xml.attribute("number");

       

       

       

              if((Number(pair_1_combo.selectedIndex)+1)==pair_num)

       

              {

       

                pair_1_time.text = String(time_update);

       

       

       

                pair_1_m1.data_cell_1 = Number(xml.tf.(@period=="1").cell.(@id=="1").toString());

       

                pair_1_m1.data_cell_2 = Number(xml.tf.(@period=="1").cell.(@id=="2").toString());

       

                pair_1_m1.data_cell_3 = xml.tf.(@period=="1").cell.(@id=="3").toString();

       

                pair_1_m1.data_cell_4 = xml.tf.(@period=="1").cell.(@id=="4").toString();

       

                pair_1_m1.data_cell_5 = xml.tf.(@period=="1").cell.(@id=="5").toString();

       

                pair_1_m1.data_cell_6 = Number(xml.tf.(@period=="1").cell.(@id=="6").toString());

       

                pair_1_m1.data_cell_7 = xml.tf.(@period=="1").cell.(@id=="7").toString();

       

                pair_1_m1.data_cell_8 = xml.tf.(@period=="1").cell.(@id=="8").toString();

       

                pair_1_m1.data_cell_9 = Number(xml.tf.(@period=="1").cell.(@id=="9").toString());

       

                pair_1_m1.data_cell_10 = Number(xml.tf.(@period=="1").cell.(@id=="10").toString());

       

                pair_1_m1.data_cell_11 = Number(xml.tf.(@period=="1").cell.(@id=="11").toString());

       

                pair_1_m1.complete();

       

       

       

                pair_1_m5.data_cell_1 = Number(xml.tf.(@period=="5").cell.(@id=="1").toString());

       

                pair_1_m5.data_cell_2 = Number(xml.tf.(@period=="5").cell.(@id=="2").toString());

       

                pair_1_m5.data_cell_3 = xml.tf.(@period=="5").cell.(@id=="3").toString();

       

                pair_1_m5.data_cell_4 = xml.tf.(@period=="5").cell.(@id=="4").toString();

       

                pair_1_m5.data_cell_5 = xml.tf.(@period=="5").cell.(@id=="5").toString();

       

                pair_1_m5.data_cell_6 = Number(xml.tf.(@period=="5").cell.(@id=="6").toString());

       

                pair_1_m5.data_cell_7 = xml.tf.(@period=="5").cell.(@id=="7").toString();

       

                pair_1_m5.data_cell_8 = xml.tf.(@period=="5").cell.(@id=="8").toString();

       

                pair_1_m5.data_cell_9 = Number(xml.tf.(@period=="5").cell.(@id=="9").toString());

       

                pair_1_m5.data_cell_10 = Number(xml.tf.(@period=="5").cell.(@id=="10").toString());

       

                pair_1_m5.data_cell_11 = Number(xml.tf.(@period=="5").cell.(@id=="11").toString());

       

                pair_1_m5.complete();

       

       

       

                pair_1_m15.data_cell_1 = Number(xml.tf.(@period=="15").cell.(@id=="1").toString());

       

                pair_1_m15.data_cell_2 = Number(xml.tf.(@period=="15").cell.(@id=="2").toString());

       

                pair_1_m15.data_cell_3 = xml.tf.(@period=="15").cell.(@id=="3").toString();

       

                pair_1_m15.data_cell_4 = xml.tf.(@period=="15").cell.(@id=="4").toString();

       

                pair_1_m15.data_cell_5 = xml.tf.(@period=="15").cell.(@id=="5").toString();

       

                pair_1_m15.data_cell_6 = Number(xml.tf.(@period=="15").cell.(@id=="6").toString());

       

                pair_1_m15.data_cell_7 = xml.tf.(@period=="15").cell.(@id=="7").toString();

       

                pair_1_m15.data_cell_8 = xml.tf.(@period=="15").cell.(@id=="8").toString();

       

                pair_1_m15.data_cell_9 = Number(xml.tf.(@period=="15").cell.(@id=="9").toString());

       

                pair_1_m15.data_cell_10 = Number(xml.tf.(@period=="15").cell.(@id=="10").toString());

       

                pair_1_m15.data_cell_11 = Number(xml.tf.(@period=="15").cell.(@id=="11").toString());

       

                pair_1_m15.complete();

       

       

       

                pair_1_m30.data_cell_1 = Number(xml.tf.(@period=="30").cell.(@id=="1").toString());

       

                pair_1_m30.data_cell_2 = Number(xml.tf.(@period=="30").cell.(@id=="2").toString());

       

                pair_1_m30.data_cell_3 = xml.tf.(@period=="30").cell.(@id=="3").toString();

       

                pair_1_m30.data_cell_4 = xml.tf.(@period=="30").cell.(@id=="4").toString();

       

                pair_1_m30.data_cell_5 = xml.tf.(@period=="30").cell.(@id=="5").toString();

       

                pair_1_m30.data_cell_6 = Number(xml.tf.(@period=="30").cell.(@id=="6").toString());

       

                pair_1_m30.data_cell_7 = xml.tf.(@period=="30").cell.(@id=="7").toString();

       

                pair_1_m30.data_cell_8 = xml.tf.(@period=="30").cell.(@id=="8").toString();

       

                pair_1_m30.data_cell_9 = Number(xml.tf.(@period=="30").cell.(@id=="9").toString());

       

                pair_1_m30.data_cell_10 = Number(xml.tf.(@period=="30").cell.(@id=="10").toString());

       

                pair_1_m30.data_cell_11 = Number(xml.tf.(@period=="30").cell.(@id=="11").toString());

       

                pair_1_m30.complete();

       

       

       

                pair_1_h1.data_cell_1 = Number(xml.tf.(@period=="60").cell.(@id=="1").toString());

       

                pair_1_h1.data_cell_2 = Number(xml.tf.(@period=="60").cell.(@id=="2").toString());

       

                pair_1_h1.data_cell_3 = xml.tf.(@period=="60").cell.(@id=="3").toString();

       

                pair_1_h1.data_cell_4 = xml.tf.(@period=="60").cell.(@id=="4").toString();

       

                pair_1_h1.data_cell_5 = xml.tf.(@period=="60").cell.(@id=="5").toString();

       

                pair_1_h1.data_cell_6 = Number(xml.tf.(@period=="60").cell.(@id=="6").toString());

       

                pair_1_h1.data_cell_7 = xml.tf.(@period=="60").cell.(@id=="7").toString();

       

                pair_1_h1.data_cell_8 = xml.tf.(@period=="60").cell.(@id=="8").toString();

       

                pair_1_h1.data_cell_9 = Number(xml.tf.(@period=="60").cell.(@id=="9").toString());

       

                pair_1_h1.data_cell_10 = Number(xml.tf.(@period=="60").cell.(@id=="10").toString());

       

                pair_1_h1.data_cell_11 = Number(xml.tf.(@period=="60").cell.(@id=="11").toString());

       

                pair_1_h1.complete();

       

       

       

                pair_1_h4.data_cell_1 = Number(xml.tf.(@period=="240").cell.(@id=="1").toString());

       

                pair_1_h4.data_cell_2 = Number(xml.tf.(@period=="240").cell.(@id=="2").toString());

       

                pair_1_h4.data_cell_3 = xml.tf.(@period=="240").cell.(@id=="3").toString();

       

                pair_1_h4.data_cell_4 = xml.tf.(@period=="240").cell.(@id=="4").toString();

       

                pair_1_h4.data_cell_5 = xml.tf.(@period=="240").cell.(@id=="5").toString();

       

                pair_1_h4.data_cell_6 = Number(xml.tf.(@period=="240").cell.(@id=="6").toString());

       

                pair_1_h4.data_cell_7 = xml.tf.(@period=="240").cell.(@id=="7").toString();

       

                pair_1_h4.data_cell_8 = xml.tf.(@period=="240").cell.(@id=="8").toString();

       

                pair_1_h4.data_cell_9 = Number(xml.tf.(@period=="240").cell.(@id=="9").toString());

       

                pair_1_h4.data_cell_10 = Number(xml.tf.(@period=="240").cell.(@id=="10").toString());

       

                pair_1_h4.data_cell_11 = Number(xml.tf.(@period=="240").cell.(@id=="11").toString());

       

                pair_1_h4.complete();

       

              }

       

       

       

              if((Number(pair_2_combo.selectedIndex)+1)==pair_num)

       

              {

       

                pair_2_time.text = String(time_update);

       

       

       

                pair_2_m1.data_cell_1 = Number(xml.tf.(@period=="1").cell.(@id=="1").toString());

       

                pair_2_m1.data_cell_2 = Number(xml.tf.(@period=="1").cell.(@id=="2").toString());

       

                pair_2_m1.data_cell_3 = xml.tf.(@period=="1").cell.(@id=="3").toString();

       

                pair_2_m1.data_cell_4 = xml.tf.(@period=="1").cell.(@id=="4").toString();

       

                pair_2_m1.data_cell_5 = xml.tf.(@period=="1").cell.(@id=="5").toString();

       

                pair_2_m1.data_cell_6 = Number(xml.tf.(@period=="1").cell.(@id=="6").toString());

       

                pair_2_m1.data_cell_7 = xml.tf.(@period=="1").cell.(@id=="7").toString();

       

                pair_2_m1.data_cell_8 = xml.tf.(@period=="1").cell.(@id=="8").toString();

       

                pair_2_m1.data_cell_9 = Number(xml.tf.(@period=="1").cell.(@id=="9").toString());

       

                pair_2_m1.data_cell_10 = Number(xml.tf.(@period=="1").cell.(@id=="10").toString());

       

                pair_2_m1.data_cell_11 = Number(xml.tf.(@period=="1").cell.(@id=="11").toString());

       

                pair_2_m1.complete();

       

       

       

                pair_2_m5.data_cell_1 = Number(xml.tf.(@period=="5").cell.(@id=="1").toString());

       

                pair_2_m5.data_cell_2 = Number(xml.tf.(@period=="5").cell.(@id=="2").toString());

       

                pair_2_m5.data_cell_3 = xml.tf.(@period=="5").cell.(@id=="3").toString();

       

                pair_2_m5.data_cell_4 = xml.tf.(@period=="5").cell.(@id=="4").toString();

       

                pair_2_m5.data_cell_5 = xml.tf.(@period=="5").cell.(@id=="5").toString();

       

                pair_2_m5.data_cell_6 = Number(xml.tf.(@period=="5").cell.(@id=="6").toString());

       

                pair_2_m5.data_cell_7 = xml.tf.(@period=="5").cell.(@id=="7").toString();

       

                pair_2_m5.data_cell_8 = xml.tf.(@period=="5").cell.(@id=="8").toString();

       

                pair_2_m5.data_cell_9 = Number(xml.tf.(@period=="5").cell.(@id=="9").toString());

       

                pair_2_m5.data_cell_10 = Number(xml.tf.(@period=="5").cell.(@id=="10").toString());

       

                pair_2_m5.data_cell_11 = Number(xml.tf.(@period=="5").cell.(@id=="11").toString());

       

                pair_2_m5.complete();

       

       

       

                pair_2_m15.data_cell_1 = Number(xml.tf.(@period=="15").cell.(@id=="1").toString());

       

                pair_2_m15.data_cell_2 = Number(xml.tf.(@period=="15").cell.(@id=="2").toString());

       

                pair_2_m15.data_cell_3 = xml.tf.(@period=="15").cell.(@id=="3").toString();

       

                pair_2_m15.data_cell_4 = xml.tf.(@period=="15").cell.(@id=="4").toString();

       

                pair_2_m15.data_cell_5 = xml.tf.(@period=="15").cell.(@id=="5").toString();

       

                pair_2_m15.data_cell_6 = Number(xml.tf.(@period=="15").cell.(@id=="6").toString());

       

                pair_2_m15.data_cell_7 = xml.tf.(@period=="15").cell.(@id=="7").toString();

       

                pair_2_m15.data_cell_8 = xml.tf.(@period=="15").cell.(@id=="8").toString();

       

                pair_2_m15.data_cell_9 = Number(xml.tf.(@period=="15").cell.(@id=="9").toString());

       

                pair_2_m15.data_cell_10 = Number(xml.tf.(@period=="15").cell.(@id=="10").toString());

       

                pair_2_m15.data_cell_11 = Number(xml.tf.(@period=="15").cell.(@id=="11").toString());

       

                pair_2_m15.complete();

       

       

       

                pair_2_m30.data_cell_1 = Number(xml.tf.(@period=="30").cell.(@id=="1").toString());

       

                pair_2_m30.data_cell_2 = Number(xml.tf.(@period=="30").cell.(@id=="2").toString());

       

                pair_2_m30.data_cell_3 = xml.tf.(@period=="30").cell.(@id=="3").toString();

       

                pair_2_m30.data_cell_4 = xml.tf.(@period=="30").cell.(@id=="4").toString();

       

                pair_2_m30.data_cell_5 = xml.tf.(@period=="30").cell.(@id=="5").toString();

       

                pair_2_m30.data_cell_6 = Number(xml.tf.(@period=="30").cell.(@id=="6").toString());

       

                pair_2_m30.data_cell_7 = xml.tf.(@period=="30").cell.(@id=="7").toString();

       

                pair_2_m30.data_cell_8 = xml.tf.(@period=="30").cell.(@id=="8").toString();

       

                pair_2_m30.data_cell_9 = Number(xml.tf.(@period=="30").cell.(@id=="9").toString());

       

                pair_2_m30.data_cell_10 = Number(xml.tf.(@period=="30").cell.(@id=="10").toString());

       

                pair_2_m30.data_cell_11 = Number(xml.tf.(@period=="30").cell.(@id=="11").toString());

       

                pair_2_m30.complete();

       

       

       

                pair_2_h1.data_cell_1 = Number(xml.tf.(@period=="60").cell.(@id=="1").toString());

       

                pair_2_h1.data_cell_2 = Number(xml.tf.(@period=="60").cell.(@id=="2").toString());

       

                pair_2_h1.data_cell_3 = xml.tf.(@period=="60").cell.(@id=="3").toString();

       

                pair_2_h1.data_cell_4 = xml.tf.(@period=="60").cell.(@id=="4").toString();

       

                pair_2_h1.data_cell_5 = xml.tf.(@period=="60").cell.(@id=="5").toString();

       

                pair_2_h1.data_cell_6 = Number(xml.tf.(@period=="60").cell.(@id=="6").toString());

       

                pair_2_h1.data_cell_7 = xml.tf.(@period=="60").cell.(@id=="7").toString();

       

                pair_2_h1.data_cell_8 = xml.tf.(@period=="60").cell.(@id=="8").toString();

       

                pair_2_h1.data_cell_9 = Number(xml.tf.(@period=="60").cell.(@id=="9").toString());

       

                pair_2_h1.data_cell_10 = Number(xml.tf.(@period=="60").cell.(@id=="10").toString());

       

                pair_2_h1.data_cell_11 = Number(xml.tf.(@period=="60").cell.(@id=="11").toString());

       

                pair_2_h1.complete();

       

       

       

                pair_2_h4.data_cell_1 = Number(xml.tf.(@period=="240").cell.(@id=="1").toString());

       

                pair_2_h4.data_cell_2 = Number(xml.tf.(@period=="240").cell.(@id=="2").toString());

       

                pair_2_h4.data_cell_3 = xml.tf.(@period=="240").cell.(@id=="3").toString();

       

                pair_2_h4.data_cell_4 = xml.tf.(@period=="240").cell.(@id=="4").toString();

       

                pair_2_h4.data_cell_5 = xml.tf.(@period=="240").cell.(@id=="5").toString();

       

                pair_2_h4.data_cell_6 = Number(xml.tf.(@period=="240").cell.(@id=="6").toString());

       

                pair_2_h4.data_cell_7 = xml.tf.(@period=="240").cell.(@id=="7").toString();

       

                pair_2_h4.data_cell_8 = xml.tf.(@period=="240").cell.(@id=="8").toString();

       

                pair_2_h4.data_cell_9 = Number(xml.tf.(@period=="240").cell.(@id=="9").toString());

       

                pair_2_h4.data_cell_10 = Number(xml.tf.(@period=="240").cell.(@id=="10").toString());

       

                pair_2_h4.data_cell_11 = Number(xml.tf.(@period=="240").cell.(@id=="11").toString());

       

                pair_2_h4.complete();

       

              }

       

            }

       

          ]]>

       

        </mx:Script>

       

       

       

       

       

        <mx:ComboBox id="pair_1_combo" x="10" y="15" rowCount="6" dataProvider="{}">

       

          <mx:change>

       

            <![CDATA[

       

              pair_1_combo.addEventListener(ListEvent.CHANGE, pairChange);

       

            ]]>

       

          </mx:change>

       

        </mx:ComboBox>

       

        <mx:Text x="151" y="17" text="LastUpdate:" color="#FFFFFF"/>

       

        <mx:Text id="pair_1_time" x="232" y="17" text="Text" color="#FFFFFF"/>

       

        <local:Chart id="pair_1_m1" x="10" y="45" data_tf="M1"/>

       

        <local:Chart id="pair_1_m5" x="215" y="45" data_tf="M5"/>

       

        <local:Chart id="pair_1_m15" x="420" y="45" data_tf="M15"/>

       

        <local:Chart id="pair_1_m30" x="625" y="45" data_tf="M30"/>

       

        <local:Chart id="pair_1_h1" x="830" y="45" data_tf="H1"/>

       

        <local:Chart id="pair_1_h4" x="1035" y="45" data_tf="H4"/>

       

       

       

       

       

        <mx:ComboBox id="pair_2_combo" x="10" y="340" rowCount="6" dataProvider="{}">

       

            <mx:change>

       

            <![CDATA[

       

              pair_2_combo.addEventListener(ListEvent.CHANGE, pairChange);

       

            ]]>

       

          </mx:change>

       

        </mx:ComboBox>

       

        <mx:Text id="pair_2_lastupdate" x="151" y="342" text="LastUpdate:" color="#FFFFFF"/>

       

        <mx:Text id="pair_2_time" x="232" y="342" text="Text" color="#FFFFFF"/>

       

        <local:Chart id="pair_2_m1" x="10" y="370" data_tf="M1"/>

       

        <local:Chart id="pair_2_m5" x="215" y="370" data_tf="M5"/>

       

        <local:Chart id="pair_2_m15" x="420" y="370" data_tf="M15"/>

       

        <local:Chart id="pair_2_m30" x="625" y="370" data_tf="M30"/>

       

        <local:Chart id="pair_2_h1" x="830" y="370" data_tf="H1"/>

       

        <local:Chart id="pair_2_h4" x="1035" y="370" data_tf="H4"/>

       

       

       

      </mx:Application>

       

       

       

        • 1. Re: How can I scale Flex smoothly?
          Flex harUI Adobe Employee

          Scaling a parent container might be the better option.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          1 person found this helpful
          • 2. Re: How can I scale Flex smoothly?
            tvn studios Level 1

            Thanks so much!  If you have the time can you assist me in accomplishing that?

             

            So grateful,

            -Tyler

            • 3. Re: How can I scale Flex smoothly?
              mewk Level 3

              Hey-o,

               

              Here is some sample code, which mixes Alex's suggestion with a design similar to what you've given. It's basically a scale effect applied to a parent container which holds a tile list of colored boxes; resizing the browser/application window will scale all the components such that everything fits within view. (see appended swf)

               

               

              <?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/halo"
                       minWidth="200" minHeight="100"
                       resize="resizeMainGroup()"
                       initialize="createBoxes()">
                <fx:Script>
                  <![CDATA[
                    import mx.events.ResizeEvent;
                    import mx.utils.HSBColor;
              
                    import spark.components.Border;
                    import spark.components.Label;
              
                    [Bindable] private var scale:Number = 1;
              
                    /*
                     * generates and adds 18 Border components to mainGroup
                     */
                    private function createBoxes():void {
                      var hsb:HSBColor;
                      for (var i:int = 0; i < 18; i++ ) { // six horizontally-tiled red boxes
                        var myB:Border = new Border();
                        if (i < 6) {
                          hsb = HSBColor.convertRGBtoHSB(0xff0000);
                          hsb.brightness = (i+1)/6;
                        } else if ( i < 12 ) {  // green boxes
                          hsb = HSBColor.convertRGBtoHSB(0x00ff00);
                          hsb.brightness = (i-5)/6;
                        } else { // blue boxes
                          hsb = HSBColor.convertRGBtoHSB(0x0000ff);
                          hsb.brightness = (i-11)/6
                        }
                        myB.setStyle( "backgroundColor", HSBColor.convertHSBtoRGB(hsb.hue, hsb.saturation, hsb.brightness) );
                        myB.setStyle("backgroundAlpha", .7);
                        myB.width = 100;
                        myB.height = 100;
                        var myL:Label =  new Label();
                        myL.text = "hello world #" + i;
                        myL.verticalCenter = 0;
                        myL.horizontalCenter = 0;
                        myB.addElement(myL);
                        mainGroup.addElement(myB);
              
                      }
                    }
              
                    /*
                     * function is triggered on resizes to main application. scales #mainGroup such that
                     * mainGroup always fits exactly w/in the application.
                     */
                    protected function resizeMainGroup():void {
                      var scaleW:Number = 1;
                      var scaleH:Number = 1;
              
                      scaleW = this.width / 800;
                      scaleH = this.height / 380;
              
                      // determine the appropriate scale factor and sets a minimum
                      scale = Math.max( 0.25, Math.min( scaleW, scaleH ) );
                      myScaleEffect.play();
                    }
              
                    /*
                     * resizes group with a maximum scale factor -- currently unused
                     */
                    protected function resizeMainGroup2():void {
                      var scaleW:Number = 1;
                      var scaleH:Number = 1;
              
                      if (this.width < 800) {
                      scaleW = this.width / 800;
                      }
                      if (this.height < 380) {
                      scaleH = this.height / 380;
                      }
                      scale = Math.max( 0.25, Math.min( scaleW, scaleH ) );
                      myScaleEffect.play();
                    }
              
                  ]]>
                </fx:Script>
              
                <fx:Declarations>
                  <s:Scale id="myScaleEffect" target="{mainGroup}" duration="200" scaleXTo="{scale}" scaleYTo="{scale}" />
                </fx:Declarations>
              
                <s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0"
                     width="800" height="380"
                     creationComplete="resizeMainGroup()">
                  <s:layout>
                    <s:TileLayout requestedColumnCount="6" requestedRowCount="3"
                            columnAlign="justifyUsingGap" horizontalGap="40" verticalGap="40"/>
                  </s:layout>
                </s:Group>
              
              </s:Application>
              

               

               

              To be honest, I'm not sure if I'd use this particular approach in my own work. I'd probably use a fluid layout with constant sizes for the chart components and, if really needed, I might create different style sheets for various screen resolutions and then dynamically load the appropriate css at run time.

               

              The code above is still kinda fun though. Best,

               

              - e