Enabling tabbing on Spark Scroller children in Flex 4

The following example shows how you can enable tabbing into Spark Scroller children in Flex 4 by setting the Boolean hasFocusableChildren property.

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/07/29/enabling-tabbing-on-spark-scroller-children/ -->
<s:Application name="Spark_Scroller_hasFocusableChildren_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout paddingLeft="10" paddingTop="10" />
    </s:layout>
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="hasFocusableChildren:">
                <s:CheckBox id="cb1" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TextInput text="before" width="100" />
    <s:TextArea text="before" width="100" />
    <s:Scroller hasFocusableChildren="{cb1.selected}">
        <s:VGroup paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2">
            <s:TextInput text="inside" width="100" />
            <s:TextArea text="inside" width="100" />
        </s:VGroup>
    </s:Scroller>
    <s:TextInput text="after" width="100" />
    <s:TextArea text="after" width="100" />
 
</s:Application>

View source is enabled in the following example.

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.

10 thoughts on “Enabling tabbing on Spark Scroller children in Flex 4

  1. Hi Peter,

    I looked for an email adress of you without a success… because a few months ago I used your Tags Overview page a lot and now I noticed that this page is gone. :-( Is it possible for you to add this page on your blog again? For me it was a very easy way to find the right code snippets for my problems…

    Thanks!
    Florian

    1. Yeah, that page got lost in the move to the new theme. I need to find a WordPress plugin or some code to let me do a tag cloud in a WordPress Page instead of a sidebar widget.

      Peter

  2. I’ve noticed that any “tabbable” components, when displayed via the PopUpManager, do not focus correctly. Really weird things start happening with my focus, everywhere. Usually, when I hit tab, I’ll focus in on a component that is nowhere near the component I tabbed from.

  3. Thanks Peter,

    Once again one of your examples saved the day! :-)

    I wonder what the reasoning is behind hasFocusableChildren being false by default?

      1. Looks like hasFocusableChildren is true by default now, which made this example a bit pointless. I modified it slightly and added a check box so you can toggle the behavior and see the difference with hasFocusableChildren=true versus hasFocusableChildren=false.

        Peter

Comments are closed.