Building a CRUD Application with the ZK Framework

Exclusive offer: get 50% off this eBook here
ZK Developer's Guide

ZK Developer's Guide — Save 50%

Developing responsive user interfaces for web applications using Ajax, XUL, and the open source ZK rich web client development framework

£14.99    £7.50
by Hans-Jurgen Schumacher,Markus Staeuble | May 2008 | AJAX Java Open Source Web Development

With the help of this article by Hans-Jurgen Schumacher and Markus Staeuble, you should be able to build your own applications based on the ZK framework. First we will create the setup of the ZK application in the web container. After the preparation of the project, we will define some model classes to store data. After these cornerstones, we will design and implement the pages with the ZK framework.

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.

Building a CRUD Application with the ZK Framework

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:

Building a CRUD Application with the ZK Framework

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.

Building a CRUD Application with the ZK Framework
Building a CRUD Application with the ZK Framework

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

  1. File | New | Other, and select XML:
  2. Building a CRUD Application with the ZK Framework

  3. Type in the name of the file (for example hello.zul).
  4. Press Next.
  5. Choose Create XML file from an XML schema file:
  6. Building a CRUD Application with the ZK Framework

  7. Press Next.
  8. Select Select XML Catalog entry.
  9. Now select zul.xsd:
  10. Building a CRUD Application with the ZK Framework

  11. Now select the Root Element of the page (e.g. window).
  12. Building a CRUD Application with the ZK Framework

  13. Select Finish.

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

Building a CRUD Application with the ZK Framework

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.

Building a CRUD Application with the ZK Framework

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.

Building a CRUD Application with the ZK Framework

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.

 

ZK Developer's Guide Developing responsive user interfaces for web applications using Ajax, XUL, and the open source ZK rich web client development framework
Published: March 2008
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

Deployment of the demo application

The folder structure of the demo application is the Maven structure (http://maven.apache.org/). To deploy the application, create a new subdirectory (e.g. zk-media-lib) in the webapps directory of Tomcat and copy everything from the webapp directory of the application to this new subdirectory. Don't forget to copy the libraries, too. After that, you can start your Tomcat and run the application with http://localhost:8080/zk-media-lib (if your Tomcat is running on port 8080).

Building a CRUD Application with the ZK Framework

Creating the Pages

After the implementation of the model classes, 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:

Building a CRUD Application with the ZK Framework

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:

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:html="http://www.w3.org/1999/xhtml">
<div align="center">
<window title="Welcome to the online media library" border=
"normal" width="300px">
<div align="left" style="margin-left:30pt;margin-top:10pt;
margin-bottom:10pt">
<toolbarbutton label="Add a new media" href="add-media.zul"/>
<html:br />
<toolbarbutton label="Update a media" href="update-media.zul"/>
<html:br />
<toolbarbutton label="Delete a media" href="delete-media.zul"/>
<html:br />
<toolbarbutton label="Show media" href="show-media.zul"/>
</div>
</window>
</div>
</zk>

A better solution for the scenario is to combine the result page and the menu on one page. Therefore, we need no extra page for showing the media. The redesigned first page (index.zul) is shown in the figure below:

Building a CRUD Application with the ZK Framework

For displaying the result in the first step, we use the listbox component. The first column is an image with a link to remove a media item. Here, we can use the toolbarbutton component with the image attribute.

<toolbarbutton image="images/trashcan.gif" />

To define the header of the grid, we can use the listhead component in combination with the listheader component.

<listhead>
<listheader label="" />
<listheader label="Id" />
<listheader label="Title" />
</listhead>

To represent a list of data you can use the listbox component or the grid component. To decide whether to use the grid component or the listbox component you have to define what you want to do with the data. A grid component is designed for showing data. The main use of listbox is to show data that should be selected by the user.

The data for the listbox component is provided from the underlying model classes. The model classes are simple POJO (Plain Ordinary/Old Java Objects).

How to use the ${each} variable inside a zscript block
The ${each} is an Expression Language variable, and therefore, it cannot be used directly inside a zscript block. But in some cases (especially in event handlers) it's very useful to use ${each}. It's possible to define a custom attribute, and place the variable in the custom-attributes map for the component. With the ${each} is stored with key thename in the mentioned map. In the zscript block, it's now possible to access this object with componentScope.get("thename").

The data in the listbox component is shown with the help for the forEach attribute in combination with the ${each} EL (Expression Language) variable.

<listitem forEach="${list}">
<listcell style="width:30px">
<toolbarbutton image="images/trashcan.gif"
tooltip="tooltip.remove">
<custom-attributes myMedia="${each}"/>
<attribute name="onClick"><![CDATA[
dao.removeMedia(componentScope.get("myMedia"));
Executions.sendRedirect("index.zul");
]]>
</attribute>
</toolbarbutton>
</listcell>
<listcell label="${each.id}"/>
<listcell label="${each.title}"/>
</listitem>

The full implementation of the redesigned page is given below. Here, we want to mix elements from XHTML with elements from ZUL. For that we need a clear separation of the two worlds. In an XML file, there is an element that helps us to do this separation, the namespace. If we use a namespace we have to add a prefix to each tag from that namespace (e.g.

). For further information about namespaces visit http://www.w3.org/TR/REC-xml-names/.

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:html="http://www.w3.org/1999/xhtml">
<div align="center">
<window title="Welcome to the online media library"
border="normal" width="300px">
<div align="left" style="margin-left:30pt;margin-top:10pt;
margin-bottom:10pt">
<toolbarbutton label="Add a new media"
href="add-media.zul"/>
<html:br />
<toolbarbutton label="Update a media"
href="update-media.zul"/>
</div>
</window>
</div>
<zscript><![CDATA[
import java.util.Collection;
import com.packtpub.zk.media.dao.*;
]]>
</zscript>
<html:br/>
<listbox mold="paging">
<zscript>
MediaDAO dao = MediaDAOFactory.getDAO();
Collection list = dao.getMedia();
</zscript>
<listhead>
<listheader label="" />
<listheader label="Id" />
<listheader label="Title" />
</listhead>
<listitem forEach="${list}">
<listcell style="width:30px">
<toolbarbutton image="images/trashcan.gif"
tooltip="tooltip.remove">
<custom-attributes myMedia="${each}"/>
<attribute name="onClick"><![CDATA[
dao.removeMedia(componentScope.get("myMedia"));
Executions.sendRedirect("index.zul");
]]>
</attribute>
</toolbarbutton>
</listcell>
<listcell label="${each.id}"/>
<listcell label="${each.title}"/>
</listitem>
</listbox>
<popup id="tooltip.remove">
Remove the media.
</popup>
</zk>

How to implement a tooltip
One aim in the design of user interfaces should be 'as easy as possible'. However, the user should also be guided with some help by the application itself on his or her first touch. One help could be a tooltip for the elements. For this, most of the ZK elements have the tooltip attribute (e.g: <button label="Upload" tooltip="tooltip.upload">). The tooltip itself is realized with the help of the popup component. That means, beyond the tooltip attribute, you have to provide a popup implementation for the tooltip (e.g. <popup id="tooltip.upload">Upload a image for the media.</popup>).

Sometimes we may want to provide some error handling for the page, especially, if we have to add a warning dialog before we really remove a media item from the underlying persistent storage.

The last screen that we want to implement in the first round is the page for adding new media.

The following figure shows the page:

Building a CRUD Application with the ZK Framework

How to store data in the model classes
On one side, we have the ZUL page, and on the other side the model classes. In the case of entering data, the programmer would want to use the model class directly to store the data. For this, we need some "glue" code. The ZK framework solves that by binding of data with annotations in the ZUL pages. To use such annotations we have to define a namespace for them: xmlns:a=http://www.zkoss.org/2005/zk/annotation. Additionally, we also have to initiate the mechanism of annotation in the page. This is done with a special init class (org.zkoss.zkplus.databind.AnnotateDataBinderInit). Now the page is ready to bind the input directly to the model classes. To bind data, we have to place an annotation over a normal element (e.g. <a:bind value="object.name" /> binds the following input to the name property to object; note: we have to create an instance object in the zscript block).

The uploading of an image is done with the Fileupload dialog from the ZK framework.

If you want to upload more than one file within one dialog you should use the Fileupload.get(int) method. For example Fileupload.get(5) presents a dialog with five fields for five uploads.

First we have to define a button component where we connect the onClick event (<attribute name="onClick">) with the opening of the dialog.

<button label="Upload" tooltip="tooltip.upload">
<attribute name="onClick">
{
Object media = Fileupload.get();
if (media instanceof org.zkoss.image.Image)
{
org.zkoss.image.Image img = (org.zkoss.image.Image) media;
image.setContent(img);
imagegrid.setWidth(""+(img.getWidth()+10)+"px");
}
else if (media != null)
Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);
}</attribute>
</button>

If the uploaded file is an unacceptable media we would like to provide an error message to the user. For that, we use Messagebox from the ZK framework.

Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);

The mentioned Messagebox is shown as a modal dialog. An example of the appearance in the case of an error is shown in the following figure.

Building a CRUD Application with the ZK Framework

The gray background comes from the ZK framework. You have to acknowledge the message by clicking the OK button.

After the upload of a correct image it is shown directly, and without reloading the page. To set the image on the correct component, we address the component with id. For that we defined an image component with id="image".

<image id="image" />

The field id is extended with two validations. The first validation is done while the user inserts some input into the field. For that we provided some code for the onChanging handler. If the user types only white spaces there is the warning not valid on the right side. Otherwise the green note valid is presented.

<attribute name="onChanging">
if (event.getValue().trim().length() > 0)
{
idstatus.setValue("valid");
idstatus.setStyle("color:green");
}
else
{
idstatus.setValue("not valid");
idstatus.setStyle("color:red");
}
</attribute>

The next validation is done in the onChange handler.

<attribute name="onChange">
if (self.value != null &amp;&amp; self.value.trim().length() == 0)
{
self.value = "";
throw new WrongValueException(self, "The id shouldn't be the
empty string.");
}
</attribute>

 

ZK Developer's Guide Developing responsive user interfaces for web applications using Ajax, XUL, and the open source ZK rich web client development framework
Published: March 2008
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

We use the possibility to throw a org.zkoss.zk.ui.WrongValueException. If this exception occurs the framework shows an error message linked to the concerned field. The following figure shows such an error message.

Building a CRUD Application with the ZK Framework

It's important to say that the code in an event handler or a zscript must be valid XML, because a ZUL page is an XML page. Here, we are confronted with the problem of using some special characters (e.g. & or <). We have two possibilities to use such characters. The first is to use valid XML entities (e.g. &amp;&amp; for &&) or we can embed the code in a CDATA block (<![CDATA[ … ]]>). For more readable code it's recommended to use the CDATA block variant.

The complete implementation of add-media.zul is presented below:

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="mainwin"
xmlns:a="http://www.zkoss.org/2005/zk/annotation">
<zscript>
import com.packtpub.zk.media.model.MediaType;
import com.packtpub.zk.media.dao.*;
</zscript>
<!-- Component to describe the media -->
<hbox>
<grid width="700px" height="320px">
<rows>
<row>
<label value="Title"/>
<a:bind value="media.title"/>
<textbox width="80%" id="titlecontent" tooltip="tooltip.title">
<attribute name="onChanging">
if (event.getValue().length() == 0)
{
titlecount.setValue("");
}
else
{
//titlecount.setValue(""+event.getValue().length());
titlecount.setValue(com.packtpub.zk.media.
MyDataProvider.next());
}
</attribute>
</textbox>
<label id="titlecount" style="color:red" />
</row>
<row>
<label value="Type" />
<radiogroup>
<zscript>
MediaType[] types ={MediaType.Song,MediaType.Movie};
</zscript>
<a:bind value="media.type" />
<radio label="${each.screenText}"
tooltip="tooltip.media.${each.screenText}"
forEach="${types}" value="${each}"/>
</radiogroup>
<label />
</row>
<row>
<label value="ID" />
<a:bind value="media.id"/>
<textbox width="80%" tooltip="tooltip.id">
<attribute name="onChanging">
if (event.getValue().trim().length() > 0)
{
idstatus.setValue("valid");
idstatus.setStyle("color:green");
}
else
{
idstatus.setValue("not valid");
idstatus.setStyle("color:red");
}
</attribute>
<attribute name="onChange">
if (self.value != null &amp;&amp;
self.value.trim().length() == 0)
{
self.value = "";
throw new WrongValueException(self, "The id shouldn't
be the empty string.");
}
</attribute>
</textbox>
<label id="idstatus" style="color:red" value="not valid"/>
</row>
<row valign="top">
<label value="Description"/>
<textbox height="200px" width="50%"
tooltip="tooltip.description"/>
<label />
</row>
<row valign="top">
<button label="add media">
<attribute name="onClick"><![CDATA[
dao.addMedia(media);
Executions.sendRedirect("index.zul");
]]>
</attribute>
</button>
</row>
</rows>
</grid>
<grid height="320px" id="imagegrid">
<rows>
<row height="284px" valign="top">
<image id="image"/>
</row>
<row>
<button label="Upload" tooltip="tooltip.upload">
<attribute name="onClick">
{
Object media = Fileupload.get();
if (media instanceof org.zkoss.image.Image)
{
org.zkoss.image.Image img = (org.zkoss.image.Image)
media;
image.setContent(img);
imagegrid.setWidth(""+(img.getWidth()+10)+"px");
}
else if (media != null)
Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);
}
</attribute>
</button>
</row>
</rows>
</grid>
</hbox>
<!-- Initialize the model objects for using with anotations -->
<zscript>
//prepare the media instance
com.packtpub.zk.media.model.Media media =
com.packtpub.zk.media.model.MediaFactory.create();
MediaDAO dao = MediaDAOFactory.getDAO();
</zscript>
<!-- tooltip definition -->
<popup id="tooltip.title">
The title of the media.
</popup>
<popup id="tooltip.media.Song">
A Song.
</popup>
<popup id="tooltip.media.Movie">
A Movie.
</popup>
<popup id="tooltip.id">
The id for the media. That is a user defined id. The id
must be unique.
</popup>
<popup id="tooltip.description">
The description for the media.
</popup>
<popup id="tooltip.upload">
Upload a image for the media.
</popup>
</window>

How to redirect to other pages
It is often necessary to redirect to another page after an action is executed. In that case, the ZK framework offers the general utility class org.zkoss.zk.ui.Executions. This method offers the sendRedirect method. In a ZUL page, you could directly access the Executions instance and redirect to another page (e.g. Exectutions.sendRedirect('index.zul')). A redirect sends a response to the client giving it a new URL. The client then requests the new URL. A forward happens internally in the servlet container. The target is given the chance to respond to the original request. If you use the browser's back button the same request is sent again.

For the first version of the update, we extend index.zul with a textbox component beside a toolbarbutton of Update a media.

Building a CRUD Application with the ZK Framework

The extended index.zul is shown below:

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:html="http://www.w3.org/1999/xhtml">
<div align="center">
<window title="Welcome to the online media library" border="normal"
width="500px">
<div align="left" style="margin-left:30pt;margin-top:10pt;
margin-bottom:10pt">
<toolbarbutton label="Add a new media" href="add-media.zul"/>
<html:br />
<toolbarbutton label="Update a media">
<attribute name="onClick"><![CDATA[
sessionScope.put("id", mediaid.getValue());
Executions.sendRedirect("update-media.zul");
]]>
</attribute>
</toolbarbutton>
<textbox id="mediaid"></textbox>
</div>
</window>
</div>
<zscript><![CDATA[
import java.util.Collection;
import com.packtpub.zk.media.dao.*;
]]>
</zscript>
<html:br/>
<listbox mold="paging">
<zscript>
MediaDAO dao = MediaDAOFactory.getDAO();
Collection list = dao.getMedia();
</zscript>
<listhead>
<listheader label="" />
<listheader label="Id" />
<listheader label="Title" />
</listhead>
<listitem forEach="${list}">
<listcell style="width:30px">
<toolbarbutton image="images/trashcan.gif"
tooltip="tooltip.remove">
<custom-attributes myMedia="${each}"/>
<attribute name="onClick"><![CDATA[
dao.removeMedia(componentScope.get("myMedia"));
Executions.sendRedirect("index.zul");
]]>
</attribute>
</toolbarbutton>
</listcell>
<listcell label="${each.id}"/>
<listcell label="${each.title}"/>
</listitem>
</listbox>
<popup id="tooltip.remove">
Remove the media.
</popup>
</zk>

The interesting point is the extended toolbarbutton component. The data is transferred with the sessionScope instance.

<toolbarbutton label="Update a media">
<attribute name="onClick"><![CDATA[
sessionScope.put("id", mediaid.getValue());
Executions.sendRedirect("update-media.zul");
]]>
</attribute>
</toolbarbutton>

The page update-media.zul is similar to add-media.zul except that the creation of a media instance is replaced with retrieving of the media from sessionScope.

For completeness the full implementation of update-media.zul is shown next.

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="mainwin" xmlns:a="http://www.zkoss.org/2005/zk/annotation">
<zscript>
import com.packtpub.zk.media.model.MediaType;
import com.packtpub.zk.media.dao.*;
</zscript>
<!-- Component to describe the media -->
<hbox>
<grid width="700px" height="320px">
<rows>
<row>
<label value="Title"/>
<a:bind value="media.title"/>
<textbox width="80%" id="titlecontent"
tooltip="tooltip.title">
<attribute name="onChanging">
if (event.getValue().length() == 0)
{
titlecount.setValue("");
}
else
{
//titlecount.setValue(""+event.getValue().length());
titlecount.setValue(com.packtpub.zk.media.
MyDataProvider.next());
}
</attribute>
</textbox>
<label id="titlecount" style="color:red" />
</row>
<row>
<label value="Type" />
<radiogroup>
<zscript>
MediaType[] types = {MediaType.Song,MediaType.Movie};
</zscript>
<a:bind value="media.type" />
<radio label="${each.screenText}"
tooltip="tooltip.media.${each.screenText}"
forEach="${types}" value="${each}"/>
</radiogroup>
<label />
</row>
<row>
<label value="ID" />
<a:bind value="media.id"/>
<textbox width="80%" tooltip="tooltip.id">
<attribute name="onChanging">
if (event.getValue().trim().length() > 0)
{
idstatus.setValue("valid");
idstatus.setStyle("color:green");
}
else
{
idstatus.setValue("not valid");
idstatus.setStyle("color:red");
}
</attribute>
<attribute name="onChange">
if (self.value != null &amp;&amp;
self.value.trim().length() == 0)
{
self.value = "";
throw new WrongValueException(self, "The id shouldn't
be the empty string.");
}
</attribute>
</textbox>
<label id="idstatus" style="color:red" value="not valid"/>
</row>
<row valign="top">
<label value="Description"/>
<textbox height="200px" width="50%"
tooltip="tooltip.description"/>
<label />
</row>
<row valign="top">
<button label="add media">
<attribute name="onClick"><![CDATA[
dao.addMedia(media);
Executions.sendRedirect("index.zul");
]]>
</attribute>
</button>
</row>
</rows>
</grid>
<grid height="320px" id="imagegrid">
<rows>
<row height="284px" valign="top">
<image id="image"/>
</row>
<row>
<button label="Upload" tooltip="tooltip.upload">
<attribute name="onClick">
{
Object media = Fileupload.get();
if (media instanceof org.zkoss.image.Image)
{
org.zkoss.image.Image img = (org.zkoss.image.Image)
media;
image.setContent(img);
imagegrid.setWidth(""+(img.getWidth()+10)+"px");
}
else if (media != null)
Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);
}
</attribute>
</button>
</row>
</rows>
</grid>
</hbox>
<!-- Initialize the model objects for using with anotations -->
<zscript><![CDATA[
//prepare the media instance
MediaDAO dao = MediaDAOFactory.getDAO();
com.packtpub.zk.media.model.Media media =
dao.getMediaById(sessionScope.get("id"));
]]>
</zscript>
<!-- tooltip definition -->
<popup id="tooltip.title">
The title of the media.
</popup>
<popup id="tooltip.media.Song">
A Song.
</popup>
<popup id="tooltip.media.Movie">
A Movie.
</popup>
<popup id="tooltip.id">
The id for the media. That is a user defined id. The id must not be
unique.
</popup>
<popup id="tooltip.description">
The description for the media.
</popup>
<popup id="tooltip.upload">
Upload a image for the media.
</popup>
</window>

Now we have a small, but running CRUD application with the ZK framework.

Summary

In this article, we started implementing a CRUD (Create—Read—Update—Delete) application. Before starting the implementation of the application, we created the setup of the ZK application in the web container. After the preparation of the project, we defined some model classes to store data.

After these cornerstones, we designed and implemented the pages with the ZK framework. We have not used the full functionality of the framework here, but showed some solutions for daily work with it.

About the Author :


Hans-Jurgen Schumacher studied mathematics at the University of Karlsruhe, Germany. Since 17 years he is working as a Software Developer and Architect. Right now he is in the position of a Senior Architect for J2EE. One of his special fields are GUIs for web applications as well as Improvements in the Software Build process.

Markus Staeuble is actually working as Senior Software Engineer. He has a Master’s degree in Computer Science. He started with Java in the year 1999, after which he has earned many experience in building enterprise java systems, especially web applications. He has a deep knowledge of the java platform and the tools and frameworks around Java.



Books From Packt

AJAX and PHP: Building Responsive Web Applications
AJAX and PHP: Building Responsive Web Applications

Learning jQuery
Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Google Web Toolkit GWT Java AJAX Programming
Google Web Toolkit GWT Java AJAX Programming

Java EE 5 Development using GlassFish Application Server
Java EE 5 Development using GlassFish Application Server5

Professional Plone Development
Professional Plone Development

OpenCms 7 Development
OpenCms 7 Development

WordPress Theme Design
WordPress Theme Design

Drupal 5 Themes
Drupal 5 Themes

 


 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software