Flex 4 Btn Event load Flex component

[dcostelloe]

Hi All,
I am working on a login screen which after connection to the DB will load a datagrid.

What is the best way to load a mxml component from a btn click event?

Thanks
David............

[flexy]

When you say load, do you mean lazy-load a module from the server as a result of a button click, or do you just mean instantiate the object?

[dcostelloe]

Hi,
Yes I am currently using <local:loginScreen/> on the button event, I am looking for a better way to load the screen after being validated as a valid user.

One thing would be nice is to pass the login information to the next screen which can then be used in the query to the database.

I will look into Lazy load to understand what it does.

Thanks
David................

[flexy]

Can you post a little more code please, then I can see what your setup looks like?

[dcostelloe]

Can you post a little more code please, then I can see what your setup looks like?

Sure:

Code:

<?xml version="1.0" encoding="utf-8"?>
<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/halo"
  skinClass="com.ca.jdeliteconsultants.skins.CustomControlBarAppSkin"  pageTitle="MGA Valuer"
    width="100%" height="100%"  xmlns:getusersdestination="services.getusersdestination.*">
<fx:Script>
<![CDATA[
import com.ca.jdeliteconsultants.web.LandingPage;
import mx.controls.Alert;
protected function btnLogin_clickHandler(event:MouseEvent):void
{
getUserListResult.token = getUsersDestination.getUserList(this.txtUserid.text, this.txtPwd.text);

if(getUserListResult)
{
<web:LandingPage id="landingPage" />
}
else
{
Alert.show("problem access database please review logs","Error With Database");
}
}

]]>

</fx:Script>


<s:controlBarContent >
<mx:ComboBox id="cboLang"   />
<s:Label id="lblLang" text="Language"/>
<mx:Image x="10" y="-31" id="imgLogo"/>
</s:controlBarContent>


<fx:Declarations>

<s:CallResponder id="getUserListResult"/>
<getusersdestination:GetUsersDestination id="getUsersDestination" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>



</fx:Declarations>

<s:Panel id="myPanel" title="MGA Valuer"
width="100%" height="540" skinClass="com.ca.jdeliteconsultants.skins.HeaderPanelSkin" horizontalCenter="0" verticalCenter="-50">

<!-- Set a custom skin for the container to show a gradient background and border -->
<s:SkinnableContainer skinClass="com.ca.jdeliteconsultants.skins.LoginSkinPanel"
 width="50%" height="50%"
 horizontalCenter="0"
 verticalCenter="0">

<s:VGroup horizontalCenter="0" verticalCenter="0">
<mx:Form fontSize="16">
<mx:FormItem label="Userid:">
<s:TextInput id="txtUserid"/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput id="txtPwd"/>
</mx:FormItem>
<mx:FormItem>
<s:Button label="Login" id="btnLogin" click="btnLogin_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:VGroup>
</s:SkinnableContainer>

</s:Panel>


</s:Application>

Basicly I am just trying to load another page  on the button click.
Thanks
David............

[flexy]

You've in-lined MXML with ActionScript - this can't be done.

Code:

if(getUserListResult)
{
<web:LandingPage id="landingPage" />
}

Instead you'd need to do something like:

Code:

if(getUserListResult)
{
var landingPage:LandingPage = new LandingPage();
        addChild( landingPage );
}