Flex：引用模块内的组件 ID、嵌套视图堆栈等

Question

Adobe 文档指出：

MXML 组件中所有标记的 ID，无论嵌套的深度如何，都会生成所定义组件的公共变量。因此，文档中的所有 id 属性必须是唯一的。这也意味着，如果您为组件实例指定了 ID，则可以从应用程序中的任何位置访问该组件：从函数、外部类文件、导入的 ActionScript 文件或内联脚本。

全部包含在一个 MXML 中，但我在引用模块内的组件 ID 以及给定模块内的 ViewStack/导航容器内时遇到问题。

例如，

如果我可以使用 FlexGlobals.topLevelApplication.myModule 引用模块，那么我是否应该能够使用以下内容引用名为 myModulePanel 的面板？

FlexGlobals.topLevelApplication.myModule.myModulePanel

或者至少

FlexGlobals.topLevelApplication.myModule.getChildByName(myModulePanel)

对于标题、宽度等属性？

由于组件 ID 是公共变量（根据文档），我认为我不必链接一系列 .getChildByName() 函数来深入到组件/容器级别来访问组件属性，但是我的方法上面的尝试似乎不起作用。

但如果是这种情况，我真的需要形成一个长的组件引用链来访问 ViewStacks 等的子级，那么检查这个层次结构的最佳方法是什么？

任何建议将不胜感激。

谢谢。

Answer 1

您应该为每个模块创建一个接口（或所有模块都订阅的一个主接口），定义需要在模块外部调用的方法。这样，您与接口交互，而不是与模块本身交互，而是接口方法在模块类和主应用程序之间进行中介。

使用由 ModuleManager 加载的 IModuleInfo 接口应该可以帮助您实现这一点。有关详细信息，请参阅此页面。

<?xml version="1.0"?>
<!-- modules/ModuleLoaderApp.mxml -->
<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"
    creationComplete="initApp()">

    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>

    <fx:Script>
        <![CDATA[
        import mx.events.ModuleEvent;
        import mx.modules.ModuleManager;
        import mx.modules.IModuleInfo;        
        import mx.core.IVisualElement;

        public var info:IModuleInfo;

        private function initApp():void {
            info = ModuleManager.getModule("ColumnChartModule.swf");
            info.addEventListener(ModuleEvent.READY, modEventHandler);           

            /* Load the module into memory. Calling load() makes the
               IFlexModuleFactory available. You can then get an
               instance of the class using the factory's create()
               method. */
            info.load(null, null, null, moduleFactory);
        }

        /* Add an instance of the module's class to the display list. */        
        private function modEventHandler(e:ModuleEvent):void {
            /* For MX containers, cast to a DisplayObject. */
            vb1.addChild(info.factory.create() as DisplayObject);

            /* For Spark containers, cast to a UIComponent. */
            vg1.addElement(info.factory.create() as IVisualElement);
        }
        ]]>
    </fx:Script>

    <!-- MX container -->
    <mx:VBox id="vb1">
        <s:Label text="Module loaded in MX VBox container:"/>
    </mx:VBox>

    <!-- Spark container -->
    <s:VGroup id="vg1">
        <s:Label text="Module loaded in Spark VGroup container:"/>    
    </s:VGroup>

</s:Application>

请注意，您仍然可以创建自己的接口，使您可以控制特定模块及其方法和属性。例如，我最近创建了一个接口，它返回对两个组件的引用（它们是 Group 的实例，但强制转换为 UIComponent）：

package main.flex.interfaces
{
    import flash.events.Event;
    import flash.events.IEventDispatcher;

    import mx.core.UIComponent;

    public interface IMyModuleName extends IEventDispatcher
    {
        function get mainGroup():UIComponent;

        function get buttonRow():UIComponent;

        function init(event:Event):void;

    }
}

然后，在模块本身中，访问接口的 mainGroup 或 buttonRow 属性返回命名的 Group，例如

public function get mainGroup() : UIComponent {
  return someGroup;
}

...

<s:Group id="someGroup">
   <!-- content -->
</s:Group>

这些都是简化的，不使用真实的 ID，但您应该能够得到来自他们的想法。