ZK composite is a concept in which we design a customized component based on a template zul file we composed (like a ZK Macro component); however, unlike a Macro component, developers could include other children components within a ZK composite.


    

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)


	

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

3 Responses to “ZK Composite”

  1. I agree. My thanks for doing such a good job. I’ll check here to read more and recommend my friends about your site.

  2. krisna says:

    Dear All,
    Help me..

    I have a Problem with ZK Composite,

    how to integrate ZK Composite with Spring?

    Exception : Component Definition not found X_X,

    can you give me example using zk composite +spring +jpa +hibernate??

    Thank you very much…

    sorry my english so bad..

    i hope u can solve my problem…

    Thankss again.. 😀

Leave a Reply