Implementing Load-on-Demand using ZK and Grails
Chanwit Kaewkasi
March 24, 2009
ZK 3.6.0
Introduction
ZK Plugin for Grails introduces GroovyGrails mode for ZK. It seamlessly integrates ZK into the Grails stack. The plugin brings ZK and Grails to the next level of rapid RIA developement, also with convention-over-configuration, Spring, and Hibernate powers. It features:
- Accessing to Grails domain classes, transactional service classes, and a vast number of plugins.
- Quick constructing ZK components with Gabe Hicks' ZK Groovy Builder syntax.
- Auto-reloading composers via Spring beans. With ZK Plugin, you can use the MVC power of ZK's composers at the same development speed as scripting !
- Scripting also fully supports Grails artifacts directly in .zul.
- ZUL file and composer generators.
Example
This is a ZKGrails port of the program written in Use Load-On-Demand to Handle Huge Data. This tutorial is working for ZK Plugin for Grails 0.7.1 and later.
Create a Grails project
You need to prepare a Grails project for this tutorial by type:
$ grails create-app ondemand
Install ZKGrails
Next, you need to install ZKGrails. The latest version will be installed automatically, when type:
$ grails install-plugin zk
Create a domain class
I am going to demonstrate with a simple domain class, Employee. To create domain class in Grails, simply use the command create-domain-class, following by your class name:
$ grails create-domain-class employee
Adding Properties for Employee
I then add two properties into domain class Employee, namely fullname and username. Both are string.
class Employee {
String fullname
String username
static constraints = {
}
}
Create a zul page
There are two generator scripts came with ZK Plugin for Grails. The following shows how to run create-zul to create employee.zul for you.
$ grails create-zul employee
This will also create grails-apps/composers/EmployeeComposer.groovy for you.
Edit employee.zul
Although the generator creates a ready-to-run zul file for you from the template, but it is just a skeleton to make you easier to start with. Open employee.zul, and delete all codes below vbox, then modify it as follows.
<window apply="${employeeComposer}">
<vbox>
<image src="images/grails_logo.jpg"/>
</vbox>
<listbox id="lstEmployee" width="100%" checkmark="true">
<listhead sizable="true">
<listheader label="ID" sort="auto" />
<listheader label="Full Name" sort="auto" />
<listheader label="User Name" sort="auto" />
</listhead>
</listbox>
<paging id="pagEmployee" pageSize="30" />
</window>
Of course, the key components which will be used in the composer are lstEmployee, and pagEmployee.
Editing EmployeeComposer
From the code, you may see 2 properties lstEmployee, and pagEmployee. Both are injected by GrailsComposer, which is a subclass ofGenericForwardComposer. They, apparently, represents listbox and paging components from your .zul file.
You may notice that there is afterCompose closure. This closure is run by doAfterCompose, and it's a Groovy place to initialize your components.
The auto-wired event handle onPaging_pagEmployee will be called everytime you click pagEmployee to change the active page. Note that, the only argument of the handler must be ForwardEvent or Event to make it work.
I also show you the use of Groovy's default argument value declared at redraw method. That is, calling redraw() in afterCompose means redraw(0).
Also in redraw method, there are two places to use dynamic methods added by ZKGrails. The first one is clear , of which removes all listitem. The second one is append, which accepts component construction via ZK Builder.
import org.zkoss.zkgrails.*
import org.zkoss.zk.ui.event.*
class EmployeeComposer extends GrailsComposer {
def lstEmployee
def pagEmployee
def afterCompose = { c ->
pagEmployee.totalSize = Employee.count()
redraw()
}
def onPaging_pagEmployee(ForwardEvent fe) {
def e = fe.origin
redraw(e.activePage)
}
def redraw(page=0) {
def list = Employee.list(offset: page * pagEmployee.pageSize,
max: pagEmployee.pageSize)
lstEmployee.clear()
lstEmployee.append {
list.each { e ->
listitem(value: e) {
listcell(label: e.id)
listcell(label: e.fullname)
listcell(label: e.username)
}
}
}
}
}
Testing Data
Before getting your application run, you need some testing data to show. Open grails-app/conf/BootStrap.groovy, and then add the following snippet into init closure.
def init = { servletContext ->
1000.times { i ->
new Employee(fullname: "Name $i", username: "user$i").save()
}
}
With the above code, we loop 1,000 times to create 1,000 domain objects of class Employee.
Run the application
$ grails run-app
and point your browser to http://localhost:8080/ondemand/employee.zul
Copyright © Chanwit Kaewkasi. This article is licensed under GNU Free Documentation License. |