Processing...
Description & Source Code
  • Description
  • XML & Java Source
    demo.zul
    template.zul
    template_full.zul
    composition1a.zul
    composition1b.zul
    composition2a.zul
    composition2b.zul
  • Download This Demo

Composition is one of the built-in templating implementations.
Which enables developers to assign a template to a ZUL by defining specific partial page.

Following are basic usage of Composition :

  • Template Assign :
    <?init class="org.zkoss.zk.ui.util.Composition" arg0="/MyTemplate.zul"?>
  • Define partial page:
    @{define(WhateverName)}
  • Insert partial page into templates :
    @{insert(WhateverName)}

More details please check the Developer's Reference

demo.zul
<zk>
	<radiogroup onCheck="inc.setSrc(self.getSelectedItem().getValue());" style="display: block">
		<grid width="600px">
			<auxhead>
				<auxheader rowspan="2">Templates</auxheader>
				<auxheader colspan="2">Product</auxheader>
			</auxhead>
			<auxhead>
				<auxheader>ZK Framework</auxheader>
				<auxheader>ZK Studio</auxheader>
			</auxhead>
			<columns visible="false">
				<column width="300px"></column>
				<column></column>
				<column></column>
			</columns>
			<rows>
				<row>
					<hlayout>
						<div width="100px">Template 1</div>
						<image src="/widgets/composite/template_composition/img/snap1.png" />
					</hlayout>
					<radio value="/widgets/composite/template_composition/composition1a.zul" selected="true" />
					<radio value="/widgets/composite/template_composition/composition2a.zul" />
				</row>
				<row>
					<hlayout>
						<div width="100px">Template 2 (full)</div>
						<image src="/widgets/composite/template_composition/img/snap2.png" />
					</hlayout>
					<radio value="/widgets/composite/template_composition/composition1b.zul" />
					<radio value="/widgets/composite/template_composition/composition2b.zul" />
				</row>
			</rows>
		</grid>
	</radiogroup>
	<separator height="40px"></separator>
	<!-- Simulated a real url access -->
	<include id="inc" src="/widgets/composite/template_composition/composition1a.zul" mode="defer" height="430px" />

</zk>
template.zul
<zk>
	<style src="/widgets/composite/template_composition/style.css" />
	<borderlayout width="100%" height="330px">
		<east width="200px" collapsible="true" title="Quick Link">
			<div self="@{insert(right)}" sclass="logo"></div>
		</east>
		<center>
			<div self="@{insert(left)}" sclass="content"></div>
		</center>
	</borderlayout>
</zk>
template_full.zul
<zk>
	<style src="/widgets/composite/template_composition/style.css" />
	<panel width="100%" border="normal" title="Product Introduction" sclass="complex">
		<toolbar sclass="top-toolbar">			
			<toolbarbutton label="ZK Framework" />
			<toolbarbutton label="ZK Studio" />
			<toolbarbutton label="ZK Spreadsheet" />
			<toolbarbutton label="ZK Pivottable" />
			<toolbarbutton label="ZK Calendar" />
			<toolbarbutton label="ZK JSP" />
			<toolbarbutton label="ZTL" />
		</toolbar>
		<panelchildren>
			<borderlayout width="100%" height="330px">
				<west width="200px" collapsible="true" title="Quick Link">
					<div self="@{insert(right)}" sclass="logo"></div>
				</west>
				<center>
					<div self="@{insert(left)}" sclass="content"></div>
				</center>
			</borderlayout>
			<div sclass="footer">
				Copyright © 2011 ZK Demo. All rights reserved.
			</div>
		</panelchildren>
	</panel>
</zk>
composition1a.zul
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/widgets/composite/template_composition/template.zul"?>
<zk>
	<!-- Product  -->
	<window self="@{define(left)}" title="ZK Framework" border="normal" width="100%" height="330px">
		<hlayout xmlns:n="native" >
			<image src="/widgets/composite/template_composition/img/zk.png" />
			<vlayout>
			<n:h3>What is ZK ?</n:h3> 
			<div>
				A highly productive open source Java framework for 
				building amazing enterprise web and mobile applications.
			</div>
			<separator height="20px"></separator>
			<n:h3>Why ZK ?</n:h3>
			<div>
				<n:ul class="product-list">
					<n:li>Simple and Easy</n:li>
					<n:li>Trusted and Solid</n:li>
					<n:li>Rich and clearly</n:li>
				</n:ul>
			</div> 	
			</vlayout>
		</hlayout>
	</window>

	<!-- Sidebar  -->
	<div self="@{define(right)}" width="100%" xmlns:n="native">
		<n:ul>
			<n:li>
				<a href="http://www.zkoss.org/product/zk">Product Detail</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/download/zk">Download</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/whyzk/TopReasons">Why ZK</a>
			</n:li>
			<n:li>
				<a href="http://books.zkoss.org/">Docs</a>
			</n:li>
		</n:ul>
		<groupbox mold="3d" width="200px" closable="false">
			<caption label="Calendar"></caption>
			<calendar width="180px" />
		</groupbox>
	</div>


</zk>
composition1b.zul
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/widgets/composite/template_composition/template_full.zul"?>
<zk>
	<!-- Product  -->
	<window self="@{define(left)}" title="ZK Framework" border="normal" width="100%" height="330px">
		<hlayout xmlns:n="native" >
			<image src="/widgets/composite/template_composition/img/zk.png" />
			<vlayout>
			<n:h3>What is ZK ?</n:h3> 
			<div>
				A highly productive open source Java framework for 
				building amazing enterprise web and mobile applications.
			</div>
			<separator height="20px"></separator>
			<n:h3>Why ZK ?</n:h3>
			<div>
				<n:ul class="product-list">
					<n:li>Simple and Easy</n:li>
					<n:li>Trusted and Solid</n:li>
					<n:li>Rich and clearly</n:li>
				</n:ul>
			</div> 	
			</vlayout>
		</hlayout>
	</window>

	<!-- Sidebar  -->
	<div self="@{define(right)}" width="100%" xmlns:n="native">
		<n:ul>
			<n:li>
				<a href="https://www.zkoss.org/product/zk">Product Detail</a>
			</n:li>
			<n:li>
				<a href="https://www.zkoss.org/download/zk">Download</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/whyzk/TopReasons">Why ZK</a>
			</n:li>
			<n:li>
				<a href="http://books.zkoss.org/">Docs</a>
			</n:li>
		</n:ul>
		<groupbox mold="3d" width="200px" closable="false">
			<caption label="Calendar"></caption>
			<calendar width="180px" />
		</groupbox>
	</div>


</zk>
composition2a.zul
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/widgets/composite/template_composition/template.zul"?>
<zk>
	<!-- Product -->
	<window self="@{define(left)}" title="ZK Studio" border="normal" width="100%" height="330px">

			<hlayout xmlns:n="native">
				<image src="/widgets/composite/template_composition/img/zks.png" />
				<vlayout>
					<n:h3>What is ZK Studio ?</n:h3>
					<div>A visual IDE providing intuitive tools that span the entire application development lifecycle.</div>
					<n:h3>Why ZK Studio?</n:h3>
					<div>
						<n:ul class="product-list">
							<n:li>Code completion</n:li>
							<n:li>Project and page wizards</n:li>
							<n:li>ZK Component widget</n:li>
							<n:li>ZK Library management</n:li>
						</n:ul>
					</div>
				</vlayout>
			</hlayout>

	</window>
	
	<!-- Sidebar  -->
	<div self="@{define(right)}" width="100%" xmlns:n="native">
		<n:ul>
			<n:li>
				<a href="http://www.zkoss.org/product/zkstudio">Product Detail</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/download/zkstudio">Download</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/product/zkstudio/demo">Demo</a>
			</n:li>
			<n:li>
				<a href="http://books.zkoss.org/wiki/ZK_Studio_Docs">Docs</a>
			</n:li>
		</n:ul>
		<separator height="40px"></separator>
		<groupbox mold="3d" width="200px" closable="false" sclass="marketplace">
			<caption label="MarketPlace"></caption>
			<a href="http://marketplace.eclipse.org/content/zk-studio">
				<image src="/widgets/composite/template_composition/img/zks_eclipse.png"></image>
			</a>
		</groupbox>
	</div>
</zk>
composition2b.zul
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/widgets/composite/template_composition/template_full.zul"?>
<zk>
	<!-- Product -->
	<window self="@{define(left)}" title="ZK Studio" border="normal" width="100%" height="330px">

			<hlayout xmlns:n="native">
				<image src="/widgets/composite/template_composition/img/zks.png" />
				<vlayout>
					<n:h3>What is ZK Studio ?</n:h3>
					<div>A visual IDE providing intuitive tools that span the entire application development lifecycle.</div>
					<n:h3>Why ZK Studio?</n:h3>
					<div>
						<n:ul class="product-list">
							<n:li>Code completion</n:li>
							<n:li>Project and page wizards</n:li>
							<n:li>ZK Component widget</n:li>
							<n:li>ZK Library management</n:li>
						</n:ul>
					</div>
				</vlayout>
			</hlayout>

	</window>
	
	<!-- Sidebar  -->
	<div self="@{define(right)}" width="100%" xmlns:n="native">
		<n:ul>
			<n:li>
				<a href="http://www.zkoss.org/product/zkstudio">Product Detail</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/download/zkstudio">Download</a>
			</n:li>
			<n:li>
				<a href="http://www.zkoss.org/product/zkstudio/demo">Demo</a>
			</n:li>
			<n:li>
				<a href="http://books.zkoss.org/wiki/ZK_Studio_Docs">Docs</a>
			</n:li>
		</n:ul>
		<separator height="40px"></separator>
		<groupbox mold="3d" width="200px" closable="false" sclass="marketplace">
			<caption label="MarketPlace"></caption>
			<a href="http://marketplace.eclipse.org/content/zk-studio">
				<image src="/widgets/composite/template_composition/img/zks_eclipse.png"></image>
			</a>
		</groupbox>
	</div>
</zk>