Include a Separate Page

To complete the page, we need to put those individual pages into corresponding area of the BorderLayout.

For all areas, we use <apply>, a shadow component, to combine separated pages, and it doesn’t consume extra server memory. This component can inject a separated zul for you when the parent zul is loaded. This usage is presented below:

chapter1/index.zul

<?link rel="stylesheet" type="text/css" href="/style.css"?>
<zk>
	<custom-attributes org.zkoss.zul.image.preload="true"/>
	<borderlayout hflex="1" vflex="1">
		<north vflex="min" border="none" >
			<apply templateURI="/chapter1/banner.zul"/>
		</north>
		<west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
			<apply templateURI="/chapter1/sidebar.zul"/>
		</west>
		<center id="mainContent" autoscroll="true">
			<apply templateURI="/chapter1/main.zul"/>
		</center>
		<south border="none">
			<apply templateURI="/chapter1/footer.zul"/>
		</south>
	</borderlayout>
</zk>
  • Line 1: This directive links a external style sheet under root folder.
  • Line 6, 9, 12, 15: Specify a separated zul path at templateURI attribute to inject a page into current page.

For CE users, you still can use <include> as an alternative to <apply>. Note: the <include> component’s API is different from <apply>. For example, <include> uses the src="..." attribute instead of the templateURI="..." attribute to target the included page. Please refer to the documentation link above for more informations.

Comments