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

# Formatting not working in TextArea

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

Use this:

myTextArea.setStyle("fontSize", 20);

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

• ###### 2. Re: Formatting not working in TextArea

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
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

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

In that case use htmlText property.

• ###### 5. Re: Formatting not working in TextArea

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

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

• ###### 7. Re: Formatting not working in TextArea

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: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

Could I ask why you use mx_internal?

• ###### 9. Re: Formatting not working in TextArea

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

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

• ###### 11. Re: Formatting not working in TextArea

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

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

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

hey,

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

<?xml version="1.0" encoding="utf-8"?>
<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

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.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

<?xml version="1.0"?>
<!-- controls\bar\SBarSimple.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>