Handling Events"

From Documentation
m (Created page with '{{ZKComponentDevelopmentEssentialsPageHeader}} The next logical step is to add an event to our ZK component. To this we are going add some more functionality to the SimpleLabel.…')
 
m
Line 5: Line 5:
 
This means that firstly we need to change the mold of the label to include a div which can be used as a target. The code below satisfies this requirement:
 
This means that firstly we need to change the mold of the label to include a div which can be used as a target. The code below satisfies this requirement:
  
<javadoc lang="javascript">
+
<source lang="javascript">
 
function (out) {
 
function (out) {
 
  out.push('<span', this.domAttrs_(), '><div id="value" style="float:left;">', this.getValue(), '</div><div id="target" style="float:left;cursor: pointer; cursor: hand;height:20px;width:20px;background-color:red;"></div></span>');
 
  out.push('<span', this.domAttrs_(), '><div id="value" style="float:left;">', this.getValue(), '</div><div id="target" style="float:left;cursor: pointer; cursor: hand;height:20px;width:20px;background-color:red;"></div></span>');
 
}
 
}
</javascript>
+
</source>
  
 
As you can see we have now split the contents of label into two by introducing two div tags, one will be used to display the value and the other will be a click target.
 
As you can see we have now split the contents of label into two by introducing two div tags, one will be used to display the value and the other will be a click target.
  
 
{{ZKComponentDevelopmentEssentialsPageFooter}}
 
{{ZKComponentDevelopmentEssentialsPageFooter}}

Revision as of 04:56, 14 July 2010




The next logical step is to add an event to our ZK component. To this we are going add some more functionality to the SimpleLabel. A new div will be added which when clicked should clear the displayed text and fire a custom event named onClear.

This means that firstly we need to change the mold of the label to include a div which can be used as a target. The code below satisfies this requirement:

function (out) {
 out.push('<span', this.domAttrs_(), '><div id="value" style="float:left;">', this.getValue(), '</div><div id="target" style="float:left;cursor: pointer; cursor: hand;height:20px;width:20px;background-color:red;"></div></span>');
}

As you can see we have now split the contents of label into two by introducing two div tags, one will be used to display the value and the other will be a click target.



Last Update : 2010/07/14

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.