Normal Open test.zul in IE8 browser
- Click the "up/down" arrow to update timbox's time value a few times
- Notice the hour portion alternates between highlighted and not highlighted
- Click the "Display timebox value" button
- If highlighted, the label will display the current timebox's value on screen
- If not highlighted, the label will not display the current timebox's value on screen (no onChange event)
test.zul
<zk xmlns:h="native"> <h:h1>ZK ${desktop.webApp.version}</h:h1> <groupbox apply="org.zkoss.bind.BindComposer" title="MVVM Data Binding" viewModel="@id('vm') @init('pkg$.TestVM')"> <timebox id="tbxOne" format="HH:mm" value="@bind(vm.time)"/> <label id="lblOne" value="@load(vm.time)"/> <button label="Display timebox value" onClick="lblOne.setValue(tbxOne.getValue().toString())"/> </groupbox> <groupbox title="onChange Listener"> <timebox id="tbxTwo" format="HH:mm" onChange="lblTwo.value = event.value" onCreate="self.setValue(new java.util.Date())"/> <label id="lblTwo"/> <button label="Display timebox value" onClick="lblTwo.setValue(tbxTwo.getValue().toString())"/> </groupbox> </zk>
TestVM.java
package pkg$; import java.util.Calendar; import java.util.Date; public class TestVM { private Date time = Calendar.getInstance().getTime(); public Date getTime() { return time; } public void setTime(Date time) { this.time = time; } }