ZK 6.0 and the MVVM pattern

Previously I wrote about my experience in using ZK, an event driven UI framework that simplifies UI development for J2EE applications. Currently, the latest release of ZK is 6.5.1.2 which came out in December, 2012. The transition from version 5 to 6 was significant as it included a number of new features, including an upgrade in the jQuery library from 1.4 to 1.6, the use of Advanced templates, new controls and finally most notably among all these changes, the ability to use a new data binding approach called the ZK Bind which was based on the MVVM pattern.

While the MVVM pattern is not a new concept, its introduction in ZK is certainly timely and serves to simplify the development and maintainability of the user interface code. Since ZK is an event-driven framework, it has component which generate events and these in turn need to be handled by the controller which in turn lead to interactions with the model. In ZK 5, the model needed to know about the different components, which were generating events. In ZK 6.0, this layer of interaction has been made transparent  via an implementation of the MVVM pattern, which uses annotions in the ZUL and the model class to tie the components, their events and the model objects all together.

This example is a very simple introduction to the basic approach of using MVVM in ZK. As evident, in the ViewModel: HelloViewModel.java, there is no need for the model to know about the different components it needs to interact with as was the case in ZK 5. The annotations in the ZUL page and the model class wire the components, the events generated and the changes in the model all together without the need for any Java  code to be written.

While applying the annotations and the new approach in building UIs, might take some getting used to, there is no doubt that the implementation of the MVVM pattern using the Binder (ZK Bind) simplifies the UI development and code maintenance. It also provides a cleaner separation of the user interface from the business objects.