Flex 4: Simple 2 Way Binding

In the older versions of flex, we can make use of the 'Bindable' tag to reduce the amount of coding required. However, once we give users the ability to change a value of a component that was previous bind to a value, that's where all the extra coding comes in. Therefore in the newer version of flex, we have the privilege to do 2 way binding, which is pretty helpful. Anyway let's take a look at the codes of the simple demo that I have created.

Source Code for the main application - 'Simple2WayBinding.mxml'

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      backgroundColor="#CDCDCD" 
      creationComplete="creationCompleteEvent(event)" xmlns:zcs="com.zcs.*">
 <fx:Declarations>
  <zcs:OppositeBooleanObj id="oppObj"/>
  <zcs:OppositeBooleanObj id="oppObj1"/>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.binding.utils.BindingUtils;
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //We are creating a 2-way binding using the following liners.
    //As you can see, the selected value of the following
    //checkboxes, 'chk1' and 'chk4' will be bind 2-ways.
    BindingUtils.bindProperty(chk1, "selected", chk4, "selected");
    BindingUtils.bindProperty(chk4, "selected", chk1, "selected");
   }
  ]]>
 </fx:Script>
 <fx:Binding twoWay="true" 
    source="chk1.selected" 
    destination="chk2.selected"/>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle"
     horizontalAlign="center">
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      textAlign="center"
      width="100%" height="20">
    This is using <fx:Binding> to bind the 
    values of the properties together.
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This is (1)."
       id="chk1"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have the same value as (1)."
      id="chk2"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
      textAlign="center"
      width="100%" height="20">
    This is using a '@' symbol before the curly brackets
    to bind the values of the properties to a object.    
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This is (2)."
      selected="@{oppObj.value1}"/>
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have a different value as (2)."
       selected="@{oppObj.value2}"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:TextArea borderVisible="false"
      contentBackgroundAlpha="0"
       textAlign="center"
      width="100%" height="20">
    This is using 'BindingUtils' to bind the value of the
    property of this check box to '(1)'.
   </s:TextArea>   
  </s:HGroup>
  <s:HGroup verticalAlign="middle" 
      horizontalAlign="center"
      width="100%">
   <s:CheckBox label="This will always have the same value as (1)."
      id="chk4"/>
  </s:HGroup>
  <s:Spacer height="100%"/>
 </s:VGroup>
</s:Application>

Source Code for the simple Object used in this demo - 'OppositeBooleanObj.as'

package com.zcs
{
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.events.IEventDispatcher;
 
 public class OppositeBooleanObj extends EventDispatcher
 {
  private var _value1:Boolean = true;
  private var _value2:Boolean = false;

  [Bindable(event="value1Changed")]
  public function get value1():Boolean
  {
   return _value1;
  }

  //change the value of 'value2' when 'value1' changes
  //We are dispatching the event 'value2Changed' to
  //trigger data binding.
  public function set value1(value:Boolean):void
  {
   _value1 = value;
   _value2 = !_value1;
   dispatchEvent(new Event("value2Changed")); 
  }
  
  [Bindable(event="value2Changed")]
  public function get value2():Boolean
  {
   return _value2;
  }

  //change the value of 'value1' when 'value2' changes
  //We are dispatching the event 'value1Changed' to
  //trigger data binding.
  public function set value2(value:Boolean):void
  {
   _value2 = value;
   _value1 = !_value2;
   dispatchEvent(new Event("value1Changed"));
  }
 }
}

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.