Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Channels ▼

Web Development

The ZK Framework

Source Code Accompanies This Article. Download It Now.

Your Own ZUL Components

JSP technology lets you define custom tags by writing JSP fragments in a separated file. In a similar way, you can create new ZUL components by encapsulating pieces of ZUL or ZHTML code into a file. Then you can import such definitions to your own page, name them by some alias, and use them in the same way as standard ZUL components. Similar to JSP custom tags, you can pass parameters to a component defined in such a way by setting up attributes of the tag. These parameters are available in the code of the component—as variables with the same names as the attributes, but preceded by the prefix arg. Listing Twelve is a ZHTML example component, while Listing Thirteen (available online) shows its use on a ZUL page.

Integration with HTML, JSP, and JSF

ZUL code can be easily merged with HTML; for instance, to arrange ZUL controls with the help of HTML tables, or to use specific functionality such as sending e-mails from web pages. There are two methods for mixing together ZUL and HTML code. First, XHTML tags can be embedded into ZUL documents after declaring their appropriate namespace (see Listing Fourteen; available online). The second technique relies on using a special ZUL <html> tag and with a fragment of HTML pasted in as its content (Listing Fifteen, available online).

Today's applications are usually built using many different technologies. ZUL pages allow easy integration with the existing code of the view layer, created via JSP or JSF. This is possible by applying <include> tags on JSP pages, which incorporate ZUL fragments; for example:

<jsp:include page="/my/embedded.zul"/>

ZUL pages can also include other resources served by a web container, such as servlets, JSP or JSF pages, or other ZULs or richlets. This is also accomplished by applying the <include> tag:

<include src="/my/servlet"/>

Integration with External AJAX Components

Several open-source packages supporting the creation of advanced web interfaces are distributed with the ZK framework. Among them are an interface for Google Maps, JFreeChart (for generating advanced diagrams), the HTML graphic FCKEditor, and a border layout manager from the Ext JS library. They are integrated with the framework by being wrapped in ZUL tags. Listing Sixteen (available online) is an example of creating data presentations with the help of the <chart> tag, which gives access to JFreeChart functionality.


ZK seems to be one of the more interesting frameworks to come along and make web programming easier. Its strong suite includes browser interoperability, an event-handling paradigm, MDI functionality, and a set of neat standard controls. And, according to test results, its performance looks decent. Emerging features include a ZK client for mobile devices and an expected Eclipse plug-in for the graphic design of ZULs. Lastly, ZK is intuitive and easy to use.

Among the disadvantages, there is incomplete support for keyboard navigation over a GUI (for instance, for a menu component) and occasional problems with the localization of standard messages hidden in JavaScript files.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.