Data-Binding Implementation for ZK

{{Template:Smalltalk_Author|
|author=Chanwit Kaewkasi, PhD Student School of Computer Science , The University of Manchester, UK
|date=April 11, 2006
|version=Applicable to ZK 1.2.0 and later.
}}


=Overview=

This article describes how my ZK data-binding implementation works. Some examples will be presented to show how developers can have advantages from this data-binding feature. Before we go through the mechanism of the data-binding implementation, I would like to start with some background about this library.


=Motivation=

We can find Model-View-Controller (MVC) implementation in several Java frameworks, mainly in Swing, Struts and also ZK. However, The presentation layer in .NET framework, especially WinForm, introduces a good technique known as “Data Binding” that allows develop to bind a specific property of an object to GUI elements. This feature has several advantages including the reduction of code in the GUI. Thus, it should be good to have this kind of ability in ZK.

In business application development, we often have some business objects to be displayed, edited, and updated. The nature of an EL expression currently utilised in ZK can be thought as a kind of the one-way data-binding for displaying data of business objects. However, we have to write some code to update data to them, and some other codes to re-assign theses new value for related GUI elements to display the up-to-date information. The ZK data-binding implementation tries to eliminate this manual coding.


=Implementation=

I use the technique called “subscribe-to-expression” (found in Borland ECO framework for .NET) with the simple Observer pattern in the current implementation. Two new properties, “bind” and “dataSource”, have been introduced to the ZUL elements. The “dataSource” property is to link with a business object, and then we can set the name of property we want to display and/or edit using the “bind” property. When the “dataSource” or the “bind” property are changed, the element will subscribe itself to the “bind” expression of the “dataSource” object for update notification. The subscription process will be done through the DisplayRegistry class.

After a user making a change to the value of a ZUL element, the element will trigger an update notification to all elements that has subscribed to the same “expression.” So you can see that these elements will be automatically updated.

Currently in the proof-of-concept version, I use Apache Commons JXPath as a binding expression library. It is a bit different approach comparing with the EL expression found in ZK, and might confuse the ZK users in the first time. However, other technique is welcome to improve the coding experiences.


=Using Databinding=

Using this library is simple because the ZK infrastructure provides the very flexible way to extend ZUL elements. Listing 1 shows the example Bank class with two properties; “name” and “shortName.”


'''Listing 1 The Bank class'''

<source lang="java" >
public class com.centillex.zk.example.Bank {

	private String name;
	private String shortName;

	public String getName() {
		return this.name;
	}
	public String getShortName() {
		return this.shortName;
	}
	public void setName(String value) {
		this.name = value;
	}
	public void setShortName(String value) {
		this.shortName = value;
	}
}
</source> 


'''Listing 2 Binding the name property of a Bank object to a label and a textbox'''

<source lang="xml" >
<window border="normal" width="600px" height="500px">
  <zscript>
    import com.centillex.zk.example.Bank    
    Bank b = new Bank();
  </zscript>

  <label   id="test"
           use="com.centillex.zk.Label"
           bind="name"
           dataSource="${b}" />

  <textbox id="txtBox"
	     use="com.centillex.zk.Textbox"
	     bind="name"
           dataSource="${b}" />

  <button id="btnTest" label="Refresh" />

</window>
</source>


In Listing 2, the label tag uses the class “com.centillex.zk.Label”(Editor's Note: [http://www.centillex.com/files/zk/zk-contrib.jar jar] [http://www.centillex.com/files/zk/zk-contrib-src.zip source]) rather than the original implementation to enable the data-binding feature. We still need to press the Refresh button to trigger ZK because I have not yet implement the internal “onBlur” event for a Textbox.


=Some Issues=

Firstly, The bandwidth issue may be caused by binding a lot of ZUL elements to the same expression because every subscribed element will be re-draw by the ZK UiEngine every time their value (or text) is made changed. Secondly, it is also possible to have a realtime update between 2 or more users by sharing the display registry among sessions. But, I have decided to limit the scope of the display registry by assigning each instance per session to prevent the confliction of data, and also the bandwidth consumption problem. Finally, there are some inconvenient behaviors because my ZK elements should send some notification after they lost focusing. This can be improved by add an event listener to every data-binding element.

ZK has done the great job as a light-weight agile framework for server-side Java. It provides a very strong infrastructure to enable AJAX to applications with minimal effort. The ZK databinding implementation is to improve some few area for ZK to make it easier to use when user dealing with business objects. In the future version of my ZK data-binding is to implement it using Aspect-Oriented Programming (AOP) since we can consider data-binding ability as an aspect. I am now refactoring this implementation using [http://www.eclipse.org/aspectj AspectJ 5] and will have the data-binding available soon. The direct advantages of AOP implementation is that it will not interfere the current development of ZK while users can use the databinding seamlessly. The ZK databinding aspect will be automatically integrated into ZK framework at runtime using the load-time weaver of AspectJ 5.


<center>[[Image:ruler.gif]]</center>


''[mailto://chanwit@gmail.com Chanwit Kaewkasi]'' is a PhD student in Computer Science specialising Aspect-oriented programming at University of Manchester, UK. He is experienced in Java EE development, Hibernate, Spring and also ZK. The current industrial project he's working on is a business application built using the MDA approach with AndroMDA, and utilised ZK as its UI layer.



<comment>http://docs.zkoss.org/wiki/Data-Binding_Implementation_for_ZK</comment>


[[Category:Data Binding]]
[[Category:MVC]]
{{Template:Smalltalk_Footer|
|name=Chanwit Kaewkasi
}}