Auto scrolling the contents of a VGroup container in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

9 thoughts on “Auto scrolling the contents of a VGroup container in Flex 4

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

    1. @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

  2. 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>
  3. 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.

  4. 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. :(

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

Comments are closed.