Replace main Flex application

Question

Is there a way to temporarily collapse the main Flex application to another, and then return. Scenario: the main application is running, the login window will appear - then go to the main application. The login box is also an application.

Application.application is a read-only property, the attempt failed.

Answer 1

I had great success with a modular application, in which the main application mainly consists of a module loader, which initially loads the input module.

( , ), ( "LogonEvent" ), , . , - , ( ViewStack ..). LogonEvent .

- , , , , .

-, , .

, . , , , , . , .

, ...

private var mainModuleLogOnEventDispatcher:*;

[Bindable]
private var _logOnDetails:LogOnDetails = new LogOnDetails();

private function onCreationComplete(event:Event):void
{
    // Load log on module.
    loadMainModule("LogOnModule.swf");

    // Pre-load main module while user is logging on.
    var mm:IModuleInfo = ModuleManager.getModule("MainModule.swf");
    mm.load();
}

[Bindable]
private function set logOnDetails(value:LogOnDetails):void
{
    _logOnDetails = value;
}

private function get logOnDetails():LogOnDetails
{
    return _logOnDetails;
}           

private function loadMainModule(moduleName:String):void
{
    // Unload anything already loaded.
    if (mainModule.url.length > 0)
    {
        mainModule.unloadModule();
        mainModule.url = "";
    }
    mainModule.addEventListener(ModuleEvent.READY, handleMainModuleReadyEvent);
    mainModule.url = moduleName;
}

private function handleMainModuleReadyEvent(event:ModuleEvent):void
{
    // Remove listener, we've caught the event now.
    mainModule.removeEventListener(ModuleEvent.READY, handleMainModuleReadyEvent);

    // Add listeners to other events or apply data.
    if (mainModule.url == "LogOnModule.swf")
    {
        mainModuleLogOnEventDispatcher = mainModule.child;
        if (mainModule.child != null) {
            mainModuleLogOnEventDispatcher.addEventListener("logOnEvent", handleLogOnEvent);
        }
    }
    if (mainModule.url == "MainModule.swf")
    {
        var mm:* = mainModule.child;
        if (mainModule.child != null)
        {
            mm.logOnDetails = logOnDetails;
        }
    }                                           
}

private function handleLogOnEvent(logOnEvent:LogOnEvent):void
{
    mainModuleLogOnEventDispatcher.removeEventListener("logOnEvent", handleLogOnEvent);

    logOnDetails = logOnEvent.logOnDetails;

    // Now get person details and swap in main module if successful.
    var parameters:Object = new Object();
    parameters.cmd = "viewPerson";
    parameters.token = logOnDetails.logOnToken;
    viewPersonRequest.send(parameters);
}

private function handleViewPersonRequestResult(event:ResultEvent):void
{

    //*** Loads of setting logonDetails and error handling removed!!! ***//
    loadMainModule("MainModule.swf");
    currentState = "LoggedOn";
    return;
}

private function onLogOff(event:MouseEvent):void
{
    // Make sure we don't auto-logon when we log off.
    var logOnPrefs:SharedObject = SharedObject.getLocal("LogOn", "/");
    logOnPrefs.data.loggedOff = true;

    var parameters:Object = new Object();
    parameters.cmd = "logoff";
    parameters.token = logOnDetails.logOnToken;
    logoffRequest.send(parameters);
    loadMainModule("LogOnModule.swf");
    currentState = "";
}

<!-- *** Loads of view state related mxml removed *** -->
<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" id="mainModuleVBox">
    <basic:IJModuleLoader id="mainModule" url="" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"/>
</mx:VBox>

, - ! , Flex, AIR. , Flex AIR, , , , ( ) , .

Answer 2

, , , , ViewStack ?

Answer 3

What's funny is exactly what I'm trying to figure out, the best way to do at the moment. I was thinking about using ViewStack, but since I already had many other nested ViewStacks, I also studied the State tag. If someone knows the "right thing", I will be very interested too!

Answer 4

I implemented this as a ViewStack component for an application; seems to work well. Use the selectedIndex or selectedChild property in the ViewStack to control the display of the input or application interface.

<mx:Application>
  <mx:ViewStack>
    <mx:Box> <!-- or whatever for login-->
    </mx:Box>
    <mx:Box> <!-- application UI widgets here -->
    </mx:Box>
  </mx:ViewStack>
</mx:Application>