4 Replies Latest reply on Jan 25, 2010 9:58 AM by pip master

    Parent Container For A Component (to scale)

    tvn studios

      Greetings To All That Are A Genius Of Flex!

       

      This flex application was originally designed by an overseas programmer.  With that said, I do know that the code is sloppy and could definitely be further optimized-still, my issue is in placing a parent container around the graph that is written in the following file.  The graph, or chart if you will, is a certain size, and grows and shrinks as the browser windfows changes- but it is not consistent and in the main application they are side by side and also above and below-they overlap each other at times.  I just want to wrap them in a container so that they scale smoothly, and so they don't overlap each other.  Can anyone be so kind as to assist?

       

      I'm SO grateful for your time and consideration!

       

      -Tyler

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

       

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="202.66666" height="262.6667"

       

        borderColor="#5555FF" cornerRadius="10" alpha="1"

       

        borderStyle="none" borderThickness="0" creationComplete="init();" borderSides="0">

        <mx:Script>

       

          <![CDATA[

       

            import mx.controls.sliderClasses.SliderThumb;

       

            import mx.validators.ValidationResult;

       

            import mx.core.UIComponent;

       

            import flash.display.GradientType;

       

            import flash.geom.Matrix;

       

            

       

            [bindable]

       

            public var data_tf:String = "TF";

       

            public var data_cell_1:Number = 50;

       

            public var data_cell_2:Number = 100;

       

            public var data_cell_3:String = "2,111,000";

       

            public var data_cell_4:String = "2,111,000";

       

            public var data_cell_5:String = "EURUSD";

       

            public var data_cell_6:Number = 100;

       

            public var data_cell_7:String = "2,111,000";

       

            public var data_cell_8:String = "2,111,000";

       

            public var data_cell_9:Number = 50;

       

            public var data_cell_10:Number = 1;

       

            public var data_cell_11:Number = 50;

       

                       

       

           

       

            public function init():void

       

            {

       

              drawBackground();

       

              drawGreenBig();

       

              drawGreenSmall();

       

              drawRedBig();

       

              drawRedSmall();

       

              drawTriangleRed();

       

              drawTriangleGreen();

       

            }

       

           

       

            public function complete():void

       

            {

       

              // Remove the old Rectangles

       

              green_big.removeChildAt(0);

       

              green_small.removeChildAt(0);

       

              red_big.removeChildAt(0);

       

              red_small.removeChildAt(0);

       

       

       

              drawGreenBig();

       

              drawGreenSmall();

       

              drawRedBig();

       

              drawRedSmall();

       

       

       

              tf.text = data_tf;

       

              slider_volume.value = data_cell_1;

       

              cell_5.text = data_cell_5; //Pair

       

              cell_3.text = numberFormatter.format(data_cell_3);

       

              cell_4.text = numberFormatter.format(data_cell_4);

       

              cell_7.text = numberFormatter.format(data_cell_7);

       

              cell_8.text = numberFormatter.format(data_cell_8);

       

            }

       

           

       

            private function drawBackground():void

       

            {

       

              var back_ground:UIComponent = new UIComponent();

       

              var myMatrix:Matrix = new Matrix();

       

              var myColors:Array = [0x6464DA, 0x2D2D9D];

       

              var myAlphaS:Array = [100, 100];

       

              var myRalphaS:Array = [0, 225];

       

       

              back_ground.graphics.drawRect(0, 0, this.width-0, this.height-0);

       

              this.addChildAt(back_ground, 0);

       

            }

       

           

       

            private function drawGreenBig():void

       

            {

       

              var rec_green_big:UIComponent = new UIComponent();

       

              var myMatrix:Matrix = new Matrix();

       

              myMatrix.createGradientBox(50, 100, 0, 0, 0);

       

              var myColors:Array = [0x039003, 0x032003];

       

              var myAlphaS:Array = [100, 100];

       

              var myRalphaS:Array = [0, 225];

       

              rec_green_big.graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS, myRalphaS, myMatrix);

       

              rec_green_big.graphics.drawRect(0, green_big.height-2, green_big.width-2, -145*data_cell_6/(data_cell_6+data_cell_2));

       

              green_big.addChildAt(rec_green_big, 0);

       

            }

       

           

       

            private function drawRedBig():void

       

            {

       

              var rec_red_big:UIComponent = new UIComponent();

       

              var myMatrix:Matrix = new Matrix();

       

              myMatrix.createGradientBox(70, 100, 0, 0, 0);

       

              var myColors:Array = [0xFF3007, 0x100000];

       

              var myAlphaS:Array = [100, 100];

       

              var myRalphaS:Array = [0, 225];

       

              rec_red_big.graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS, myRalphaS, myMatrix);

       

              rec_red_big.graphics.drawRect(0, red_big.height-2, red_big.width-2, -145*data_cell_2/(data_cell_6+data_cell_2));

       

              red_big.addChildAt(rec_red_big, 0);

       

            }

       

             

       

            private function drawGreenSmall():void

       

            {

       

              var rec_green_small:UIComponent = new UIComponent();

       

              var myMatrix:Matrix = new Matrix();

       

              myMatrix.createGradientBox(50, 100, 0, 0, 0);

       

              var myColors:Array = [0x039003, 0x032003];

       

              var myAlphaS:Array = [100, 100];

       

              var myRalphaS:Array = [0, 225];

       

              rec_green_small.graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS, myRalphaS, myMatrix);

       

              rec_green_small.graphics.drawRect(0, green_small.height-2, green_small.width-2, -145*data_cell_11/100);

       

              green_small.addChild(rec_green_small);

       

            }

       

           

       

            private function drawRedSmall():void

       

            {

       

              var rec_red_small:UIComponent = new UIComponent();

       

              var myMatrix:Matrix = new Matrix();

       

              myMatrix.createGradientBox(10, 100, 0, 0, 0);

       

              var myColors:Array = [0xFF3007, 0x100000];

       

              var myAlphaS:Array = [100, 100];

       

              var myRalphaS:Array = [0, 225];

       

              rec_red_small.graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS, myRalphaS, myMatrix);

       

              rec_red_small.graphics.drawRect(0, green_small.height-2, red_small.width-2, -145*data_cell_9/100);

       

              red_small.addChild(rec_red_small);

       

            }

       

           

       

            private function drawTriangleRed():void

       

            {

       

              var triangle_red:UIComponent = new UIComponent();

       

              triangle_red.graphics.beginFill(0xFF3007);

       

              triangle_red.graphics.moveTo(15, 2);

       

              triangle_red.graphics.lineTo(35, 2);

       

              triangle_red.graphics.lineTo(25, 12);

       

              triangle_red.graphics.lineTo(15, 2);

       

              triangle_red.graphics.endFill();

       

              box_triangle_red.addChild(triangle_red);

       

            }

       

           

       

            private function drawTriangleGreen():void

       

            {

       

              var triangle_green:UIComponent = new UIComponent();

       

              triangle_green.graphics.beginFill(0x33cc33);

       

              triangle_green.graphics.moveTo(25, 2);

       

              triangle_green.graphics.lineTo(15, 12);

       

              triangle_green.graphics.lineTo(35, 12);

       

              triangle_green.graphics.lineTo(25, 2);

       

              triangle_green.graphics.endFill();

       

              box_triangle_green.addChild(triangle_green);

       

            }

       

           

       

          ]]>

       

        </mx:Script>

       

        <mx:NumberFormatter id="numberFormatter" precision="0" useThousandsSeparator="true" useNegativeSign="true"/>

       

        <mx:Label  id="tf" x="85" y="10" text="data_tf" fontWeight="bold"

       

          fontSize="16" color="#FFFF00" textAlign="left" fontFamily="Verdana"/>

       

        <mx:Label id="cell_5" x="140" y="5.5" text="data_cell_5" fontSize="10" color="#FFFF00" fontWeight="normal"/>

       

        <mx:Label x="10" y="31" text="Volume" color="#FFFFFF" fontWeight="bold" fontSize="10"/>

       

        <mx:TextArea x="100" y="52" width="34.5" height="165"

       

          text="100%&#xa; 90%&#xa; 80%&#xa; 70%&#xa; 60%&#xa; 50%&#xa; 40%&#xa; 30%&#xa; 20%&#xa; 10%&#xa;  0%"

       

          fontSize="10" fontFamily="Times New Roman" wordWrap="false" editable="false" borderColor="#5555FF"

       

          borderStyle="none" backgroundAlpha="0" color="#FFFFFF"  verticalScrollPolicy="off" textAlign="center"/>

       

        <mx:TextArea x="12.5" y="52" width="30" height="165"

       

          text="100%&#xa; 90%&#xa; 80%&#xa; 70%&#xa; 60%&#xa; 50%&#xa; 40%&#xa; 30%&#xa; 20%&#xa; 10%&#xa;  0%"

       

          fontSize="10" fontFamily="Times New Roman" wordWrap="false" editable="false" borderColor="#5555FF"

       

          borderStyle="none" backgroundAlpha="0" color="#FFFFFF"  verticalScrollPolicy="off"/>

       

         

       

        <mx:HBox id="box_bottom" x="41" y="211" width="156" height="40.65" horizontalGap="0" borderColor="#ffff00" borderStyle="none" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderThickness="1.5">

       

          <!-- Left -->

       

          <mx:VBox height="36" width="53" verticalGap="0" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" borderColor="#ffff00">

       

            <mx:Box id="box_triangle_red" height="17" width="50" borderColor="#ffff00" borderStyle="none" textAlign="center" paddingLeft="1">

       

              <!-- Triangle -->

       

            </mx:Box>

       

            <mx:Box height="17" width="51"  horizontalScrollPolicy="off" verticalScrollPolicy="off"  borderColor="#ffff00" borderStyle="none">

              <mx:HRule width="51" height="1" strokeColor="#ffff00" strokeWidth="2"/>

       

              <mx:Label id="cell_4" text="data_cell_4" width="51" height="16" fontSize="8" color="#ffff00" textAlign="center" paddingTop="-5"/>

       

            </mx:Box>

       

          </mx:VBox>

       

          <!-- Middle -->

       

          <mx:VBox height="36" width="51" verticalGap="0" borderStyle="solid" borderColor="#FFFF00" borderThickness=".9">

       

            <mx:Box height="17" width="48.333336" borderStyle="none" borderColor="#ffff00">

              <mx:Label text="Market" color="#FFFF00" width="46" height="15" textAlign="center" fontWeight="bold"/>

       

            </mx:Box>

       

            <mx:Box height="17" width="49" borderColor="#ffff00" borderStyle="none">

            <mx:HRule width="57.333336" height="1" strokeColor="#ffff00" strokeWidth="2"/>

            <mx:Label text="Futures" paddingTop="-7" width="49.5" height="9" textAlign="center" color="#ffff00" fontWeight="bold"/>

       

            </mx:Box>

       

          </mx:VBox>

       

          <!-- Right -->

       

          <mx:VBox height="36" width="52" verticalGap="0" borderStyle="solid" borderColor="#ffff00" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderThickness=".9">

       

            <mx:Box id="box_triangle_green" height="17" width="50" borderStyle="none" borderColor="#ffff00" textAlign="center" paddingLeft="1">

       

              <!-- Triangle -->

       

            </mx:Box>

       

            <mx:Box height="17" width="50.666664" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderColor="#ffff00" borderStyle="none">

              <mx:HRule width="51" height="1" strokeColor="#ffff00" strokeWidth="2"/>

       

              <mx:Label id="cell_8" text="data_cell_8"  width="50" height="16" fontSize="8" color="#Ffff00" textAlign="center" paddingTop="-5"/>

       

            </mx:Box>

       

          </mx:VBox>

       

       

       

        </mx:HBox>

       

       

       

        <mx:HBox horizontalGap="0" x="41" y="58" width="63" height="148" borderStyle="solid" borderColor="#ffff00" borderThickness="1.5">

       

          <mx:Canvas id="red_big" height="145" width="51.333336" borderStyle="solid" borderColor="#ffff00" borderThickness=".5">

       

            <mx:Label id="cell_3" text="data_cell_3" y="103" width="50" height="16" fontSize="8" color="#FFFFFF" textAlign="center"/>

       

            <mx:Label text="SELL" fontSize="10" color="#FFFFFF" width="40" height="18" textAlign="center" fontWeight="bold" y="126" x="5"/>

       

          </mx:Canvas>

       

          <mx:Box id="red_small" height="145" width="9" borderStyle="solid" borderColor="#ffff00" borderThickness=".5">

       

          </mx:Box>

       

        </mx:HBox>

       

        <mx:HBox horizontalGap="0" x="134" y="58" width="63" height="148" borderStyle="solid" borderColor="#ffff00" borderThickness="1.5">

       

          <mx:Box id="green_small" height="145" width="9" borderColor="#ffff00" borderStyle="solid" borderThickness=".5">

       

          </mx:Box>

       

          <mx:Canvas id="green_big" height="145" width="51" borderStyle="solid" borderColor="#ffff00" borderThickness=".5">

       

            <mx:Label id="cell_7" text="data_cell_7"  y="102" width="50" height="16" fontSize="8" color="#FFFFFF" textAlign="center" x="0"/>

       

            <mx:Label text="BUY" fontSize="10" color="#FFFFFF" width="40" height="18" textAlign="center" fontWeight="bold" y="126" x="5"/>

       

          </mx:Canvas>

       

        </mx:HBox>

       

        <mx:VSlider id="slider_volume" invertThumbDirection="true" value="{1 * 100}" x="4.5" y="52" snapInterval="1" enabled="false"

       

          liveDragging="false" maximum="100" minimum="0" allowTrackClick="true" width="1" height="155">

       

          <mx:creationComplete>

       

            <![CDATA[

       

              var thumb:UIComponent = slider_volume.getThumbAt(0);

       

              thumb.width = 13;

       

              thumb.height = 13;

       

            ]]>

       

          </mx:creationComplete>

       

        </mx:VSlider>

        <mx:Label x="10" y="5.5" text="Pro-Scan" color="#0315FD" fontWeight="bold" fontSize="10" fontFamily="Verdana" width="57.8" height="18"/>

        <mx:Label x="61" y="16" text="TM" color="#0315FD" fontWeight="bold" fontSize="6" fontFamily="Verdana" width="15" height="11"/>

       

       

       

         

       

         

       

       

       

      </mx:Canvas>