<p>I've only done a bit of Flex development thus far, but I've preferred the approach of creating controls programmatically over mxml files, because (and <em>please</em>, correct me if I'm wrong!) I've gathered that you can't have it both ways -- that is to say, have the class functionality in a separate ActionScript class file but have the contained elements declared in mxml.</p>

<p>There doesn't seem to be much of a difference productivity-wise, but doing data binding programmatically seems somewhat less than trivial. I took a look at how the mxml compiler transforms the data binding expressions. The result is a bunch of generated callbacks and a lot more lines than in the mxml representation. So here's the question: <strong>is there a way to do data binding programmatically that doesn't involve a world of hurt?</strong></p>

[{'answer_id': 14261, 'author': 'Theo', 'author_id': 1109, 'author_profile': 'https://Stackoverflow.com/users/1109', 'pm_score': 6, 'selected': True, 'text': '<p>Don\'t be afraid of MXML. It\'s great for laying out views. If you write your own <em>reusable</em> components then writing them in ActionScript may sometimes give you a little more control, but for non-reusable views MXML is much better. It\'s more terse, bindings are extemely easy to set up, etc.</p>\n\n<p>However, bindings in pure ActionScript need not be that much of a pain. It will never be as simple as in MXML where a lot of things are done for you, but it can be done with not too much effort.</p>\n\n<p>What you have is <code>BindingUtils</code> and it\'s methods <code>bindSetter</code> and <code>bindProperty</code>. I almost always use the former, since I usually want to do some work, or call <code>invalidateProperties</code> when values change, I almost never just want to set a property.</p>\n\n<p>What you need to know is that these two return an object of the type <code>ChangeWatcher</code>, if you want to remove the binding for some reason, you have to hold on to this object. This is what makes manual bindings in ActionScript a little less convenient than those in MXML.</p>\n\n<p>Let\'s start with a simple example:</p>\n\n<pre><code>BindingUtils.bindSetter(nameChanged, selectedEmployee, "name");\n</code></pre>\n\n<p>This sets up a binding that will call the method <code>nameChanged</code> when the <code>name</code> property on the object in the variable <code>selectedEmployee</code> changes. The <code>nameChanged</code> method will recieve the new value of the <code>name</code> property as an argument, so it should look like this:</p>\n\n<pre><code>private function nameChanged( newName : String ) : void \n</code></pre>\n\n<p>The problem with this simple example is that once you have set up this binding it will fire each time the property of the specified object changes. The value of the variable <code>selectedEmployee</code> may change, but the binding is still set up for the object that the variable pointed to before.</p>\n\n<p>There are two ways to solve this: either to keep the <code>ChangeWatcher</code> returned by <code>BindingUtils.bindSetter</code> around and call <code>unwatch</code> on it when you want to remove the binding (and then setting up a new binding instead), or bind to yourself. I\'ll show you the first option first, and then explain what I mean by binding to yourself.</p>\n\n<p>The <code>currentEmployee</code> could be made into a getter/setter pair and implemented like this (only showing the setter):</p>\n\n<pre><code>public function set currentEmployee( employee : Employee ) : void {\n    if ( _currentEmployee != employee ) {\n        if ( _currentEmployee != null ) {\n            currentEmployeeNameCW.unwatch();\n        }\n\n        _currentEmployee = employee;\n\n        if ( _currentEmployee != null ) {\n            currentEmployeeNameCW = BindingUtils.bindSetter(currentEmployeeNameChanged, _currentEmployee, "name");\n        }\n    }\n}\n</code></pre>\n\n<p>What happens is that when the <code>currentEmployee</code> property is set it looks to see if there was a previous value, and if so removes the binding for that object (<code>currentEmployeeNameCW.unwatch()</code>), then it sets the private variable, and unless the new value was <code>null</code> sets up a new binding for the <code>name</code> property. Most importantly it saves the <code>ChangeWatcher</code> returned by the binding call.</p>\n\n<p>This is a basic binding pattern and I think it works fine. There is, however, a trick that can be used to make it a bit simpler. You can bind to yourself instead. Instead of setting up and removing bindings each time the <code>currentEmployee</code> property changes you can have the binding system do it for you. In your <code>creationComplete</code> handler (or constructor or at least some time early) you can set up a binding like so:</p>\n\n<pre><code>BindingUtils.bindSetter(currentEmployeeNameChanged, this, ["currentEmployee", "name"]);\n</code></pre>\n\n<p>This sets up a binding not only to the <code>currentEmployee</code> property on <code>this</code>, but also to the <code>name</code> property on this object. So anytime either changes the method <code>currentEmployeeNameChanged</code> will be called. There\'s no need to save the <code>ChangeWatcher</code> because the binding will never have to be removed.</p>\n\n<p>The second solution works in many cases, but I\'ve found that the first one is sometimes necessary, especially when working with bindings in non-view classes (since <code>this</code> has to be an event dispatcher and the <code>currentEmployee</code> has to be bindable for it to work).</p>\n'}, {'answer_id': 36010, 'author': 'Nick Higgs', 'author_id': 3187, 'author_profile': 'https://Stackoverflow.com/users/3187', 'pm_score': 2, 'selected': False, 'text': '<p>One way to separate the MXML and ActionScript for a component into separate files is by doing something similar to the ASP.Net 1.x code behind model. In this model the declarative part (the MXML in this case) is a subclass of the imperative part (the ActionScript). So I might declare the code behind for a class like this:</p>\n\n<pre><code>package CustomComponents\n{\n    import mx.containers.*;\n    import mx.controls.*;\n    import flash.events.Event;\n\n    public class MyCanvasCode extends Canvas\n    {\n        public var myLabel : Label;\n\n        protected function onInitialize(event : Event):void\n        {\n            MyLabel.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";\n        }\n    }\n}\n</code></pre>\n\n<p>...and the markup like this:</p>\n\n<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;\n&lt;MyCanvasCode xmlns="CustomComponents.*" \n    xmlns:mx="http://www.adobe.com/2006/mxml"\n    initialize="onInitialize(event)"&gt;\n    &lt;mx:Label id="myLabel"/&gt;    \n&lt;/MyCanvasCode&gt;\n</code></pre>\n\n<p>As you can see from this example, a disadvatage of this approach is that you have to declare controls like <strong>myLabel</strong> in both files.</p>\n'}, {'answer_id': 511674, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>there is a way that I usually use to use mxml and action script together: All my mxml components inherit from a action script class where I add the more complex code. Then you can refer to event listeners implemented in this class in the mxml file.</p>\n\n<p>Regards,</p>\n\n<p>Ruth</p>\n'}, {'answer_id': 5521481, 'author': 'qualidafial', 'author_id': 13253, 'author_profile': 'https://Stackoverflow.com/users/13253', 'pm_score': 3, 'selected': False, 'text': '<p>It exists as of today.  :)</p>\n\n<p>I just released my ActionScript data binding project as open source: <a href="http://code.google.com/p/bindage-tools" rel="noreferrer">http://code.google.com/p/bindage-tools</a></p>\n\n<p>BindageTools is an alternative to BindingUtils (see the play on words there?) that uses a fluent API where you declare your data bindings in a pipeline style:</p>\n\n<pre><code>Bind.fromProperty(person, "firstName")\n    .toProperty(firstNameInput, "text");\n</code></pre>\n\n<p>Two-way bindings:</p>\n\n<pre><code>Bind.twoWay(\n    Bind.fromProperty(person, "firstName"),\n    Bind.fromProperty(firstNameInput, "text"));\n</code></pre>\n\n<p>Explicit data conversion and validation:</p>\n\n<pre><code>Bind.twoWay(\n    Bind.fromProperty(person, "age")\n        .convert(valueToString()),\n    Bind.fromProperty(ageInput, "text")\n        .validate(isNumeric()) // (Hamcrest-as3 matcher)\n        .convert(toNumber()));\n</code></pre>\n\n<p>Etc.  There are lots more examples on the site.  There\'s lots of other features too-come have a look. --Matthew</p>\n\n<p>Edit: updated APIs</p>\n'}]
['https://Stackoverflow.com/questions/14247', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/266/']