Flex Examples » callLater() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Auto-scrolling a TextArea control in Flex http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/#comments Thu, 27 Nov 2008 22:26:54 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ The following example shows how you can auto-scroll a Flex TextArea control when new content is added by setting the verticalScrollPosition property to the value of the maxVerticalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ --> <mx:Application name="TextArea_maxVerticalScrollPosition_text" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ private [...]]]> The following example shows how you can auto-scroll a Flex TextArea control when new content is added by setting the verticalScrollPosition property to the value of the maxVerticalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private var timer:Timer;

            private function init():void {
                timer = new Timer(500);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
            }

            private function onTimer(evt:TimerEvent):void {
                var now:String = new Date().toTimeString();
                var str:String = "[" + timer.currentCount + "] " + now;
                textArea.text += str + "\\n";
                textArea.validateNow();
                textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea"
            width="200"
            height="160" />

</mx:Application>

View source is enabled in the following example.

Or, instead of calling the validateNow() method before using the verticalScrollPosition and maxVerticalScrollPosition properties, you could use the callLater() method to handle the scrolling, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private var timer:Timer;

            private function init():void {
                timer = new Timer(500);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
            }

            private function onTimer(evt:TimerEvent):void {
                var now:String = new Date().toTimeString();
                var str:String = "[" + timer.currentCount + "] " + now;
                textArea.text += str + "\\n";
                callLater(autoScrollTextArea, [textArea]);
            }

            private function autoScrollTextArea(target:TextArea):void {
                target.verticalScrollPosition = target.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea"
            width="200"
            height="160" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/feed/ 10 Determining a DataGridColumn object’s current sort order http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/#comments Fri, 24 Aug 2007 05:34:36 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ OK, I’m convinced there is a better way to do this, but so far this is the only solution I’ve found…
Any other ideas? Leave em in the comments!

Basically the following post shows one possible way of determining the current sort order of a data grid by grabbing the sortDescending property whenever a [...]]]> OK, I’m convinced there is a better way to do this, but so far this is the only solution I’ve found…
Any other ideas? Leave em in the comments!

Basically the following post shows one possible way of determining the current sort order of a data grid by grabbing the sortDescending property whenever a user presses on a data grid header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->
<mx:Application name="DataGridColumn_sortDescending_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.events.DataGridEvent;

            private function doHeaderRelease(evt:DataGridEvent):void {
                var column:DataGridColumn = DataGridColumn(evt.currentTarget.columns[evt.columnIndex]);
                DataGrid(evt.currentTarget).callLater(onCallLater, [column]);
            }

            private function onCallLater(column:DataGridColumn):void {
                columnSortDescending.text = column.dataField + ".sortDescending: " + column.sortDescending;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="columnSortDescending" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            rowCount="4"
            headerRelease="doHeaderRelease(event)">
        <mx:columns>
            <mx:DataGridColumn id="col1" dataField="label" />
            <mx:DataGridColumn id="col2" dataField="data" />
        </mx:columns>
        <mx:dataProvider>
            <mx:Array>
                <mx:Object data="one" label="User 1" />
                <mx:Object data="two" label="User 2" />
            </mx:Array>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

April 9, 2009: Actually, here is a much better approach, suggested by my co-worker, and Flex hero, Alex Harui:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->
<mx:Application name="DataGrid_dataProvider_sort_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.Sort;
            import mx.collections.SortField;

            private function init():void {
                try {
                    var s:SortField = Sort(dataGrid.dataProvider.sort).fields[0];
                    lbl.text = "name:" + s.name + ", descending:" + s.descending;
                    lbl.setStyle("color", "black");
                } catch (err:*) {
                    lbl.text = "unsorted";
                    lbl.setStyle("color", "red");
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn" label="Get sort" click="init();" />
        <mx:Label id="lbl" fontWeight="bold" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object c1="1.One" c2="1.Two" />
                <mx:Object c1="2.One" c2="2.Two" />
                <mx:Object c1="3.One" c2="3.Two" />
                <mx:Object c1="4.One" c2="4.Two" />
                <mx:Object c1="5.One" c2="5.Two" />
                <mx:Object c1="6.One" c2="6.Two" />
                <mx:Object c1="7.One" c2="7.Two" />
                <mx:Object c1="8.One" c2="8.Two" />
            </mx:Array>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>
 
]]> http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/feed/ 6