5 Replies Latest reply on Aug 20, 2009 10:46 PM by Gregory Lafrance

    Layout problem

    SiHoop Level 1

      I've spent the past 2 days strugging to layout some text on either end of a graphic.The code below is a class that I'm using to display a scoreboard made up of a graphic and some text that indicates scores. The problem is that the Text Area and Text fields cause my graphic to be drawn in the wrong place by several pixels. If I get the Text out of the class everything works, but then I have the problem of placing my text accurately at the ends of the graphic.

       

      I've tried using an HBox and a Canvas, but neither seem to help. Is there another approach that I could try?

      Thank you!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:custom="components.*" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="drawStudentGoalLine()"  >
      <mx:Script>
          <![CDATA[

       

      import caurina.transitions.Tweener;
      import mx.core.UIComponent;
      import mx.core.Application
      private    var goalBox:Shape = new Shape();
      public    var currentScoreBox:Shape = new Shape();
      [Bindable] public var currentGoal:int;
      [Bindable] public var studentsGoal:int;
      public function drawStudentGoalLine():void{

          var lineColor1:uint=0x57782f
          var lineColor2:uint=0xbbc69b;   
          currentScoreBox.graphics.lineStyle(0, lineColor1);
          currentScoreBox.graphics.beginFill(lineColor1, 1)
          goalBox.graphics.lineStyle(0, lineColor2);
          goalBox.graphics.beginFill(lineColor2, 1)
          //Draw the goal and current score boxes
          var boxWidth:int=500
          var currentScoreWidth:int=boxWidth/5//100 px
          //Draw the goalBox
          goalBox.graphics.drawRect(-boxWidth/2, 0, boxWidth, 10);
          //Draw dots below goalbox
          goalBox.graphics.beginFill(lineColor1, 1)
          for(var i:int=0;i<6;i++){
              goalBox.graphics.drawCircle((-boxWidth/2)+(i*100),18,3)
          }
      //Draw a rectangle on top of the goalBox-- it must have at least 1 px. width
          currentScoreBox.graphics.drawRect(0, 0, 1, 10);
          //Place the current score box at the left side of the goalBox
          currentScoreBox.x=-boxWidth/2
      //Each correct answer expands the width of the correct score box: Tween into place
          Tweener.addTween( currentScoreBox, {width:currentScoreWidth*(currentGoal), time:.6, transition:"easeOutQuad" });
          mainDisplay.addChild(goalBox)
          mainDisplay.addChild(currentScoreBox)
          goal0.x=-250
          goal0.y=0
          goal1.x=250
          goal1.y=0
      }

          ]]>
      </mx:Script>
      <mx:TextArea  id="goal0" text="0"   width="20" color="#57782f" fontSize="30"   fontWeight="normal" fontFamily="Arial"
                  focusThickness="0" borderThickness="0" backgroundAlpha="0" selectable="false"      verticalScrollPolicy="off" horizontalScrollPolicy="off" />
      <mx:TextArea  id="goal1" text="1" width="20" color="#57782f"  x="{goal0.x+200}" fontSize="30"   fontWeight="normal" fontFamily="Arial"
                  focusThickness="0" borderThickness="0" backgroundAlpha="0" selectable="false"      verticalScrollPolicy="off" horizontalScrollPolicy="off" />
      <mx:Text  id="studentGoal"  selectable="false"  text="My goal"  color="#96AA7F" styleName="buttonStyle5" />
      <mx:UIComponent id="mainDisplay"   horizontalCenter="true"/>
      </mx:VBox>

        • 1. Re: Layout problem
          Gregory Lafrance Level 6

          I've compiled and launched your app. Please describe how the app should display properly.

          • 2. Re: Layout problem
            SiHoop Level 1

            The class draws a box on the stage. The box, which is drawn as a graphic, is used to indicate progress in a game. At the ends of the box are numbers indicating current performance and a target score. These numbers change as the user moves up through levels. I want to be able to keep the text inside the class as it will then all work together. For example, when I animate the graphic into position, I would like the text values to move with the rest of the display. With the TextArea objects used in their present form, the graphic moves a few pixels to one side of center which looks terrible.

            I've tried to place the text into an HBox, but when I try to set the x-location of the HBox (see the example below) with code using a negative x value (e.g. horrLayout.x=-25), the graphic is partially deleted. I have no idea why this happens!

             

            I hope that is sufficient. Please let me know if you need more. Thanks for your reply.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:custom="components.*" xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="drawStudentGoalLine()"  >
            <mx:Script>
                <![CDATA[

             

            import caurina.transitions.Tweener;
            import mx.core.UIComponent;
            import mx.core.Application
            private    var goalBox:Shape = new Shape();
            public    var currentScoreBox:Shape = new Shape();
            [Bindable] public var currentGoal:int;
            [Bindable] public var studentsGoal:int;
            public function drawStudentGoalLine():void{
                //goal0.addEventListener("valueCommit", doThis)
                var lineColor1:uint=0x57782f
                var lineColor2:uint=0xbbc69b;   
                currentScoreBox.graphics.lineStyle(0, lineColor1);
                currentScoreBox.graphics.beginFill(lineColor1, 1)
                goalBox.graphics.lineStyle(0, lineColor2);
                goalBox.graphics.beginFill(lineColor2, 1)
                //Draw the goal and current score boxes
                var boxWidth:int=500
                var currentScoreWidth:int=boxWidth/5//100 px
                //Draw the goalBox
                goalBox.graphics.drawRect(-boxWidth/2, 0, boxWidth, 10);
                //Draw dots below goalbox
                goalBox.graphics.beginFill(lineColor1, 1)
                for(var i:int=0;i<6;i++){
                    goalBox.graphics.drawCircle((-boxWidth/2)+(i*100),18,3)
                }
            //Draw a rectangle on top of the goalBox-- it must have at least 1 px. width
                currentScoreBox.graphics.drawRect(0, 0, 1, 10);
                //Place the current score box at the left side of the goalBox
                currentScoreBox.x=-boxWidth/2
            //Each correct answer expands the width of the correct score box: Tween into place
                Tweener.addTween( currentScoreBox, {width:currentScoreWidth*(currentGoal), time:.6, transition:"easeOutQuad" });
                mainDisplay.addChild(goalBox)
                mainDisplay.addChild(currentScoreBox)
                horrLayout.x=-25

             

            }

             

                ]]>
            </mx:Script>
            <mx:VBox>
            <mx:UIComponent id="mainDisplay"   horizontalCenter="true"/>
            </mx:VBox>
                <mx:HBox id="horrLayout">
                     <mx:TextArea  id="goal0" text="0"   width="20" color="#57782f" fontSize="30"   fontWeight="normal" fontFamily="Arial"
                        focusThickness="0" borderThickness="0" backgroundAlpha="0" selectable="false"      verticalScrollPolicy="off" horizontalScrollPolicy="off" />
                 </mx:HBox>
            </mx:Canvas>

            • 3. Re: Layout problem
              Gregory Lafrance Level 6

              Hmmm... It seems you changed the code, as before you were using a VBox, and now a Canvas.

               

              It could be me, but I'm not 100% clear on how the UI should render and change as the app is manipulated. Maybe several screen shots would help.

              1 person found this helpful
              • 4. Re: Layout problem
                SiHoop Level 1

                Thanks so much for your reply. Of course, in preparing the files to send to you I solved the problem. That often happens-- I guess it forces me to think clearly. I really appreciate all of your help.

                Thank you.

                • 5. Re: Layout problem
                  Gregory Lafrance Level 6

                  Glad to hear it. So... if my posts answered your question or helped, please mark it as such.