Auto scrolling the contents of a VGroup container in Flex 4

By Peter deHaan On November 2, 2009 · 9 Comments

The following example shows how you can tab through a series of Spark TextInput controls in Flex 4 and auto-scroll the VGroup container so that the currently focused text field has focus by using the fractionOfElementInView() method, getScrollPositionDeltaToElement() method, and verticalScrollPosition property.

Full code after the jump.

And a big thanks to Hans Muller for explaining this all to me.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/ -->
<s:Application name="Spark_VerticalLayout_getScrollPositionDeltaToElement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import spark.layouts.VerticalLayout;
 
            protected function textinput_focusInHandler(evt:FocusEvent):void {
                var idx:int = vg.getElementIndex(evt.currentTarget as IVisualElement);
                var lay:VerticalLayout = vg.layout as VerticalLayout;
                if (lay.fractionOfElementInView(idx) < 1) {
                    lay.verticalScrollPosition += lay.getScrollPositionDeltaToElement(idx).y;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Scroller id="scrllr"
            focusEnabled="false"
            hasFocusableChildren="true"
            height="100"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup id="vg"
                paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
            <s:TextInput text="One" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Two" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Three" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Four" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Five" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Six" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Seven" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Eight" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Nine" focusIn="textinput_focusInHandler(event);" />
        </s:VGroup>
    </s:Scroller>
 
</s:Application>

If you wanted to add a little scrolling animation (’cause who DOESN’T love animation!?), you could use an Animate with a SimpleMotionPath, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/ -->
<s:Application name="Spark_VerticalLayout_getScrollPositionDeltaToElement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import spark.layouts.VerticalLayout;
 
            protected function textinput_focusInHandler(evt:FocusEvent):void {
                var idx:int = vg.getElementIndex(evt.currentTarget as IVisualElement);
                var lay:VerticalLayout = vg.layout as VerticalLayout;
                if (lay.fractionOfElementInView(idx) < 1) {
                    pth.valueBy = lay.getScrollPositionDeltaToElement(idx).y;
                    anim.play([lay]);
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:Animate id="anim" duration="500">
            <s:motionPaths>
                <s:SimpleMotionPath id="pth" property="verticalScrollPosition" />
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
 
    <s:Scroller id="scrllr"
            focusEnabled="false"
            hasFocusableChildren="true"
            height="100"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup id="vg"
                paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
            <s:TextInput text="One" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Two" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Three" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Four" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Five" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Six" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Seven" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Eight" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Nine" focusIn="textinput_focusInHandler(event);" />
        </s:VGroup>
    </s:Scroller>
 
</s:Application>

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

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

9 Responses to Auto scrolling the contents of a VGroup container in Flex 4

Sankara narayanan says:

November 2, 2009 at 9:21 pm

Hi peter,
I have one doubt.
How to make a alert truly(?!) modal?
That is user should not be able to type any thing in the field which has the current focus , while the alert is being thrown.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
 
    <mx:TextInput focusOut="Alert.show('IS THIS ALERT MODAL ?');"/>
    <mx:TextInput/>
 
</mx:Application>

In this if we are changing the focus from field1 to field2,
The alert is thrown.But the user can type things in field2.
How to do prevent this? Thanks in advance.

Peter deHaan says:

November 3, 2009 at 7:04 am

@Sankara narayanan,

Seems to be a timing issue between the focus manager and the popup manager. You can try using the callLater() method to delay the Alert slightly:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected function onFocOut():void {
                Alert.show("IS THIS ALERT MODAL ?");
            }
        ]]>
    </mx:Script>
 
    <mx:TextInput focusOut="callLater(onFocOut);"/>
    <mx:TextInput/>
 
</mx:Application>

Peter

Sankara narayanan says:

November 3, 2009 at 10:18 pm

Thanks , Peter. Its working fine with callLater().

But we had a problem on setting the focus back to the first field(from which we are thrwong the alert).
Now we got it thro Close Handlers.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.controls.Alert;
 
            protected function onFocOut():void {
                // Alert.show("IS THIS ALERT MODAL ?",null,null,null,aa,null,null);
                Alert.show("IS THIS ALERT MODAL ?", 'WARNING' ,Alert.OK,null,aa,null);
            }
            private function aa(closobj:CloseEvent) {
                if(closobj.detail == Alert.OK) {
                    //one.text = 'SANKAR';
                    one.setFocus();
                }
            }
        ]]>
    </mx:Script>
 
    <mx:TextInput id="one" focusOut="callLater(onFocOut);"/>
    <mx:TextInput/>
 
</mx:Application>

Jason Bailey says:

December 3, 2009 at 11:02 am

Thanks for the tips, new to flex 4 and was having an awful time figuring out the programmatic scrolling… I was missing the contentHeight value.

Reply
Sankara narayanan says:

May 17, 2010 at 12:44 am

Hi Peter,
I have another doubt.
Is ther e a method to get a object’s reference by knowing it’s name? (Like getElementById() in JS)
I am creating the objects dynamically through Action Script.
I can not use the getChildByName() , Sicne it will check the immediate children only, and not the entire.
For nesting children getChildByName() doesn’t help me!
Can you?

Sorry for spamming here.I could not find a contact mail of you in this blog. :(

Reply
Prashant Chaudhari says:

August 18, 2010 at 4:59 am

am working on a Pure-MVC based Flex 4 application.I didn’t face the problem few day’s back.But now the application is not receiving mouse wheel events at all.Application is fairly complex.
Please Help.

Reply
Anonymous says:

January 6, 2011 at 6:44 am

what about custom form scrolling ?

Reply
Anonymous says:

January 6, 2011 at 7:09 am

sorry for silly question, form already has a verticalScrollPosition :/

Reply
Daan says:

October 14, 2011 at 2:04 pm

Why would you not provide a running example…?
Seeing, is believing.

Reply