Template Injection replaces the Composition Pattern using shadow elements.

Below the basic usage of Template Injection :

• Define named <template>s inline or from separate files
• Insert those templates using the shadow element <apply>

For more details please check the Documentation

<zk>
	<style src="/widgets/shadow_elements/template_injection/style.css" />
	<radiogroup onCheck="inc.setSrc(self.getSelectedItem().getValue());">
		<custom-attributes org.zkoss.zul.image.preload="true" />
		<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/shadow_elements/template_injection/img/template1.png" />
					</hlayout>
					<radio value="/widgets/shadow_elements/template_injection/composition1a.zul" selected="true" />
					<radio value="/widgets/shadow_elements/template_injection/composition2a.zul" />
				</row>
				<row>
					<hlayout>
						<div width="100px">Template 2 (full)</div>
						<image src="/widgets/shadow_elements/template_injection/img/template2.png" />
					</hlayout>
					<radio value="/widgets/shadow_elements/template_injection/composition1b.zul" />
					<radio value="/widgets/shadow_elements/template_injection/composition2b.zul" />
				</row>
			</rows>
		</grid>
	</radiogroup>
	<separator height="40px"></separator>
	<!-- Simulated a real url access -->
	<include id="inc" src="/widgets/shadow_elements/template_injection/composition1a.zul" height="470px" />

</zk>

<zk>
	<borderlayout width="100%" height="370px">
		<east width="250px" collapsible="true" title="Quick Link">
			<div sclass="logo">
				<apply template="sidebar"/>
			</div>
		</east>
		<center>
			<div sclass="content">
				<apply template="content"/>
			</div>
		</center>
	</borderlayout>
</zk>

<zk>
	<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="365px">
				<west width="250px" collapsible="true" title="Quick Link">
					<div sclass="logo">
						<apply template="sidebar"/>
					</div>
				</west>
				<center>
					<div sclass="content">
						<apply template="content"/>
					</div>
				</center>
			</borderlayout>
			<div sclass="z-toolbar footer">
				Copyright © 2011 ZK Demo. All rights reserved.
			</div>
		</panelchildren>
	</panel>
</zk>

<zk>
	<apply templateURI="/widgets/shadow_elements/template_injection/template.zul">
		<template name="content" src="/widgets/shadow_elements/template_injection/contents/zk_framework_product.zul" />
		<template name="sidebar" src="/widgets/shadow_elements/template_injection/contents/zk_framework_sidebar.zul" />
	</apply>
</zk>

<zk>
	<apply templateURI="/widgets/shadow_elements/template_injection/template_full.zul">
		<template name="content" src="/widgets/shadow_elements/template_injection/contents/zk_framework_product.zul" />
		<template name="sidebar" src="/widgets/shadow_elements/template_injection/contents/zk_framework_sidebar.zul" />
	</apply>
</zk>

<zk>
	<apply templateURI="/widgets/shadow_elements/template_injection/template.zul">
		<template name="content" src="/widgets/shadow_elements/template_injection/contents/zk_studio_product.zul"/>
		<template name="sidebar" src="/widgets/shadow_elements/template_injection/contents/zk_studio_sidebar.zul"/>
	</apply>
</zk>

<zk>
	<apply templateURI="/widgets/shadow_elements/template_injection/template_full.zul">
		<template name="content" src="/widgets/shadow_elements/template_injection/contents/zk_studio_product.zul"/>
		<template name="sidebar" src="/widgets/shadow_elements/template_injection/contents/zk_studio_sidebar.zul"/>
	</apply>
</zk>