Read from beginning sample Chapter 2 - Online Media Library
ZK-Framework - Online Media Library
Setting up Eclipse to Develop with ZK
Setting up a New Project

Creating the Pages

After the implementation of the model classes (which is not in the scope of this book) it's time to start with implementing the ZUL pages. The first page is index.zul which should be a simple navigation page for the individual pages.

A simple way to execute the individual pages is to offer links for each page on the starting page. In a simple HTML page, we would use a href tag. In a ZUL page the preferred way is to use toolbarbutton. With the following line we add a link to add-media.zul:

    <toolbarbutton label="Add a new media" href="add-media.zul"/>

We need four navigation points, and therefore, four pages to fulfill the requirements of the CRUD feature. These four pages are:

• Add a new media item: add-media.zul
• Update an existing media item: update-media.zul
• Delete an existing media item: delete-media.zul
• Show media: show-media.zul

The navigation page is depicted in the following figure:

To have a border with a title, the window component of ZK is used. With the help of the div component, the window component is centered. The next problem we have to solve is that each link should appear on a new line. This is achieved by using the br tag from HMTL. Hence, we have to define the XHTML namespace.

The complete implementation of the page is shown below:

Next Page: Menu Page with Result Page