<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            private function textArea_change(evt:Event):void {
                callLater(updateStats, [evt]);
            }

            private function updateStats(evt:Event):void {
                var nLines:uint = textArea.mx_internal::getTextField().numLines;
                var nChars:uint = textArea.length;
                var str:String = "{0} characters; {1} lines";
                panel.status = StringUtil.substitute(str,
                                    nChars,
                                    nLines);
            }
        ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="width (%):">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            percentWidth="{slider.value}"
            height="100%">
        <mx:TextArea id="textArea"
                htmlText="{str}"
                condenseWhite="true"
                width="100%"
                height="100%"
                change="textArea_change(event);"
                resize="textArea_change(event);" />
    </mx:Panel>

</mx:Application>