Case Study

In this example, we create a Mydiv component, which extends Div.

Mydiv.java code

public class Mydiv extends Div implements AfterCompose{
	@SuppressWarnings("unchecked")
	public void afterCompose() {
		Div d = (Div)Executions.createComponents("~./mydiv.zul", null, null);
		for (Component c : new java.util.LinkedList(getChildren()))
			d.appendChild(c);
		d.setParent(this);
		Components.wireVariables(this, this, '$', true, true); //ignore zscript and variable resolvers
		Components.addForwards(this, this, '$');
	}
	public void onOK() {
		show("OK!!!");
	}
	public void onCancel() {
		show("Cancel!!!");
	}
	private void show(String msg) {
		try {
			Messagebox.show(msg);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

As you can see, Mydiv.java also implements the org.zkoss.zk.ui.ext.AfterCompose interface. After the template file (mydiv.zul) is created, it will move its children into the nested div to enclose them. Suppose you want to design a frame with rounded corners to enclose some other components to give them a more pleasant look, you could utilize the ZK composite concept to deal with it. Another important thing in this example is that we also added Autowire and Autoforward mechanism into this customized component so that both buttons (OK and Cancel) can forward events to the mydiv component.(see Mydiv.java onOK and onCancel)

Defining Customized Component

After you create your own component, you have to specify it in lang-addon.xml.

For example:

	
	mydiv
	
	
	xul/html
	
		mydiv
		org.zkoss.zul.Mydiv
		div
	

And then you can use this customized component into your project.

For example,
(test.zul)