Chapter 3: User Interface and Layout

Design the Layout

Building an application usually starts from building user interface, and building user interface usually starts from designing the layout. ZK provides various components for different layout requirements, and you can even configure a component's attribute to adjust layout details.

Layout Requirement

The image above is the target layout we are going to create and this kind of design is very common in web applications. The header at the top contains application icon, title, and user's name at the right most corner. The footer at the bottom contains general information. The sidebar on the left contains 3 links that redirect you to 3 different URLs. The central area displays the current function.

ZK provides various layout components , and each of them has different styles. You can use a layout component alone or combine them together to build more complex layout. According the requirement mentioned, Border Layout fits our requirement most since it has 5 areas: north, west, center, east, and south. We can use north as header, west as sidebar, south as footer, and center as main function display.

Border Layout

Write a ZUL

To create a component in ZK, we need to use a XML-format language named ZUL and all files written in ZUL should have the file extension ".zul". First, Create a new text file with name index.zul, and type the following content:

<zk>
	<borderlayout hflex="1" vflex="1">
		<north height="100px" border="none" >
			
		</north>
		<west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
			
		</west>
		<center id="mainContent" autoscroll="true">
			
		</center>
		<south height="50px" border="none">
			
		</south>
	</borderlayout>
</zk>

Apply CSS

2 ways to set

• style
• sclass

2 ways to declare CSS class

• <style>
• <?link ?>