Avg. Rating 4.0

Problem

Some of the Flex components, such as the TitleWindow, cannot receive focus by default. That means that they don't implement the interface IFocusManagerComponent.

Solution

This example shows how to make a Flex component that implements the interface IFocusManager and then receives focus.

Detailed explanation

Some of the Flex components, such as the Spark TitleWindow, cannot receive focus by default. It means that they don't implement the interface IFocusManagerComponent. This example shows how to make a flex component implements the interface IFocusManager and then receives focus.

You can see a full article and download the source code here:
Flex tip: How to bring a window to front with IFocusManagerComponent

See below a custom TitleWindow component that implements the interface mx.managers.IFocusManagerComponent:

        <?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    implements="mx.managers.IFocusManagerComponent"
    close="closeHandler()"
    focusIn="focusHandler(event)"
    focusOutEffect="Blur"
    title="My popup"
    width="400" height="300">
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElementContainer;
            import mx.managers.IFocusManagerComponent;

            protected function closeHandler():void
            {
                IVisualElementContainer(parent).removeElement(this);
            }

            protected function focusHandler(event:FocusEvent):void
            {
                IVisualElementContainer(parent).setElementIndex(
                    this,IVisualElementContainer(parent).numElements-1);
            }

        ]]>
    </fx:Script>

    <mx:Form>
        <mx:FormItem label="First name">
            <s:TextInput width="200" />
        </mx:FormItem>
        <mx:FormItem label="Last name">
            <s:TextInput width="200" />
        </mx:FormItem>
        <mx:FormItem label="Email">
            <s:TextInput width="200" />
        </mx:FormItem>
        <mx:FormItem>
            <s:Button label="Cancel"
                      click="closeHandler()"/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Label id="myLabel" />
        </mx:FormItem>
    </mx:Form>

</s:TitleWindow>
 
  

This component must be instantiated and then dynamically added into a container. Thus, let's create the container:

        <?xml version="1.0" encoding="utf-8"?>
<s:Application 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:VerticalLayout
            horizontalAlign="center"
            verticalAlign="middle"/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            protected function add_clickHandler(event:MouseEvent):void
            {
                var newPopup:MyPopup = new MyPopup();
                newPopup.isPopUp = true;
                myGroup.addElement(newPopup);
            }
        ]]>
    </fx:Script>

    <s:controlBarContent>
        <s:Button id="add"
                  label="Add popup component"
                  click="add_clickHandler(event)" />
    </s:controlBarContent>

    <s:Group id="myGroup">
    </s:Group>

</s:Application>

 
  

+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes