Passing a parameter from flex main to a flex(4) component with data binding

Question

I have a main mxml file (flex4) and want to pass a parameter (user_name) to a component in a directory called components.

When I run the program, the user_name is NOT being sent from the main to the component file. (Interestingly, if you make the component visible, you can see the parameter has been passed)

New to flex/actionscript and this parameter passing is (without help) quite a pain to progress.

So, help would be very much appreciated.

TIA.

I have hacked much larger files down to get the following two files:

MAIN

<?xml version="1.0" encoding="utf-8"?>
<s:Application             
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
           xmlns:fx="http://ns.adobe.com/mxml/2009"                
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:components="components.*">

 <mx:Button  id="editAccount" label="Edit Account"  fontSize="16" color="#000000" x="100" y="125" click="AccountForm(event)" />

 <components:editAccountForm visible="false"  user_name = "username from main" /> 

<fx:Script>
    <![CDATA[
        import components.editAccountForm;
        import mx.managers.PopUpManager;

        private function AccountForm(e:MouseEvent):void
        {
          var win3:editAccountForm = new editAccountForm();
          PopUpManager.addPopUp(win3,this,true);
          PopUpManager.centerPopUp(win3);   
        }       
    ]]>
</fx:Script>
</s:Application>

COMPONENT FILE

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
            layout="vertical" title="Edit Account Details" x="50" y="600" >


<mx:Form width="100%" height="100%">
    <mx:FormItem label="">
        <mx:Label width="300" textAlign="center" text="{user_name}"/>
    </mx:FormItem>
    <mx:FormItem label="Enter your new Email Address">
        <mx:TextInput id="email_address2" width="300" maxChars="128" contentBackgroundColor="#F5DC0C"/>
    </mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="center">
  <mx:Button id="close" label="Close" click="PopUpManager.removePopUp(this)" />
</mx:HBox>


<mx:Script>
    <![CDATA[
      [Bindable] 
      public var user_name:String = "username from Component";      
    ]]>
</mx:Script>


<mx:Script>
    <![CDATA[
        import mx.core.IFlexDisplayObject;
        import mx.events.CloseEvent;
        import mx.managers.PopUpManager;

        private function closeWindow(e:CloseEvent):void 
        {
          PopUpManager.removePopUp(e.target as IFlexDisplayObject);
        }
    ]]>
</mx:Script>


</mx:TitleWindow>

Answer 1

If you simply want to get the user_name from the main app into your TitleWindow component, just set win3.user_name = user_name after you instantiate win3. If you are looking to bind it to your newly instantiated win3 (which you would do if user_name were expected to change), then you need to look into the BindUtils helper class.

The typical way of getting data back and forth between an app and a dialog is to set the value after you instantiate your dialog, and then add a listener to your dialog so that your app will get notified if something changed. If you are listening for the Close event, for example, you can get the value from the event like so: (event.currentTarget as EditAccountForm).user_name in your app's event handler.

Another common method is to have your window dispatch a custom event (that your main app added a listener to the dialog for) which contains the new value for user_name.

Hope that helps.