TableExplorer for use with 4.14

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:local="*"

             minWidth="955" minHeight="600"
             applicationComplete="importApplicationCompleteHandler(event)"
             uncaughtError="uncaughtErrorHandler(event)"
             error="errorHandler(event)">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .header {
            fontSize: 12;
            fontWeight: normal;
            backgroundColor: #E6E6E6;
            color: #565656;
            paddingTop: 6;
            paddingBottom: 4;
            paddingLeft: 4;
            paddingRight: 4;
        }
        .header2 {
            fontSize: 12;
            fontWeight: normal;
            backgroundColor: #FF0000;
            color: #565656;
            paddingTop: 6;
            paddingBottom: 4;
            paddingLeft: 4;
            paddingRight: 4;
        }

        global {
            focusThickness: 0;
        }

        .buttonGroup {
            fontSize: 12;
        }
    </fx:Style>

    <fx:Declarations>
        <fx:XML id="simpleTextMarkup">
            <TextFlow fontSize="11" paddingLeft="8" paddingRight="8" paddingTop="8" whiteSpaceCollapse="collapse" version="3.0.0" xmlns="http://ns.adobe.com/textLayout/2008">
                <p>
                    <span>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </span>
                </p>
            </TextFlow>
        </fx:XML>

        <fx:XML id="complexTextFlow">
            <TextFlow fontSize="11" paddingLeft="8" paddingRight="8" paddingTop="8" whiteSpaceCollapse="collapse" version="3.0.0" xmlns="http://ns.adobe.com/textLayout/2008">
                <p>
                    <img paddingRight="8" source="http://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAACTE4/HdLawjGMFsE/s120-c/photo.jpg" float="right"/>
                    <span>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </span>
                </p>
            </TextFlow>
        </fx:XML>

        <fx:XML id="simpleTableTextFlow">
            <TextFlow fontSize="11" paddingLeft="8" paddingRight="8" paddingTop="8" whiteSpaceCollapse="collapse" version="3.0.0" xmlns="http://ns.adobe.com/textLayout/2008">
                <p>
                    <span>A un Angleso it va semblar un simplificat Angles</span>
                </p>
                <table borderColor="0xFF00FF" borderThickness="1" borderStyle="solid" paddingLeft="8" paddingTop="2" paddingRight="8" paddingBottom="2">
                    <tr italic="true">
                        <td headers="t1"><p><span>T. Sexton</span></p></td>
                        <td headers="t2"><p><span>10</span></p></td>
                        <td headers="t3"><p><span>Espresso</span></p></td>
                        <td headers="t4"><p><span>No</span></p></td>
                    </tr>
                    <tr>
                        <td headers="t1"><p><span>J. Dinnen</span></p></td>
                        <td headers="t2"><p><span>5</span></p></td>
                        <td headers="t3"><p><span>Decaf</span></p></td>
                        <td headers="t4"><p><span>Yes</span></p></td>
                    </tr>
                </table>
            </TextFlow>
        </fx:XML>

        <fx:Component className="ImageButton" >
            <s:Image useHandCursor="true" buttonMode="true"
                     mouseDown="filters=buttonDownFilters"
                     mouseUp="filters=bevelFilters"
                     rollOut="filters=bevelFilters">

                <s:filters>
                    <fx:Array id="bevelFilters">
                        <s:BevelFilter id="bevelFilter"
                                       angle="45.0"
                                       blurX="1" blurY="1"
                                       distance="0.4"
                                       highlightAlpha="1.0"
                                       knockout="false"
                                       highlightColor="#FFFFFF"
                                       shadowColor="#000000"
                                       quality="3"
                                       shadowAlpha="1.0"
                                       strength="1.5"
                                       type="inner"/>
                    </fx:Array>
                </s:filters>

                <fx:Declarations>
                    <fx:Array id="buttonDownFilters">

                        <s:BevelFilter angle="-135"
                                       distance="1"
                                       strength=".8"
                                       blurX="2" blurY="2"
                                       highlightColor="0xffffff"
                                       type="inner"/>
                    </fx:Array>
                </fx:Declarations>
            </s:Image>
        </fx:Component>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import flash.text.engine.TextLine;
            import flash.utils.ByteArray;

            import mx.core.BitmapAsset;
            import mx.core.mx_internal;

            import flashx.textLayout.TextLayoutVersion;
            import flashx.textLayout.compose.TextFlowTableBlock;ByteArray

            import flashx.textLayout.formats.TextLayoutFormat;TextLayoutFormat

            import mx.core.IVisualElement;
            import mx.events.FlexEvent;

            import spark.core.SpriteVisualElement;
            import spark.events.TextOperationEvent;

            import flashx.textLayout.tlf_internal;
            import flashx.textLayout.compose.ComposeState;
            import flashx.textLayout.compose.IFlowComposer;
            import flashx.textLayout.compose.ParcelList;
            import flashx.textLayout.compose.StandardFlowComposer;
            import flashx.textLayout.compose.TextFlowLine;
            import flashx.textLayout.container.ColumnState;
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.conversion.ITextExporter;
            import flashx.textLayout.conversion.ITextImporter;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.edit.EditManager;
            import flashx.textLayout.edit.ISelectionManager;
            import flashx.textLayout.edit.SelectionFormat;
            import flashx.textLayout.edit.SelectionManager;
            import flashx.textLayout.elements.Configuration;Configuration
            import flashx.textLayout.elements.FlowLeafElement;
            import flashx.textLayout.elements.InlineGraphicElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TableCellElement;
            import flashx.textLayout.elements.TableColElement;
            import flashx.textLayout.elements.TableElement;
            import flashx.textLayout.elements.TableRowElement;
            import flashx.textLayout.elements.TextFlow;
            import flashx.textLayout.events.CompositionCompleteEvent;
            import flashx.textLayout.events.FlowElementMouseEvent;
            import flashx.textLayout.events.ModelChange;
            import flashx.textLayout.events.SelectionEvent;
            import flashx.textLayout.events.StatusChangeEvent;
            import flashx.textLayout.formats.WhiteSpaceCollapse;WhiteSpaceCollapse
            import flashx.undo.UndoManager;

            use namespace tlf_internal;

            public var textFlow:TextFlow;
            public var container:SpriteVisualElement;
            public var controller:ContainerController;
            public var complexTableData:String;

            public var tableNotCreatedError:String = "Create the table before calling this method";
            public var notImplementedMessage:String = "Not yet implemented";

            // embed table test
            [Embed(source="data/tableExample.xml",mimeType="application/octet-stream")]
            private var TableExample:Class;


            protected function importApplicationCompleteHandler(event:FlexEvent):void {
                var tableByte:ByteArray = new TableExample();
                complexTableData = tableByte.readMultiByte(tableByte.length, "utf-8");

                //textFlow = importer.importToFlow(tableData);
                importToFlow(simpleTextMarkup);

                clearTextFlow();

                versionInfo.text = "Vellum: " + flashx.textLayout.TextLayoutVersion.BUILD_NUMBER + (Configuration.tlf_internal::debugCodeEnabled ? " Debug" : " Release")
                    + ", Flex: " + mx_internal::VERSION
                    + ", Player: " + Capabilities.version;
            }

            /******************************************************
             * Table
             *****************************************************/

            /**
             * Adds a table to the text flow
             **/
            public function addTable(rows:int = 1, columns:int = 1, selectable:Boolean = false, editable:Boolean = false):TableElement {
                var table:TableElement = new TableElement();
                var cell:TableCellElement;
                var createTableMethod:int = 1;
                var i:int;


                if (createTableMethod==0) {
                    cell = new TableCellElement();
                    cell.textFlow = getTextFlowContent(null, selectable, editable);
                    cell.colIndex = 0;
                    cell.rowIndex = 0;

                    table.numColumns = columns;
                    table.addRow();
                    table.addChild(cell);
                    textFlow.addChild(table);
                }
                // add table rows
                else if (createTableMethod==1) {
                    table.numColumns = columns;

                    for (i=0;i<rows;i++) {
                        addRow(table, false);
                    }

                    var p:ParagraphElement = new ParagraphElement();
                    p.addChild(table);
                    //table.cellSpacing = 8;
                    textFlow.addChild(p);
                }
                // insert table rows
                else if (createTableMethod==2) {
                    table.numColumns = columns;

                    for (i=0;i<rows;i++) {
                        table.insertRow();
                    }

                    textFlow.addChild(table);

                }

                updateAllControllers();

                return table;
            }

            /**
             * Inserts a row into the table. Creates the cells automatically.
             **/
            public function insertRow(table:TableElement, updateControllers:Boolean = true):TableRowElement {
                var rowIndex:int;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                rowIndex = table.numRows - 1;

                table.insertRow();

                updateAllControllers();

                return table.getRowAt(rowIndex);
            }

            /**
             * Adds a row to the table. Cells are created and added manually.
             **/
            public function addRow(table:TableElement, updateControllers:Boolean = true):TableRowElement {

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                table.addRow();

                var rowIndex:int = table.numRows - 1;
                var columnCount:int = table.numColumns;
                var cell:TableCellElement;
                var cellTextFlow:TextFlow;
                var selectable:Boolean = textFlow.interactionManager is SelectionManager;
                var editable:Boolean = textFlow.interactionManager is EditManager;
                var borderColor:String = "#AA0000";
                var backgroundColor:String = "#FF0000";
                var borderWidth:int = 1;
                var backgroundAlpha:Number = .25;

                for(var columnIndex:int;columnIndex<columnCount;columnIndex++){
                    cell                    = new TableCellElement();

                    cell.colIndex           = columnIndex;
                    cell.rowIndex           = rowIndex;
                    cell.textFlow           = getTextFlowContent(String(table.numChildren+1), selectable, editable);

                    cell.borderTopColor     = borderColor;
                    cell.borderLeftColor    = borderColor;
                    cell.borderBottomColor  = borderColor;
                    cell.borderRightColor   = borderColor;

                    cell.borderTopWidth     = borderWidth;
                    cell.borderLeftWidth    = borderWidth;
                    cell.borderBottomWidth  = borderWidth;
                    cell.borderRightWidth   = borderWidth;

                    cell.backgroundColor    = backgroundColor;
                    cell.backgroundAlpha    = backgroundAlpha;

                    //cell.paddingLeft      = 20;

                    table.addChild(cell);
                }

                if (updateControllers) {
                    updateAllControllers();
                }

                return table.getRowAt(rowIndex);
            }

            /**
             * Adds a column to the table.
             * TODO Cells must be added manually.
             **/
            public function addColumn(table:TableElement):TableColElement {
                var columnIndex:int;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                columnIndex = table.numColumns;

                // add column does not add cells
                table.addColumn();

                updateAllControllers();

                return table.getColumnAt(columnIndex);
            }

            /**
             * Inserts a column to the table. Cells are adding automatically.
             **/
            public function insertColumn(table:TableElement):TableColElement {
                var columnIndex:int;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                columnIndex = table.numColumns;

                // add column does not add cells
                //table.addColumn();
                table.insertColumn();

                updateAllControllers();

                return table.getColumnAt(columnIndex);
            }

            /**
             * Remove the selected table or last table in the text flow
             **/
            public function removeTable(table:TableElement):void {

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return;
                }

                //table.removeAllRowsWithContent();
                //updateAllControllers();

                textFlow.removeChild(table);

                updateAllControllers();

            }

            /**
             * Removes the selected row or the last row in the table
             **/
            public function removeRow(table:TableElement):Array {
                var rowElements:Array;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                // removeRowAt does not remove cells - using remove row with content
                //rowElement = table.removeRowAt(table.numRows - 1);
                rowElements = table.removeRowWithContentAt(table.numRows - 1);

                updateAllControllers();

                return rowElements;
            }

            /**
             * Removes all the rows in the table
             **/
            public function removeAllRows(table:TableElement):Array {
                var rowElements:Array;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                table.removeAllRowsWithContent();

                updateAllControllers();

                return rowElements;
            }

            /**
             * Removes the selected column or last column in the table
             **/
            public function removeColumn(table:TableElement):Array {
                var columnElements:Array;

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return null;
                }

                // removeColumnAt does not remove cells - using remove column with content
                //columnElement = table.removeColumnAt(table.numColumns - 1) as TableColElement;
                columnElements = table.removeColumnWithContentAt(table.numColumns - 1);

                updateAllControllers();

                return columnElements;
            }

            /**
             * Selects the text flow content of a table cell
             **/
            public function selectCellContent(cell:TableCellElement = null):TableElement {
                var table:TableElement = getTable();

                if (table) {
                    if (!cell) {
                        cell = getRandomCell(table);
                    }

                    var selectionManager:SelectionManager = cell ? cell.textFlow.interactionManager as SelectionManager : null;

                    if (selectionManager) {
                        // should not need to do this in final version
                        selectionManager.currentTable = table;
                        //selectionManager.selectRange(-1,-1);
                        /*selectionManager.selectAll();
                        selectionManager.setFocus();*/
                        selectionManager.selectCellTextFlow(cell);
                    }
                }
                else {
                    updateErrorsText(tableNotCreatedError);
                }

                return null;
            }

            /**
             * Selects the cell the cursor is in or the first cell in the table
             **/
            public function selectCell(cell:TableCellElement = null):TableElement {
                var table:TableElement = getTable();

                if (table) {

                    if (!cell) {
                        cell = getRandomCell(table);
                    }

                    //var selectionManager:SelectionManager = textFlow ? textFlow.interactionManager as SelectionManager : null;
                    var selectionManager:SelectionManager = cell ? cell.textFlow.interactionManager as SelectionManager : null;

                    if (selectionManager) {
                        // i don't think we should need to do this in final version
                        //selectionManager.currentTable = table;
                        //var selFormat:SelectionFormat = new SelectionFormat();
                        //selectionManager.unfocusedSelectionFormat = selFormat;
                        //selectionManager.focusedSelectionFormat = selFormat;
                        //cell.textFlow.interactionManager.focusedSelectionFormat = selFormat;
                        //cell.textFlow.interactionManager.unfocusedSelectionFormat = selFormat;
                        /*selectionManager.unfocusedSelectionFormat = selFormat;
                        selectionManager.inactiveSelectionFormat = selFormat;*/

                        // In ContainerController in addSelectionChild
                        // the selection format alpha is 0 so cell selection is not showing up
                        // manually setting the alpha to 1 in addSelectionChild for testing
                        selectionManager.currentTable = table;
                        selectionManager.selectCell(cell);
                    }
                }
                else {
                    updateErrorsText(tableNotCreatedError);
                }

                return null;
            }

            /**
             * Clears the selection of cells
             **/
            public function clearSelection(cells:Array = null):TableElement {
                var table:TableElement = getTable();

                if (table) {
                    var selectionManager:SelectionManager = textFlow.interactionManager as SelectionManager;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.clearSelection();
                    }
                }

                updateErrorsText(null);

                return null;
            }

            /**
             * Selects the specified cells
             **/
            public function selectCells(cells:Array = null):TableElement {
                var table:TableElement = getTable();
                var selectedCells:Vector.<TableCellElement> = new Vector.<TableCellElement>();

                if (table) {

                    if (cells==null || cells.length==0) {
                        selectedCells = getRandomCells(table);
                    }
                    else {
                        selectedCells.concat(cells);
                    }


                    var selectionManager:SelectionManager = textFlow.interactionManager as SelectionManager;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectCells(selectedCells);
                    }
                }

                updateErrorsText(null);

                return null;
            }

            /**
             * Selects a column in the table
             **/
            public function selectColumn(column:TableColElement = null):TableElement {
                var table:TableElement = getTable();

                if (table) {
                    if (!column) {
                        column = getRandomColumn(table);
                    }

                    var selectionManager:SelectionManager = textFlow.interactionManager as SelectionManager;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectColumn(column);
                    }
                }

                updateErrorsText(null);

                return null;
            }

            /**
             * Selects columns in the table
             **/
            public function selectColumns(columns:Array = null):TableElement {
                var table:TableElement = getTable();

                if (table) {
                    if (!columns) {
                        //columns = getRandomColumns(table);
                        columns = [];
                        columns.push(table.getColumnAt(0));
                        columns.push(table.getColumnAt(1));
                    }

                    var selectionManager:SelectionManager = textFlow.interactionManager as SelectionManager;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectColumns(columns);
                    }
                }

                updateErrorsText(null);

                return null;
            }

            /**
             * Selects the table
             **/
            public function selectTable(rowIndex:int = 0):TableElement {
                var table:TableElement = getTable();

                if (table) {
                    var selectionManager:SelectionManager = textFlow ? textFlow.interactionManager as SelectionManager : null;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectTable(table);
                    }
                }
                else {
                    updateErrorsText(tableNotCreatedError);
                }

                return null;
            }

            /**
             * Selects a row in the table
             **/
            public function selectRow(row:TableRowElement = null):TableElement {
                var selectionManager:SelectionManager;
                var table:TableElement = getTable();
                var row:TableRowElement;

                if (table) {

                    if (!row) {
                        row = getRandomRow(table);
                    }

                    selectionManager = textFlow.interactionManager is ISelectionManager ? textFlow.interactionManager as SelectionManager : null;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectRow(row);
                    }
                }
                else {
                    updateErrorsText(tableNotCreatedError);
                }


                return null;
            }

            /**
             * Selects rows in the table
             **/
            public function selectRows(rows:Array = null):TableElement {
                var selectionManager:SelectionManager;
                var table:TableElement = getTable();
                var row:TableRowElement;

                if (table) {

                    if (!row) {
                        rows = [];
                        rows.push(table.getRowAt(0));
                        rows.push(table.getRowAt(1));
                    }

                    selectionManager = textFlow.interactionManager is ISelectionManager ? textFlow.interactionManager as SelectionManager : null;

                    if (selectionManager) {
                        selectionManager.currentTable = table;
                        selectionManager.selectRows(rows);
                    }
                }
                else {
                    updateErrorsText(tableNotCreatedError);
                }


                return null;
            }

            /**
             * Joins contiguous separate cells into one cell
             **/
            public function joinCells():TableElement {
                var table:TableElement = getTable();

                if (table) {

                }

                updateErrorsText(notImplementedMessage);

                return null;
            }


            /******************************************************
             * Bounds
             *****************************************************/

            /**
             * Table block areas
             **/
            public function showTextBlocksBounds():void
            {
                var table:TableElement = getTable();

                if (!table) {
                    textFlowMarkupErrors.text = notImplementedMessage;
                    return;
                }
            }

            /**
             * So the text line bounds.
             * There are a few types of fills and they all seem to differ.
             * There is:
             * - background color fill style created by the BackgroundManager. see addParagraph()
             * - selection fill. select some text
             * - this fill method based on what I found online
             * - Label background fill.
             **/
            public function showTextLineBounds():void
            {
                var i:int;
                var j:int;
                var b1:Rectangle;
                var b2:Rectangle;
                var fc:IFlowComposer = textFlow.flowComposer;
                var controller:ContainerController = textFlow.flowComposer.getControllerAt(0);
                var color:uint = 0x00dd00;
                var method:int = 0;
                var clearedOnce:Boolean;

                for (i = 0; i < fc.numLines; i++) {
                    var _tfl:TextFlowLine = fc.getLineAt(i);
                    var _tl:TextLine = _tfl.getTextLine();
                    b1 = _tfl.getBounds();
                    b2 = _tl.getBounds(_tfl.controller.container);

                    if (method==1) {
                        var g:Sprite = new Sprite;
                        g.graphics.lineStyle(1, color, 0.6);
                        g.graphics.drawRect(0, Math.max(-b1.height,-_tfl.height), b1.width, b1.height);
                        _tl.removeChildren();
                        _tl.addChild(g);
                    }
                    else {
                        var graphics:Graphics = _tfl.controller.container.graphics;
                        if (!clearedOnce && graphics.readGraphicsData().length!=0) {
                            graphics.clear();
                            clearedOnce = true;
                        }
                        graphics.beginFill(color);
                        graphics.drawRect(b1.x, b1.y, b1.width, b1.height);
                        graphics.endFill();
                    }
                }
            }

            /**
             * Shows the bounds of the atoms. This is from the TLF forums.
             **/
            public function showAtomBounds():void
            {
                var i:int;
                var j:int;
                var b1:Rectangle;
                var fc:IFlowComposer = textFlow.flowComposer;
                var color:uint = 0x00dd00;

                for (i = 0; i < fc.numLines; i++)
                {
                    var _tfl:TextFlowLine = fc.getLineAt(i);
                    var _tl:TextLine = _tfl.getTextLine();

                    for (j = 0; j < _tl.atomCount; j++)
                    {
                        var textBlockBeginIndex:int = _tl.getAtomTextBlockBeginIndex(j);
                        var textFlowPosition:int = _tfl.paragraph.getAbsoluteStart()+_tl.getAtomTextBlockBeginIndex(j);
                        b1 = _tl.getAtomBounds(j);
                        var g:Sprite = new Sprite;
                        g.graphics.lineStyle(1, color,0.6)
                        g.graphics.drawRect(b1.x, b1.y , b1.width, b1.height);
                        _tl.addChild(g);

                        var leafElement:FlowLeafElement = textFlow.findLeaf(textFlowPosition);
                        var leafRelativePosition:int = textFlowPosition-leafElement.getAbsoluteStart();
                        var leafCharacter:String = leafElement.text.substr(leafRelativePosition,1);
                        //trace(i,j,textBlockBeginIndex,textFlowPosition,b1);
                    }
                }
            }

            /**
             * Show paragraph bounds. Example is from one of the AS3 examples in TLF-SDK directory
             **/
            public function showParagraphBounds():Rectangle {
                var bounds:Rectangle = new Rectangle();
                var paragraph:ParagraphElement = getParagraph();
                var container:ContainerController = paragraph.getEnclosingController(0);
                var sprite:Sprite = container.container;
                var pos:int = paragraph.getAbsoluteStart();
                var endPos:int = pos + paragraph.textLength;
                var color:int = 0x00FF00;

                while (pos < endPos) {
                    var line:TextFlowLine = paragraph.getTextFlow().flowComposer.findLineAtPosition(pos);
                    //bounds = bounds.union(line.getTextLine().getBounds(this));
                    bounds = bounds.union(line.getTextLine().getBounds(sprite));
                    pos += line.textLength;
                }

                sprite.graphics.clear();
                sprite.graphics.beginFill(color);
                sprite.graphics.drawRect(bounds.left, bounds.top, bounds.width, bounds.height);
                sprite.graphics.endFill();
                sprite.graphics.lineStyle(1, 0x0);
                sprite.graphics.moveTo(bounds.left - 1, bounds.top - 1);
                sprite.graphics.lineTo(bounds.right + 1, bounds.top - 1);
                sprite.graphics.lineTo(bounds.right + 1, bounds.bottom);
                sprite.graphics.lineTo(bounds.left - 1, bounds.bottom);
                sprite.graphics.lineTo(bounds.left - 1, bounds.top - 1);

                return bounds;
            }

            /**
             * Show the bounds of the table. This is not working code.
             **/
            public function showTableBounds():Rectangle {
                var table:TableElement = getTable();

                if (!table) return null;

                // this does not work at this time
                var bounds:Rectangle = new Rectangle();
                var lineBounds:Rectangle = new Rectangle();
                var lineBounds2:Rectangle = new Rectangle();
                var container:ContainerController = table ? table.getEnclosingController(0) :null;
                var sprite:Sprite = container.container;
                var pos:int = table.getAbsoluteStart();
                var endPos:int = pos + table.textLength;
                var color:int = 0x00FF00;

                while (pos < endPos) {
                    //var line:TextFlowTableBlock = table.getTextFlow().flowComposer.findLineAtPosition(pos) as TextFlowTableBlock;
                    var line:TextFlowLine = table.getTextFlow().flowComposer.findLineAtPosition(pos);
                    //bounds = bounds.union(line.getTextLine().getBounds(this));
                    lineBounds = new Rectangle(line.x, line.y, line.targetWidth, line.height);
                    lineBounds2 = line.getTextLine().getBounds(sprite);
                    bounds = bounds.union(lineBounds2);
                    pos += line.textLength;
                }

                var block:TextFlowTableBlock = table.getFirstBlock();
                bounds.y = block.y;
                bounds.width = block.container.width;
                bounds.height = block.height;

                sprite.graphics.clear();
                sprite.graphics.beginFill(color);
                sprite.graphics.drawRect(bounds.left, bounds.top, bounds.width, bounds.height);
                sprite.graphics.endFill();
                sprite.graphics.lineStyle(1, 0x0);
                sprite.graphics.moveTo(bounds.left - 1, bounds.top - 1);
                sprite.graphics.lineTo(bounds.right + 1, bounds.top - 1);
                sprite.graphics.lineTo(bounds.right + 1, bounds.bottom);
                sprite.graphics.lineTo(bounds.left - 1, bounds.bottom);
                sprite.graphics.lineTo(bounds.left - 1, bounds.top - 1);

                return bounds;
            }

            /**
             * Attempt to show all parcels or regions available to a text flow or table.
             * This is not working code.
             **/
            public function showParcelBounds():void {
                var flowComposer:StandardFlowComposer = textFlow.flowComposer as StandardFlowComposer;
                var container:ContainerController = flowComposer.getControllerAt(flowComposer.numControllers-1);
                var columnState:ColumnState = container.columnState;
                var composeState:ComposeState = flowComposer.getComposeState();
                var parcelList:ParcelList = composeState.parcelList;
                var backgroundManager:Object = textFlow.getBackgroundManager();
                var blocks:Array = textFlow.getBackgroundManager()?textFlow.backgroundManager.getShapeRectArray():[];
                var selectionSprite:Sprite = container.getSelectionSprite(true) as Sprite;
                var backgroundSprite:Shape = container.getBackgroundShape() as Shape;

                return;
                var bounds:Rectangle = container.getContentBounds();
                var g:Graphics = backgroundSprite.graphics;
                g.clear();
                g.beginFill(0x00ff00);
                g.drawRect(bounds.left, bounds.top, bounds.width, bounds.height);
                g.endFill();
                g.lineStyle(1, 0x0);
                g.moveTo(bounds.left - 1, bounds.top - 1);
                g.lineTo(bounds.right + 1, bounds.top - 1);
                g.lineTo(bounds.right + 1, bounds.bottom);
                g.lineTo(bounds.left - 1, bounds.bottom);
                g.lineTo(bounds.left - 1, bounds.top - 1);

            }

            /******************************************************
             * Selection
             *****************************************************/

            public function highlightOneCharacter():void {
                var selObj:Shape = new Shape();

                var flowComposer:IFlowComposer = textFlow.flowComposer;
                var line:TextFlowLine = flowComposer.getLineAt(1);
                var selFormat:SelectionFormat = textFlow.interactionManager ? textFlow.interactionManager.currentSelectionFormat : null;
                //if (!selFormat) {
                selFormat = new SelectionFormat(0xFF0000, 1, "difference", 0xFF0000, 1, "difference");
                //}
                var selectionAbsoluteStart:int = 0;
                var selectionAbsoluteEnd:int = 1;
                var controller:ContainerController = flowComposer.getControllerAt(0);
                var container:Sprite = controller.container;

                controller.addSelectionShapes(selFormat, 0, 10);
                //line.hiliteBlockSelection(selObj, selFormat, textFlow.flowComposer.getControllerAt(0).container as DisplayObject, selectionAbsoluteStart, selectionAbsoluteEnd, null, null);

            }

            public function selectRange():void {
                var flowComposer:IFlowComposer = textFlow.flowComposer;
                textFlow.interactionManager = new SelectionManager;
                var interactionManager:ISelectionManager = textFlow.interactionManager;
                interactionManager.selectRange(10, 22); // this is not working?
            }

            /**
             * Get next cell
             **/
            public function getNextCell():void {
                var table:TableElement = getTable();

                if (table) {
                    var cell:TableCellElement = table.getCellAt(0, 2);
                    var nextCell:TableCellElement = table.getNextCell(cell);
                    var prevCell:TableCellElement = table.getPreviousCell(cell);
                }
            }

            /**
             * Get previous cell
             **/
            public function getPreviousCell():void {
                var table:TableElement = getTable();
                var cell:TableCellElement;
                var prevCell:TableCellElement;

                if (table) {
                    cell = table.getCellAt(1, 0);
                    prevCell = table.getPreviousCell(cell);

                    if (prevCell.rowIndex==0 && prevCell.colIndex==2) {
                        //trace("OK");
                    }

                    cell = table.getCellAt(0, 2);
                    prevCell = table.getPreviousCell(cell);

                    if (prevCell.rowIndex==0 && prevCell.colIndex==1) {
                        //trace("OK");
                    }

                    cell = table.getCellAt(0, 0);
                    prevCell = table.getPreviousCell(cell);

                    if (prevCell==null) {
                        //trace("OK");
                    }

                }
            }

            /**
             * Show cursor used to select table
             **/
            public function showSelectTableCursor():void {
                Mouse.cursor = SelectionManager.SelectTable;
            }

            /**
             * Show cursor used to select row
             **/
            public function showSelectRowCursor():void {
                Mouse.cursor = SelectionManager.SelectTableRow;
            }

            /**
             * Show cursor used to select column
             **/
            public function showSelectColumnCursor():void {
                Mouse.cursor = SelectionManager.SelectTableColumn;
            }

            /******************************************************
             * Misc
             *****************************************************/

            /**
             * Gets a random cell from the table
             */
            public function getRandomCell(table:TableElement):TableCellElement {
                var cell:TableCellElement;

                var rowIndex:int = Math.floor(Math.random() * table.numRows);
                var columnIndex:int = Math.floor(Math.random() * table.numColumns);

                cell = table.getCellAt(rowIndex, columnIndex);

                if (!random) {
                    cell = table.getCellAt(0, 0);
                }

                return cell;
            }

            /**
             * Gets a random cells from the table
             */
            public function getRandomCells(table:TableElement):Vector.<TableCellElement> {
                var cell:TableCellElement;
                var m:int = Math.floor(Math.random()*2);
                var cells:Array = table.getCellsArray();
                var selectedCells:Vector.<TableCellElement> = new Vector.<TableCellElement>();

                for (var i:int = 0; i < cells.length; i++) {
                    var v1:Number = Math.random()*2;
                    var v:int = Math.floor(v1);
                    if (v==0) {
                        selectedCells.push(cells[i]);
                    }
                }

                if (!random) {
                    selectedCells = new Vector.<TableCellElement>();
                    selectedCells.push(table.getCellAt(0, 0));
                    selectedCells.push(table.getCellAt(1, 1));
                    selectedCells.push(table.getCellAt(2, 2));
                }

                return selectedCells;
            }

            /**
             * Gets a random row from the table
             */
            public function getRandomRow(table:TableElement):TableRowElement {
                var row:TableRowElement;

                var rowIndex:int = Math.floor(Math.random() * table.numRows);

                row = table.getRowAt(rowIndex);

                if (!random) {
                    row = table.getRowAt(0);
                }

                return row;
            }

            /**
             * Gets a random column from the table
             */
            public function getRandomColumn(table:TableElement):TableColElement {
                var column:TableColElement;

                var columnIndex:int = Math.floor(Math.random() * table.numColumns);

                column = table.getColumnAt(columnIndex);

                if (!random) {
                    column = table.getColumnAt(0);
                }

                return column;
            }

            /**
             * Updates all controllers. Call after the text flow is modified in any way.
             **/
            public function updateAllControllers():void {
                textFlow.flowComposer.updateAllControllers();

                exportTextFlow(textFlow);

                updateTableInformation();
            }

            /**
             * Handles graphic status change events
             **/
            public function graphicStatusChanged(event:StatusChangeEvent):void {
                var img:InlineGraphicElement = event.element as InlineGraphicElement;
                updateAllControllers();

                if (event.status == "ready" || event.status == "sizePending") {

                    var mirror:IEventDispatcher = event.element.getEventMirror();
                    mirror.addEventListener(FlowElementMouseEvent.MOUSE_DOWN,traceEvent);
                    mirror.addEventListener(FlowElementMouseEvent.MOUSE_UP,traceEvent);
                    mirror.addEventListener(FlowElementMouseEvent.MOUSE_MOVE,traceEvent);
                    mirror.addEventListener(FlowElementMouseEvent.ROLL_OVER,traceEvent);
                    mirror.addEventListener(FlowElementMouseEvent.ROLL_OUT,traceEvent);
                    mirror.addEventListener(FlowElementMouseEvent.CLICK,traceEvent);

                    updateAllControllers();
                }
            }

            /**
             * Handler for model change events
             **/
            public function elementModified(event:Event):void
            {
                //trace("event: " + event.type);
            }

            /**
             * Used to check mouse events
             **/
            public function traceEvent(event:FlowElementMouseEvent):void
            {
                //trace(event.flowElement.defaultTypeName+ " " + getTimer() + " " + event.toString() + event.originalEvent.toString());

                // attempt to add a cursor over an image / table
                if (event.type==FlowElementMouseEvent.ROLL_OVER ||
                    event.type==FlowElementMouseEvent.MOUSE_MOVE) {
                    Mouse.cursor = MouseCursor.HAND;
                }
                else if (event.type==FlowElementMouseEvent.ROLL_OUT) {
                    Mouse.cursor = MouseCursor.AUTO;
                }
            }

            /**
             * Adds a paragraph to the text flow
             **/
            public function addParagraph(text:String = null):void {
                var paragraph:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement();

                if (text) {
                    span.text = text;
                }
                else {
                    span.text = "This is a paragraph \nSecond line.";
                }

                paragraph.backgroundAlpha = 0.2;
                paragraph.backgroundColor = 0x0000FF;

                paragraph.addChild(span);

                textFlow.addChild(paragraph);

                updateAllControllers();
            }

            /**
             * Creates a text flow from the text value passed in. Used for table cell text flows.
             **/
            public function getTextFlowContent(text:String = null, selectable:Boolean = false, editable:Boolean = false):TextFlow {
                var config:Configuration= new Configuration();
                config.manageTabKey = true;
                var textFlow:TextFlow = new TextFlow(config);
                var paragraph:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement();

                if (text) {
                    span.text = text;
                }
                else {
                    span.text = "This is cell";
                }

                paragraph.backgroundAlpha = 0.2;
                paragraph.backgroundColor = 0xFF0000;
                paragraph.addChild(span);

                /*textFlow.paddingLeft = 10;
                textFlow.paddingRight = 10;
                textFlow.paddingTop = 10;
                textFlow.paddingBottom = 10;*/
                textFlow.addChild(paragraph);

                if (editable) {
                    // setting the edit manager adds a default paragraph
                    //textFlow.interactionManager = textFlow.interactionManager;
                    textFlow.interactionManager = new EditManager(new UndoManager);
                }
                else if (selectable) {
                    textFlow.interactionManager = new SelectionManager();
                }

                return textFlow;
            }

            /**
             * Gets the paragraph the cursor is in or the first available paragraph
             **/
            public function getParagraph():ParagraphElement {
                var paragraph:ParagraphElement;

                if (textFlow.interactionManager) {
                    var cursor:int = Math.max(0, textFlow.interactionManager.anchorPosition);
                    paragraph = textFlow.findAbsoluteParagraph(cursor);
                }

                if (!paragraph) {
                    var items:Array = textFlow.getElementsByTypeName("p");
                    paragraph = items.length ? items[0] : null;
                }

                return paragraph;
            }

            /**
             * Gets the first table available or null if none are available
             **/
            public function getTable():TableElement {
                var table:TableElement;

                if (textFlow.interactionManager) {
                    var cursor:int = Math.max(0, textFlow.interactionManager.anchorPosition);
                    //table = textFlow.findAbsoluteParagraph(cursor);
                }

                if (!table) {
                    var items:Array = textFlow.getElementsByTypeName("table");
                    table = items.length ? items[0] : null;
                }

                return table;
            }

            /**
             * Removes the shapes added by show boundary methods
             **/
            public function removeShapes():void {
                var paragraph:ParagraphElement = getParagraph();
                if (!paragraph) return;
                var bounds:Rectangle = new Rectangle();
                var container:ContainerController = paragraph.getEnclosingController(0);
                var sprite:Sprite = container.container;

                var i:int;
                var j:int;
                var b1:Rectangle;
                var fc:IFlowComposer = textFlow.flowComposer;
                var color:uint = 0x00dd00;

                for (i = 0; i < fc.numLines; i++)
                {
                    var _tfl:TextFlowLine = fc.getLineAt(i);
                    var _tl:TextLine = _tfl.getTextLine();
                    _tl.removeChildren();
                }

                if (sprite && sprite.graphics.readGraphicsData().length!=0) {
                    sprite.graphics.clear();
                }
            }

            /**
             * Removes all the children in the text flow
             **/
            public function clearTextFlow():void {
                //textFlow.setTextLength(0);
                //textFlow.deleteContainerText(0, textFlow.textLength);

                if (textFlow.numChildren) {
                    textFlow.replaceChildren(0, textFlow.numChildren);
                }

                removeShapes();

                updateAllControllers();

                if (textFlow.interactionManager) {
                    textFlow.interactionManager.selectAll();
                    textFlow.interactionManager.setFocus();
                }
            }

            /**
             * Flag indicating if currently importing text
             * If the text flow has inline graphics that have not loaded yet it can cause
             * another composition complete event causing a reexport.
             **/
            public var updatingTextFlow:Boolean;

            /**
             * Imports the text flow markup into new text flow content when changed.
             * If the text flow has inline graphics that have not loaded yet it can cause
             * another composition complete event causing a reexport.
             **/
            protected function textFlowMarkup_changeHandler(event:TextOperationEvent):void {
                updatingTextFlow = true;
                importToFlow(textFlowMarkup.text);
                updatingTextFlow = false;
            }

            /**
             * Imports the text into a new text flow
             **/
            public function importToFlow(value:String):TextFlow {
                var errors:Vector.<String>;
                var importer:ITextImporter;
                var newTextFlow:TextFlow;

                importer = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
                importer.throwOnError = false;

                //importer.configuration = new Configuration();
                newTextFlow = importer.importToFlow(value);
                errors = importer.errors;

                // if text flow is not null add it and ignore errors
                //if (!errors && newTextFlow) {
                if (newTextFlow) {
                    setupTextFlow(newTextFlow);
                }

                updateErrorsText(importer.errors);

                return newTextFlow;
            }

            /**
             * Adds listeners to the text flow and adds it to the container
             **/
            public function setupTextFlow(newTextFlow:TextFlow):void {
                if (!newTextFlow) return;

                // remove listeners from previous text flow
                // we may need to do other things to clear out the old textflow
                if (textFlow) {
                    textFlow.removeEventListener(CompositionCompleteEvent.COMPOSITION_COMPLETE, compositionComplete);
                    textFlow.removeEventListener(ModelChange.ELEMENT_MODIFIED, graphicStatusChanged);
                    textFlow.removeEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, graphicStatusChanged);
                    textFlow.removeEventListener(SelectionEvent.SELECTION_CHANGE, selectionChange);
                }

                textFlow = newTextFlow;

                textFlow.addEventListener(CompositionCompleteEvent.COMPOSITION_COMPLETE, compositionComplete, false, 0, true);
                textFlow.addEventListener(ModelChange.ELEMENT_MODIFIED, elementModified, false, 0, true);
                textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, graphicStatusChanged, false, 0, true);
                textFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, selectionChange, false, 0, true);

                if (!container) {
                    container = new SpriteVisualElement();
                }

                container.removeChildren();

                if (!controller) {
                    controller = new ContainerController(container, group.width, group.height);
                }

                // Add controller to text flow; add container to stage and display text
                textFlow.flowComposer.addController(controller);

                //textFlow.interactionManager = new SelectionManager();
                textFlow.interactionManager = new EditManager(new UndoManager);

                group.addElement(container as IVisualElement);

                updateAllControllers();
            }

            /**
             * When TextFlow has finished composition we export the markup
             **/
            protected function compositionComplete(event:CompositionCompleteEvent):void
            {
                exportTextFlow(textFlow);
            }

            /**
             * Selection change
             **/
            protected function selectionChange(event:SelectionEvent):void
            {
                // not used yet
            }

            /**
             * Exports the text flow markup and reports any errors.
             * Changes can be overwritten when using inline graphics
             **/
            public function exportTextFlow(textFlow:TextFlow):void {

                // do not export if importing or user is typing into the text flow markup text area
                if (updatingTextFlow ||
                    textFlowMarkup.focusManager.getFocus()==textFlowMarkup) {
                    return;
                }


                var exporter:ITextExporter = TextConverter.getExporter(TextConverter.TEXT_LAYOUT_FORMAT);
                exporter.throwOnError = false;
                exporter.config.whiteSpaceCollapse = WhiteSpaceCollapse.COLLAPSE;

                var object:Object = exporter.export(textFlow, TextConverter.TEXT_LAYOUT_FORMAT);
                textFlowMarkup.text = object is XML ? XML(object).toXMLString() : null;

                updateErrorsText(exporter.errors);
            }

            /**
             * Adds errors during export or import to the errors text box
             **/
            public function updateErrorsText(errors:*):void {

                if (errors is Vector.<String>) {
                    textFlowMarkupErrors.text = errors ? errors.join("\n") : null;
                }
                else if (errors is String) {
                    textFlowMarkupErrors.text = String(errors);
                }
                else if (errors is Object) {
                    textFlowMarkupErrors.text = Object(errors).toString();
                }
                else {
                    textFlowMarkupErrors.text = "";
                }
            }

            public function updateTableInformation():void {
                var table:TableElement = getTable();

                if (table) {
                    tableWidth.text = String(table.width);
                    tableHeight.text = String(Number(table.getFirstBlock().height).toFixed(1));
                    tableBlocks.text = table.tableBlocks ? String(table.tableBlocks.length) : "";
                    tableCells.text = String(table.numCells);
                    tableRowsStepper.value = table.numRows;
                    tableColumnsStepper.value = table.numColumns;
                    //tableCellSpacing.value = table.cellSpacing!=undefined ? table.cellSpacing : 0;
                }
                else {
                    tableWidth.text = "";
                    tableHeight.text = "";
                    tableBlocks.text = "";
                    tableCells.text = "";
                    tableRowsStepper.value = 0;
                    tableColumnsStepper.value = 0;
                    //tableCellSpacing.value = 0;
                }
            }

            public var random:Boolean;

            /**
             * Switches between random and non random selection
             **/
            public function randomizeSelection():void {
                random = !random;
                randomCheckMark.visible = random;
                randomCheckMark.includeInLayout = random;
                randomCheckMarkSpacer.visible = random;
                randomCheckMarkSpacer.includeInLayout = random;
            }

            protected function tableRowsStepper_changeHandler(event:Event):void
            {
                var table:TableElement = getTable();

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return;
                }

                // this adds the row but not the cells
                //table.numRows = tableRowsStepper.value;
                //updateAllControllers();

                if (tableRowsStepper.value<table.numRows) {
                    removeRow(table);
                }
                else {
                    addRow(table);
                    //insertRow(table);
                }

            }

            protected function tableColumnStepper_changeHandler(event:Event):void
            {
                var table:TableElement = getTable();

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return;
                }

                    // this adds the row but not the cells
                //table.numColumns = tableColumnsStepper.value;
                //updateAllControllers();

                if (tableColumnsStepper.value<table.numColumns) {
                    removeColumn(table);
                }
                else {
                    addColumn(table);
                    //insertColumn(table);
                }

            }

            protected function tableWidth_changeHandler(event:TextOperationEvent):void
            {
                var table:TableElement = getTable();

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return;
                }

                table.width = Number(tableWidth.text);

                updateAllControllers();
            }

            protected function cellSpacing_changeHandler(event:Event):void
            {
                var table:TableElement = getTable();

                if (!table) {
                    updateErrorsText(tableNotCreatedError);
                    return;
                }

                //table.cellSpacing = Number(tableCellSpacing.value);

                updateAllControllers();

            }

            protected function uncaughtErrorHandler(event:UncaughtErrorEvent):void
            {
                if (event.error is TypeError) {
                    var message:String = TypeError(event.error).message;
                    updateErrorsText(message);
                }
                else {
                    updateErrorsText(Object(event.error).toString());
                }
            }

            protected function errorHandler(event:ErrorEvent):void
            {
                updateErrorsText(event.text);
            }

        ]]>
    </fx:Script>

    <s:HGroup width="100%" minHeight="400" top="50" left="10" right="10" styleName="header">
        <s:VGroup width="65%" height="100%">
            <s:HGroup width="100%" gap="1" >
                <s:Label text="TextFlow" width="100%" styleName="header"/>
                <s:Label text="clear"
                         click="clearTextFlow()"
                         styleName="header"
                         rollOver="event.currentTarget.styleName='header2'"
                         rollOut="event.currentTarget.styleName='header'"
                         useHandCursor="true" buttonMode="true"
                         />
            </s:HGroup>
            <s:BorderContainer id="group" width="100%" height="100%" minHeight="250"/>
            <s:HGroup minHeight="22" verticalAlign="middle">
                <local:ImageButton source="assets/images/addTableIcon.png"
                         toolTip="Add Table"
                         click="addTable(3, 3)" />
                <local:ImageButton toolTip="Remove Table"
                         source="assets/images/removeTableIcon.png"
                         click="removeTable(getTable())" />
                <s:Label text="|" />
                <local:ImageButton source="assets/images/addRowIcon.png"
                                   toolTip="Add Row"
                                   click="addRow(getTable())" />
                <local:ImageButton source="assets/images/removeRowIcon.png"
                                   toolTip="Remove Row"
                                   click="removeRow(getTable())" />
                <s:Label text="|" />
                <local:ImageButton source="assets/images/addColumnIcon.png"
                                   toolTip="Add Column"
                                   click="addColumn(getTable())" />
                <local:ImageButton source="assets/images/removeColumnIcon.png"
                                   toolTip="Remove Column"
                                   click="removeColumn(getTable())" />
                <s:Label text="|" />
                <s:Image toolTip="Rows" source="assets/images/rowsIcon.png" />
                <s:NumericStepper id="tableRowsStepper"
                                  width="50" maximum="250"
                                  change="tableRowsStepper_changeHandler(event)"/>
                <s:Image toolTip="Columns" source="assets/images/columnsIcon.png" />
                <s:NumericStepper id="tableColumnsStepper"
                                  width="50" maximum="50"
                                  change="tableColumnStepper_changeHandler(event)"/>
                <s:Label text="|" />
                <s:Label text="Width:" />
                <s:TextInput id="tableWidth" width="40" change="tableWidth_changeHandler(event)"/>
                <s:Label text="Height:" />
                <s:Label id="tableHeight" />
                <!--<s:Label text="Cell Spacing:" />
                <s:NumericStepper id="tableCellSpacing"
                                  width="50" maximum="50"
                                  change="cellSpacing_changeHandler(event)"/>-->
                <s:Label text="Total Cells:" />
                <s:Label id="tableCells" />
                <s:Label text="Blocks:" />
                <s:Label id="tableBlocks" />
            </s:HGroup>
            <s:Label text="TextFlow Markup" width="100%" styleName="header"/>
            <s:TextArea id="textFlowMarkup" width="100%" height="100%"
                        focusThickness="0" change="textFlowMarkup_changeHandler(event)"/>
            <s:Label text="TextFlow Markup Errors" width="100%" styleName="header"
                        />
            <s:TextArea id="textFlowMarkupErrors" width="100%" height="30%" color="red"
                        >
            </s:TextArea>
        </s:VGroup>
        <s:VGroup width="40%" height="100%" >
            <s:Label text="Elements" width="100%" styleName="header"/>
            <s:HGroup styleName="buttonGroup">
                <mx:LinkButton label="Add Editable Table" click="addTable(3, 3, false, true)"/>
                <mx:LinkButton label="Add Selectable Table" click="addTable(3, 3, true)"/>
                <mx:LinkButton label="Add Table" click="addTable(3, 3)"/>
                <mx:LinkButton label="Remove Table" click="removeTable(getTable())"/>
                <mx:LinkButton label="Remove All Rows" click="removeAllRows(getTable())"/>
            </s:HGroup>
            <s:HGroup>
                <mx:LinkButton label="Add Paragraph" click="addParagraph()"/>
                <mx:LinkButton label="Remove Paragraph" />
                <mx:LinkButton label="Remove Shapes" click="removeShapes()"/>
                <mx:LinkButton label="Remove All" click="clearTextFlow()"/>
            </s:HGroup>
            <s:HGroup width="100%" gap="1" >
                <s:Label text="Selection" width="100%" styleName="header"/>

                <s:Label id="randomCheckMark" text="✓"
                         styleName="header"
                         visible="false"
                         includeInLayout="false"
                         />
                <s:Spacer id="randomCheckMarkSpacer" width="-2" />
                <s:Label text="Random" click="randomizeSelection()"
                         styleName="header"
                         useHandCursor="true"
                         buttonMode="true"
                         />
            </s:HGroup>
            <s:HGroup>
                <mx:LinkButton label="Select Table" click="selectTable()"/>
                <mx:LinkButton label="Select Row" click="selectRow()"/>
                <mx:LinkButton label="Select Rows" click="selectRows()"/>
                <mx:LinkButton label="Select Column" click="selectColumn()"/>
                <mx:LinkButton label="Select Columns" click="selectColumns()"/>
            </s:HGroup>
            <s:HGroup>
                <mx:LinkButton label="Select Cell" click="selectCell()"/>
                <mx:LinkButton label="Select Cells" click="selectCells()"/>
                <mx:LinkButton label="Select Cell Content" click="selectCellContent()"/>
                <mx:LinkButton label="Clear Selection" click="clearSelection()"/>
            </s:HGroup>
            <s:HGroup>
                <mx:LinkButton label="Select Text Range" click="selectRange()"/>
            </s:HGroup>
            <s:Label text="Misc" width="100%" styleName="header"/>
            <s:HGroup>
                <mx:LinkButton label="Join Cells" click="joinCells()"/>
                <mx:LinkButton label="Get next cell" click="getNextCell()"/>
                <mx:LinkButton label="Get previous cell" click="getPreviousCell()"/>
                <mx:LinkButton label="Update all controllers" click="updateAllControllers()"/>
            </s:HGroup>
            <s:HGroup>
                <mx:LinkButton label="Show Row Cursor" click="showSelectRowCursor()"/>
                <mx:LinkButton label="Show Column Cursor" click="showSelectColumnCursor()"/>
                <mx:LinkButton label="Show Table Cursor" click="showSelectTableCursor()"/>
            </s:HGroup>
            <s:Label text="Boundaries" width="100%" styleName="header"/>
            <s:HGroup>
                <mx:LinkButton label="Table" click="showTableBounds()"/>
                <mx:LinkButton label="TableBlocks" click="showTextBlocksBounds()"/>
                <mx:LinkButton label="TextLines" click="showTextLineBounds()"/>
                <mx:LinkButton label="Paragraph" click="showParagraphBounds()"/>
                <mx:LinkButton label="Parcels" click="showParcelBounds()"/>
                <mx:LinkButton label="Atoms" click="showAtomBounds()"/>
            </s:HGroup>
            <s:Label text="Import Text Flows" width="100%" styleName="header"/>
            <s:HGroup>
                <mx:LinkButton label="Simple Table TextFlow" click="importToFlow(simpleTableTextFlow)"/>
                <mx:LinkButton label="Complex Table TextFlow" click="importToFlow(complexTableData)"/>
                <mx:LinkButton label="Simple TextFlow" click="importToFlow(simpleTextMarkup)"/>
                <mx:LinkButton label="Complex TextFlow" click="importToFlow(complexTextFlow)"/>
            </s:HGroup>
            <s:Label text="Version Information" width="100%" styleName="header"/>
            <s:HGroup minHeight="22" verticalAlign="middle">
                <s:Label id="versionInfo" paddingLeft="10"/>
            </s:HGroup>

            <!--<s:TextArea width="100%" height="10%" color="blue"
                        >
                <s:content>
                    <s:p>
                        <s:span>test</s:span>
                    </s:p>
                    <s:table>
                        <s:tr>
                            <s:td>
                                Hello world
                            </s:td>
                        </s:tr>
                    </s:table>
                </s:content>
            </s:TextArea>-->
        </s:VGroup>
    </s:HGroup>

</s:Application>