5 Replies Latest reply on May 31, 2010 11:01 PM by BhaskerChari

    Creating dynamic Text in Flex with different attributes

    iamcootis Level 1

      I am creating a Text field in Flex that looks like this:

       

      <mx:HBox id="lastInfo" styleName="InfoBar" width="100%" visible="false">
                  <mx:Text text="Your last question was:" styleName="underlined"/>
                  <mx:Text id="lastQuestion"  styleName="bold"/>
                  <mx:Text text="Within context:"/>
                  <mx:Text id="lastContext" styleName="bold"/>
                  <mx:Text text="The last answer(s):" styleName="underlined"/>
                  <mx:Text id="lastAnswers"  styleName="bold"/>
      </mx:HBox>

       

      The text that is not dynamic needs to be underlined. The text that come up dynamically needs to be bold.

       

      lastQuestion, lastContext and lastAnswers are populated dynamically. The problem is that if lastAnswers width goes beyond the threshold of the HBox it doesn't carriage return back to the beginning of the complete string.

       

      How can I create this complete string dynamically and with underlines and bold text all into one Text so it will carriage return to the beginning?

        • 1. Re: Creating dynamic Text in Flex with different attributes
          UbuntuPenguin Level 4

          How are you getting a caret ( the blinking text position bar indicator ) if you are just using <mx:Text> components. I thought you could only get that through TextInput and TextArea.  If you are using those , you can just use the textInput.setSelection( 0 , 0 ).

           

          Sincerely ,  

            Ubu

          • 2. Re: Creating dynamic Text in Flex with different attributes
            iamcootis Level 1

            I'm not getting a caret. This is text like a label. I want the text to be able to wrap around to the next line.

            • 3. Re: Creating dynamic Text in Flex with different attributes
              BhaskerChari Level 4

              Hi Cootis,

               

              The text will wrap automatically for the <mx:Text/> only when you specify width for it....otherwise it will not wrap and the whole text will come in a single line.

               

              So specify width as 100% for all the text fields in the HBox as shown below then the text will wrap.

               

              <mx:HBox id="lastInfo" styleName="InfoBar" width="100%" visible="false">
                          <mx:Text text="Your last question was:" width="100%" styleName="underlined"/>
                          <mx:Text id="lastQuestion"  styleName="bold" width="100%"/>
                          <mx:Text text="Within context:" width="100%"/>
                          <mx:Text id="lastContext" width="100%" styleName="bold"/>
                          <mx:Text text="The last answer(s):" width="100%" styleName="underlined"/>
                          <mx:Text id="lastAnswers" width="100%" styleName="bold"/>
              </mx:HBox>

               

              If this post answers your question or helps, please kindly mark it as such.


              Thanks,

              Bhasker Chari

              • 4. Re: Creating dynamic Text in Flex with different attributes
                iamcootis Level 1

                No, you don't understand what I'm asking. Each small piece of Text will wrap individually. I want this whole thing to appear as it's one long piece of text that looks like this

                 

                Your last question was : What is your name. Within Context: Your name The last answer(s): John John John JohnJohn JohnJohn JohnJohn JohnJohn JohnJohn JohnJohn John

                 

                Do you see the difference?

                • 5. Re: Creating dynamic Text in Flex with different attributes
                  BhaskerChari Level 4

                  Hi Cootis,

                  Now I understood your question but the approach you are using is not correct I think because in order to format the way you wanted you need to use only a single <mx:Text/> control and assign the htmlText dynamically.

                  See the sample code below:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

                  <mx:Script>
                    <![CDATA[
                   
                    private var lastQuestion:String = "<b>What is your name.</b>";
                         private var lastContext:String = "<b>Your name</b>";
                         private var lastAnswers:String = "<b>John John John JohnJohn JohnJohn JohnJohn JohnJohn JohnJohn JohnJohn John</b>";
                        
                    public function init():void
                    {
                     variableText.htmlText = "<U>Your last question was:</U>" + lastQuestion + "<U>Within context:</U>" + lastContext + "<U>The last answer(s):</U>" + lastAnswers;
                    }
                    ]]>
                  </mx:Script>
                  <mx:HBox id="lastInfo" styleName="InfoBar" width="450" visible="true">
                       <mx:Text id="variableText" width="100%" />
                  </mx:HBox>
                  </mx:Application>

                   

                  So you need to pouplate the variables dynamically that's it.

                   

                  Hope this works for you.

                   

                  If this post answers your question or helps, please kindly mark it as such.


                  Thanks,

                  Bhasker Chari