Condensing HTML white space in the TextArea control in Flex
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
11 Responses to Condensing HTML white space in the TextArea control in Flex
Leave a Reply Cancel reply
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


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
Hi, Thank you Peter.
MXML is created for flex, and it’s very nice that it has static capability. The style that you are writing, is nice, so no need to change your style limiting it only by AS. People that using only AS better to learn Flex basics, that will help them to understand the architecture of mx/spark components at all.
Thank you once again!
H.A.