<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_ISelectionManager_focusedSelectionFormat_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.edit.ISelectionManager;
            import flashx.textLayout.edit.SelectionFormat;
 
            protected function txtFocusInHandler(evt:FocusEvent):void {
                var fSelFmt:ISelectionManager = evt.currentTarget.textFlow.interactionManager;
                fSelFmt.focusedSelectionFormat = new SelectionFormat(0x000000, 1.0, BlendMode.INVERT);
                evt.currentTarget.textFlow.interactionManager = fSelFmt;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            lineBreak="explicit"
            widthInChars="40" heightInLines="20"
            initialize="ta.text = describeType(ta).toXMLString();"
            focusIn="txtFocusInHandler(event);"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/12/creating-a-bitmap-fill-in-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:TextArea id="txtArea"
            skinClass="skins.CustomTextAreaSkin"
            widthInChars="20" heightInLines="5"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/12/creating-a-bitmap-fill-in-a-spark-textarea-control-in-flex-4/ -->
<s:SparkSkin name="CustomTextAreaSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5"
        blendMode="normal">
 
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.TextArea")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var lineBreakChanged:Boolean;
            private var paddingChanged:Boolean;
            private var verticalAlignChanged:Boolean;
 
            /* Define the skin elements that should not be colorized. 
            For text area, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["background", "scroller"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
 
            override public function get contentItems():Array {
                return contentFill;
            }
 
            override protected function commitProperties():void {
                super.commitProperties();
 
                if (lineBreakChanged) {
                    updateStringStyle("lineBreak");
                    lineBreakChanged = false;
                }
                if (paddingChanged) {
                    updatePadding();
                    paddingChanged = false;
                }
                if (verticalAlignChanged) {
                    updateStringStyle("verticalAlign");
                    verticalAlignChanged = false;
                }
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    shadow.visible = true;
                    // background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                } else {
                    border.visible = false;
                    shadow.visible = false;
                    // background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void {
                if (!textDisplay) {
                    return;
                }
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding) {
                    textDisplay.setStyle("paddingLeft", padding);
                }
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding) {
                    textDisplay.setStyle("paddingTop", padding);
                }
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding) {
                    textDisplay.setStyle("paddingRight", padding);
                }
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding) {
                    textDisplay.setStyle("paddingBottom", padding);
                }
            }
 
            private function updateStringStyle(styleName:String):void {
                if (!textDisplay)
                    return;
 
                // Push style into the textDisplay
                var style:String;
 
                style = getStyle(styleName);
                if (textDisplay.getStyle(styleName) != style) {
                    textDisplay.setStyle(styleName, style);
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
 
                super.styleChanged(styleProp);
 
                if (allStyles || styleProp.indexOf("lineBreak") == 0) {
                    lineBreakChanged = true;
                    invalidateProperties();
                }
                if (allStyles || styleProp.indexOf("padding") == 0) {
                    paddingChanged = true;
                    invalidateProperties();
                }
                if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
                    verticalAlignChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["textDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextArea component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:BitmapFill id="bgFill" source="@Embed('pattern_143.gif')" alpha="0.5" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect id="shadow" left="1" top="1" right="1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the scroller that is used to scroll the TextArea control. -->
    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false" hasFocusableChildren="false">
        <s:RichEditableText id="textDisplay"
                  heightInLines="10"
                  widthInChars="15" />
    </s:Scroller>
 
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_verticalScrollBar_value_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="scroll horizontally:">
                <s:HSlider id="hSl" minimum="0" change="hSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="scroll vertically:">
                <s:HSlider id="vSl" minimum="0" change="vSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected function ta_updateCompleteHandler(evt:FlexEvent):void {
                hSl.maximum = ta.scroller.horizontalScrollBar.maximum;
                vSl.maximum = ta.scroller.verticalScrollBar.maximum;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                ta.scroller.horizontalScrollBar.value = hSl.value;
            }
 
            protected function vSl_changeHandler(evt:Event):void {
                ta.scroller.verticalScrollBar.value = vSl.value;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
                widthInChars="20" heightInLines="5"
                lineBreak="explicit"
                horizontalCenter="0" verticalCenter="0"
                updateComplete="ta_updateCompleteHandler(event)">
        <s:textFlow>
            <s:TextFlow>
                <s:p>1234567890123456789012345678901234567890</s:p>
                <s:p>2345678901234567890123456789012345678901</s:p>
                <s:p>3456789012345678901234567890123456789012</s:p>
                <s:p>4567890123456789012345678901234567890123</s:p>
                <s:p>5678901234567890123456789012345678901234</s:p>
                <s:p>6789012345678901234567890123456789012345</s:p>
                <s:p>7890123456789012345678901234567890123456</s:p>
                <s:p>8901234567890123456789012345678901234567</s:p>
                <s:p>9012345678901234567890123456789012345678</s:p>
                <s:p>0123456789012345678901234567890123456789</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/18/creating-a-vertically-auto-resizing-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_heightInLines_NaN_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:TextArea id="ta"
            heightInLines="{NaN}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/18/creating-a-vertically-auto-resizing-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_heightInLines_NaN_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import spark.components.TextArea;
 
            protected var ta:TextArea;
 
            protected function init():void {
                ta = new TextArea();
                ta.heightInLines = NaN;
                ta.horizontalCenter = 0;
                ta.verticalCenter = 0;
                addElement(ta);
            }
        ]]>
    </fx:Script>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_tabStops_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Label text="Defined on TextArea:" />
        <s:TextArea tabStops="100 200 300" width="400" heightInLines="3">
            <s:p>0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
        </s:TextArea>
 
        <s:Label text="Defined on ParagraphElement:" height="50" verticalAlign="bottom" />
        <s:TextArea width="400" heightInLines="3">
            <s:p tabStops="100 200 300">0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
        </s:TextArea>
 
        <s:Label text="Defined on TextFlow:" height="50" verticalAlign="bottom" />
        <s:TextArea width="400" heightInLines="3">
            <s:textFlow>
                <s:TextFlow tabStops="100 200 300">
                    <s:p>0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
                </s:TextFlow>
            </s:textFlow>
        </s:TextArea>
    </s:VGroup>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/08/setting-the-focus-alpha-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_focusAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Form contentBackgroundAlpha="0">
            <mx:FormItem label="focusAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.8"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="txtArea.setFocus();" />
            </mx:FormItem>
            <mx:FormItem label="focusColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="haloBlue"
                        change="callLater(txtArea.setFocus);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TextArea id="txtArea"
            focusAlpha="{slider.value}"
            focusColor="{colorPicker.selectedColor}"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="txtArea.setFocus();"/>
 
</s:Application>