5 Replies Latest reply on Jun 11, 2010 2:00 AM by BhaskerChari

    Dashed/Dotted Line instead of underlined Text

    BhaskerChari Level 4

      Hi All,

       

      I am trying to build a component in which I need to show dashed or dotted line instead of underline for <mx:Text/> control.

       

      Say if I have underlined text in various places in a <mx:Text/> I want the that text should be underlined with a dashed/dotted line but not complete solid line.

       

      How can I acheive this...? Anyone having any ideas on this ...?

       

      Thanks in advance,

      Bhasker Chari

        • 1. Re: Dashed/Dotted Line instead of underlined Text
          BhaskerChari Level 4

          Hi Guys,

           

          Any one out there to who can help me out on this..??

           

          Waiting for your valuable replies...

           

          Thanx in Advance!!
          Bhasker Chari

          • 2. Re: Dashed/Dotted Line instead of underlined Text
            GordonSmith Level 4

            You're going to have to draw the dashed or dotted line yourself, because neither TextFIeld (the text-rendering class that <mx:Text> relies on) or FTE/TLF (the text-rendering classes that Spark text components rely on) do this kind of underlining.

             

            So the first thing you need to learn how to do is determine the coordinates of each character, using TextField APIs such as getCharBoundaries().

             

            Gordon Smith

            Adobe Flex SDK Team

            • 3. Re: Dashed/Dotted Line instead of underlined Text
              BhaskerChari Level 4

              Hi GordonSmith,

               

              Thank you very much for replying...I also had this thought in mind but it would be very difficult it seems because inorder to find the coordinates of each character where the underline is there and push the coordinates into an Array by traversing the whole text and after that we need to draw the lines onto th e UI using the drawing API.

               

              And one more thing I have observed is using the drawing API(by drawing using sprite) we need to add the sprite to the stage so we need to draw for each and every  underlined character using sprite and we need to add it to the stage.

               

              Say if the <mx:Text /> control is in a canvas container then we need to add sprite instance drawing dotted underline for each word and add it to the Canvas container...but this will make the positioning of the dotted line very difficult.

               

               

              Hope this makes sense....

               

               

              Thanks in advance,

              Bhasker Chari

              • 4. Re: Dashed/Dotted Line instead of underlined Text
                JabbyPandaUA Level 3

                Draw a dotted line using skin for <mx:Text> Flex 3 component.

                 

                Or move to Flex 4, declaring skins in MXML is much easier here, plus you can take advantage of FXG graphic primitives.    

                • 5. Re: Dashed/Dotted Line instead of underlined Text
                  BhaskerChari Level 4

                  Hi Guys,

                   

                  I have found a different workaround for this...I tried to implement my own logic...by writing a function which will take a string which takes a text which may contain underlined words, so what the function does is it will check for all the words having underlines and creates a new html string which contains underlines for alternate letters for the underlined words...this way we can show the dashed text for the underlined text.

                  However with this approach the dashes would be uneven as because the underline width will vary based on the character size. However its fine with my case.

                  Find the screenshot attached...

                   

                  dotted.JPG


                  Thanks,

                  Bhasker Chari