An Online Media Library

There are some traditional applications that could be used to introduce a framework. One condition for the selection is that the application should be a CRUD (Create —Read—Update—Delete) application. Therefore, an ‘Online Media Library’, which has all four operations, would be appropriate. We start with the description of requirements, which is the beginning of most IT projects.

The application will have the following features:

• Add new media
• Update existing media
• Delete media
• Search for the media (and show the results)
• User roles (administrator for maintaining the media and user accounts for browsing the media)

In the first implementation round the application should only have some basic functionality that will be extended step by step.

A media item should have the following attributes:

• A title
• A type (Song or Movie)
• An ID which could be defined by the user
• A description
• An image

The most important thing at the start of a project is to name it. We will call our project ZK-Medialib.

Setting up Eclipse to Develop with ZK

We use version 3.3 of Eclipse, which is also known as Europa release. You can download the IDE from http://www.eclipse.org/downloads/. We recommend using the version “Eclipse IDE for Java EE Developers”.

First we have to make a file association for the .zul files. For that open the Preferences dialog with Window | Preferences. After that do the following steps:

1. Type Content Types into the search dialog.
2. Select Content Types in the tree.
3. Select XML in the tree.
4. Click Add and type *.zul.
5. See the result.

The steps are illustrated in the picture below:

With these steps, we have syntax highlighting of our files. However, to have content assist, we have to take care about the creation of new files. The easiest way is to set up Eclipse to work with zul.xsd.

For that open the Preferences dialog with Window | Preferences. After that do the following steps:

1. Type XML Catalog into the search dialog.
2. Select XML Catalog in the tree.
3. Press Add and fill out the dialog (see the second dialog below).
4. See the result.

Now we can easily create new ZUL files with the following steps:

1. File | New | Other, and select XML:
2. Type in the name of the file (for example hello.zul).
3. Press Next.
4. Choose Create XML file from an XML schema file:
5. Press Next.
6. Select Select XML Catalog entry.
7. Now select zul.xsd:
8. Now select the Root Element of the page (e.g. window).
9. Select Finish.

Now you have a new ZUL file with content assist. Go into the generated attribute element and press Alt+Space.

Setting up a New Project

The first thing we will need for the project is the framework itself. You can download the ZK framework from http://www.zkoss.org. At the time of writing, the latest version of ZK is 2.3.0. After downloading and unzipping the ZK framework we should define a project structure. A good structure for the project is the directory layout from the Maven project (http://maven.apache.org/). The structure is shown in the figure below.

The directory lib contains the libraries of the ZK framework. For the first time it’s wise to copy all JAR files from the ZK framework distribution. If you unzip the distribution of the version 2.3.0 the structure should look like the figure below. The structure below shows the structure of the ZK distribution. Here you can get the files you need for your own application.

For our example, you should copy all JAR files from lib, ext, and zkforge to the WEB-INF/lib directory of your application. It’s important that the libraries from ext and zkforge are copied direct to WEB-INF/lib. Additionally copy the directories tld and xsd to the WEB-INF directory of your application.

Now after the copy process, we have to create the deployment descriptor (web.xml) for the web application. Here you can use web.xml from the demo application, which is provided from the ZK framework. For our first steps, we need no zk.xml (that configuration file is optional in a ZK application).

The application itself must be run inside a JEE (Java Enterprise Edition) Webcontainer. For our example, we used the Tomcat container from the Apache project (http://tomcat.apache.org). However, you can run the application in each JEE container that follows the Java Servlet Specification 2.4 (or higher) and runs under a Java Virtual Machine 1.4 (or higher). We create the zk-media.xml file for Tomcat, which is placed in conf/Catalina/localhost of the Tomcat directory.

<Context path="/zk-media" docBase="D:/Development/workspaces/
workspace-zk-medialib/ZK-Medialib/src/main/webapp" debug="0"
privileged="true" reloadable="true" crossContext="false">
<Logger className="org.apache.catalina.logger.FileLogger"
directory="D:/Development/workspaces/workspace-zk-medialib/logs/
ZK-Medialib" prefix="zkmedia-" suffix=".txt" timestamp="true"/>
</Context>

With the help of this context file, we can directly see the changes of our development, since, we set the root of the web application to the development directory.