ViewModel Class Java Annotation @Init, @NotifyChange, @Command

In following sections we'll list all syntaxes that can be used in implementing a ViewModel and applying ZK bind annotation.


The ZK binder is responsible for synchronizing data between the View and ViewModel. Typically the ViewModel is a POJO and has no reference to any UI component. Hence it cannot push data to a UI component. Developers have to specify the dependency of ViewModel's properties with ZK provided Java annotation, then binder knows when to reload which property and to update the UI view.
ZK bind provides a set of Java annotations ( @NotifyChange, @DependsOn,@NotifyChangeDisabled ) to specify when to reload which property to UI components. Developers have to specify it at design time, and the binder will synchronize data at run-time. The binder keeps track of binding relationships between component's attribute and ViewModel's property. After each time it invokes a ViewModel's
method (setter, getter, or command method), it looks for corresponding component attribute to reload according to specified properties in the annotation.
@NotifyChange
Syntax
@NotifyChange("anotherProperty")
@NotifyChange({"secondProperty","thirdProperty"})
@NotifyChange("*")
@NotifyChange(".")
Description
Target: method (setter or command method)
Purpose: To notify binder one or more properties change. By default, a property set by binder through setter method will notify this property changed without this annotation. You could use this annotation on setter method to override default notification target. You could also add this annotation on a command method to notify properties that are changed after command execution. To avoid the default notification, use @NotifyChangeDisabled on setter method solely. Giving "*" in annotation element means notify all properties in a View Model. Use "." to enforce reloading the instance of the class in where the annotation.
Let us put in simple words.
Assume that you have bind some components in the ZUL File with some variable. Let us say this variable name as var1.So whenever we change the value of var1, then the binder will automatically bind the modified value in the zul file. Assume that you are going to change this variable value on calling Somemethod(), then you could write as follows
@NotifyChange("var1")
public void Somemethod() {
var1 = “value changed”
}
Then whenever this somemethod is called, then binder will automatically take the latest value of var1 and bind to the control (assume that text area) and will be shown to the user.
*****************************************************************************************************************************************************
@Command
Syntax
@Command()
@Command("commanName")
@Command({"commanName1", "commandName2"})
Description
Target: method
Purpose: To identify a Command method.
The optional annotation's element is a String for command's name and that name is referenced in a ZUL with
event-command binding. If it's not provided, the method name is set as the command name by default.
*****************************************************************************************************************************************************

@Init

Description
Target: method
Purpose: Marker annotation to identify a initial method. Binder calls the method with this annotation when initializing a ViewModel. Only one or none init method is allowed in a ViewModel class. If you set annotation element superclass to true, the ViewModel's parent class's init method will be invoked first then child's, and this logic repeat on super class. If a class has no method with @Init, no
method will be called (including the super class's).
*****************************************************************************************************************************************************
Now the time is do small exercise based on the three above annotation. Here is the example
Let us use our existing ZK Project and will create additional two files such as Example5.zul and example5VM as shown here.

example5.zul
<?page title="Practice List" contentType="text/html;charset=UTF-8"?>
<zk>
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('ex.myexample.example5VM')">
<separator />
<div>
<button label="Click to Change Value 1" onClick="@command('hibtn1')"/>
<button label="Click to Change Value 2" onClick="@command('hibtn2')"/>
<button label="Click to Change Value 3" onClick="@command('hibtn3')"/>
<button label="Click to Change Value 4" onClick="@command('hibtn4')"/>
</div>
<separator />
<groupbox height="40px">
<space spacing="200px"/>
<label value="@load(vm.message)" style="color: #696569; font-size : 24px; font-weight: bold;"/>
</groupbox>
<separator />
</window>
</zk>
****************************************************************************
example5VM.java
package ex.myexample;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
public class example5VM {
private String m1;
public String getMessage() {
return m1;
}
@Init
public void myInitialSetup() {
this.m1= "Intial value goes here, you can set up in the Init Method";
}
@Command
@NotifyChange("message")
public void hibtn1() {
m1= "Value Changed after Button 1 Clicked";
}
@Command
@NotifyChange("message")
public void hibtn2() {
m1= "Value Changed after Button 2 Clicked";
}
@Command
@NotifyChange("message")
public void hibtn3() {
m1= "Value Changed after Button 3 Clicked";
}
@Command
public void hibtn4() {
m1= "Value Changed after Button 4 Clicked";
}
}
Now you can run and see the output. Let me explain how the execution flow will be take place when we run the zul file.
1. First it will create an instance for our class example5VM. Java
2. It will look for any method with annotation @Init, if method available, then it will execute that method. In our case, we have that method and also we are changing the variable m1 to some text. Since we already bind this variable for the label in the zul file, then it will update the UI at the initial stage itself.
3. Then onclick of first button, we have indicated to the binder such as to execute the method called hibtn1. And also, we have indicated to the binder, after executing this method, ZK binder has to update the UI for the label which is bind with the variable m1 by using @NotifyChange annotation. Same thing happens for other two buttons.
4. If you carefully look the code, for the method hibtn4 , we didn't notify the same. So on clicking fourth button, the label will not change.