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 design 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.

• create components in zul
• what is layout component [link] what they used for
• some layout only in PE, EE

Apply CSS

2 ways to set

• style
• sclass

2 ways to declare CSS class

• <style>
• <?link ?>