Recently I needed to emulate the built-in functionality of HTML <label> entities to put the focus on its referenced item using the ZK JavaScript framework. Basically, the goal was to define an onClick event for the label that would toggle the checked-status of a checkbox and simultaneously trigger its onCheck event (sending the update request to the server side, thus synchronizing the client with the server side). The checkbox itself controlled the autodrop-status of an auto-completing combobox.
Consequently, once the checkbox is checked the autodrop-functionality of the combobox should be either enabled or disabled. Since the same functionality should be provided by clicking on the label (which failed to register itself with the corresponding checkbox…) an additional onClick event for the label was introduced.
Unfortunately, firing the onCheck event via the label’s onClick event did not automatically fire the corresponding server update message. Therefore some further manual adjustments had to be made. The final result is shown in the following:
<combobox id="autoCompleter" autodrop="true" use="at.kerstner.AutoCompleter"/>
<checkbox id="autoCompleter_checkbox" checked="true" onCheck="autoCompleter.autodrop=self.checked"/>
<label id="autoCompleter_ext" value="Autocomplete?"
w:onClick="this.$f('autoCompleter_checkbox').setChecked(!this.$f('autoCompleter_checkbox').isChecked());
this.$f('autoCompleter_checkbox').fire('onCheck', this.$f('autoCompleter_checkbox').isChecked());"/>
The combobox was implemented through the Autocompleter-class, which represents an (simple) extension of ZK’s built-in Combobox widget. By default it is checked and the autodrop-functionality is enabled. The label’s onClick event should emulate the missing functionality to trigger the checkbox’s onCheck event.
In ZK components can be referenced from the client side via the this.$f() function. Thus, the first thing to be when the onClick event is triggered is to update to checked status of the checkbox. Since the onCheck event did not fire automatically the second step was to emulate the onCheck event of the checkbox triggering the update message being sent to the server.