Introduction

ZK5 has adapted the famous jQuery as underlying javascript library.
jQuery UI is also looking very promising. In this article, we'll see how jQuery UI's widgets can be easily wrapped to zk widget now, and enjoy the power of ZK.

Demo

In above example,
we declare datepicker in zul, and then modify its property in Java.

Benefit

Any pure client widget can now easily connect to server.
ZK provides many server side ability.
Such as DataModel, Databindng, Event Handling.

You can use jQuery UI widget in more simplified syntax in zul, expression language is available too.
In extreme cases, you can even use only Java without any markup language or JavaScript, just like ZK always do.
You can also modify widget option at run time with Java.

And the best of all, you can modify the content of underlying data model with Java.
Then the widget content will be updated accordingly.

Through databinding, your interaction with client UI widget can automatically sync with java bean in server.[1]

bind_

↑ If an field of option is undefined, jQuery UI will use its default value

unbind_

Release jQuery UI widget, and zk widget.

Java part

Jobs includes updating data to client, and handle client event.

getter, setter of fields

smartUpdate() inside setter function will effect at client side #define. Setter function may do some check to see if the input value is acceptable. Some datatype conversion may need extra work. For example "2,2" inside <datepicker numberOfMonths="2,2"/> is String, and need to be converted int[].

renderProperties

It's used to initialize widget properties. Properties rendered will be catched by $define in client side, value would be available at client side redraw, bind_

Event Handling

You may use ZK defined event, or define your own event. To make your own event work, you have to do following things:

In Server side

addClientEvent(): Adds an event that the client might send to the server

service(): Processes an AU request. Event reported from client is handled here first. Update field in server side, postEvent() for further event handling.

Register event handler at controller for test: Event without event handler may be not send to save network bandwidth.

In above example, you can see the content of accordion is changed as we set different model to it.

Differences between wrapped widget and ZK widget

Childable: Currently wrapped jQuery UI widget must be leaf node of component tree. We're trying to found a way to implement such childable feature.

styling: Since the HTML structure of widget is managed by jQuery UI, its styling does not follow ZK's rule. You can use jQuery UI Themeroller to customize

Summary

Although jQuery UI has only 8 widgets now, but it has planned to provide more in roadmap. In jQuery4j, we already wrapped all 8 widgets.

There is still jobs to perfect this project. Including databinding, and childable component.

It's fun to have many other little widgets to enrich ZK. It's easier to wrap jQuery UI widget than jQuery widget than javascript widget. Since the former followes more coding discipline, less "surprise" to overcome.
Sometimes, widget from different source may conflict. For example, a fancy calculator jQuery Widget conflict
with jQuery UI library, because jQuery UI library rewrites some jQuery function show().

It also provides another way to implement your own ZK component.
You may implement jQuery UI widget first, and then wrap it to ZK component.