By Ronald Boyd,2014-10-15 15:21
9 views 0



     ZK Developer's Guide

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

     Markus St?uble Hans-J??rgen Schumacher


     ZK Developer's Guide

     Copyright ? 2008 Packt Publishing

     All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

     First published: March 2008

     Production Reference: 1170308

     Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-847192-00-4


     Cover Image by Vinayak Chittar (vinayak.chittar@gmail.com)


     Authors Markus St?uble Hans-J??rgen Schumacher Indexer Reviewers Razvan Remus Popovici Christianto Sahat Kurniawan Hutasoit Development Editor Rashmi Phadnis Technical Editors Bhupali Khule Shailendra Shetye Editorial Team Leader Mithil Kulkarni Proofreader Chris Smith Production Coordinator Aparna Bhagat Cover Designer Aparna Bhagat Monica Ajmera Project Manager Abhijeet Deobhakta

     About the Authors

     Markus St?uble is currently working as Senior Software Engineer. He has a

     Master's degree in Computer Science. He started with Java in the year 1999, since when he has gained much 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.

    There are several people who have supported the writing of my first book. But there is especially one person to whom I want to say thank you, my wife Maria Elena. She supported the writing very much and gave me the power and energy to finish that work.

     Hans-J??rgen Schumacher studied mathematics at the University of Karlsruhe,

     Germany. For 17 years he has been working as a Software Developer and Architect. Right now he has 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. I would like to thank my son Samuel, who was just born at the right time and gave me the power to finish this book.

     About the Reviewers

     Razvan Remus Popovici owns a BS degree in Computer Science from

     "Transylvania" University of Brasov, Romania in 1999. His software development experience consists of more than 10 years in application and database design, client-server or multi-tier application development in various domains such as networking, communications, accounting, statistics, management, or bioinformatics. His entrepreneurial background consists in a start-up with an accounting software company in Romania in 1996 (which is still selling!) and experience as an independent contractor in Germany. Currently employed full time at Wayne State University in Detroit, Razvan is involved in architecture, design, and development of OntoTools, a software application for statistics analysis of microarray experiments used by genetics researchers. Razvan owns Software Ingenieurbuero Popovici in Germany; the company is a subcontractor for development of a product that enables enterprises to implement ITIL (Information Technology Infrastructure Library) concepts. Previously, Razvan worked for many companies, such as Siemens, Nokia Siemens Netwoks, matrix42 AG, HLP, Exody GmbH, ROUTE66 BV, and RCS SA. I would like to thank my wife Mihaela for her support while reviewing this book, and my parents.

     Christianto Sahat Kurniawan Hutasoit is an independent Java developer. He

     has been playing with Java and JEE since 2001, and is already working for different Java projects in Indonesia, Germany, and Singapore. He can be reached at csahat@gmail.com. For my mum, S. Resmiana Limbong. Thanks for your struggle.

     Table of Contents

     Preface Chapter 1: Getting Started with ZK

     What is ZK? XHTML XUL ZUML First Step: Say Hello to ZK Inside ZK?ªHow ZK Works The Three Relatives?ªDesktop, Page, and Component Identification in ZK Loading and Updating a ZK Page

     Phase: Page Initial Phase: Component Creation Phase: Event

    Processing Phase: Rendering Phase: Request Processing Phase: Event Processing Phase: Rendering

     6 7 7 8 9 15 16 17 19

     1 5

     Events in ZK?ªListening and Processing

     ZUML ?C ZK User Interface Markup Language

     Molds ZK Elements Layout Techniques Separation of Concerns

     What is the Priority??ªThe Order of Event Processing How Can We Parallelize Event Listeners? Event Processing Thread?ªInitialize and Cleanup Event Types


     19 21 22 22 23 23 23 25 26 28 28 30 32 34 36


     Configuration and Deployment Configuration of web.xml Configuration of zk.xml

     36 36 39

     Table of Contents

     Deployment Summary

     Deployment of ZK Applications with Maven

     39 41


     Chapter 2: Online Media Library

     An Online Media Library Setting up Eclipse to Develop with ZK Setting up a New Project Creating the Pages Summary AJAX?ªLive Data Updating at the Right Place Optimize the Result Presentation Improve Navigation Inside the Data Some Candies for the User Summary


     43 44 49 51 67 69 75 77 79 84 91

     Chapter 3: Extending the Online Media Library


     Chapter 4: Is it on the Desktop or on the Web?

     Adding Drag-and-Drop Adding a Login Page Extending Add and Update Internationalization with the ZK Framework Summary Integration with the Spring Framework Hibernate JasperReport ZK Mobile ZK JSP Tags Library ZK JSF Components Binding to a Backing Bean Summary

     ValueBinding of a component

     93 100 109 121 123


     Chapter 5: Integration with Other Frameworks


     125 132 133 133 135 136 137 138


     Chapter 6: Creating Custom Components

     Cascading Style Sheets (CSS) Macro Components Creating Our Own

Component Summary ZK-Bench


     139 142 146 154 155

     Chapter 7: Development Tools for the ZK Framework

     [ ii ]


     Table of Contents

     Dynamic Preview of Pages The Palette Databinding Deployment Snippets Project Explorer Snapshot Gallery Summary

     156 156 157 157 158 158 159 159

     Appendix A: Configuration Files in ZK

     WEB.XML zk.xml Configuration of ZK.XML

     <richlet> Tag

     Tag <log> Tag <desktop-config> Tag <el-config> Tag <language-config> Tag Tag Tag <zscript-config> Tag <error-page> Tag



     161 161 163

     163 163 164 164 165 165 165 165 167 167 167



     [ iii ]


     ZK is an open-source web development framework that enables web applications to have the rich user experiences and low development costs that desktop applications have had for years. ZK includes an AJAX-based event-driven engine, rich sets of XML User Interface Language (XUL), and XHTML components, and a markup language (ZUML).The ZK rich client framework takes the so-called server-centric approach: the content synchronization of components and the event pipelining between clients and servers are automatically done by the engine and AJAX plumbing codes are completely transparent to web application developers. Therefore, the end users get rich user interfaces with similar engaged interactivity and responsiveness to that of desktop applications, while for programmers, development remains similar in simplicity to that of desktop applications

     What This Book Covers

     In Chapter 1 we give an introduction to, and take a look behind the ZK framework. In the last section of this chapter, we show some important issues from the ZK User Interface Language (ZUML). In Chapter 2 we will implement a CRUD (Create?ªRead?ªUpdate?ªDelete) application. We will also design and implement the pages with the ZK framework.

     At the beginning of Chapter 3, we start with a simple CRUD application. The first thing we do here is to add some AJAX features to the application

    (live data). Here, we will learn many cornerstones provided by the ZK framework, and that we only have to implement some interfaces to use these features. We will move the application from a mixed code approach to a Model-View-Controller Architecture. Chapter 4 deals with the end of the third phase in the development of a CRUD application with the AJAX ZK framework. We start with a simple application, and extend it step by step. The application now has many features that you will need in other applications as well.


     Chapter 5 introduces the advantages and disadvantages of ZK. Then we will see how to integrate ZK with the Spring Framework and also why it is useful to do so. We will then move on to Hibernate and JasperReport. In Chapter 6 we will learn how to customize existing components. We have the ability to use styles that we know from HTML to change the layout of the components. Additionally we will see that it is possibile to build new components (macro components) on the basis of existing components. And, last but not least, in the last section of this chapter we will learn how to create a complete custom component that is based on a .dsp file. Chapter 7 introduces zk-bench. Zk-bench is a very useful tool and it supports much more than just designing ZUL pages. It simplifies the development of web applications a lot and it's build around the ZK framework. The Appendix A contains information about the configuration files, which are important in the context of a ZK application. You should use this appendix in conjunction with Chapter 1 to get a better understanding of how to configure your ZK application.

     What You Need for This Book

     ? ? ?

     The following is the list of software that you need to install and configure in order to start working with ZK: ZK 2.3.0 Tomcat version 5.5.x (apache.tomcat.org) The demo application from ZK 2.3.0 is a simple WAR file. Just copy the WAR file into the webapps directory of the tomcat installation. Eclipse version 3.3

     Who is This Book For?

     This book is a Developer's Guide that steps you through the ZK framework with examples. It starts with installing and configuring ZK and takes you on to integrate it with other frameworks. By the time you are through the book you will be able to build an application on your own.


     In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.



     There are three styles for code. Code words in text are shown as follows: "In the sample there is a class InitSample in a package sample used." A block of code will be set as follows:

     <zscript><![CDATA[ import sample.InitSample; ]]> </zscript>

     When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:

     if (event.getValue().length() > 0 &&

    event.getValue().trim() .length() > 0)

    { buttonToSayHello.setVisible(true); } else

    { buttonToSayHello.setVisible(false); }

     New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "When the user clicks on the button Start the thread, the thread starts doing the work asynchronously".

     Important notes appear in a box like this.

     Tips and tricks appear like this.

     Reader Feedback

     Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply drop an email to feedback@packtpub.com, making sure to mention the book title in the subject of your message.



     If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email suggest@packtpub.com. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

     Customer Support

     Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

     Downloading the Example Code for the Book

     The downloadable files contain instructions on how to use them.

     Visit http://www.packtpub.com/files/code/2004_Code.zip to directly downlad the example code.


     Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books?ªmaybe a mistake in text or code?ªwe would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.

    com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.


     You can contact us at questions@packtpub.com if you are having a problem with some aspect of the book, and we will do our best to address it.


     Getting Started with ZK

     The world of web application development grows and grows. We can read many articles and books that explain how to develop a web application. Nearly every week a new framework emerges in the sphere of development. However, each new technology and framework means that we have to learn it. Without learning, it's not possible to leverage the complete power of the chosen technique. There are some reasons for the emergence of such a wide range of possibilities for developing a web application. The evolution of technology is one reason, and another is the demand for a faster and more efficient way to develop a web application. Each developer has his or her own preference for the way of development. However, not only issues in development demand new ways of building a web application. The big picture is about Web 2.0 and the underlying techniques AJAX (Asynchronous JavaScript and XML) also need new ways. With ZK the developer gets a new alternative for solving the daily problems that occur in web projects and for building Web 2.0 applications. Through the chapters of this book, we show how to develop applications with ZK. After reading it and trying the framework there should be no need for more convincing. Before we dive into the ZK framework it's important to clarify that this introductory chapter is not a replacement for the developers' guide from ZK (see http://www. zkoss.org/doc/ZK-devguide.pdf). The aim of this chapter is to give you an understanding of the basics and some important aspects of ZK, which are essential for daily development with the framework. The following browsers are supported by ZK: ? ? ? ? ? ? Internet Explorer 6+/7 Firefox 1+ Safari 2+ Mozilla 1+ Opera 9+ Camino 1+

     Getting Started with ZK

     Browsers without decent support for DOM and JavaScript are not supported. ZK is offered with a dual licensing model. On one side there is the GPL license, and on the other there is a commercial license with commercial support, which is offered from ZK (see

    http://www.zkoss.org/license/). Actually there are some IDEs that support the ZK framework. For example, there is ZeroKoder and the commercial zk-bench. These tools are presented in Chapter 7 of this

    book. To start programming with ZK you only need a basic knowledge of Java and XUL (XML User Interface Language). It's very easy to develop a front-end to a database. There are existing integrations of some OR-Mappers to ZK (e.g. for Hibernate). At present there are no external providers for controls. However, there is a defined interface (zk-forge) for creating controls. The benefits of ZK are: ? ? ? ? ? ? ? ? ? AJAX-based Rich User Interfaces Event-driven Model ZK User-interface Markup Language Server-Centric Processing Script in Java and EL Expressions Modal Dialogs Simple Thread Model Live Data GPL

     The disadvantage of frameworks like JSF, or the Echo framework is lack of a good IDE support.

     What is ZK?

     If somebody asks about ZK, a good answer is: ZK is AJAX without JavaScript. That's an answer for some merchandising prospects. The technical answer to the question is that ZK is a component-based framework, which is driven through events. There are three cornerstones: 1. An AJAX-based event-driven engine 2. A rich set of XUL and XHTML components 3. ZUML (ZK User Interface Markup Language) Before we go on, we should get familiar with a few buzzwords, which we mentioned before.


     Chapter 1



     XHTML is the abbreviation of Extensible HyperText Markup Language. XHTML is very similar to HTML. Briefly, XHTML is HTML written in XML syntax. The following points are the most important differences: The notation (uppercase/lowercase) of an element/attribute is important in XHTML (unlike of HTML). Elements without content (e.g.

     ) must be closed in XHTML (e.g.



     <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"



     A paragraph




     XUL is the abbreviation for XML User Interface Markup Language. This "language" is not a new invention from the ZK team. It was originally defined by the Mozilla team. The project page of XUL is http://www.mozilla.org/projects/xul/. The intention of Mozilla is to

    have a platform-independent language to define user interfaces. And therefore, a ZK developer can benefit from the big community around XUL, and can use XUL widgets.


     Getting Started with ZK


     <?xml version="1.0"?> <?xml-stylesheet

    href="chrome://global/skin/" type="text/css"?> <window

    id="findfile-window" title="Find Files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper

    /there.is.only.xul"> </window>


     ZUML is the abbreviation for ZK User Interface Markup Language. ZUML is based on XUL. There are some extensions to the XUL standard like the possibility of embedding program code.

     <window title="Hello" border="normal"> Hello World! </window>

     For the user, the application feels like a desktop application. For the developer, the programming is like a standalone application. ZK uses an event-driven paradigm, which encapsulates the request-response paradigm from a web application. These technical infrastructure things are done through the framework. Therefore, no JavaScript usually needs to be written for the browser side. Here, it's important to say that the framework automatically includes some JavaScript libraries, and generates the JavaScript code for the user. Therefore, the developer has nothing to do with JavaScript.

     It's important to know that ZK does only things that should be done from a UI Framework. This means that we do not have a new framework that solves all development problems in the world. Only the UI layer is addressed. Therefore, things like persistence must be done with other frameworks. However, there are many possibilities for integrating other frameworks (e.g. Hibernate, http://www.hibernate.org) into ZK.


     Chapter 1

     First Step: Say Hello to ZK

     To get a feel of working with ZK, it's wise to do a small example. To follow the long tradition of many programming technologies, we will start with the traditional "Hello World" example.

     For the examples, we are using version 2.3.0 of the ZK framework.

     The best way to start with ZK is to download the zkdemo application from the ZK team. The application can be downloaded from: http://www.zkoss.org/ download/. The application comes in a ZIP archive. This archive contains four files: 1. zkdemo-all.war 2. zkdemo.war 3. zkdemos-all.ear 4. zkdemos.ear The WAR files are for deploying inside a J2EE web container. The EAR files are for deploying inside a J2EE

    application server. To start, just throw the zkdemo. war inside the webapps directory of Tomcat. After this the application is available with the URL http://localhost:8080/zkdemo (if Tomcat runs at port 8080). Now create a new file with the name hello.zul, and copy this page to the decompressed application zkdemo. The page can be accessed with http://localhost:8080/ zkdemo/hello.zul.

     <window title="Hello" border="normal"> Hello World! </window>

     The downloaded archive of the demo contains zkdemo.war, zkdemo-all.war, zkdemos-all.ear, and zkdemos.ear. The files without the suffix -all does not contain a complete application. The libraries from ZK are missing. For a first start you can copy the zkdemo-all.war to your Tomcat webapps directory. If you want to use the zkdemo.war please copy all libraries from your zk-2.3.0 (directory

    zk-2.3.0/dist/lib) into the expanded directory of the web application. Without a copy of the libraries you get an error while executing your application.


     Getting Started with ZK

     After this small example, we will make a second example with an input element inside. This application consists of one main screen. This screen has a label (Insert your name), an input field, and a hidden button (Say Hello). The following screenshot shows the screen.

     The definition of this screen is done in a single file. Its name is helloworld.zul. Both the layout and logic is done in that page. The page is realized with the previously mentioned ZK User Interface Markup Language. Now it's time to draw the curtain and show the implementation of this simple application as follows:

     <?xml version="1.0" encoding="UTF-8"?> <zk

    xmlns="http://www.zkoss.org/2005/zul"> <window title="My First window" border="normal" width="400px"> <textbox width="60%" id="username"> <![CDATA[ //The eventcode is pure Java and therefore we can use the standard comment signs //Caution: We can not use the ampersand for the if-clause because we have to produce valid XML and //the ampersand is the indicator of an entity in XML /** Comments spanning more than one line are possible, too **/ if

    (event.getValue().length() > 0 && event.getValue().trim() .length() > 0) { buttonToSayHello.setVisible(true); } else

    { buttonToSayHello.setVisible(false); } ]]> </textbox> <![CDATA[ [ 10 ]

     Chapter 1 alert('Hello '+username.value); ]]> </window> </zk>

     It was mentioned before that the page contains one hidden button (Say Hello). This button has the buttonToSayHello id. The idea behind this is that the button is only shown if there is some input in the textbox with the username id. After the input of some content (at least

Report this document

For any questions or suggestions please email