Enabling tabbing on Spark Scroller children in Flex 4

By Peter deHaan On July 29, 2009 · 10 Comments

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

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.

10 Responses to Enabling tabbing on Spark Scroller children in Flex 4

Sipho Ngwenya says:

July 29, 2009 at 9:40 am

Hi,

What SDK version did you use for this example? I am getting using SDK build 4.0.0.8811 to compile.

Thanks

Reply
- Peter deHaan says:
  
  July 29, 2009 at 10:12 am
  
  Sipho,
  
  I used 4.0.0.8847.
  
  Peter
  
  Reply
Florian Weil says:

July 30, 2009 at 6:09 am

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

Reply
- Peter deHaan says:
  
  July 30, 2009 at 7:10 am
  
  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
  
  Reply
  - Peter deHaan says:
    
    July 30, 2009 at 7:23 am
    
    Fixed! http://blog.flexexamples.com/tags/
    
    It ain’t pretty, but it is trying to show about 920+ tags.
  - Florian Weil says:
    
    July 30, 2009 at 2:40 pm
    
    Hi Peter,
    
    wow, so fast. Thank you very much!
    
    Florian
TK says:

August 27, 2009 at 9:55 pm

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.

Reply
Matt says:

March 7, 2010 at 5:29 am

Thanks Peter,

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

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

Reply
- Peter deHaan says:
  
  March 7, 2010 at 8:30 am
  
  @Matt,
  
  I believe there were performance concerns; http://bugs.adobe.com/jira/browse/SDK-24693
  I haven’t tried this example in a recent SDK to see if the default behavior is different than it used to be though.
  
  Peter
  
  Reply
  - Peter deHaan says:
    
    March 7, 2010 at 8:54 am
    
    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