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.

View MXML

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

11 thoughts on “Condensing HTML white space in the TextArea control in Flex

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

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

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

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

  5. OK I must be missing something here, what is “lorem” that the string source is referencing?
    are you loading in a text file, xml?

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

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

Comments are closed.