Andy Hulstkamp

about creating online experiences

06. October 2010

Flex Tab Key Navigation for custom Spark PopUp

This took me a while to figure out.

In a project I created a custom PopUp, nothing fancy, just a couple of text inputs. When I tried to enable Tab key navigation I set the required properties but Flex would simply ignore tab key navigation to the input fields in the pop up.

The Documentation about the IFocusManager states that a pop up will get its own FocusManager and its own tab loop.

After some tracing I found that my pop up and its child weren’t included in the FocusManager as focus objects. In fact, there was no FocusManager for my pop up at all.

The reason for this is that when the PopUpMangerImpl is about to create and configure the pop up, it checks if the pop up is a IFocusManagerContainer so that focus can be added.

Unfortunately my popup was a Group which does not implement the IFocusManagerContainer interface. Naturally no FocusManager would be created.

If you want to use a Spark Group as your pop up, the solution is to create a new class that extends from Group and implements the IFocusManagerContainer. Then use this class as the container for the pop up.

.
.
.
public class AHPopUpGroup extends Group implements IFocusManagerContainer
    {

        public function AHPopUpGroup()
        {
            super();
        }

        /**
         *  @private
         *  Storage for the defaultButton property.
         */
        private var _defaultButton:IFlexDisplayObject;

        [Inspectable(category="General")]

        /**
         *  The Button control designated as the default button for the container.
         *  When controls in the container have focus, pressing the
         *  Enter key is the same as clicking this Button control.
         *
         *  @default null
         */
        public function get defaultButton():IFlexDisplayObject
        {
            return _defaultButton;
        }

        /**
         *  @private
         */
        public function set defaultButton(value:IFlexDisplayObject):void
        {
            _defaultButton = value;
            ContainerGlobals.focusedContainer = null;
        }

    }
.
.

The MXML is as follows

.
.
.

        <!---
        Uses a Group that implements the IFocusManagerContainer
        -->

            .
            .
            .
            TextInput, Buttons etc now get focus on tab key navigation
            .
            .
            .

.
.
.

further reading

Flex Spark Icon Gradient Button

Spark does not provide an Icon Button out of the box. Shows how to create a Gradient Icon Button.

Generating Sounds. Waveforms, Timbre Loundness and Pitch.

Introduction to generating sounds covering samplerates, waveform, timbres and pitch. In Flash but should be applicable to any technology.