Flex Examples

This is a bit more of a “gotcha” than a tip, but it is something I’ve run into twice in the past week or so. When working with application domains and singletons (such as the DragManager or PopUpManager). I’ve been playing with modules the past couple days and ran into an issue when trying to drag items from a DataGrid in one module to a DataGrid in the second module. When trying to select an item in one of the data grids, I’d get strange run-time errors. The solution? Create a reference in my main application to a dummy DragManager or PopUpManager instance.

Hopefully this will save somebody a little bit of a headache in the future.

Full code after the jump.

View MXML (main.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.managers.DragManager;

            /* Create dummy variables. */
            private var dragManager:DragManager;
            private var popUpManager:PopUpManager;
        ]]>
    </mx:Script>

    <mx:TabNavigator id="tabNavigator" width="300" height="200">
        <mx:ModuleLoader id="module1" url="dataGrid_module.swf" label="Tab 1" />
        <mx:ModuleLoader id="module2" url="comboBox_module.swf" label="Tab 2" />
    </mx:TabNavigator>

</mx:Application>

View MXML (dataGrid_module.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Style>
        Module {
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:VBox height="100%">
        <mx:DataGrid id="dataGrid" width="100%" height="100%">
            <mx:dataProvider>
                <mx:Object data="1" label="one" />
                <mx:Object data="2" label="two" />
                <mx:Object data="3" label="three" />
                <mx:Object data="4" label="four" />
            </mx:dataProvider>
        </mx:DataGrid>
    </mx:VBox>

    <mx:HRule width="100%" />

    <mx:Button label="Alert.show(...)" click="Alert.show('Alert from the dataGrid_module.')" />

</mx:Module>

View MXML (comboBox_module.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Style>
        Module {
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:VBox height="100%">
        <mx:ComboBox id="comboBox">
            <mx:dataProvider>
                <mx:Object data="1" label="one" />
                <mx:Object data="2" label="two" />
                <mx:Object data="3" label="three" />
                <mx:Object data="4" label="four" />
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:VBox>

    <mx:HRule width="100%" />

    <mx:Button label="Alert.show(...)" click="Alert.show('Alert from the comboBox_module.')" />

</mx:Module>

View source is enabled in the following example.

For more information see the following bugs in the public Flex Bugbase: SDK-9354 and SDK-11272.