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..

Isn't your TitleWindow getting closed after the item is selected (in your select() method)? Wouldn't that mean that the selected project name is no longer available, so you wouldn't be able to read it in the other class? — Michael Todd
– Michael Todd, Commented Oct 14, 2009 at 4:28
Oh.. I am new to flex and just learning it as I do my project. So how to pass the variable? — Angeline
– Angeline, Commented Oct 14, 2009 at 4:51
Isn't there any method to pass the data even after the window is closed? — Angeline
– Angeline, Commented Oct 14, 2009 at 5:04
I would pass a method name to the projDocsLookup class on creation (the method name would be an existing method in your VBox class whose sole purpose is to receive the title). Then, when the user dismisses the dialog, use the callback function to pass the title. Unfortunately, I don't know enough about Flex to show you how to do this. Look up callback functions and events related to passing variables on your favorite search engine. Good luck! — Michael Todd
– Michael Todd, Commented Oct 14, 2009 at 5:06
It might be worth your while to look into MVC architecture - Cairngorm, PureMVC, et al. I started without MVC, and once I discovered it, it saved me A LOT of time. I actually went back refactored an entire application to use Cairngorm - it was totally worth it. Good luck! — Eric Belair
– Eric Belair, Commented Oct 15, 2009 at 14:58

Angeline · Accepted Answer · 2009-10-14 07:41:22Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related