how to pass an array of values from one mxml component to another in Flex?

Question

I have a mxml component with a datagrid listing project names and code versions. I have the selected projects from the datagrid binded to a public variable named "selectedProjects". But how to access this variable in another mxml component. I want the selected project's name in that component's text area. how to do that? I even created an instance of the first component and using that called the selectedProjects variable. But I do not get the value updated in the text area.

This is the code for the first component where I get the selected projects name in a variable:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
   creationComplete="handleCreationComplete();"
   width="800" height="600">
<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.managers.PopUpManager;
        import mx.collections.ArrayCollection;
        import mx.events.ItemClickEvent;

        [Bindable] public var selectedProjects:Array;

        private function handleCreationComplete():void {
                           PopUpManager.centerPopUp(this);
        }   

        public var pages:ArrayCollection=new ArrayCollection([
            {label:"10"},
            {label:"20"},]);

        public var projectList:ArrayCollection=new ArrayCollection([

           {ItemName:"User Requirement Specification",ItemCodeVersion:"URS - 1"},
           {ItemName:"User Requirement Specification",ItemCodeVersion:"URS - 2"}, 
           {ItemName:"Software Requirement Specification",ItemCodeVersion:"SRS - 2.1"},
           {ItemName:"Software Design Specification",ItemCodeVersion:"SDS - 2"},
           {ItemName:"Software Design Specification",ItemCodeVersion:"SRS - 1.1"},
           {ItemName:"User Manual",ItemCodeVersion:"User Manual - 1"},
           {ItemName:"User Manual",ItemCodeVersion:"User Manual - 2.1"},]);


         private function close():void
         {
     PopUpManager.removePopUp(this);
        }

        private function select():void
        {
      Alert.show(projectListDG.selectedItem.ItemName);
      PopUpManager.removePopUp(this);
        }   

    ]]>                                      
</mx:Script>

<mx:Binding source="projectListDG.selectedItems" destination="selectedProjects" />
<mx:Label styleName="labelHeading" text="Project Documents List"/>

<mx:Panel width="100%" height="100%" layout="vertical" title="Documents List" >
 <mx:HBox>
  <mx:Label text="Show"/>
  <mx:ComboBox dataProvider="{pages}" width="60" />
  <mx:Label text="results per page" />
 </mx:HBox>

 <mx:DataGrid id="projectListDG" dataProvider="{projectList}" allowMultipleSelection="true" rowCount="10" width="100%" height="100%">
  <mx:columns>

   <mx:DataGridColumn headerText="Select" itemRenderer="mx.controls.CheckBox"  textAlign="center" width="50"/>
   <mx:DataGridColumn headerText="Item Name" dataField="ItemName" textAlign="center" />
   <mx:DataGridColumn headerText="Item Code - Version" dataField="ItemCodeVersion" textAlign="center" width="150 " />

  </mx:columns>
 </mx:DataGrid>

         <mx:Label text="{projectListDG.selectedItem.ItemName}"/>
</mx:Panel>

      <mx:HBox horizontalAlign="center" width="100%"> 
         <mx:Button label="Select" click="select();"/>
         <mx:Button label="Cancel" click="close();"/> 
      </mx:HBox> 
</mx:TitleWindow>

I now have the selected projects in the selectedProjects variable.

Now this is the second componenent in which I am trying to make use of the project name.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  import mx.core.IFlexDisplayObject;
  import mx.managers.PopUpManager;
  import mx.containers.TitleWindow;             

        [Bindable]    
        public var projectList:projDocsLookUp=new projDocsLookUp();

        //Datagrid  
        [Bindable] 
         private var defectDetails:ArrayCollection = new ArrayCollection([
            {Select:true},          
        ]);        

        private function projDocsPopUp():void{
            var helpWindow:TitleWindow = TitleWindow(PopUpManager.createPopUp(this, projDocsLookUp, true));
            helpWindow.title="Project Documents List";
        }
             ]]>
</mx:Script>
<mx:Label styleName="labelHeading" text="Defect Entry - Verification" />

 <mx:Panel width="100%" height="30%" layout="vertical" title="Review Report Details">
  <mx:VBox width="100%">
   <mx:FormItem label="Project Name:" width="100%">
    <mx:Text text="IPMS"/>    
   </mx:FormItem>
   <mx:HRule width="100%"/>   
  <mx:VBox>       
       <mx:FormItem label="Project Documents:">
       <mx:HBox>
<!--text="{projectList.projectListDG.selectedItem.ItemName}"-->
                <mx:TextArea id="projDocs" width="150" text="{projectList.selectedProjects}" />//text area field is not updated.
        <mx:Button width="30" label=".." click="projDocsPopUp();"/> 
      </mx:HBox>
      </mx:FormItem>

            </mx:VBox>
              </mx:Panel>

<mx:Panel width="100%" height="50%" layout="vertical" title="Defect Details" >

<mx:DataGrid id="defectDG" dataProvider="{defectDetails}"          variableRowHeight="true" width="100%" height="75" >

  <mx:columns>
 <mx:DataGridColumn dataField="Select" itemRenderer="mx.controls.CheckBox" width="50" textAlign="center" />

 <mx:DataGridColumn dataField="Defect Id" itemRenderer="mx.controls.TextInput" textAlign="center"/> 

 <mx:DataGridColumn dataField="Status" itemRenderer="mx.controls.ComboBox" textAlign="center"/>        
</mx:columns>
</mx:DataGrid>


</mx:Panel>

   </mx:VBox>

I was trying to update the value of the selected projects in the text area of Id "projDocs", But I do not get it.. Please some one help me..

Answer 1

Well I found out the solution by myself..

Googling of course. I followed the method given in this tutorial.

I added a reference to the parent application's TextArea control. The pop up component uses that reference to update the first component's TextArea.

In the first component, I changed the function that creates the pop up as

 private function projDocsPopUp():void{

            var helpWindow:projDocsLookUp = projDocsLookUp(PopUpManager.createPopUp(this, projDocsLookUp, true));
            helpWindow.title="Project Documents List";
            helpWindow.showCloseButton=true;
            helpWindow.targetComponent=projDocs; //I get the value returned by the pop up window here

And then in the pop up component, changed the select function as:

 private function select():void
     {
      var i:int;
      for(i=0;i<selectedProjects.length;i++)
              {
         targetComponent.text+=selectedProjects[i].ItemName+",";
      }


      PopUpManager.removePopUp(this);
     }

And finally I get the project name updated in the first components text area box.