Using the Databinding API
2 11 2003If you’ve been working with databinding in the Flash IDE I’m sure you’ve come across (or at least read about) the problems with cutting and pasting components or moving them inside a movieclip. Doing any of those things simply make all your bindings evaporate into thin air (cool huh!). True believers will tell you: “it’s not a bug, it’s a feature”, all I can add to that is that Flash MX 2004 is certainly a feature rich product!
In any case, for those reasons and a few other practical considerations I’ve taken to writing bindings using the runtime databinding API. There’s fairly little info posted about the subject and because I’ve been getting an increasing amount of questions about it I’ve made a few basic examples available for download.
When you first get started with the API it might look a bit scary but it’s in fact quite straight-forward. I’ll walk you through the necessary steps for a simple binding:
- Open up a new blank FLA
- Drag an instance of the DataBindingClasses into your library
(Window > Other Panels > Common Libraries > Classes)
- Drag two instances of the TextArea component on stage
(instancenames “fromText” and “toText”)
- Next you can start writing the actual ActionScript code:
import mx.data.binding.*
var from:Object = {component: fromText, property: “text”, event:”keyDown”};
var to:Object = {component: toText, property: “text”};var myBinding:Binding = new Binding(from,to);
What the code above does is import the binding classes and define the “from” and “to” objects that contain information on what component properties to bind. When you look at the Flash MX 2004 documentation on this you’ll notice that they are using the EndPoint class but I’ve found regular objects work just as well.
In this case we’ll be using one-way binding between the text property of the two TextArea component and setting “KeyDown” as the event trigger. You can set an optional third and fourth argument when instantiating the Binding class that allows you to set a class formatter and whether or not it is a two-way binding. Check out “binding-formatter.fla” if you want to learn more about this!
Wow. That is really cool. Thanks for sharing this!
Side note: You might want to fix the keyDown typo (should be lower case “k”). It took me a while to figure out why the code pasted from here didn’t work for me!
Thanks for pointing out the typo Vera, it’s edited now!
I’ve been looking into the runtime APIs for a lot of the data component classes as well, and so far they do look fairly straighforward.
Reading through the docs and seeing that you can use a regular object instead of an instance of EndPoint makes me wonder…exactly what benefit (added features) are there to using this class? Too bad we can’t look at the class code
Hi Philter, actually you can browse to the EndPoint class (classes > mx > data > binding > EndPoint.as).
I’ve just been browsing through the class and it doesn’t seem to provide any additional features, looks like its just acts as a placeholder for the constant, component, property and event parameters.
Hope this helps!
Thanks Peter..i didn’t realize that.
I wonder why they decided to include source code for some of the classes and not others. Still not really understanding that…
Didn’t work for me until I used:
import mx.data.binding.Binding;
For some reason my F04 compiler didn’t like the ‘.*’
Mike, are you on a mac? You might want to try leaving out the semicolon after the import statement … heard that solves it for some people.
how would you bind the DataProvider property of a DataSet to the results of an XMLConnector instance?
It’s not very difficult to do, though it can be a bit confusing.
What you do is select the XMLConnector component and open up the Component Inspector. You go to the “schema” tab and select the result property. Next you click the import button (which opens up a browse dialog) and there you browser or type the URL to your XML document. Once this is done you’ll have the complete XML structure available in the results property and you can do a simple binding between the DataSet and the XMLConnector result property you want.
hi
i tried:
import mx.data.binding.*
var from:Object = {component: myxmlconn, property: “results”};
var to:Object = {component: mydataset, property: “DataProvider”};
var myBinding:Binding = new Binding(from,to);
myBinding.execut();
should this work? schema is already in place
missing a final “e” on the previous post
hi… so i could programmatically bind a dataset to an xmlconnector in a specified node (given the correct schema in the xmlconnector):
import mx.data.binding.*;
lis = new Object();
lis.result = function() {
var from:Object = {component:mxml, property:”results”, location:”somenode.nodeitems”};
var to:Object = {component:mset, property:”dataProvider”};
var myBinding:Binding = new Binding(from, to);
myBinding.execute();
};
mxml.addEventListener(”result”, lis);
mxml.trigger();
However, I found an odd behavior, for instance:
Bind the dataset to a datagrid. The datagrid will display the XML structure (fisrtChild,nextSibling,etc) instead of the usual row/columns behavior when using component inspector binding. Now, if you modify the dataProvider schema for the dataset in ANY way (ANY as in: click “add field under the selected field” then click “delete the selected field property”) the datagrid will now display in the expected column/row format.
What’s happening there?
Mauricio
May seem to use so instead of addEventListener.
import mx.data.binding.*;
var from:Object = {component: x, property:”results”, event:”result”};
var to:Object = {component:list, property:”dataProvider”};
var myBinding:Binding = new Binding(from, to);
myBinding.execute();
x.URL = “source.xml”;
x.trigger();
//Point is event:”result”
Have you seen any issues where the system cannot resolve the mx.data.bind package? I get the following errors when I try your example.
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 6: The class ‘mx.data.binding.Binding’ could not be loaded.
var myBinding:Binding = new Binding(from,to);
The DataBindingClasses component has been added to my library.
Strange, did you perhaps change your classpath settings in the Flash IDE?
No. I also went in an completely un-installed and re-installed the product. I am using the 2004 Prof. edition demo. I have seen some comments on the board where a few others have the same issue, but no resolution.
When I look into the classpath there is no mx.data.binding folder under classes. So it seems that when other classes try to compile they get an error trying to do the import.
Fallow
Can you find the bindings .as classes anywhere in the classes directory of your Flash MX 2004 install folder?
Are you perhaps using a localized version of Flash? You should have those classes in there, perhaps the path is slightly different.
I just installed the product on a clean machine and did a complete search of the hard drive for binding*. There is no file bindings.as or anything even similar. Could this be something that is not in the downloaded version from their web site?
As an update I installed Flash MX Professional 2004 on a completely clean box. Starte up a new Flash Document. Then ran your example above. Same bug. It seems that the version shipping cannot compile the Binding object.
Do you have the Flash MX 2004 updater installed? Not sure what’s happening there, if I find out what could be causing it I’ll be sure to let you know!
There is an swc file called DataBindingClasses.swc under First Run/Data/
I guess MM compiled the as files and ís distributing the classes like that.
I’ve got the exact same problem, and also have the DataBindingClasses.swc file…how do I extract the files?
Can you show an example of a two-way binding… basically I am populating a list with a dataset (binding works) then I modify the items in the list by sorting them various ways, which I want reflected in the original dataset. I assume this requires two-way binding??? What might this look like without using a custom class in the binding statement?
Dp you have any ideas where else we canread up on this in more detail?
Where did you learn how to do this?
Any idea on how to bind at runtime a dataset to a label? It is possible to set:
property: “text”
but what about the actual datafield (in my case “caseID”?
When I’m trying to teste the movie, I get the error:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 7: The class ‘Binding’ could not be loaded.
var myBind:Binding = new Binding(from, to);
Total ActionScript Errors: 1 Reported Errors: 1
Here is my code:
import dx.data.Binding.*
var from:Object = {component:”aaa”, property:”text”, event:”keyDown”};
var to:Object = {component:”bbb”, property:”text”};
var myBind:Binding = new Binding(from, to);
In the folder classes no have the binding.as archive and neither on ./classes/mx/data. No have de arachive and no have the folder. :/
If somebody want to send by emai a zip with archives on binding directory, I’ll be glad.
Really, I’m try this example but I real case is update fields textInput and Textarea when I click on a row from a datagrid. All the fields I generate on a dynamic way.
Well, I just to unzip the examples on binding-api.zip avaliable on this page and copy the compiled classes DataBindingClasses on the library (Ctrl + L). Works
is the binding folder not in this path??: classes > mx > data > binding
I’m trying to find EndPoint.as, but I cant find it anywhere
Hi Peter,
Am working on the XMLConnector and binding results and params to some text, combo components while building a RIA using MX2004.
Is there a way to do the entire binding (including schema import for params and results) via Actionscript. I have not really found a way to do this.
thanks
Hi everyone, I’ve neglected the comments on this post a bit — sorry about that
I’ll work on posting a more complete example soon.
Peter,
Thanks for your examples above…they have helped me get to the next level of confusion!
I am trying to bind a date chooser to a text field with the format YYYMMDD, but I keep getting the ’standard’ date format from the date chooser showing within the text field. Below is my code, what am I missing/doing wrong?
Thanks
Code:
// import the databinding classes
import mx.data.binding.*;
// define the from and to binding settings
var from:Object = {component:myCalendar, property:”selectedDate”, event:”change”};
var to:Object = {component:toText, property:”text”};
// make the actual binding
var myBinding:Binding = new Binding(from, to);
// make the actual binding
var myBinding:Binding = new Binding(from, to, {cls:mx.data.formatters.Dte, settings:{format:”MMMDDYY”}});
Hi David,
That first line where you init a binding is not necessary. The following code seems to work for me:
import mx.data.binding.*
var from:Object = {component: myCalendar, property: “selectedDate”, event:”change”};
var to:Object = {component: toText, property: “text”};
var myBinding:Binding = new Binding(from,to,{cls:mx.data.formatters.Dte,settings:{format:”MM/DD/YY”}});
Thanks for the help…a second pair of eyes can reveal the obvious.
Where did you go to learn these ’secrets’. Book, etc?
hi peter,
have progressed further in databinding after my last post. However am still hitting a wall in being able to programatically do via ActionScript whatever the IDE can do.
In my current project I have a DataHolder with some custom properties. I need to bind those properties to textinput and other components at runtime.
Have tried many options to do this programatically but it just does not work. Is there a limitation in programatically accessing newly added “schema” properties of a dataHolder component.
Any pointers would be of immense help.
dest = {component:_level0.textfield, property:”text”};
sources = {component:_level0.dataholder, property:”username”};
newBind = new mx.data.binding.Binding(sources, dest);
newBind.execute();
Hi, I’m having a bit of trouble with binding a xmlConnector and a list component at runtime. I can do it with the Component Inspector but in my fla I want to have the xmlConnector.URL change according to the selection of a node on a tree component. I don’t think this can be done with the component inspecotr so if there is a way to do it with actionscript and binding I’d love to hear suggestions.
The URL I want to pass to the xmlConnector is an attribute of the tree xml file: tree.attributes.link
Thanks
Hello:
An Example without scheme (I don’t known)
//binding XML->Dataset
var conexion_xml_dataset : Binding = new Binding(
{component:this.xml_con,property:”results”,location:["d","r"],event:["result"]},
{component:this.data1_ds,property:”dataProvider”},
null,false);
//binding Dataset-> grid
this.tabla.columnNames = ["c","d"];
this.tabla.dataProvider=this.data1_ds.dataProvider;
//configuracion de las columnas
var column1 = this.tabla.getColumnAt(0);
column1.headerText = “Codigo”;
column1.width=100;
var column2 = this.tabla.getColumnAt(1);
column2.headerText = “Pais”;
column2.width=200;
Hi. Have anyone binded a textinput to a dataset and reflected its changes back to the dataset? It simply doesn’t work via code!!!
Any help, please?