Registering Appropriate Listeners
Registering listeners is a fundamental of many programming languages and event driven applications. Being an event driven framework ZK is no different. To accomplish our goal of a clear button we need to do two things:
- Capture clicks on our “target”
- Fire a custom
onClear event when the target is clicked
Capturing Clicks on our Target
Firstly, let’s concentrate on capturing clicks on our target div. To do so we need to register appropriate listeners in the bind_ method and remove the listeners in the unbind_ method to avoid any memory leak. Here is the code to do so.
bind_ : function(evt) {
this.$supers('bind_', arguments);
this.domListen_(this.$n().lastChild, "onClick", '_doClear');
},
unbind_ : function(evt) {
this.domUnlisten_(this.$n().lastChild, "onClick", '_doClear');
this.$supers('unbind_', arguments);
},
The key to this is the domListen method which takes the target as the
first parameter, in this case we pass it the
Please note that you also are required to call
Firing a Custom Event (onClear)
The key lies in the registering the callback of the event. In our case
we registered a callback named
method we need to clear/restore the text depending on the widget state and fire the onClear method. The code is as follows:
_doClear: function(evt) {
this._cleared = !(this._cleared);
if(this._cleared) {
this.$n().firstChild.innerHTML = this._value;
} else {
this.$n().firstChild.innerHTML = "";
}
this.fire("onClear", {cleared: this._cleared});
}
We have a data member named _cleared which contains the state of the
application. Depending on the state the method either shows or clears
the displayed value. The method
The client side widget will now communicate with the component at the server side. This is handled by ZK. The following section explores how this communication works.