Data Binding is also a Gateway to ActionScript from MXML

This is a great little trick for you or your UI developer. Look at these two screen shots.

DataBinding 1

DataBinding2

As you know, MXML is XML. So of course you can use it to design layouts and add controls to your application and you do not need to know the ActionScript if that is handled by another developer. That is fine if you are only handling the front end design. You may already know what databinding is. If not it is a way to always make sure the property always equals the value of another property. You specify a property that is bindable by using curly braces as shown below.

With this MXML code text2 will always equal the value of text1.text:



// text1 and text2 both equal "Hello DataBinding! when this app is run. 
// Any new values entered into text1 is also duplicated in text2 (but not vice versa)

This is typically the use. If the value in text1 is set to a new value, the value in text2 receives the new value as well. But that is only part of the fun. You can use the curly braces syntax as a window into ActionScript code. You can enter variables (that are not explicitly bindable) and expressions in curly braces as well. To top it off you can also intermix this ActionScript window between text in a string!

Take a look at this example:

< ?xml version="1.0" encoding="utf-8"?>

	
		< ![CDATA[
			public var myVariable:String = "Databinding";
			[Bindable]
			public var myVariable2:String = "ActionScript";
			public function myFunction():String {
				return "a gateway";
			}
			public var myNumber:Number = 9;
		]]>
	
	
	

	
	

So here is what you need to understand to really take advantage of this. The Flex compiler translates your MXML code into ActionScript anyway at compile time. So this MXML tag gets translated into the following ActionScript code before being compiled down into the final swf.


// pseudo code
var myTextInput:TextInput = new TextInput();
myTextInput.text = myVariable + " is really " + myFunction() + " to " + myVariable2;

Note: When you use this syntax and it does not contain a variable that is bindable the Flex compiler generates a ‘Data binding will not be able to detect assignments to “myVariable”.’ warning. What that means is that the variable needs a [Bindable] metatag above the variable declaration if you want it to support the full databinding features. IE When you assign a new value to myVariable it will not be reflected in the TextInput unless the [Bindable] metatag is used.

This entry was posted in Flex. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">