With property binding you can define the way a property is calculated. This statement is usually based on a javascript expression including one or more properties on other objects. The value of the property will always be kept up to date. This means that when one of the dependent properties changes, the property is recalculated. See fig 1. for a graphical explanation.

Let me give you an example to make it a bit straightforward. This example sets the visibility of the slider based on the state of the checkbox.

<j:slider visible="{myCheckbox.value}" />
<j:checkbox id="myCheckbox">Toggle the visibility of the slider</j:checkbox>

View Example

The use of { and } tell Javeline PlatForm(JPF) that the visible property will be bound. By specifying myCheckbox.value JPF knows that the value of myCheckbox should be retrieved for this property. Whenever the checkbox changes, the slider will show or hide.

Sometimes it’s necesary to make a binding from one property to another one, and vice verse. This works in the same way, but instead of using curly braces you use brackets: [ and ]. The next example keeps the state of a dropdown in sync with the state of the tab page.

<j:tab activepage="[myDropdown.value]">
   <j:page caption="Page 1" />
   <!-- etc -->
</j:tab>
<j:dropdown id="myDropdown">
   <j:item value="0">Page 1</j:item>
   <!-- etc -->
</j:dropdown>

View Example

It gets really interesting when you use an expression between the { and } tags. You are allowed to use any valid javascript expression here and it will automatically bind to the properties you’ve used. In the example below the value of the label is set using a javascript expression.

<j:label value="{'Slider value is ' + mySlider.value}"/>
<j:slider id="mySlider" />

View Example

The following example uses property binding to set the width of a slider. As you can see I use Math.round to get an integer based on the value the slider gives.

<j:slider id="mySlider" min="0" max="1" />
<j:bar width="{Math.round(mySlider.value*800)+50}" />

View Example

A custom property bound JavaScript object

You can create your own JavaScript object that has the same property binding as Javeline components. You can even use them to bind from and to any other JPF components. Lets start out by creating a simple class (=function in JavaScript), called cTestObject. This class creates a div, gives it a red border and puts the text ‘empty’ in it.

function cTestObject(){
   jpf.makeClass(this);

   var div = document.body.appendChild(document.createElement("div"));
   div.style.border = "1px solid red";
   div.innerHTML = "empty";
}

The makeClass call is JPF specific. It adds an event system, constructor/destructor hooks, inheritance and property binding. For our cTestObject class we want to define two properties. These are ‘value’ and ‘width. ‘value’ sets the text of the div and the ‘width’ sets the width of the div. We do this by adding the following code.

this.__supportedProperties = ["value", "width"];
this.handlePropSet = function(prop, value){
   this[prop] = value;

   switch(prop){
      case "value":
         div.innerHTML = value;
         break;
      case "width":
         div.style.width = (value||0) + 20 + "px";
         break;
   }
}

So now, it’s really easy to start and set one of these properties using code.

test1 = new cTestObject();
test.setProperty("width", 10);

Nothing really exciting here yet. It becomes more interesting when we create two cTestObjects and set bind their properties.

test1 = new cTestObject();
test2 = new cTestObject();

//First we bind the width of x to the value of y
test1.setDynamicProperty("width", "{test2.value*20}");

//Then we bind the value of y to the value of x
test2.setDynamicProperty("value", "{test1.value*2}");

//test1.setDynamicProperty("value", "{test1.width}"); //recursion breaks it...

To test this, I add a slider that sets the value of test1.

<j:slider value="[test1.value]" min="0" max="10" />

View Example

In one of the following blog posts, I’ll take this a bit further and show you how to create JPF components that fully work, with their own <j:xxx /> tags.

For now I hope you have a clear idea of the advantages of property binding in JPF. I’ve tried to make the implementation as simple as possible, whilst making it very powerful.

Property Bindings in other frameworks
There are several other technology makers who have created some form of property binding. Here’s an (incomplete, I’m sure) list of frameworks that provide this. Dojo and Sproutcore are both JavaScript based. Flex (Adobe’s RIA solution using the Flash browser plugin) and Silverlight (Microsoft’s Flash competitor) have very nice property binding solutions.

• Sproutcore
• Dojo
• Flex
• Silverlight