5 Replies Latest reply on Dec 8, 2009 10:41 AM by Flex harUI

    Data binding with actionscript

    FM_Flame Level 1

      Hi, there are many examples of how to make databinding, so I would like to make this code into actionscript class:

       

      <mx:HSlider id="mySlider"/>
      <mx:Text text="{mySlider.value}"/>

       

       

      Also another point here: if the text was an input field and I wanted to do two way binding I would need to add @ infront of the curly braces, that's ok but how to do that in actionscript ?

       

      Could someone please post working examles of this or links to examples. I've been struggling with this for some time now.. thanks in advance !

        • 1. Re: Data binding with actionscript
          Gaurav J Adobe Employee

          To perform Data Binding using action script using action script you can use the mx.utils.BindingUtils class. It has methods like bindProperty() and bindSetter() that you can use.

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_7.html

          Also take a look at http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_3.html#190056

           

          to perform two binding using actionscript, you can call the bindProperty() method two times (and in the second call reverse the source and destination)

           

          Api docs for BindingUtils are at http://livedocs.adobe.com/flex/3/langref/mx/binding/utils/BindingUtils.html

           

          Thanks,

          Gaurav Jain

          Flex SDK Team

          • 2. Re: Data binding with actionscript
            David_F57 Level 5

            Hi Gaurav,

             

            Binding property fails on two binding,

             

            var ta1:TextInput = new TextInput();

            var ta2:TextInput = new TextInput();

            grp.addElement(ta1);

            grp.addElement(ta2);

            BindingUtils.bindProperty(ta1, "text", ta2, "text"); <==== works

            BindingUtils.bindProperty(ta2, "text", ta1, "text"); <==== second call creates errors with binding watchers

            <mx:Binding destination="ta1.text" source="ta2.text" twoWay="true"/> works but is mxml
            Any other thoughts ?
            David

            • 3. Re: Data binding with actionscript
              FM_Flame Level 1

              About the one way binding - a very nice tip Thanks a lot for it, this will surely change my logic a bit cause at the moment I went around the problem with event listener for changing the data.

               

              About the two way binding I am very curious what will be the solution, David has a point there

               

              I hope you will guide us through this one soon

              • 4. Re: Data binding with actionscript
                Gaurav J Adobe Employee

                What errors do you get? The following works for me just fine:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
                    <mx:Script>
                        <![CDATA[
                            import mx.controls.TextInput;
                            import mx.events.FlexEvent;
                            import mx.binding.utils.BindingUtils;

                 

                            protected function application1_creationCompleteHandler(event:FlexEvent):void
                            {
                                var ta1:TextInput = new TextInput();
                                var ta2:TextInput = new TextInput();
                               
                                groupId.addChild(ta1);
                                groupId.addChild(ta2);
                               
                                BindingUtils.bindProperty(ta1, "text", ta2, "text");
                                BindingUtils.bindProperty(ta2, "text", ta1, "text");
                            }
                        ]]>
                    </mx:Script>
                    <mx:VBox id="groupId" />
                </mx:Application>

                 

                Thanks,

                Gaurav Jain

                Flex SDK Team

                • 5. Re: Data binding with actionscript
                  Flex harUI Adobe Employee

                  FWIW, for simple situations, if I'm going to take the time to write AS, I'll skip binding and use addEventListener.  It is smaller and faster.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui