Felipe Cypriano

You're about to read

Grails With ZK Understanding Both Together [Updated 2x]

You may already know both technologies but I’ll briefly introduce them. Grails is the best web framework that I ever work with, it uses Groovy and convention over configuration to simplify our development efforts. To name a few this is what you’ve out-of-the-box: persistence layer to save your entities to a relational database, dependency injection, lots and lots of great plugins and GSP to build the view.

If Grails is so complete why do I need another framework and why ZK? I’m building an enterprise web app which means it will be used by users of a company to do daily tasks, I needed a more responsiveness app without refresh and without increase the effort of getting it done. Searching for a solution I consider mainly this two frameworks: ExtJS, beautiful interface and a bunch of built-in components but you’ve to deal with javascript; GWT clever javascript compilation from Java code, but only a few built-in components and build interfaces using only java code isn’t a pleasant work for me.

ZK Direct RIA is bundled with lots of very useful built-in components, you can build your pages using a declarative syntax like XHTML or using Java code, since we’ll use Grails we can use Groovy to simplify the java code. Your code is processed on the server and because of this you can use your classes without any modifications, all your classes groovy or java will work as is in ZK no modification is need.

ZK will be responsible to render and process the events of the view layer (the pages), the main difference compared to standard Grails is that instead of use Controllers and gsp files you’ll use Composers and zul files. It doesn’t mean that you can’t use Controllers nor gsp anymore you can mix both without problems. From a gsp page you can go to a zul page, and there is no secret just link one to another with an <a> tag, for example. And it’s possible to share objects between the pages as well, using Services, zkgrails plugin’s Facade or with your own spring bean.

This is the first of a series of articles I’ll write about my experience working with Grails and ZK. Now I’ll show a very simple example of how to start using both and what we gain using both in the same project. First of all create a new grails project and install zk plugin:

$ cd <path_you_want>
$ grails create-app grails-and-zk-app1
    ...
    Created Grails Application at <path_you_want>/grails-and-zk-app1
$ cd grails-and-zk-app1
$ grails install-plugin zk 0.7.4
    ....
    Plugin zk-0.7.4 installed
    Plug-in provides the following new scripts:
    ------------------------------------------
    grails create-composer
    grails create-facade
    grails create-zul

Your project is now created and configured to use ZK. Now I’ll show you how easy is to build an rich interface with ZK and Grails, create the zul file:

$ grails create-zul myFirstZkPage

This will create two files the page and it’s Composer, remember the composer is the ZK controller.

The plugin creates the files with a Hello World page ready to work. Execute it to see it running:

$ grails run-app

Open this url in your browser http://localhost:8080/grails-and-zk-app1/myFirstZkPage.zul. Write a text inside the text box and click on “Hello” button and a greeting text will be show. This is very simple but the implementation shows some cool features, let’s see them.

This is the page grails-and-zk/web-app/myFirstZkPage.zul, the language is called ZUML it’s a markup language to build rich interfaces every component (some tags) here has it’s own Java class so you can use them in your code without any problems:

grails-and-zk/web-app/myFirstZkPage.zul
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?page zscriptLanguage="GroovyGrails"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<window apply="${myFirstZkPageComposer}">

    <vbox>
        <image src="images/grails_logo.jpg"/>
    </vbox>

    <grid id="gdMain">
        <rows>
            <row>
                Name: <textbox id="txtName" />
                <button id="btnHello" label="Hello"/>
            </row>
        </rows>
    </grid>

    <listbox id="lstResult" mold="paging"/>
</window>

</zk>

On line 11, the apply attribute tells ZK which class is the Composer of the Window component it expects the class’ full qualified name. Hum, what is being passed to apply doesn’t look like any full qualified name. Yes it isn’t, apply=”${myFirstZkPageComposer}” is an EL expression which is resolved to the Spring Bean named “myFirstZkPageComposer” and this bean is, as you can easily guess: grails-app/composers/MyFirstZkPageComposer.groovy, cool eh. Every class in composers directory which ends with “Composer” will be automatically a spring bean.

Inside the window we’ve three components with an id setted (lines 17, 21 and 26), looking the composer’s code we can see that for each of this three components there’s one attribute with the same name:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import org.zkoss.zkgrails.*

class MyFirstZkPageComposer extends GrailsComposer {

    def txtName
    def btnHello
    def lstResult

    def myFirstZkPageFacade

    def onClick_btnHello() {
        lstResult.clear()
        lstResult.append {
            listitem { listcell { label(value: "Hello, ${txtName.value} !") } }
        }
    }

    def afterCompose = { c ->
        // initialize component here
    }
}

This mean you’ve full access of this components own’s attributes you can read and write it’s values. For example, try to add this new line at the end of onClick_btnHello method and save it:

btnHello.label = "Hello There!"

Run the app an see what happens when you click the Hello button. Play with the code to see what more you can do. To learn more about ZK I recommend you to read the documentation page specially the Developer’s Guide and Developer’s Reference. Use your curiosity to make great things.

In the next articles I’ll enter in more details.

#Update 1

ZK with Grails: Where are my controllers? Learn what is and how to use ZK Composers.

# Update 2

As of ZkGrails 1.0M2 the syntax to refer a Spring Bean on window’s apply attribute has changed, it’s now without the ${}. This makes possible to use package to refer to composers:

<window apply="my.package.nameComposer"/>