ZK Developer's Guide

Online Media Library
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: ). 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. Upload a image for the media.).
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:
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. binds the following input to the name property to object;
note: we have to create an instance object in the zscript block).
[ 56 ]