New Features of ZK 3.0 RC2

Author
Robbie Cheng, Engineer, Potix Corporation

Date
October 19, 2007

Version

In ZK 3.0 RC2, the ZK team mainly focuses on fixing bugs. Over 56 bugs have been fixed. In addition, I will introduce you two important features, the ZK Layout component, and SimpleListModelSharer.

• Release Note of ZK 3.0 RC2

• New Features of ZK 3.0 RC

ZK Layout Component

For ease of use for UI designers, the ZK team presents you the layout component which helps you to design the UI more easily.

The layout component is a nested component. The parent component is borderlayout, and its children components include north, south, center, west, and east. As you can see, it is intuitive and easy to use. There is an example of using layout component as follows,

<borderlayout>
	<north size="50%" border="0">
		<borderlayout>
			<west size="25%" border="none" flex="true">
				<div style="background:#B8D335">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center border="none" flex="true">
				<div style="background:#E6D92C">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</center>
			<east size="50%" border="none" flex="true">
				<label value="Here is a non-border"
					style="color:gray;font-size:30px" />
			</east>
		</borderlayout>
	</north>
	<center border="0">
		<borderlayout>
			<west size="30%" flex="true" border="0">
				<div style="background:#E6D92C">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center>
				<label value="Here is a border"
					style="color:gray;font-size:30px" />
			</center>
			<east size="30%" flex="true" border="0">
				<div style="background:#B8D335">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</east>
		</borderlayout>
	</center>
</borderlayout>

For more information, please take a look at this smalltalk,A Simple, Flexible, and Powerful ZK Layout.

SimpleListModelSharer

With the help of server push, ZK allows you to share the same ListModel for different clients, and to update their data automatically when necessary. It is useful when you want to broadcast information to clients, for example, stock price. And the most important of all is that its usage is simple. Let’s take a look at an example which broadcasts stock price to clients automatically by using SimpleListModelSharer and Server Push.

stockquotes.zul

<zk>
	<zscript>
		import org.zkoss.zulex.demo.stock.*; 
		
		if(!desktop.isServerPushEnabled()){
			desktop.enableServerPush(true);
		}
		StockUpdateService service = StockUpdateService.lookup();
		ListModel model = service.getProxy(desktop);
		StockRowRenderer renderer = new StockRowRenderer();
	</zscript>
	<hbox>
		Stock:
		<textbox id="stock" value="BCC"/>
		<button id="addbtn" label="add" onClick="service.addStock(stock.value)"/>
	</hbox>
	<separator/>
	<groupbox width="300px">
	<caption label="Live Stock Quotes Demo" />
	<grid model="${model}" rowRenderer="${renderer}" >
		<columns>
			<column label="Symbol" width="100px"/>
			<column label="Price" />
			<column label="Change" />
		</columns>
	</grid>
	</groupbox>
</zk>

• Enable server push by desktop.enableServerPush(true);.

• Get a Proxy of ListModel by call getProxy(desktop).

• Call addStock(value) when onClick

• Assign model to grid.

StockUpdateService.java

public class StockUpdateService {
	...
	private StockUpdateService(){
		stockModel = new ListModelList();
		modelSharer = new SimpleListModelSharer(stockModel);
		...
		new Thread(new UpdateRunnable()).start();
	}
	
	public ListModel getProxy(Desktop desktop){
		return modelSharer.getProxy(desktop);
	}
	
	...
	class UpdateRunnable implements Runnable{
		...
		public void run() {
			while(running){
				...
				StockInfo si = getCurrentStockQuotes(index);//get current stock quotes			
				stockModel.set(index,si);//and update it
				...
			}
		}
	}
}

• New a SimpleModelSharer with stockModel.
• Start a thread which will update stockModel periodically.
• Modify stockModel without any tedious code, modelSharer will update all proxies automatically with Server Push.

For more information, please take a look at this smalltalk,Integrate Server Push with ListModel - SimpleListModelSharer.

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