Flex MSML components

Question

I want to load a MSML component from another MSML component in Flex. To be more specific, I have a Login MSML component that loads from my main Application file and a Overview MSML component. When a user clicks on some button from that Login component it should redirect to the load Overview MSML component in place of Login component.

Answer 1

Two components in the Application. Both 100% width/height. Make one visible and the other invisible. Repeat as needed. This is the basic principle of tabs and viewstacks.

Answer 2

You can also do the same thing with states. When login is done, dispatch an event that you listen for in your application container. When that event fires, swap the state to show the next component/screen.

Answer 3

Using states works for me most of the time. But if you do however want to keep the mxml files seperate, for development reasons or other, you can load your other mxml component using PopupManager.

You're main application file can popup the login window, and afterwards popup the overview window - but I'm not sure that this is what you actually want.

In any case, here is how to do that:

First import the function to your login mxml:

import mx.managers.PopUpManager;

And when you need to call the other mxml file:

PopUpManager.createPopUp(this, OverviewMXML, false);

In the OverviewMXML module, you can tell it to finish by adding to the title window the following:

close="PopUpManager.removePopUp(this)"

Or calling in when the user has logged in ofcourse.

Answer 4

I'd use viewstack

<mx:ViewStack width="100%" height="100%" id="viewstack">
  <local:LoginControl/>
  <local:OverviewControl/>
</mx:ViewStack>

This will show login page by default. Set viewstack.selectedIndex = 1; in the click handler of the button to hide login control and display overview.

Answer 5

Or you can use addChild and removeChild to display and hide components when needed. Or even include all of them in the application as MXML tags and use the visible property to show/hide them.

Answer 6

If you're actually talking about MXML like the question originally stated, then I'd recommend the following approach:

Build each component as a subclass of Canvas or whatever component you'd like, import these new classes to the application, add an instance of each, and control the display with the visible property.

For Example:

MyApp.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="path.to.the.package.that.contains.your.components.*">
    <mx:Script>
<![CDATA[
    public function showOverview():void {
        login.visible = false;
        overview.visible = true;
    }
    ]]>
    </mx:Script>
    <LoginComponent id="login" x="0" y="0" ParentApp="{this}" />
    <OverviewComponent id="overview" x="0" y="0" visible="false" />
</mx:Application>

LoginComponent.mxml

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="path.to.the.package.that.contains.your.components.*">
    <mx:Script>
<![CDATA[
    private var parentApp:MyApp;

    [Bindable]
    public function get ParentApp():MyApp {
        return parentApp;
    }
    public function set ParentApp(val:MyApp):void {
        parentApp = val;
    }

    private function loginBtnClick(et:MouseEvent):void {
        parentApp.showOverview();
    }
    ]]>
    </mx:Script>
    <mxButton id="loginBtn" x="0" y="0" click="loginBtnClick(event)" label="Login..."/>
</mx:Canvas>

Hope this helps!