Small Talks/2007/November/Integrates ZK with Grails

Author
Island Chen, Senior System Engineer, BEA China

Date
November 12, 2007

Version

Introduction

ZK is an event-driven, component-based framework to enable rich user interfaces for web application, with ZK plugin, you can develop your web application by using ZK as the view layer and grails as the service & domain(GROM) layer.

Install and Test the ZK plug-in

Install Grails first

Please follow this article

Create a simple Grails App

Please Follow the Grails Quikc Start, to build a simple Grails project with the Book domain class

Install ZK plugin

Download it grails-zkplugin-0.2.zip, the source code also included. Make sure you are in the root directory of your project, type

 grails install-plugin full_path_to_zk_plugin

Test the plug-in

Create a new file "list.zul" under "your_project\web-app" with the following content

<?xml version="1.0" encoding="UTF-8"?>
<?page zscriptLanguage="Groovy"?>

<window  border="normal" title="Groovy Test" id="MainWindow"  width="400px">
<zscript>
        books = Book.findAll()
</zscript>
<listbox>
        <listhead>
                <listheader label="ID"/>
                <listheader label="Title"/>
                <listheader label="Author"/>
        </listhead>
        <listitem forEach="${books}">
                <listcell label="${each.id}"/>
                <listcell label="${each.title}"/>
                <listcell label="${each.author}"/>
        </listitem>
</listbox>
</window>

then browse to "http://localhost:8080/your_project/list.zul", you should be able to view the following list.

How does ZK plugin do it?

Right now, ZK plugin is made up of three parts:

1. maintaining the basic ZK realted java libaries
2. Participating in web.xml Generation to add ZK related servlets
3. Modifying sitemesh's configuration file, to exclude url patterns of ZK

With version 0.2, Grails controllers can work with ZK now!

Accessing the domain class

As you can see in the above sample, Grails domain classes can be accessed directly in ZK, just as what you can do in Grails controller.

Accessing the service

Accessing grails services in ZK is also very easy. Grails will define a bean with name "xxxService" of each service "XxxService", and you can access the Services in zscript directly with the help of DelegatingVariableResolver.

Create a service

Create a new file "HelloService.groovy" under "your_project\grails-app\services" with the following content

class HelloService {
   def serviceMethod(username) {
      return username+", welcome to ZK&Grails world!"
   }
}

Create a zul file

Create a new file "service.zul" under "your_project\web-app" with the following content

<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?page zscriptLanguage="Groovy"?>

<window  border="normal" title="Groovy Test" id="MainWindow"  width="400px">
    <textbox id="username"/>
    <button label="Call HelloService"
        onClick="result.value=helloService.serviceMethod(username.value)"/>
    <separator/>
    <label id="result"/>
</window>

Test it

Browse to "http://localhost:8080/your_project/service.zul", input a name and click the button!

Other things

Thanks to ZK & Grails, now writing a AJAX web-app is more easy!

Island Chen is Sr. system engineer of BEA China.

Copyright © Island Chen. This article is licensed under GNU Free Documentation License.