Chapter 7: Navigation and Templating"
| Line 17: | Line 17: | ||
The steps to use templating are: | The steps to use templating are: | ||
# Create a template zul with anchors defined | # Create a template zul with anchors defined | ||
| − | # | + | # Apply 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. | 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. | ||
| Line 46: | Line 46: | ||
| − | == | + | == Apply the Template == |
| − | After creating a template zul, we can | + | After creating a template zul, we can apply it in another zul with directive <tt><?init class="org.zkoss.zk.ui.util.Composition" arg0="template_path"?></tt>. This directive tells ZK this page use the specified template. Then we also have to define zul fragments that are insert to the anchor in the template zul with annotation <tt>@define(anchorName)</tt> at <tt>self</tt> attribute. The <tt>anchorName</tt> you specify should correspond to one of anchors defined in the template zul. |
'''chapter7/pagebase/index.zul''' | '''chapter7/pagebase/index.zul''' | ||
Revision as of 09:00, 28 January 2013
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:
- Create a template zul with anchors defined
- Apply 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
Apply the Template
After creating a template zul, we can apply it in another zul with directive <?init class="org.zkoss.zk.ui.util.Composition" arg0="template_path"?>. This directive tells ZK this page use the specified template. Then we also have to define zul fragments that are insert to the anchor in the template zul with annotation @define(anchorName) at self attribute. The anchorName you specify should correspond to one of anchors defined in the template zul.
chapter7/pagebase/index.zul
<?link rel="stylesheet" type="text/css" href="/style.css"?>
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/chapter7/pagebase/layout/template.zul"?>
<zk>
<include self="@define(content)" src="/chapter7/pagebase/home.zul"/>
</zk>
- Line 2: Tell ZK that we want to use a template zul for current page and give the path of template zul.
- Line 4: The anchor name content correspond to the anchor name defined in the template zul in previous section.
After above steps, ZK will attach those component in /chapter7/pagebase/home.zul to be the children of <center> in /chapter7/pagebase/layout/template.zul