The following example shows you how you can condense white space around HTML tags using the Flex TextArea control, the htmlText property, and the condenseWhite property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:String id="lorem" source="lorem.html" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="condenseWhite:">
<mx:CheckBox id="checkBox" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
htmlText="{lorem}"
condenseWhite="{checkBox.selected}"
width="100%"
height="100%" />
</mx:Application>
View source is enabled in the following example.
If you wanted to create the TextArea using ActionScript, you could use something similar to the following code:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.TextArea;
private var textArea:TextArea;
private function init():void {
textArea = new TextArea();
textArea.htmlText = lorem;
textArea.condenseWhite = checkBox.selected;
textArea.percentWidth = 100;
textArea.percentHeight = 100;
addChild(textArea);
}
private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
textArea.condenseWhite = ch.selected;
}
]]>
</mx:Script>
<mx:String id="lorem" source="lorem.html" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="condenseWhite:">
<mx:CheckBox id="checkBox"
change="checkBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
</mx:Application>
Why don’t use give your examples in Actionscript?
Ozgur,
No good reason, apart from it takes more time to write each example twice. :)
I updated the entry above and added a hybrid MXML+ActionScript version, is that what you were looking for, or did you want 100% ActionScript?
Peter
Hi Peter,
Thank you for your time. Even though it takes more time to write in actionscript, it is the only way to build real applications like creating visual controls/components and containers at run time. I don’t find mxml useful because it is used for building static controls. Most of the examples I found online and books are using mxml which is unfair. I need to improve my skill set on Flex. Anyone can drag and drop controls in Flex, and mxml is generated by default. Therefore, I need some examples in actionscript to improve my skills. I appreciated your time and examples on your site.
Sincerely,
How to condense white space around HTML tags or TXT using the Flex RichTextEditor control
?
Marcio,
Does this work for you?
<mx:RichTextEditor id="richTextEditor" htmlText="{str}" textAreaStyleName="myTextAreaStyleName" width="100%" height="100%" creationComplete="richTextEditor.textArea.condenseWhite = true;" />Or:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { richTextEditor.textArea.condenseWhite = checkBox.selected; } ]]> </mx:Script> <mx:String id="str" source="lorem.txt" /> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="condenseWhite:"> <mx:CheckBox id="checkBox" change="checkBox_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:RichTextEditor id="richTextEditor" htmlText="{str}" textAreaStyleName="myTextAreaStyleName" width="100%" height="100%" /> </mx:Application>Peter
Actually, I turned this into a new entry (so you can view source, see a SWF, etc), “Condensing HTML white space in the RichTextEditor control in Flex”.
Peter
when i show 2 images 1 below other with their titles, it showing me 1 image then its title then below it 2 nd img title and then 2nd image.
is all html tags are working properlly in flex ?
abhishek,
If it looks like a Flex bug, can you please file it at http://bugs.adobe.com/flex/ and include a simple test case. Or, if it looks like a Flash Player bug, can you please file it at http://bugs.adobe.com/flashplayer/ and include a simple test case.
Peter
OK I must be missing something here, what is “lorem” that the string source is referencing?
are you loading in a text file, xml?
Russ,
This line?
<mx:String id="lorem" source="lorem.html" />It’s creating a String object in MXML with an identifier of “lorem” and loading the contents of an external .HTML file, lorem.txt, into it.
I didn’t post the contents of the lorem.html file above since it was just boring dummy text, but you can browse the Flex project source if you’re curious about the file layout: http://blog.flexexamples.com/wp-content/uploads/TextArea_condenseWhite_test/bin/srcview/index.html
Peter