Auto scrolling the contents of a VGroup container in Flex 4

by Peter deHaan on November 2, 2009

in AnimateProperties, Scroller (Spark), VGroup (Spark), VerticalLayout (Spark), beta2

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?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.

Tagged as: , , , , ,

{ 4 comments… read them below or add one }

1 Sankara narayanan 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.

Reply

2 Peter deHaan 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

Reply

3 Sankara narayanan 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>

Reply

4 Jason Bailey 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

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: