Flex Examples » TextFlow http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Exporting a TextFlow object in Flex 4 http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/#comments Sat, 25 Jul 2009 18:09:28 +0000 Peter deHaan http://blog.flexexamples.com/?p=1240 The following example shows how you can export a TextFlow object in Flex 4 by using the TextConverter class (flashx.textLayout.conversion.TextConverter), and specifying HTML format, plain text format, or Text Layout Format.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ --> <s:Application name="Spark_TextConverter_export_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" xmlns:comps="comps.*"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" [...]]]> The following example shows how you can export a TextFlow object in Flex 4 by using the TextConverter class (flashx.textLayout.conversion.TextConverter), and specifying HTML format, plain text format, or Text Layout Format.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextConverter_export_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"
        xmlns:comps="comps.*">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.ConversionType;
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>
 
    <comps:CustomEditor id="customEditor" />
 
    <s:HGroup>
        <s:Button id="htmlBtn"
                label="Export as HTML"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.HTML_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
        <s:Button id="plainTxtBtn"
                label="Export as plain text"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.PLAIN_TEXT_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
        <s:Button id="tlfBtn"
                label="Export as TLF"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.TEXT_LAYOUT_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
    </s:HGroup>
 
    <s:TextArea id="debug" width="100%" height="100%" />
 
</s:Application>

View source is enabled in the following example.

And the custom rich text editor component, comps/CustomEditor.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ -->
<s:Panel name="CustomEditor"
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo"
        title="SimpleTextEditor" minWidth="400">
    <s:layout>
        <s:VerticalLayout gap="0" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.ConversionType;
            import flashx.textLayout.conversion.TextConverter;
            import flash.text.engine.FontPosture;
            import flash.text.engine.FontWeight;
            import flashx.textLayout.formats.TextAlign;
            import flashx.textLayout.formats.TextDecoration;
            import flashx.textLayout.formats.TextLayoutFormat;
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
 
            protected function editor_selectionChangeHandler(evt:FlexEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                fontDDL.selectedItem = txtLayFmt.fontFamily;
                sizeDDL.selectedItem = txtLayFmt.fontSize;
                boldBtn.selected = (txtLayFmt.fontWeight == FontWeight.BOLD);
                italBtn.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC);
                underBtn.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE);
                colorCP.selectedColor = txtLayFmt.color;
                lineBtn.selected = txtLayFmt.lineThrough;
 
                switch (txtLayFmt.textAlign) {
                    case TextAlign.LEFT:
                        txtAlignBB.selectedIndex = 0;
                        break;
                    case TextAlign.CENTER:
                        txtAlignBB.selectedIndex = 1;
                        break;
                    case TextAlign.RIGHT:
                        txtAlignBB.selectedIndex = 2;
                        break;
                    case TextAlign.JUSTIFY:
                        txtAlignBB.selectedIndex = 3;
                        break;
                    default:
                        txtAlignBB.selectedIndex = -1;
                        break;
                }
            }
 
            protected function fontDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontFamily = fontDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function sizeDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontSize = sizeDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function boldBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function italBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function underBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.textDecoration = (txtLayFmt.fontStyle == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function colorCP_changeHandler(evt:ColorPickerEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.color = colorCP.selectedColor;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void {
                if (txtAlignBB.selectedItem) {
                    var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                        editor.selectionAnchorPosition,
                                        editor.selectionActivePosition);
                    txtLayFmt.textAlign = txtAlignBB.selectedItem.value;
                    editor.setFormatOfRange(txtLayFmt,
                                        editor.selectionAnchorPosition,
                                        editor.selectionActivePosition);
                    editor.setFocus();
                }
            }
 
            protected function lineBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.lineThrough = lineBtn.selected;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="editor"
            focusEnabled="false"
            width="100%" height="100%"
            minHeight="200"
            selectionChange="editor_selectionChangeHandler(event);">
        <s:textFlow>
            <s:TextFlow paragraphSpaceBefore="20">
                <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nunc quis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis. Phasellus dui orci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismod gravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabitur vitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentum elit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar. Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, ac dignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nunc vehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenas eget ipsum ac mauris dictum congue eu id justo.</s:p>
                <s:p>Aliquam tincidunt tempor nisi id porta. Aenean risus dolor, tincidunt a ultrices in, laoreet eu ante. Mauris vel lacus neque, ut scelerisque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel lacus sit amet erat vehicula malesuada id in augue. Sed purus massa, placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncus arcu. Duis semper bibendum facilisis. Duis nibh lorem, egestas rutrum tincidunt non, vulputate accumsan nulla. Nunc ligula nisl, ultrices ut tempor quis, rutrum et enim. Nullam accumsan scelerisque ante id pretium. Mauris nibh metus, blandit in varius congue, pharetra sit amet sem. Phasellus tincidunt lacus quis est semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortor commodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui non eros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentum lacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p>
                <s:p>Etiam ut eros lectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod, nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orci ut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metus ullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nunc sollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felis leo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdiet gravida felis a eleifend.</s:p>
                <s:p>Suspendisse mattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed molestie arcu. Praesent ut tellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sit amet aliquet enim sodales non. Maecenas in velit sit amet tellus tincidunt dapibus. Vivamus est eros, iaculis et venenatis a, malesuada vel lacus. Aliquam vel orci tortor. Etiam ornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesque sodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisis accumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellus vehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretium est.</s:p>
                <s:p>Maecenas tristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatis neque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitae elit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesent in orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mi rutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit amet semper a, pretium vel leo. Etiam mollis dolor nec elit suscipit imperdiet. Sed a est eros.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
    <mx:ControlBar width="100%" cornerRadius="0">
        <mx:ToolBar width="100%" horizontalGap="5">
            <s:DropDownList id="fontDDL"
                    width="150"
                    change="fontDDL_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" />
                </s:dataProvider>
            </s:DropDownList>
            <s:DropDownList id="sizeDDL"
                    width="60"
                    change="sizeDDL_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList source="[8,10,12,14,16,24,36,72]" />
                </s:dataProvider>
            </s:DropDownList>
            <s:ToggleButton id="boldBtn"
                    label="B"
                    fontWeight="bold"
                    width="30"
                    click="boldBtn_clickHandler(event);" />
            <s:ToggleButton id="italBtn"
                    label="I"
                    fontStyle="italic"
                    width="30"
                    click="italBtn_clickHandler(event);" />
            <s:ToggleButton id="underBtn"
                    label="U" 
                    textDecoration="underline"
                    width="30"
                    click="underBtn_clickHandler(event);" />
            <s:ToggleButton id="lineBtn"
                    label="S"
                    lineThrough="true"
                    width="30"
                    click="lineBtn_clickHandler(event);" />
            <mx:ColorPicker id="colorCP"
                    change="colorCP_changeHandler(event);" />
            <s:ButtonBar id="txtAlignBB"
                    arrowKeysWrapFocus="true"
                    labelField="label"
                    width="120"
                    change="txtAlignBB_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:Object label="L" value="{TextAlign.LEFT}" />
                        <fx:Object label="C" value="{TextAlign.CENTER}" />
                        <fx:Object label="R" value="{TextAlign.RIGHT}" />
                        <fx:Object label="J" value="{TextAlign.JUSTIFY}" />
                    </s:ArrayList>
                </s:dataProvider>
            </s:ButtonBar>
        </mx:ToolBar>
    </mx:ControlBar>
 
</s:Panel>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/feed/ 28 Creating a simple text editor using the Spark TextArea control in Flex 4 http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/#comments Fri, 24 Jul 2009 17:43:36 +0000 Peter deHaan http://blog.flexexamples.com/?p=1237 The following example shows how you can create a simple rich text editor control in Flex 4 using the Spark TextArea control and using the getFormatOfRange() and setFormatOfRange() methods.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_setFormatOfRange_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">   <fx:Script> <![CDATA[ import flash.text.engine.FontPosture; import flash.text.engine.FontWeight; import flashx.textLayout.formats.TextAlign; [...]]]> The following example shows how you can create a simple rich text editor control in Flex 4 using the Spark TextArea control and using the getFormatOfRange() and setFormatOfRange() methods.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_setFormatOfRange_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">
 
    <fx:Script>
        <![CDATA[
            import flash.text.engine.FontPosture;
            import flash.text.engine.FontWeight;
            import flashx.textLayout.formats.TextAlign;
            import flashx.textLayout.formats.TextDecoration;
            import flashx.textLayout.formats.TextLayoutFormat;
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
 
            protected function editor_selectionChangeHandler(evt:FlexEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                fontDDL.selectedItem = txtLayFmt.fontFamily;
                sizeDDL.selectedItem = txtLayFmt.fontSize;
                boldBtn.selected = (txtLayFmt.fontWeight == FontWeight.BOLD);
                italBtn.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC);
                underBtn.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE);
                colorCP.selectedColor = txtLayFmt.color;
                lineBtn.selected = txtLayFmt.lineThrough;
 
                switch (txtLayFmt.textAlign) {
                    case TextAlign.LEFT:
                        txtAlignBB.selectedIndex = 0;
                        break;
                    case TextAlign.CENTER:
                        txtAlignBB.selectedIndex = 1;
                        break;
                    case TextAlign.RIGHT:
                        txtAlignBB.selectedIndex = 2;
                        break;
                    case TextAlign.JUSTIFY:
                        txtAlignBB.selectedIndex = 3;
                        break;
                    default:
                        txtAlignBB.selectedIndex = -1;
                        break;
                }
            }
 
            protected function fontDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontFamily = fontDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function sizeDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontSize = sizeDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function boldBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function italBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function underBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.textDecoration = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function colorCP_changeHandler(evt:ColorPickerEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.color = colorCP.selectedColor;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void {
                if (txtAlignBB.selectedItem) {
                    var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                    txtLayFmt.textAlign = txtAlignBB.selectedItem.value;
                    editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                    editor.setFocus();
                }
            }
 
            protected function lineBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.lineThrough = lineBtn.selected;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
        ]]>
    </fx:Script>
 
    <s:Panel title="SimpleTextEditor"
            width="400"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" />
        </s:layout>
        <s:TextArea id="editor"
                focusEnabled="false"
                width="100%" height="100%"
                minHeight="200"
                selectionChange="editor_selectionChangeHandler(event);">
            <s:textFlow>
                <s:TextFlow paragraphSpaceBefore="20">
                    <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nunc quis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis. Phasellus dui orci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismod gravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabitur vitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentum elit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar. Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, ac dignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nunc vehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenas eget ipsum ac mauris dictum congue eu id justo.</s:p>
                    <s:p>Aliquam tincidunt tempor nisi id porta. Aenean risus dolor, tincidunt a ultrices in, laoreet eu ante. Mauris vel lacus neque, ut scelerisque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel lacus sit amet erat vehicula malesuada id in augue. Sed purus massa, placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncus arcu. Duis semper bibendum facilisis. Duis nibh lorem, egestas rutrum tincidunt non, vulputate accumsan nulla. Nunc ligula nisl, ultrices ut tempor quis, rutrum et enim. Nullam accumsan scelerisque ante id pretium. Mauris nibh metus, blandit in varius congue, pharetra sit amet sem. Phasellus tincidunt lacus quis est semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortor commodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui non eros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentum lacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p>
                    <s:p>Etiam ut eros lectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod, nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orci ut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metus ullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nunc sollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felis leo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdiet gravida felis a eleifend.</s:p>
                    <s:p>Suspendisse mattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed molestie arcu. Praesent ut tellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sit amet aliquet enim sodales non. Maecenas in velit sit amet tellus tincidunt dapibus. Vivamus est eros, iaculis et venenatis a, malesuada vel lacus. Aliquam vel orci tortor. Etiam ornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesque sodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisis accumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellus vehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretium est.</s:p>
                    <s:p>Maecenas tristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatis neque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitae elit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesent in orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mi rutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit amet semper a, pretium vel leo. Etiam mollis dolor nec elit suscipit imperdiet. Sed a est eros.</s:p>
                </s:TextFlow>
            </s:textFlow>
        </s:TextArea>
        <mx:ControlBar width="100%" cornerRadius="0">
            <mx:ToolBar width="100%" horizontalGap="5">
                <s:DropDownList id="fontDDL"
                        width="150"
                        change="fontDDL_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" />
                    </s:dataProvider>
                </s:DropDownList>
                <s:DropDownList id="sizeDDL"
                        width="60"
                        change="sizeDDL_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[8,10,12,14,16,24,36,72]" />
                    </s:dataProvider>
                </s:DropDownList>
                <s:ToggleButton id="boldBtn"
                        label="B"
                        fontWeight="bold"
                        width="30"
                        click="boldBtn_clickHandler(event);" />
                <s:ToggleButton id="italBtn"
                        label="I"
                        fontStyle="italic"
                        width="30"
                        click="italBtn_clickHandler(event);" />
                <s:ToggleButton id="underBtn"
                        label="U" 
                        textDecoration="underline"
                        width="30"
                        click="underBtn_clickHandler(event);" />
                <s:ToggleButton id="lineBtn"
                        label="S"
                        lineThrough="true"
                        width="30"
                        click="lineBtn_clickHandler(event);" />
                <mx:ColorPicker id="colorCP"
                        change="colorCP_changeHandler(event);" />
                <s:ButtonBar id="txtAlignBB"
                        arrowKeysWrapFocus="true"
                        labelField="label"
                        width="120"
                        change="txtAlignBB_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object label="L" value="{TextAlign.LEFT}" />
                            <fx:Object label="C" value="{TextAlign.CENTER}" />
                            <fx:Object label="R" value="{TextAlign.RIGHT}" />
                            <fx:Object label="J" value="{TextAlign.JUSTIFY}" />
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:ToolBar>
        </mx:ControlBar>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/feed/ 49 Styling hyperlinks in a TextFlow object in Flex 4 http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/#comments Mon, 29 Jun 2009 06:59:25 +0000 Peter deHaan http://blog.flexexamples.com/?p=1220 The following example shows how you can style links in a TextFlow object in Flex 4 by specifying the linkNormalFormat, linkHoverFormat, and linkActiveFormat properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ --> <s:Application name="Spark_TextArea_textFlow_linkHoverFormat_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">   <fx:Script> <![CDATA[ import flashx.textLayout.formats.WhiteSpaceCollapse; import spark.utils.TextFlowUtil;   XML.ignoreWhitespace = [...]]]> The following example shows how you can style links in a TextFlow object in Flex 4 by specifying the linkNormalFormat, linkHoverFormat, and linkActiveFormat properties.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextArea_textFlow_linkHoverFormat_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">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.WhiteSpaceCollapse;
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:String id="markup" source="teaserTextFlow.xml" />
    </fx:Declarations>
 
    <s:TextArea id="txtArea"
            textFlow="{TextFlowUtil.importFromString(markup, WhiteSpaceCollapse.PRESERVE)}"
            editable="false"
            width="400"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

And the TextFlow markup is as follows:

View teaserTextFlowxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve" fontSize="16" paragraphSpaceAfter="15" paddingTop="4" paddingLeft="4">
    <linkNormalFormat color="#0000ff" textDecoration="underline" />
    <linkHoverFormat color="#ff0000" textDecoration="underline" />
    <linkActiveFormat color="#ff00ff" textDecoration="underline" />
    <format id="code" backgroundColor="#000000" backgroundAlpha="0.1" fontFamily="_typewriter" />
    <p fontWeight="bold">The following excerpt is from <a href="http://blog.flexexamples.com/" target="_self">Flex Examples</a>:</p>
    <p>The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static <span format="code">TextFlowUtil.importFromXML()</span> method.</p>
    <p>For more information, see <a href="http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/">"Importing a text flow from an XML object in Flex 4"</a>.</p>
</TextFlow>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/feed/ 10 Importing a text flow from an XML object in Flex 4 http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/#comments Fri, 26 Jun 2009 06:59:35 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static TextFlowUtil.importFromXML() method.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ --> <s:Application name="TextFlowUtil_importFromXML_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">   <fx:Script> <![CDATA[ import spark.utils.TextFlowUtil;   XML.ignoreWhitespace = false;   [Bindable] [...]]]> The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static TextFlowUtil.importFromXML() method.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ -->
<s:Application name="TextFlowUtil_importFromXML_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">
 
    <fx:Script>
        <![CDATA[
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
 
            [Bindable]
            private var theXML:XML = <div textAlign="justify" paragraphSpaceBefore="20">
                    <p><span fontWeight="bold">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Sed vel lacus dignissim tellus lobortis pulvinar eget tempus dui. <span fontStyle="italic">Mauris et lacus velit, ac dictum augue.</span> Etiam non nisi eu nisl aliquet ullamcorper. Etiam pellentesque, purus vel pulvinar bibendum, libero orci pharetra erat, in dictum ipsum lacus in tortor. Suspendisse auctor, odio non ornare laoreet, diam dolor varius lacus, quis eleifend sem erat vel ipsum. Nunc tortor purus, suscipit eu semper ac, auctor nec lorem. Etiam tempor dignissim nisi, sed imperdiet quam dignissim et. In a neque mauris, at feugiat ante. Aliquam vel elit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit dapibus turpis, ut euismod metus venenatis eget. Maecenas in orci nunc, nec consequat augue. Vestibulum egestas lacus vel risus faucibus tempor. Pellentesque purus tortor, sodales id tempus et, aliquet vel libero. Morbi dolor justo, feugiat at facilisis eget, mollis vel sem. Cras ut mi dui. Cras fringilla, dui pellentesque congue vehicula, felis nisl molestie turpis, ut eleifend arcu augue in magna. Nunc adipiscing mi ac urna laoreet aliquam pretium mauris sagittis. Quisque eu mi sit amet sem mollis tincidunt.</p>
                    <p>Cras nec mi tortor, id pretium sem. <span lineThrough="true">In hendrerit viverra orci quis condimentum.</span> Maecenas et arcu quis arcu volutpat consectetur quis vel tellus. <span color="#FF0000">Donec dapibus, est cursus convallis porta, dolor enim ullamcorper neque, eu aliquet elit risus at neque.</span> Proin eget tortor non velit pretium mattis eget vitae neque. Fusce sollicitudin odio at neque molestie et tempus est condimentum. Proin dignissim egestas egestas. Proin luctus, velit at ultricies aliquam, leo sapien tempor purus, tristique semper mauris velit ut turpis. Donec vestibulum mattis tellus, at molestie massa luctus vitae. Donec auctor, mi quis commodo condimentum, nisl sapien pharetra lorem, id venenatis felis sapien quis lacus. Cras dapibus, tortor porttitor varius vulputate, lorem elit auctor turpis, a consectetur enim magna eget mi. Sed dapibus volutpat semper. Sed rhoncus pulvinar semper. Etiam in mi nec massa venenatis cursus quis in massa. Quisque pulvinar nulla quis neque lobortis molestie. Phasellus ullamcorper cursus volutpat. Mauris dictum felis at est sodales tincidunt. Aliquam congue nibh vitae dolor dignissim ut tincidunt sem commodo. Sed sit amet turpis ac lectus molestie facilisis vitae at neque. Phasellus nec justo tortor.</p>
                </div>;
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromXML(theXML)}"
            left="20" right="20"
            verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/feed/ 10 Globally styling anchor tags on a Spark RichEditableText control in Flex 4 http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/#comments Wed, 18 Mar 2009 06:29:40 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/ The following example shows how you can globally style the normal and hover states of a hyperlink on a Flex 4 Spark RichEditableText control by setting the static TextFlow.defaultConfiguration object.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/ --> <s:Application name="TextFlow_defaultConfiguration_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" preinitialize="init();">   <fx:Script> import flashx.textLayout.elements.Configuration; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.formats.TextDecoration; import flashx.textLayout.formats.TextLayoutFormatValueHolder;   private [...]]]> The following example shows how you can globally style the normal and hover states of a hyperlink on a Flex 4 Spark RichEditableText control by setting the static TextFlow.defaultConfiguration object.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/ -->
<s:Application name="TextFlow_defaultConfiguration_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"
        preinitialize="init();">
 
    <fx:Script>
        import flashx.textLayout.elements.Configuration;
        import flashx.textLayout.elements.TextFlow;
        import flashx.textLayout.formats.TextDecoration;
        import flashx.textLayout.formats.TextLayoutFormatValueHolder;
 
        private function init():void {
            var cfg:Configuration = TextFlow.defaultConfiguration;
 
            var normalTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(cfg.defaultLinkNormalFormat);
            normalTLF.color = 0xFF0000;
 
            var hoverTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(cfg.defaultLinkHoverFormat);
            hoverTLF.color = 0xFF00FF;
            hoverTLF.textDecoration = TextDecoration.NONE;
 
            var activeTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(cfg.defaultLinkActiveFormat);
            activeTLF.color = 0x00FF00;
 
            cfg.defaultLinkNormalFormat = normalTLF;
            cfg.defaultLinkHoverFormat = hoverTLF;
            cfg.defaultLinkActiveFormat = activeTLF;
            TextFlow.defaultConfiguration = cfg;
        }
    </fx:Script>
 
    <s:RichEditableText editable="false" width="300" horizontalCenter="0" verticalCenter="0">
        <s:textFlow>
            <s:TextFlow>
                <s:p>In addition to <s:a href="http://blog.flexexamples.com/">FlexExamples.com</s:a> you can check out my other mediocre blogs at <s:a href="http://actionscriptexamples.com/">ActionScriptExamples.com</s:a> and <s:a href="http://airexamples.com/">AIRExamples.com</s:a>.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichEditableText>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/feed/ 6 Looping over paragraphs in the FxTextArea control in Flex Gumbo http://blog.flexexamples.com/2008/12/06/looping-over-paragraphs-in-the-fxtextarea-control-in-flex-gumbo/ http://blog.flexexamples.com/2008/12/06/looping-over-paragraphs-in-the-fxtextarea-control-in-flex-gumbo/#comments Sun, 07 Dec 2008 06:19:39 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/06/looping-over-paragraphs-in-the-fxtextarea-control-in-flex-gumbo/ The following example shows how you can loop over the paragraphs in a Flex Gumbo FxTextArea control using the export() method and E4X.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information [...]]]> The following example shows how you can loop over the paragraphs in a Flex Gumbo FxTextArea control using the export() method and E4X.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/06/looping-over-paragraphs-in-the-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_export_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        private function getParagraphs():void {
            var textFlowNS:Namespace = new Namespace("http://ns.adobe.com/textLayout/2008");

            var xml:XML = textArea.export();
            var xmlList:XMLList = xml.textFlowNS::p;
            var para:XML;
            for each (para in xmlList) {
                para.@color = getRandomColor();
            }
            textArea.content = xml;
        }

        private function getRandomColor():String {
            return "0x" + Math.round(Math.random() * 0xFFFFFF).toString(16);
        }
    </Script>

    <ApplicationControlBar dock="true">
        <FxButton label="Randomize paragraph colors"
                click="getParagraphs();" />
    </ApplicationControlBar>

    <FxTextArea id="textArea" width="240" height="160">
        <content>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
            <p>The quick brown fox jumped over the lazy dog.</p>
        </content>
    </FxTextArea>

</Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2008/12/06/looping-over-paragraphs-in-the-fxtextarea-control-in-flex-gumbo/feed/ 2