在 Flex 4.5 中使用 ModuleLoader

Question

我想在我的 Flex 应用程序中加载我的模块时添加一个进度条。因此，我创建了一个模块加载器，如下所示。但我不知道如何在我的应用程序中使用它来加载模块。谁能帮我解决这个问题。我的代码如下。我的主应用程序有一个包含以下 2 个模块的视图堆栈。请注意，Module1 是一个登录表单，当我在登录表单上单击“确定”时，我必须加载 Module1。

<mx:ViewStack id="mainstack" width="100%" height="100%">

        <mx:HBox id="Mod1Loader" width="100%" height="100%" label="Mod1Loader" horizontalAlign="center" verticalAlign="middle">
            <mx:ModuleLoader url="Mod1.swf" id="Module1" />
        </mx:HBox>

        <mx:HBox id="Mod2Loader" width="100%" height="100%" label="Mod2Loader" horizontalAlign="center" verticalAlign="middle">
            <mx:ModuleLoader url="Mod2.swf" id="Module2" width="100%" height="100%"/>
        </mx:HBox>

    </mx:ViewStack>

CustomModuleLoader.mxml如下：

<?xml version="1.0" encoding="utf-8"?>
<s:ModuleLoader xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                width="400" height="300"
                creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            public var standin:UIComponent;

            public function init():void {
                addEventListener("urlChanged", onUrlChanged);
                addEventListener("loading", onLoading);
                addEventListener("progress", onProgress);
                addEventListener("setup", onSetup);
                addEventListener("ready", onReady);
                addEventListener("error", onError);
                addEventListener("unload", onUnload);

                standin = panel;
                removeElement(standin);        
            }

            public function onUrlChanged(event:Event):void {
                if (url == null) {
                    if (contains(standin))
                        removeElement(standin);
                } else {
                    if (!contains(standin))
                        addElement(standin);
                }
                progress.indeterminate=true;
            }

            public function onLoading(event:Event):void {
                progress.label="Loading module " + url;
                if (!contains(standin))
                    addElement(standin);

                progress.indeterminate=true;
            }

            public function onProgress(event:Event):void {
                progress.label="Loaded %1 of %2 bytes...";
                progress.indeterminate=false;
            }

            public function onSetup(event:Event):void {
                progress.label="Module " + url + " initialized!";
                progress.indeterminate=false;
            }

            public function onReady(event:Event):void {
                progress.label="Module " + url + " successfully loaded!";

                if (contains(standin))
                    removeElement(standin);
            }

            public function onError(event:Event):void {
                progress.label="Error loading module " + url;
            }

            public function onUnload(event:Event):void {
                if (url == null) {
                    if (contains(standin))
                        removeElement(standin);
                } else {
                    if (!contains(standin))
                        addElement(standin);
                }
                progress.indeterminate=true;
                progress.label="Module " + url + " was unloaded!";
            }
        ]]>
    </fx:Script>

    <s:Panel id="panel" width="100%" title="Status of Operations">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <mx:ProgressBar width="100%" id="progress" source="{this}"/>
    </s:Panel>
</s:ModuleLoader>

需要您的宝贵帮助。

非常感谢。

Answer 1

正如文档中所写，可以直接将模块的加载与进度条绑定：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d8c.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7f97

您必须将进度条的source 设置为模块加载器并定义您的label。将mode 设置为轮询，一切都会自动运行。

-- 编辑 事实上，由于某些原因，adobe 文档不同步，因为 ModuleLoader 没有这些属性。

一个简单的解决方案是添加所需的属性：

        [Bindable]
        public var bytesLoaded:Number = 0;

        [Bindable]
        public var bytesTotal:Number = 100;

然后改变onProgress函数更新属性：

        public function onProgress(event:ProgressEvent):void {
                            // update the attributes
            bytesLoaded = event.bytesLoaded;
            bytesTotal = event.bytesTotal;

            progress.label="Loaded %1 of %2 bytes...";
            progress.indeterminate=false;
        }

当我在本地环境中进行测试时，我看不到进度条，但至少我没有任何问题。

M.