ZK Essentials/Chapter 7: Navigation and Templating

Overview

It is easy for users to get lost in a web application because every application has different layout designs. Navigation between functions ... One way to help users keep track of where they are is to use consistent design throughout an application, and ZK provides Templating to achieve this. Traditionally, a user usually visits another page to switch another function of an application, a.k.a page-based navigation. In ZK, we can have another choice to design the navigation as desktop-based.

Templating

Because of web pages can be designed in all kinds of layout, user could get lost easily. To prevent this, you had better keep a consistent design style in your application. Copying from one page to another page to keep the design consist is hard to maintain. Fortunately, ZK provides a Templating technique that let you define a template zul and reuse it afterward.

The steps to use templating are:

1. Create a template zul with anchors defined
2. Reference to the template in the target zul with zul fragments defined

Then when you visit the target zul page, ZK will insert those fragments to corresponding anchors upon anchor names and combine them as one page.

Create a Template

Creating a template is nothing different from creating a normal zul, but you should define one or more anchor by specifying annotation @inser() at self. You can give any name to identify an anchor that will be used to insert a zul fragment with the same anchor name later.

chapter7/pagebase/layout/template.zul

<zk>
	<borderlayout hflex="1" vflex="1">
		<north height="100px" border="none" >
			<include src="/chapter3/banner.zul"/>
		</north>
		<west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
			<include src="/chapter7/pagebase/layout/sidebar.zul"/>
		</west>
		<center id="mainContent" autoscroll="true" border="none" self="@insert(content)">
		</center>
		<south height="50px" border="none">
			<include src="/chapter3/footer.zul"/>
		</south>
	</borderlayout>
</zk>

• Line 9: Define an anchor with name content