Define Composite Component using Java Annotation in ZK6

From Documentation
DocumentationSmall Talks2011DecemberDefine Composite Component using Java Annotation in ZK6
Define Composite Component using Java Annotation in ZK6

Author
Ian Tsai, Engineer, Potix Corporation
Date
December 06, 2011
Version
ZK 6+

Introduction

This article will introduce you how to define and implement a ZK Composite Component with java annotation in ZK6.

In previous article Envisage ZK 6: An Annotation Based Composer For MVC Simon Pai showed us the new approach to do ZK MVC in ZK6, which might be the best common solution for layout fragment controller implementation. But in some cases, some UI fragments supposed to be reused in a lot of places, attached and detached by condition, and should be interacted with other parts like a ZK Component (ex: a Permission Inquiry Dialog). In ZK5, we introduced a concept named ZK Composite Component which is more like a practice. And now in ZK 6 with the power that Java Annotation granted, we are able to design an utility API to provide more conveniences.

How to Use

Installation

Here is the prerequisite stuff of using Composite in ZK6.

Install ZK 6 into your Web Project

I assume the reader of this article has used ZK before, if you don't know how to start with ZK, please take a look at ZK Installation Guide

Download ZK-Composite.zip from Github.com

Here is the download link: ZK-Composite.zip Download it, unpack it, and copy every jar file(asm4.0.jar, zkcomposite.jar, zkcpr.jar) under /lib/* to your web project.

Copy the sample code into your project

inside the unpacked archive there's a /demo folder which contains src/ and WebContent/, copy them into your project


Implementation of your Composite

Here is a sample code of how to use ZK 6 Composite technology:

 1 package demo.ui.composite;
 2 
 3 import org.zkoss.composite.Composite;
 4 import org.zkoss.composite.Composites;
 5 import org.zkoss.zk.ui.IdSpace;
 6 import org.zkoss.zk.ui.select.Listen;
 7 import org.zkoss.zk.ui.select.Wire;
 8 ...
 9 
10 @Composite
11 public class ImageLabel extends Div implements IdSpace {
12 	
13 	@Wire
14 	private Groupbox item;
15 	@Wire
16 	private Image labelImage;
17 	@Wire
18 	private Label titleLabel;
19 	@Wire
20 	private Label descLabel;
21 	
22 	public ImageLabel(){
23 		Composites.doCompose(this, null);
24 	}
25 	
26 	private InplaceEditor fInplaceEditor;
27 	
28 	@Listen("onClick= #titleLabel")
29 	public void doTitleClick(){
30 		if(fInplaceEditor==null){
31 			fInplaceEditor = new InplaceEditor();
32 			fInplaceEditor.setParent(item);
33 		}else{
34 			fInplaceEditor.doCancel();
35 		}
36 	}

The concept is very simple: you declare a Java class which extends a ZK Component, annotate this class, call Composites.doCompose(this, null); in your constructor, that's all. The detailed steps are listed bellow:

Create a Java class extends from an existing ZK Component (ex: Div or Window)

Normally your composite class will extends from a container component such as Div or Window, but the case to extends from a Collection Component such as Grid or Listbox is also very common, this part is very flexible, all depends on your needs.

Make this Java class implements IdSpace

ZK Composite requires a ZUL as the content template and will do the field-variable auto-wiring & Event Listening method registration for you, in order to prevent id conflict, you must make your Composite class implements IdSpace.

Call Composites.doCompose in the constructor

ZK Component Definition registration support

In ZK6 Composite, you can provide

Use @Composite to annotate your Composite class

import: org.zkoss.composite.Composite then you can mark this ZK Component class as a Composite


How it works

Composite's macroURI resolving and Inheritance

Package Resource Scan

Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.