Processing...
Description & Source Code
  • Description
  • XML & Java Source
    template_pattern.zul
    template/fixed-center.zul
    template/full.zul
    template/sidebar-right.zul
    template/no-sidebar.zul
    style/default.zul
    style/nature.zul
    style/pink.zul
    style/zk.zul
    header.zul
    content.zul
    sidebar.zul
    footer.zul
  • Download This Demo
  • Test Code Online

Page template is very useful and popular us in the modern web application.
With ZK Include component, users can easily design and change the layout, style, event part of the page dynamically.

This is the directory of this demo :

Folder img/ :
images used in the demo

Folder style/ :
Four style template of the demo (Sure you can use filetype both dsp or css as you stylesheeet)

Folder template/ :
Four layout template of the demo

Files :
The diefferent part of the blog demo

template_pattern.zul
<window border="none" width="100%" height="720px" xmlns:w="client">
  <zscript><![CDATA[  
		desktop.setCurrentDirectory("/widgets/composite/template_pattern/"); 
  ]]></zscript>
	<hlayout spacing="5px" style="padding-bottom:10px;">
		Layout Templates :
		<listbox mold="select">
			<attribute name="onSelect">
				String templateName = self.getSelectedItem().getFirstChild().getValue();
				includeTemplate.setSrc("template/" + templateName + ".zul");
			</attribute>			
			<listitem selected="true"><listcell label="Default with Sidebar" value="fixed-center" /></listitem>
			<listitem><listcell label="Default without Sidebar" value="no-sidebar" /></listitem>
			<listitem><listcell label="Full page with Left Sidebar " value="full" /></listitem>
			<listitem><listcell label="Full page with Right Sidebar " value="sidebar-right" /></listitem>
		</listbox>
		<separator width="30px" /> 
		Style Templates :
		<listbox mold="select">
			<attribute name="onSelect">
				String templateName = self.getSelectedItem().getFirstChild().getValue();
				includeTemplate.setClass(templateName);
				includeStyle.setSrc("style/" + templateName + ".zul");
			</attribute>
			<listitem selected="true"><listcell label="Default" value="default" /></listitem>
			<listitem><listcell label="Nature Style" value="nature" /></listitem>
			<listitem><listcell label="Pink Style" value="pink" /></listitem>
			<listitem><listcell label="ZK Style" value="zk" /></listitem>
		</listbox>
	</hlayout>
	<include id="includeStyle" src="style/default.zul" />
	<include id="includeTemplate" src="template/fixed-center.zul" width="100%" height="100%" />
</window>
template/fixed-center.zul
<zk>
	<style><![CDATA[
	  .fixed-center .header {
	    padding-left: 10px;
	  }
	  .fixed-center .center-left,
	  .fixed-center .center-right {
	    border: none;
	  }
	  .fixed-center .center {
	    border: 1px solid #CFCFCF;
	  }
	]]></style>
	<hlayout width="100%" height="100%">
		<div hflex="1"></div>
		<div hflex="6" vflex="1" class="fixed-center">
			<include vflex="1" class="header" src="header.zul" />
			<hlayout vflex="8" class="center">
				<div vflex="1" hflex="3" class="center-left">
					<include src="sidebar.zul" class="center-left-inner" />
				</div>
				<div vflex="1" hflex="7" class="center-right">
					<include src="content.zul" />
				</div>
			</hlayout>
			<include vflex="1" class="footer" src="footer.zul" />
		</div>
		<div hflex="1"></div>
	</hlayout>
</zk>
template/full.zul
<zk>
  <borderlayout width="100%" height="100%">
    <north border="none" size="10%" class="header">
      <include src="header.zul"/>
    </north>
    <center border="none" vflex="1" class="center">
      <hlayout vflex="1">
        <div hflex="2"></div>
        <div hflex="5" class="center-left" vflex="1">
          <include src="sidebar.zul" class="center-left-inner"/>
        </div>
        <div hflex="7" class="center-right" vflex="1">
          <apply templateURI="content.zul" />
        </div>
        <div hflex="2"></div>
      </hlayout>
    </center>
    <south border="none" class="footer" size="10%">
      <include src="footer.zul"/>
    </south>
  </borderlayout>
</zk>
template/sidebar-right.zul
<zk>
  <style><![CDATA[
  .center-right {
   border-right: 1px solid #CFCFCF;    
  }
  .center-right-inner {
   color: #6f6f6f;  
   padding: 4px;
  }
  .center-right-inner .z-vlayout {
	  border-left: 1px solid #CFCFCF;
    padding: 5px;
  }
  .center-left {  
   border-left: 1px solid #CFCFCF;
   padding: 5px;
  }
  ]]></style>
  <borderlayout width="100%" height="100%">
    <north border="none" size="10%" class="header">
      <include src="header.zul"/>
    </north>
    <center border="none" vflex="1" class="center">
      <hlayout vflex="1">
        <div hflex="2"></div>        
        <div hflex="7" class="center-left" vflex="1">
          <apply templateURI="content.zul" />
        </div>
        <div hflex="5" vflex="1" class="center-right">
          <include src="sidebar.zul" class="center-right-inner"/>
        </div>
        <div hflex="2"></div>
      </hlayout>
    </center>
    <south border="none" class="footer" size="10%">
      <apply templateURI="footer.zul"/>
    </south>
  </borderlayout>
</zk>
template/no-sidebar.zul
<zk>
	<style><![CDATA[
		.no-sidebar .header {
		    padding-left: 10px
		}
		.no-sidebar .center {
		    padding: 0 10px
		}
		.no-sidebar .center-right {
		    border: none
		}
		.no-sidebar {
		    border: 1px solid #EEEEEE
		}
  ]]></style>
	<hlayout width="100%" height="100%">
		<div hflex="1"></div>
		<div hflex="6" vflex="1" class="no-sidebar">
			<include vflex="1" class="header" src="header.zul" />
			<hlayout vflex="8" class="center">				
				<div hflex="8" vflex="1" class="center-right">
					<include src="content.zul" />
				</div>
			</hlayout>
			<include vflex="1" class="footer" src="footer.zul" />
		</div>
		<div hflex="1"></div>
	</hlayout>
</zk>
style/default.zul
<style><![CDATA[
.header {
    background-color: #165379;
    border-bottom: 1px solid #454545;
    color: white;
    padding-left: 75px;
}
.header-bar {
    height: 12px
}
.header-title1 {
    color: white;
    font-family: Tahoma;
    font-size: 22px;
    font-weight: bold;
}
.header-title2 {
    color: #efefef;
    font-family: Georgia;
    font-size: 14px;
    font-style: italic;
}
.center-left {
    border-left: 1px solid #CFCFCF;
    padding: 8px;
}
.center-left-inner {
    border-right: 1px solid #CFCFCF;
    color: #6f6f6f;
}
.center-right {
    border-right: 1px solid #CFCFCF
}
.sidebar-title {
    font-size: 14px;
    font-weight: bold;
}
.sidebar-bar {
    border-top: 1px dotted gray;
    margin-right: 5px;
    margin-top: 15px;
}
.content-date {
    color: #999999;
    font-family: 'Trebuchet MS',Trebuchet;
    font-size: 12px;
    letter-spacing: 0.2em;
}
.content-title {
    color: #015182;
    font-family: 'Trebuchet MS',Trebuchet;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
}
.content-title:hover {
    text-decoration: underline
}
.content-desc {
    color: gray;
    font-family: 'Trebuchet MS',Trebuchet;
    font-size: 14px;
    white-space: normal;
}
.content-more {
    color: gray;
    font-family: 'Trebuchet MS',Trebuchet;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
}
.footer {
    background-color: #165379;
    border-top : 1px solid gray;
    color: #EFEFEF;
    text-align: center;
}
]]></style>
style/nature.zul
<zk>
  <zscript>
	  String themecolor = "#00502F";
  </zscript>
  <style><![CDATA[
	.nature .header {
	    background-color: ${themecolor};
	    color: white;
	    border-bottom: 1px solid #454545;
	    padding-left: 75px;
	}
	.nature .content-title {
	    color: #7F2000;
	}
	.nature .footer {
	    background-color: ${themecolor};
	    text-align: center;
	    color: #EFEFEF;
	    border-top : 1px solid gray;
	}
  ]]></style>
</zk>
style/pink.zul
<zk>
  <zscript>
	  String themecolor = "#DC006B";
  </zscript>
  <style><![CDATA[
	.pink .header {
	    background-color: ${themecolor};
	    color: white;
	    border-bottom: 1px solid #454545;
	    padding-left: 75px;
	}
	.pink .content-title {
	    color: #BE6100;
	}
	.pink .footer {
	    background-color: ${themecolor};
	    text-align: center;
	    color: #EFEFEF;
	    border-top : 1px solid gray;
	}
  ]]></style>
</zk>
style/zk.zul
<zk>
  <zscript>
	  String themecolor = "#008bb6";
  </zscript>
  <style><![CDATA[
	.zk .header {
	    background-color: ${themecolor};
	    color: white;
	    border-bottom: 1px solid #454545;
	    padding-left: 75px;
	}
	.zk .content-title {
	    color: #808080;
	}
	.zk .footer {
	    background-color: ${themecolor};
	    text-align: center;
	    color: #EFEFEF;
	    border-top : 1px solid gray;
	}
  ]]></style>
</zk>
header.zul
<vlayout>
	<separator class="header-bar" />
	<label class="header-title1" value="Another ZK Blog" />
	<label class="header-title2" value="ZK, Open Source, Ajax, Java, Web developer, Driect RIA, High Speed Low Drag" />
</vlayout>
content.zul
<vlayout>
	<a class="content-title" label="Simply Java" href="https://www.zkoss.org/product/zk" target="_zkdemo" />
	<label class="content-date" value="MONDAY, August 20, 2012" />
	<label class="content-desc">
		<attribute name="value">
			ZK is renowned for its "Ajax without JavaScript" approach since 2005, enabling developers to 
			build rich internet applications transparently without any knowledge of Ajax and JavaScript.
		</attribute>
	</label>
	<label class="content-more" value="More..." />

	<separator height="15px" />
	<a class="content-title" label="MVC &amp; MVVM" href="https://www.zkoss.org/product/zk#Pattern_Driven_Development" target="_zkdemo" />
	<label class="content-date" value="TUESDAY, July 31, 2012" />
	<label class="content-desc">
		<attribute name="value">
			The MVC pattern enforces the decoupling of View, Model, and Controller, making applications more flexible to change and 
			easier to developer. The MVVM pattern enforces further decoupling to simplify the application and to make it more flexible 
			to change. 
		</attribute>
	</label>
	<label class="content-more" value="More..." />

	<separator height="15px" />
	<a class="content-title" label="Responsive Design" href="https://www.zkoss.org/product/zk" target="_zkdemo" />
	<label class="content-date" value="MONDAY, July 30, 2012" />
	<label class="content-desc">
		<attribute name="value">
			ZK focuses on incorporating responsive design principles to afford developers the ability to create web applications 
			which have an excellent user experience on desktops and tablet devices without writing separate applications.
		</attribute>
	</label>
	<label class="content-more" value="More..." />
</vlayout>
sidebar.zul
<vlayout xmlns:h="native" vflex="1">
	<label class="sidebar-title" value="ABOUT" />
	<a href="https://www.zkoss.org/support/about" target="_zkdemo" image="/widgets/composite/template_pattern/img/press_zklogo3.png" />
	<separator class="sidebar-bar" />

	<label class="sidebar-title" value="ARCHIVES" />
	<h:ul>
		<h:li>August 2012</h:li>
		<h:li>April 2012</h:li>
		<h:li>February 2012</h:li>
		<h:li>January 2012</h:li>
		<h:li>November 2011</h:li>
		<h:li>October 2011</h:li>
		<h:li>September 2011</h:li>
	</h:ul>
	<separator class="sidebar-bar" />
	<label class="sidebar-title" value="BLOGROLL" />
	<h:ul>
		<h:li><a href="https://www.zkoss.org">ZK WEBSITE</a></h:li>
		<h:li><a href="https://www.zkoss.org/documentation">ZK Doc</a></h:li>
		<h:li>ZK STYLE GUIDE</h:li>
		<h:li>ZK SANDBOX</h:li>
		<h:li>ZK DEMO</h:li>		
	</h:ul>
	<separator class="sidebar-bar" />


	<label class="sidebar-title" value="SEARCH" />
	<hlayout>
		<textbox width="110px"></textbox>
		<button label="Go" href="https://www.zkoss.org/download/zk" target="_zkdemo"/>
	</hlayout>


</vlayout>
footer.zul
<vlayout>
	<label value="This blog is powered by ZK ${desktop.webApp.version}" />
	<label value="Copyright © 2005-2011 Potix Corporation. All rights reserved." />
</vlayout>