New Features of ZK 3.0 RC2

{{Template:Smalltalk_Author|
|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'''.

* [http://zkoss.org/release/rn-3.0.0-RC2.dsp Release Note of ZK 3.0 RC2]

* [http://books.zkoss.org/Small_Talks/2007/October/New_Features_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,

<source lang="xml" >
<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>
</source>

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'''

<source lang="xml" >
<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>
</source>

* 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'''

<source lang="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
				...
			}
		}
	}
}
</source>

* 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,[[Small_Talks/2007/October/Integrate_Server_Push_with_ListModel_-_SimpleListModelSharer |Integrate Server Push with ListModel - SimpleListModelSharer]].


<comment>/smalltalks/zk3.0rc2/index.dsp</comment>


[[Category:ZK]]
{{Template:Smalltalk_Footer|
|name=Potix Corporation
}}