Using ModuleLoader in Flex 4.5

Question

I am want to add a progress bar when loading my modules in my Flex application. Thus I have created a module loader as follows. But I dont know how to use it in my application to load the modules. Could anyone help me with this. MY codes are as follows. My main application has a viewstack with the 2 modules as follows. Note that Module1 is a login form and when I click OK on the login form, I have to load the 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>

The CustomModuleLoader.mxml is as follows:

<?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>

You precious help is required.

Many Thanks.

poussma poussma · Accepted Answer · 2012-07-12T07:24:54

As it is written in the documentation, you can bind the loading of the module directly with the progressbar: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d8c.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7f97

You'll have to set the source of the progressbar to the moduleloader and define your label. Set the mode to poll and everything should work automatically.

-- EDIT In fact, for some reasons, the adobe documentation is out of sync as the ModuleLoader does not have those attributes.

A simple solution is to add the required attribute:

        [Bindable]
        public var bytesLoaded:Number = 0;

        [Bindable]
        public var bytesTotal:Number = 100;

Then change the onProgress function to update the attributes:

        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;
        }

As I am testing in a local env I can't see the progress bar but at least I don't have any issue.

M.

Using ModuleLoader in Flex 4.5

1 Answers