Data Binding Gone Wild!

The ability to base a property of an object off a dynamically changing value is a benefit of data binding that is often unknown or overlooked by Flex developers. However it is an extremely valuable feature and can save a lot of time coding and handling various events, not to mention much cleaner code! This is particularly true for those properties requiring a boolean, such as ‘enabled’ or ‘visible’. The toggle can be done during execution based on a certain sequence of events. The code returning the value for the property can be included within the binding brackets in the case where minimal code is needed to derive the value, or via a function call that returns the value. The following code excerpt shows how this can easily be done in your Flex application. It basically sets the ‘enable’ property of the Delete button to a dynamically derived value that indicates whether a row in the grid has been clicked. Simple as that!

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			private var employeeCollection:ArrayCollection = new ArrayCollection([
				{id:1, firstname:"Tom",lastname:"Taylor", position:"VP Sales"},
	                        {id:2, firstname:"John",lastname:"Jones", position:"Operations"},
	                        {id:3, firstname:"Margaret",lastname:"Miller", position:"VP Marketing"},
	                        {id:4, firstname:"Sarah",lastname:"Sanders", position:"VP Finance"},
	                        {id:5, firstname:"Ron",lastname:"Roberts", position:"Product Manager"},

			]);
			private function onDeleteBtnClick(event:MouseEvent):void
			{
				employeeCollection.removeItemAt(emplDataGrid.selectedIndex);
			}
		]]>
	</mx:Script>

	<mx:VBox left="10" top="5" width="480">
		<mx:DataGrid id="emplDataGrid" dataProvider="{employeeCollection}" width="480">
			<mx:columns>
				<mx:DataGridColumn dataField="id" headerText="Employee ID"/>
				<mx:DataGridColumn dataField="firstname" headerText="First Name"/>
				<mx:DataGridColumn dataField="lastname" headerText="Last Name"/>
				<mx:DataGridColumn dataField="position" headerText="Position"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button id="deleteBtn" left="10" label="Delete Employee" 
			click="onDeleteBtnClick(event)" 
			enabled="{emplDataGrid.selectedIndex > -1}"/>
	</mx:VBox>
</mx:WindowedApplication>

Comments welcome 🙂

Advertisements

6 Responses to “Data Binding Gone Wild!”

  1. […] Schinsky, a Flex/AIR developer and new blogger, just posted an interesting example at https://devgirl.wordpress.com/2008/10/29/data-binding-gone-wild .  Check out the mx:Button tag enabled […]

  2. Cool stuff! I’ve found that using ternary operators in binding expressions is also very useful. Such as:

    label=”{playing ? ‘Stop’ : ‘Play’}”

    -James

  3. Marcel Boucher Says:

    Very good article DevGirl. Data Binding can be extremely effective when you are building applications that require unit testing. Using this approach, you can easily create ActionScript classes that can be detached from UI and tested separately.

    Nice job.

  4. Another tip- If you’re using the same binding expression over and again, put it in a variable, and bind to that.

    Instead of having 5 different components each having enabled=”{ something && somethingElse(foo) }”

    { something && somethingElse(foo) }

    And then your actual GUI components can bind to “{ isBlue }” cutting down on cruft and improving readability.

    You can also replace the MXML definition of “isBlue” with anything else you like down the track (perhaps a [Bindable(“isBlueChanged”)] get function)…

  5. Another tip- If you’re using the same binding expression over and again, put it in a variable, and bind to that.

    Instead of having 5 different components each having enabled=”{ something && somethingElse(foo) }”

    <mx:Boolean id=”isBlue”>{ something && somethingElse(foo) }</mx:Boolean>

    And then your actual GUI components can bind to “{ isBlue }” cutting down on cruft and improving readability.

    You can also replace the MXML definition of “isBlue” with anything else you like down the track (perhaps a [Bindable(“isBlueChanged”)] get function)…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: