16 Replies Latest reply on May 2, 2009 5:10 PM by Michael Borbor

    Formatting not working in TextArea

    mazukas Level 1

      So for my project I must load some text into a text area and then format certain parts of it.  For certain reasons to long to get into here, I must do all of this in ActionScript.  So basically I have something like this.

       

      var container:VBox = new VBox();

      var textArea:TextArea = new TextArea();

      container.addChild(textArea);                     //I learned that the TextField for textArea will not be created until it is assigned to a container

       

      textArea.mx_internal::getTextField().text = "Some example text to be formatted";

       

      var defaultFormat:TextFormat = new TextFormat();

      defaultFormat.size = 24;

       

      var textToBoldFormat:TextFormat = new TextFormat();

      textToBoldFormat.bold = true;

       

      textArea.mx_internal::getTextField().defaultTextFormat = defaultFormat;

      textArea.mx_internal::getTextField().setTextFormat(textToBoldFormat, 5, 11);

       

      When I run this I expect to have very large text with the word, "example" bolded but nothing seems to happen.  Does anyone have any idea why this is.  Thanks in advance.

        • 1. Re: Formatting not working in TextArea
          Gregory Lafrance Level 6

          Use this:

           

          myTextArea.setStyle("fontSize", 20);

          myTextArea.setStyle("fontWeight", "bold");

          • 2. Re: Formatting not working in TextArea
            Barna Biro Level 3

            Hi there,

             

            The TextArea component does not implement a property callade "defaultTextFormat" so you can't use TextFormat object on it ( you could maybe try to extend the class and override some methods to somehow get access to the objects that can support formatting but I think it would just be a hassle ). So, you are stuck with styles:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application 
                xmlns:mx        ="http://www.adobe.com/2006/mxml" 
                layout          ="absolute">
                
                <mx:Script>
                    <![CDATA[
                        
                        private function onApplyBold(event:MouseEvent):void
                        {
                            yourTA.setStyle("fontSize", 24);
                            yourTA.setStyle("fontWeight", "bold"); 
                        }
                        
                        private function onReset(event:MouseEvent):void
                        {
                            yourTA.setStyle("fontSize", 10);
                            yourTA.setStyle("fontWeight", "normal");
                        }
                        
                    ]]>
                </mx:Script>
                
                <mx:VBox
                    width               ="100%"
                    height              ="100%"
                    horizontalAlign     ="center"
                    verticalAlign       ="middle">
                    
                    <mx:TextArea
                        id          ="yourTA"
                        width       ="400"
                        height      ="250"
                        text        ="Some text to be formatted."/>
                        
                    <mx:HBox>
                        <mx:Button
                            label   ="Apply Bold"
                            click   ="onApplyBold(event)"/>
                        <mx:Button
                            label   ="Reset"
                            click   ="onReset(event)"/>
                    </mx:HBox>
                    
                </mx:VBox>
                
            </mx:Application>
            

             

            It's not the most ellegant solution but it's a solution.

             

            Best regards,

            Barna Biro

            • 3. Re: Formatting not working in TextArea
              mazukas Level 1

              Hi Barna, you are correct that the TextArea does not support a property called defaultTextFormat but the TextField that is a child of the TextArea does (this is created automaticly whenever a TextArea is assigned to a container).  That is why I reference the TextField by stating textArea.mx_internal::getTextField() so that I can pull the TextField out of the object and assign formatting to it.  The problem with your solution is while it will take care of the default settings I might want (i.e. the entire document would look a certain way) it doesn't solve my problem of applying formatting to specific parts of the document (i.e. trying to bold a specific word).  I'm afraid this solution is not going to work for me.

              • 4. Re: Formatting not working in TextArea
                Gregory Lafrance Level 6

                In that case use htmlText property.

                • 5. Re: Formatting not working in TextArea
                  mazukas Level 1

                  Won't work.  This would allow me to set the over all ("default") look of the document but not allow me to bold specific words within it like I'm trying to do above, only bold the entire document which I don't want to do.

                  • 6. Re: Formatting not working in TextArea
                    Gregory Lafrance Level 6

                    You could enclose specific blocks of text in <b> tags.

                    • 7. Re: Formatting not working in TextArea
                      mazukas Level 1

                      I'm afraid that I can't.  I have tags in the text that I need to be rendered as text and not markup and that would cause a problem plus it doesn't solve the issue of bolding specific words that I need to bold.

                       

                      The test example that I did that worked looked like this:

                       

                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

                           <mx:script>

                                <![CDATA[

                                     var defaultFormat:TextFormat = new TextFormat();

                                     defaultFormat.size = 12;

                       

                                     var hitTermFormat:TextFormat = new TextFormat();

                                     defaultFormat.bold = true;

                       

                                     testTextArea.mx_internal::getTextField().defaultTextFormat = defaultFormat;

                       

                                     testTextArea.mx_internal::getTextField().setTextFormat(hitTermFormat, 8, 12);

                                     testTextArea.mx_internal::getTextField().setTextFormat(hitTermFormat, 32, 41);

                                ]]>

                           </mx:script>

                       

                           <mx:TextArea text="This is some text that will get formatted" height="100" width="300" creationComplete="formatTest()" id="testTextArea" />

                      </mx:Application>

                       

                      Which produced in the TextArea text that looked like this:

                      This is some text that will get formatted

                       

                      However, when I try to do this in ActionScript like in my original post it doesn't work.

                      • 8. Re: Formatting not working in TextArea
                        Michael Borbor Level 4

                        Could I ask why you use mx_internal?

                        • 9. Re: Formatting not working in TextArea
                          mazukas Level 1

                          It's the easiest way to reference the TextField within TextArea which is the object I need to apply my formatting to.  There are other ways to access it, but this was the easiest way I found.

                          • 10. Re: Formatting not working in TextArea
                            Michael Borbor Level 4

                            I see, but it's the riskiest one too, isn't it?

                            • 11. Re: Formatting not working in TextArea
                              mazukas Level 1

                              To be honest I don't know much about it.  I found it in another code example and it worked without causing any errors in my code so I have continued to use it.  I'm open to suggestions about a better way to utilize Flex if you have any Michael.  I know I still have a lot to learn with all this.

                              • 12. Re: Formatting not working in TextArea
                                Michael Borbor Level 4

                                Once I read the Adobe uses the mx_internal to group a set of properties,

                                classes and so on that are very much likely to change, so if this is a long

                                term app, and you'll end up someday trying to migrate it to a newer Flex SDK

                                version you could have problems then, but if this is a short term app and

                                this solves your problem that I don't see why you can't using it.

                                • 13. Re: Formatting not working in TextArea
                                  Michael Borbor Level 4

                                  I don't know but maybe you could use a Grid and add child label tags with your custom styles, and as they are laid together adjusting a few visual stuff in the Grid maybe will also give you the desired result.

                                  • 14. Re: Formatting not working in TextArea
                                    rotts2 Level 1

                                    hey,

                                     

                                    I modded barna's solution, maybe this is what you are looking for

                                     

                                     

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                         <mx:Script>
                                            <![CDATA[
                                    
                                                /* these 2 are important, otherwise the
                                                   getTextField() method of TextArea will
                                                   not be found
                                                */
                                                import mx.core.mx_internal;
                                                use namespace mx_internal;
                                                   
                                                private function onApplyBold(event:Event):void {
                                                     
                                                     var format:TextFormat;
                                                     var selectionBegin:int = yourTA.selectionBeginIndex;
                                                     var selectionEnd:int = yourTA.selectionEndIndex;
                                    
                                                     if (selectionBegin != selectionEnd){
                                                          format = new TextFormat();
                                    
                                                          format["bold"] = true;
                                                          yourTA.getTextField().setTextFormat(format,selectionBegin,selectionEnd);
                                                     }
                                                }
                                                private function onReset(event:MouseEvent):void{
                                                    yourTA.setStyle("fontSize", 10);
                                                    yourTA.setStyle("fontWeight", "normal");
                                                }
                                            ]]>
                                        </mx:Script>
                                        <mx:VBox
                                            width="100%"
                                            height="100%"
                                            horizontalAlign="center"
                                            verticalAlign="middle">
                                    
                                            <mx:TextArea
                                                id="yourTA"
                                                width="400"
                                                height="250"
                                                text="Some text to be formatted."/>
                                            <mx:HBox>
                                                <mx:Button
                                                    label="Apply Bold"
                                                    click="onApplyBold(event)"/>
                                                <mx:Button
                                                    label="Reset"
                                                    click="onReset(event)"/>
                                            </mx:HBox>
                                        </mx:VBox>
                                    </mx:Application>
                                    
                                    
                                    • 15. Re: Formatting not working in TextArea
                                      rotts2 Level 1

                                      yeah, I guess that is not what you wanted!

                                       

                                      now that I have re-read you original post, sorry!

                                       

                                       

                                       

                                      package
                                      {
                                           import flash.text.TextFormat;
                                              import mx.containers.VBox;
                                              import mx.controls.TextArea;
                                              import mx.core.mx_internal;
                                           use namespace mx_internal;
                                           public class BolderTextArea extends VBox
                                           {
                                                private var textArea:TextArea;
                                                public function BolderTextArea(){          {
                                                     super();
                                                     this.textArea = new TextArea();
                                                     this.addChild(textArea);
                                                     this.textArea.getTextField().text = "Some example text to be formatted";
                                                     var defaultFormat:TextFormat = new TextFormat();
                                                     defaultFormat.size = 24;
                                                }
                                                public function boldMe():void{
                                                     var textToBoldFormat:TextFormat = new TextFormat();
                                                     textToBoldFormat.bold = true;
                                                     textArea.getTextField().setTextFormat(textToBoldFormat, 5, 11);
                                                }
                                           }
                                      }
                                      
                                      

                                       

                                       

                                      if you move the calls to make the text bold to another method, and call the method on an event, it works.

                                       

                                      maybe someone can educate us/me on what is happening in the event chain that is not happening in the constructor of your original post that causes the format to actually be updated.

                                      • 16. Re: Formatting not working in TextArea
                                        Michael Borbor Level 4

                                        I don't know if you've already solved your problem but probably TextRange will help you

                                         

                                        <?xml version="1.0"?>
                                        <!-- controls\bar\SBarSimple.mxml -->
                                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                                             <mx:Script><![CDATA[
                                                       import mx.controls.textClasses.TextRange
                                                       private function resetText():void {
                                                            ta1.text = "This is a test of the emergency broadcast system. It is only a test.";
                                                       }
                                                       public function alterText():void {
                                        // Create a TextRange object starting with "the" and ending at the
                                        // first period. Replace it with new formatted HTML text.
                                                            var tr1:TextRange = new TextRange(
                                                                 ta1, false, ta1.text.indexOf("the", 0), ta1.text.indexOf(".", 0)
                                                                 );
                                                            tr1.htmlText="<i>italic HTML text</i>"
                                        // Create a TextRange object with the remaining text.
                                        // Select the text and change its formatting.
                                                            var tr2:TextRange = new TextRange(
                                                                 ta1, true, ta1.text.indexOf("It", 0), ta1.text.length-1
                                                                 );
                                                            tr2.color=0xFF00FF;
                                                            tr2.fontSize=18;
                                                            tr2.fontStyle = "italic"; // any other value turns italic off
                                                            tr2.fontWeight = "bold"; // any other value turns bold off
                                                            ta1.setSelection(0, 0);
                                                       }
                                                  ]]></mx:Script>
                                             <mx:TextArea id="ta1" fontSize="12" fontWeight="bold" width="100%" height="100">
                                                  <mx:text>
                                        This is a test of the emergency broadcast system. It is only a test.
                                        </mx:text>
                                             </mx:TextArea>
                                             <mx:HBox>
                                                  <mx:Button label="Alter Text" click="alterText();"/>
                                                  <mx:Button label="Reset" click="resetText();"/>
                                             </mx:HBox>
                                        </mx:Application>