Need 2 way binding between 2 components flex 4

Question

Can anyone tell me how to do 2-way Binding between 2 components?

I have a TabGroup, in which I created 2 tabs.. Each tab has each component...

First tab: Some form is there and submit button Second Tab: Datagrid

So, when I enter some details and click Submit button, 1 row should be added in Datagrid.. This functionality is working, BUT when i double click the row in Datagrid, the row details from Datagrid should be filled up in Form which iam not getting this..

PLease check below code , run it, and provide me solution:

Main.mxml

<?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/mx"  
               xmlns:components="components.*"
               creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import components.EmployeeSingleton;

            [Bindable]
            public var empSingleton: EmployeeSingleton;

            public function init(): void
            {
                empSingleton = EmployeeSingleton.getInstance();
            }


        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <s:VGroup>

        <s:TabBar dataProvider="{contact}" />

        <mx:ViewStack id="contact"
                      resizeToContent="true">

            <components:ContactInfo id="contactInfo"
                                    label="Employee Info" 
                                    empSingleton="{empSingleton}"/>

            <components:ContactList label="Employee List"
                                    empSingleton="{empSingleton}"/>


        </mx:ViewStack>

    </s:VGroup>

</s:Application>

EmployeeSingleton.as

package components
{
    import mx.collections.ArrayCollection;

    [Bindable]
    public final class EmployeeSingleton
    {
        private static var instance: EmployeeSingleton;
        public var empData: ArrayCollection;

        public function EmployeeSingleton()
        {
        }

        public static function getInstance(): EmployeeSingleton 
        {
            if(instance == null)
                instance = new EmployeeSingleton();

            return instance;
        }


    }
}

EmployeeVO.as

package vo
{
    [Bindable]
    public class EmployeeVO
    {
        public function EmployeeVO()
        {
        }

        public var empName: String;
        public var address: String;
        public var state: String;
        public var city: String;
        public var zip: String;


    }
}

ContactInfo.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            import vo.EmployeeVO;

            public var empSingleton: EmployeeSingleton;

            private var empVO : EmployeeVO;
            private var empCollection : ArrayCollection = new ArrayCollection();


            protected function submit_clickHandler(event:MouseEvent):void
            {
                empVO = new EmployeeVO();

                empVO.empName = empName.text;
                empVO.address = address.text;
                empVO.city = city.text;
                empVO.state = state.text;
                empVO.zip = zip.text;

                empCollection.addItem(empVO);

                empSingleton.empData = empCollection;

            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Form>

        <s:FormItem label="Name">
            <s:TextInput id="empName" />
        </s:FormItem>

        <s:FormItem label="Address">
            <s:TextInput id="address" />
        </s:FormItem>

        <s:FormItem label="City">
            <s:TextInput id="city" />
        </s:FormItem>

        <s:FormItem label="State">
            <s:TextInput id="state" />
        </s:FormItem>

        <s:FormItem label="Zip">
            <s:TextInput id="zip" />
        </s:FormItem>

        <s:FormItem>
            <s:Button id="submit"
                      label="Submit"
                      click="submit_clickHandler(event)"/>
        </s:FormItem>

    </s:Form>

</s:NavigatorContent>

ContactList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
         >

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var empSingleton: EmployeeSingleton;

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:DataGrid id="empData"
                dataProvider="{empSingleton.empData}"/>

</s:NavigatorContent>

Awaiting for solution, please run above code and provide me solution for 2-way binding

Answer 1

You don't need to bind for 'update for on double click on an item in list'. Bindings are very tightly coupled. What you should do instead is listen for double-click events on list and update form with a item information that was double-clicked on.