1 Reply Latest reply on Jun 10, 2009 1:22 PM by leybniz

    Laying out components

    SiHoop Level 1

      I'm having difficulty laying out components in a class file. In the code below, I want to place the Text components goal0 and goal1 either side of a rectangular box that I am drawing on the screen. This should be simple, but I don't seem to be able to move them. What am I doing wrong?

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:custom="components.*" xmlns:mx="http://www.adobe.com/2006/mxml"
          creationComplete="drawStudentGoalLine(currentScore, studentsGoal)" dropShadowEnabled="false"   >
      <mx:Script>
          <![CDATA[
      import mx.rpc.http.HTTPService;
      import mx.rpc.events.ResultEvent;
      import mx.core.UIComponent;
      import flash.display.*
      private var params:Object = new Object();
      [Bindable] private var results2:Text;
      [Bindable] private var runningTotalScore:Text;
      private var service:HTTPService;
      private    var goalBox:Shape = new Shape();
      private    var currentScoreBox:Shape = new Shape();
      [Bindable] public var currentScore:int;
      [Bindable] public var studentsGoal:int;
      private var distance:int=20
      public function drawStudentGoalLine(_currentScore:int, _studentsGoal:int):void{
          goal0.text="0"
          goal1.text="1"
          var lineColor1:uint=0x95aa7f
          var lineColor2:uint=0xecefe7;   
          currentScoreBox.graphics.lineStyle(0, lineColor1);
          currentScoreBox.graphics.beginFill(lineColor1, 1)
          goalBox.graphics.lineStyle(0, lineColor2);
          goalBox.graphics.beginFill(lineColor2, 1)
          //Draw the currentScoreBox
          _currentScore=100
          var boxWidth:int=450
          currentScoreBox.graphics.drawRect(-boxWidth/2, 0, _currentScore, 10);

       

          //Draw the goalBox
          goalBox.graphics.drawRect(-boxWidth/2, 0, boxWidth, 10);//red
          goal0.x=100
          goal1.x=600
          studentGoal.x=650
         
          mainDisplay.addChild(goalBox)
          mainDisplay.addChild(currentScoreBox)

       

      }
          ]]>
      </mx:Script>
          <mx:HBox id="goalBoxText">
              <mx:Text id="goal0" color="#96AA7F" fontSize="14"/>
              <mx:Text id="goal1" color="#96AA7F" fontSize="14"/>
              <mx:Text  id="studentGoal"   selectable="false"  text="My goal"  textAlign="right" color="#96AA7F" fontSize="14" fontWeight="bold"/>
          </mx:HBox>

       

         
      <mx:UIComponent id="mainDisplay" />
      </mx:VBox>

        • 1. Re: Laying out components
          leybniz Level 4

          First of all, you are trying to assign x,y values to HBox container which simply cannot operate with them because of it's layout nature.

          DeCart coords appliable for Canvas container only.

           

          Here is few ways on how you can achive your aim:

           

          1.

           

          <mx:HBox id="goalBoxText" width="100%">
                  <mx:Text id="goal0" color="#96AA7F" fontSize="14"/>

                  <mx:Spacer width="100%" />
                  <mx:Text id="goal1" color="#96AA7F" fontSize="14"/>
                  <mx:Text  id="studentGoal"   selectable="false"  text="My goal"  textAlign="right" color="#96AA7F" fontSize="14" fontWeight="bold"/>
          </mx:HBox>

           

          2.

           

          <mx:HBox id="goalBoxText" width="100%">
                  <mx:Text id="goal0" color="#96AA7F" fontSize="14"/>

                 

                  <mx:HBox width="100%" horizontalAlign="right">

                       <mx:Text id="goal1" color="#96AA7F" fontSize="14"/>
                       <mx:Text  id="studentGoal"   selectable="false"  text="My goal"  textAlign="right" color="#96AA7F" fontSize="14" fontWeight="bold"/>

                  </mx:HBox>
          </mx:HBox>

          1 person found this helpful