#zkgrails2

[zkgrails-blog]

Creating a grid with the Builder

Sometime, we'd like to create a UI component with the Builder code rather than pre-marking it up in the ZUL file. Here's the example of creating a `grid`. Suppose we have: We can write the above code using the Builder as: grid { columns { column(label: "Id") column(label: "Name") } rows { row { label(value:"1") label(value:"Korat") } row { label(value:"2") label(value:"Bangkok") } } } A step further, if we have a map containing the data, we can use the `each` closure to dynamically create the similar grid. def data = [1: "Korat", 2:"Bangkok"] grid { columns { column(label: "Id") column(label: "Name") } rows { data.each { k, v -> row { label(value: "$k") label(value: "$v") } } } }

[zkgrails-blog]

Data-binding for a form

We usually have a form for input data entries. In ZKGrails 2, there are 3 methods, `.link()`, `.unlink()` and `.bind()`, related to this feature. For example, we have a `` containing several input boxes: Then we can call: $('#form').link(null, [id: "textbox", name: "combobox" ]) To prepare a binding. Later when we get an instance of object to bind, just call: $('#form').bind(obj) Your **obj.id** will be binding to the "textbox", and **obj.name** will be binding to the "combobox" in the `` form. To stop the data-binding or you may want to bind this form with different set of properties, call: $('#form').unlink()

[zkgrails-blog]

Collection methods

Since ZKGrails 2.1, the JQuery class has been implemented as a subclass of AbstractList. This means we can use all Collection methods over a query result. For example, if we'd like to collect all texts from selected components, we can use method .collect(): def txt = $('textbox, intbox, doublebox') .collect { $(it).text() } .join(' ') alert(txt) Another example is when we'd like to sum over the **first column** of a Listbox we can do as following: def sum = $('#master listitem listcell:first-child') .sum { $(it).text().toInteger() } alert(sum)

[zkgrails-blog]

Remove components with .detach()

It's a common pattern to remove some entries from a listbox, a combobox or a grid's rows. Using a selector with method **detach()** will be making this convenient. For example, $('#mylistbox > listitem').detach() The above code removes all listitems that belong to #mylistbox. $('#grid > rows > row').detach() The above is doing so for a grid. $('#combobox > comboitem').detach() For a combobox, we can select all comboitems and just call method **detach()**.

[zkgrails-blog]

Clear all input boxes

Sometime we'd like to have a "clear" Button to clear all input boxes in our form. Here's a quick way to do so. $("button[label='Clear']").on('click', { $('textbox, intbox, decimalbox, datebox').text('') })

[zkgrails-blog]

Saving a Domain class

Here's a way to get data from UI compoments, assign them to a Grails domain class and save. If there's an error the first error message will be displayed by the notification block. $('#save').on('click', { def product = new Product( name: $('#name' ).val(), category: $('#category').val(), unit: $('#unit' ).val() ) if(product.save(flush: true)) { notify("New Product ${product.name}: ${product.id} Saved") $('#name, #category, #unit').val(null) $('#name').focus() } else { def e = product.errors.allErrors[0] def comp = $("#${e.field}") notify(message(error:e), comp) comp.focus() } })

[zkgrails-blog]

Focusing on a component

If a component can be focused, it means we can move a cursor into it. The following example shows how to handle Enter keys to move a cursor to each input box. $('#name' ).on('ok', { $('#category').focus() } ) $('#category').on('ok', { $('#unit' ).focus() } ) $('#unit' ).on('ok', { $('#save' ).focus() } )

[zkgrails-blog]

Selecting an item on a Listbox

We'd usually like to know which item will be selected on a Listbox. In ZKGrails 2, we can handle the onSelect event using the following syntax: $('#master').on('select', { def catId = $(it).val() def cat = Category.read(catId) $('#detail').load(cat.products) }) In the above code, there is a Listbox with id "master". When an item of the master Listbox is selected, we can get: 1. the selected item using expression **$(it).getSelectedItem()** or **it.target.selectedItem**. 2. the selected value using **$(it).val()**. Please note that the **it** variable in the block is of type [SelectEvent](http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/SelectEvent.html). A selected value is a "value" of Listitem inside the Listbox. In the below example, the value is a Category's id. $('#master').append { for(cat in categories) { listitem(value: cat.id) { listcell(label: cat.id) listcell(label: cat.name) } } }