Online Timesheet Software – TiMeister – Weblog

The following example shows how you can set vertical spacing between paragraphs in a Spark TextArea control in Flex 4 by setting the paragraphSpaceBefore and paragraphSpaceArea styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/05/setting-vertical-spacing-between-paragraphs-on-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_paragraphSpaceBefore_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:layout>
        <s:VerticalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            private function sliderBefore_change(evt:Event):void {
                textArea.setStyle("paragraphSpaceBefore", sliderBefore.value);
            }

            private function sliderAfter_change(evt:Event):void {
                textArea.setStyle("paragraphSpaceAfter", sliderAfter.value);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="paragraphSpaceBefore:">
                <s:HSlider id="sliderBefore"
                        liveDragging="true"
                        change="sliderBefore_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="paragraphSpaceAfter:">
                <s:HSlider id="sliderAfter"
                        liveDragging="true"
                        change="sliderAfter_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:Group width="100%" height="100%">
        <s:TextArea id="textArea"
                textAlign="justify"
                left="10" right="10"
                top="10" bottom="10">
            <s:content>
                <fx:String source="lorem.html" />
            </s:content>
        </s:TextArea>
    </s:Group>

</s:Application>