Flex Examples » maxVerticalScrollPosition http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating an auto-scrolling DataGrid control in Flex http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/ http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/#comments Sun, 01 Feb 2009 02:29:58 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/ In a previous example, “Auto-scrolling a TextArea control in Flex”, we saw 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.

The following example shows how you can auto-scroll a Flex DataGrid control using the ArrayCollection object’s collectionChange [...]]]> In a previous example, “Auto-scrolling a TextArea control in Flex”, we saw 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.

The following example shows how you can auto-scroll a Flex DataGrid control using the ArrayCollection object’s collectionChange event, and the verticalScrollPosition and maxVerticalScrollPosition properties.

<?xml version="1.0" encoding="utf-8"?>
<!--http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            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();
                arrColl.addItem({id:timer.currentCount, time:now});
            }
 
            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(autoScrollDataGrid);
            }
 
            private function autoScrollDataGrid():void {
                if (dataGrid) {
                    dataGrid.validateNow();
                    dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
                }
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl"
            collectionChange="arrColl_collectionChange(event);" />
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="200"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="id" width="50" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/feed/ 11 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 Programmatically scrolling a TextArea control in Flex http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/#comments Tue, 26 Aug 2008 07:14:17 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ The following example shows how you can scroll a Flex TextArea control by setting the verticalScrollPosition and maxVerticalScrollPosition properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ --> <mx:Application name="TextArea_verticalScrollPosition_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ private function init():void { callLater(setMaxVScrollPos); } private function setMaxVScrollPos():void { slider.maximum [...]]]> The following example shows how you can scroll a Flex TextArea control by setting the verticalScrollPosition and maxVerticalScrollPosition properties.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            private function init():void {
                callLater(setMaxVScrollPos);
            }

            private function setMaxVScrollPos():void {
                slider.maximum = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalScrollPosition:">
                <mx:HSlider id="slider"
                        minimum="0"
                        snapInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            verticalScrollPosition="{slider.value}"
            verticalScrollPolicy="on"
            width="100%"
            height="100%"
            resize="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the verticalScrollPosition property using ActionScript, as seen in the following example:

View MXML

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

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                callLater(setMaxVScrollPos);
            }

            private function setMaxVScrollPos():void {
                slider.maximum = textArea.maxVerticalScrollPosition;
            }

            private function slider_change(evt:SliderEvent):void {
                textArea.verticalScrollPosition = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalScrollPosition:">
                <mx:HSlider id="slider"
                        minimum="0"
                        snapInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            verticalScrollPolicy="on"
            width="100%"
            height="100%"
            resize="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/feed/ 0 Setting a Flex container’s vertical scroll policy http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/#comments Sat, 10 Nov 2007 06:51:19 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ The following example shows how you can use the verticalScrollPolicy property on a Flex VBox container to control the appearance of the vertical scroll bar when the container’s contents exceed the dimensions of the container.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ [...]]]> The following example shows how you can use the verticalScrollPolicy property on a Flex VBox container to control the appearance of the vertical scroll bar when the container’s contents exceed the dimensions of the container.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function updateScrollPosition():void {
                vSP.text = vBox.verticalScrollPosition.toString();
                mVSP.text = vBox.maxVerticalScrollPosition.toString();
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="verticalScrollPolicy:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="auto" />
                            <mx:Object label="on" />
                            <mx:Object label="off" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="300"
                        value="50"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="50" />
            </mx:FormItem>
            <mx:FormItem label="verticalScrollPosition:">
                <mx:Label id="vSP" />
            </mx:FormItem>
            <mx:FormItem label="maxVerticalScrollPosition:">
                <mx:Label id="mVSP" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:VBox id="vBox"
            verticalScrollPolicy="{comboBox.selectedItem.label}"
            backgroundColor="haloSilver"
            width="200"
            height="200"
            updateComplete="updateScrollPosition();"
            creationComplete="updateScrollPosition();">
        <mx:Box id="box"
                backgroundColor="haloBlue"
                width="100%"
                height="{slider.value}" />
    </mx:VBox>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/feed/ 1