ZK 5.0 and Server+Client Fusion

{{Template:Smalltalk_Author|
|author=Robbie Cheng, Technology Evangelist, Potix Corporation
|date=July 14, 2009
|version=ZK 5.0
}}

==Introduction==
Since ZK 5, developers can not only leverage the ease of development of the server-centric architecture, but also the full controllability of client-side programming. It's developer's choice to implement a function using either server-side or client side development according to their requirements.

In this article, we will demonstrate two different approaches, pure server-centric, and client/server development to implement a real-world application.

==Resources==

<imagelink link="http://www.zkoss.org/download/zk.dsp" image="http://www.zkoss.org/img/DownloadNow.jpg" text="Download ZK 5" />
<imagelink link="http://www.zkoss.org/zkdemo/userguide/" image="http://www.zkoss.org/img/LiveDemo.jpg" text="Live Demo" />
<imagelink link="http://books.zkoss.org/wiki/Documentation" image="http://www.zkoss.org/img/Doc.jpg" text="Documentation" />

==The Application: ZK Finance==
ZK finance is real-world application; users can look up the historical price of stocks, and see the result in a table, and a chart. Here is the snapshot of this application, including a search box on the left panel, and a table, and chart on the right panel.
[[Image:zkfinance.png|300]]

==Pure Server-centric approach==
First of all, we use the pure server-centric approach to implement this application using MVC (Model-View-Controller) pattern.
===Model===
There are two objects of this application, including Stock, and Price. The relationship between Stock and Price is one-to-many. Each stock has more than one Price objects to represent its historical price.

'''Stock.java'''
<source lang="java">
public class Stock {
	private int _id;
	private String _name;
	private List _priceItems = new ArrayList();
....
getter and setter methods
}
</source>
'''Price.java'''
<source lang="java">
public class Price {
	private String _date;
	private double _open;
	private double _high;
	private double _low;
	private double _close;
	private int _volumn;
....
getter and setter methods
}
</source>

Moreover, we create a DAO object which is responsible for providing data of stock.
'''StockDAO.java'''
<source lang="java">
public class StockDAO {
private List stocks = new LinkedList();
public Stock getStock(int id) {}
public List findAll() {}

}
</source>

===View===
We provide a search function, and show the search result in a Listbox.

'''index.zul'''
<source lang="xml">
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<borderlayout id="main" apply="StockController">
	<west title="ZK Finance" size="250px" flex="true"
		splittable="true" minsize="210" maxsize="500" collapsible="true">
		<panel>
			<toolbar>
				<label value="Search:" />
				<textbox id="searchBox" ctrlKeys="#down#up"
					focus="true" sclass="demo-search-inp" />
			</toolbar>
			<panelchildren>
				<listbox id="itemList" model="@{main$composer.stocks}"
					fixedLayout="true" vflex="true">											
					<listitem self="@{each='stock'}" value="@{stock}">
						<listcell label="@{stock.name}" />
					</listitem>
				</listbox>
			</panelchildren>
		</panel>
	</west>
	<center>
		<include id="detail"/>
	</center>
</borderlayout>
</source>

Regarding historical price of a stock, we use Grid, and line Chart to show the result.

'''price.zul'''
<source lang="xml">
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<window id="main2" apply="PriceController">
	<grid id="history" model="@{main2$PriceController.prices}" >
		<columns menupopup="auto">
			<column label="Date" />
			<column label="Open" />
			<column label="High" />
			<column label="Low" />
			<column label="Close" />
			<column label="Volumn" />
		</columns>
		<rows>
			<row self="@{each='price'}">
				<label value="@{price.date}"/>
				<label value="@{price.open}"/>
				<label value="@{price.high}"/>
				<label value="@{price.low}"/>
				<label value="@{price.close}"/>
				<label value="@{price.volumn}"/>
			</row>
		</rows>
	</grid>

	<chart id="line" width="500" height="250" type="line"
		fgAlpha="128" model="@{main2$PriceController.cateModel}"/>
</window>
</source>

===Controller===
====Search function====
In StockController.java, we register onChanging event listener on Textbox component to get user’s input instantly, and then list all stocks that match the query in the Listbox component. 

'''StockController.java'''
<source lang="java">
public class StockController extends GenericForwardComposer {	
	Textbox searchBox;
	Listbox itemList;
	Include detail;
	StockDAO dao = new StockDAO();
	private static String DETAIL_URL = "price.zul";
	
	public void onCreate$main(){		
		itemList.setSelectedIndex(0);		
		Events.postEvent(new Event(Events.ON_SELECT, itemList));
	}
	
	public void onSelect$itemList(){
		int id = ((Stock)itemList.getSelectedItem().getValue()).getId();
		detail.setSrc(DETAIL_URL + "?id=" + id);
	}	
	
	public void onChanging$searchBox(InputEvent event) {
		String key = event.getValue();
		LinkedList item = new LinkedList();
		List items = dao.findAll();

		if (key.trim().length() != 0) {
			for (Iterator iterator = items.iterator(); iterator.hasNext();) {
				Stock st = (Stock) iterator.next();
				if (st.getName().toLowerCase()
						.indexOf(key.toLowerCase()) != -1)
					item.add(st);
				
			}
			itemList.setModel(new ListModelList(item));
		} else itemList.setModel(new ListModelList(items));
	}
	
	public List getStocks(){
		return dao.findAll();
	}
}
</source>

Once the user clicks any Stock in the result, we register onSelect event listener to show the historical prices by reloading the price.zul page.
onSelect$itemList()

====Showing the result in table and chart====
To show the historical prices of certain stock, in PriceController.java, we get prices data from StockDAO, and create required data model for chart component.

'''PriceController.java'''
<source lang="java">
public class PriceController extends GenericAutowireComposer {
	
	private StockDAO dao = new StockDAO();
	private CategoryModel cateModel;			
	private List items;
	
	public PriceController() {
		init();
	}
	
	public void init() {
		//get stock id
		int id = Integer.parseInt((String) Executions.getCurrent().getParameter("id"));		
		Stock stock = dao.getStock(id);
		items = stock.getPriceItems();		
		//create category model for chart
		cateModel = new SimpleCategoryModel();
		for (Iterator iterator = items.iterator(); iterator.hasNext();) {
			Price price = (Price) iterator.next();
			cateModel.setValue(stock.getName(), price.getDate(), price.getClose());
		}
	}
	public List getPrices(){
		return items;
	}
	public CategoryModel getCateModel() {
		return cateModel;
	}	
}
</source>

==Server+client Fusion approach==
In addition to the pure server-centric approach, we will illustrate a hybrid approach here. Let us say we want to improve the responsiveness of the search, then we can move the corresponding code to the client. In the following paragraphs, we use search function as an example.

===Modification of existing code===
To implement search function at client side, first of all, we have to load the stock data to client. We use an include component to load the data source, data.xml, from the server.
<source lang="xml">
<include id="data" src="data.xml" comment="true"/>
</source>

Secondly, at the server side, the control code (StockController.java) shall be removed from index.zul since we will implement this function at client side. 
<source lang="xml">
<borderlayout id="main">
</source>

In addition, we no longer generate the stock list at the server-side so we remove code related to generating the search result, too.
<source lang="xml">
<listbox id="list" rows="10" width="300px">
</source>

===Client side programming===
To implement the search function at client side, we create an update function in listbox where it generates stock items according to user’s input.
<source lang="xml">
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<script src="/zkau/web/js/zk.xml.wpd"/>

....
<listbox id="list" rows="10" width="300px">
	<attribute w:name="update"><![CDATA[
	(function () {
		var data;
		function loadData(w) {
			var xmlDoc = zk.xml.Utl.parseXML(jq(w).html().replace(/<!--|-->/g, '').trim()),
				ids = xmlDoc.getElementsByTagName("id"),
				labels = xmlDoc.getElementsByTagName("name");
			
			data = [];
			jq(ids).each(function (i) {
				data.push({id: this.firstChild.nodeValue, label: labels[i].firstChild.nodeValue});
			});
		}
		function createItems (listbox, data) {
			if (!data.length) return;
			jq(data).each(function () {
				listbox.appendChild(new zul.sel.Listitem({label: this.label, uuid: this.id}));
			});
		}
		return function (txt) {
			txt = txt || '';
			if (!data) loadData(this.$f('data'));
			this.clear();
			createItems(this, jq.grep(data, function (item) {
				return item.label.toLowerCase().indexOf(txt.toLowerCase()) != -1;
			}));
			this.stripe();
		};
	})()
	]]></attribute>
</listbox>
</source>
*zk.xml.Utl.parseXML() is defined inside <code>zk/src/archive/web/js/zk/xml/utl.js</code>. To use it, we have to include its source by <code><script src="/zkau/web/js/zk.xml.wpd"/></code>
*$f (id), a way to get fellow component. It is the same as getFellow(id), i.e., an alias of getFellow.
*<nowiki>http://www.zkoss.org/2005/zk/client</nowiki> is the so-called client namespace that tells ZK engines to generate the code at the client-side instead of server-side.

Then, we register onChanging event listener on textbox to invoke the update function of listbox at clien-side, too. Notice that we have to specify the client namespace (<code>w:</code>), since the listener is running at the client.
<source lang="xml">
<textbox id="inp" w:onChanging="this.$f('list').update(event.data.value)"/>
</source>

Besides, if we would like to show all stock items in the beginning, we have to invoke update function of listbox component at initialization by registering bind_ function to do the initialization.
<source lang="xml">
<listbox id="list" rows="10" width="300px">
	<attribute w:name="bind_">
	function (desktop, skipper, after) {
		this.$bind_.apply(this, arguments);
		var self = this;
		after.push(function () {
			self.update();
			self.firstChild.setSelected(true);
		});
	}
	</attribute>
....
</listbox>
</source>

===Interacting with server-side components===
So far, we’ve migrated the search function to client-side, the last mile is to communicate with server to update the historical prices of selected stock item. To make sure the onSelect event will be send to server instantly, we simply register the onSelect event at listbox component. Thus, once users click any stock item, the ZK engine will sends an onSelect event to server. 
<source lang="xml">
<listbox id="list" onSelect="" rows="10" width="300px">
....
</source>

Next, to handle the onSelect event directly at server, we could implement a service at server side; then, we can update the content of historical price accordingly.
<source lang="xml">
<listbox id="list" onSelect="" rows="10" width="300px">
....
</listbox>

<include id="content" src="price.zul?id=1"/>
<zscript>
	public class MyService implements org.zkoss.zk.au.AuService {
		public boolean service(org.zkoss.zk.au.AuRequest request, boolean everError) {
			final String cmd = request.getCommand();
			if (cmd.equals(Events.ON_SELECT)) {
				String uuid = ((List)request.getData().get("items")).get(0);
				System.out.println("selected:" + uuid);
				content.setSrc("price.zul?id=" + uuid);
				return true;
			}
			return false;
		}
	}
	list.setAuService(new MyService());
</zscript>
</source>

==Summary==
In above paragraphs, we demonstrate two different approached to implement the same application using either pure server-side, or a hybrid approach. Whether to use server-centric or client-centric development are developers’ choices, ZK 5 points out a new way to implement Rich Internet Application that developers can leverage both ease of development, and controllability at the same time.

==Download==
The application could be downloaded [http://sourceforge.net/projects/zkforge/files/Small%20Talks/ZK%205%20and%20Client%2BServer%20Fusion/zk5Client%2BServerFusion.zip/download here].

== See Also ==
#[[ZK_Client-side_Reference/General_Control|ZK Client-side Reference: General Control]]
#[[ZUML Reference/ZUML/Namespaces/Client|Client Namespace]]
#[[Small_Talks/2009/July/ZK_5.0_and_jQuery|ZK 5.0 and jQuery]]
#[[Small_Talks/2009/July/ZK_5.0_and_jQuery_part_2|ZK 5.0 and jQuery part 2]]
#<javadoc directory="jsdoc">zk.Widget</javadoc> -- See the usage of $f(), $n(), bind_, init_, zk.widget.$()

[[Category:ZK]]
[[Category:Overview]]
[[Category:Small Talk]]
[[Category:Server+Client fusion]]
{{Template:Smalltalk_Footer|
|name=Potix Corp
}}