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.

ZK: Simplifying AJAX

I have been using ZK for the last few months and have found it to be a very scalable and impressive framework in terms of its features and the ease with which they can be implemented within an enterprise application. ZK  is described as the No 1 Ajax framework on SourceForge based on the number of downloads and it is easy to see why it might be so popular. It integrates well with Spring, Hibernate, JQuery , JSON and other frameworks that make up the web application stack. Dreamworks has put up a concise and very focussed presentation that describes the features and the functionality of ZK.

One major advantage in using ZK is that the developer need not worry about writing Javascript to realise Ajax, instead all coding is carried out in Java. ZK also provides a very rich array of  UI components that can be implicitly attached to the business logic using a feature called 'data binding'. Thus, the need to explicitly attach UI components to backing beans in order to retrieve and send data is not required.
Finally, ZK provides a robust security architecture which can be further extended via third party libraries such as Spring Security. The MVC pattern that forms the core of the ZK implementation pattern, makes designing components intuitive. Further, components can be customised using a rich set of custom-renderers that cater for  extensibility and reuse.

In conclusion, the ZK framework is easy to learn and implement. It provides a very efficient and scalable framework for developing Ajax based enterprise level applications featuring a rich UI set.

Deploying your web application to TomCat 7.0 using Maven

Deploying your web-application using the tomcat-maven-plugin can be done by as follows:

1. Create a user in Tomcat with the manager-script role. Before Tomcat 7.0, this was accomplished using the manager role. The user details can be sepecifed in the conf/tomcat-users.xml file as follows:

2. Now you need to tell maven that it can deploy applications to Tomcat using this role.

To set this connection, open your settings.xml file which should be present .m2 directory. Search for 'server' and put in the following credentials:

          localhost
          tom
          cat

Obviously, the server name is :localhost in this case.

3. In your maven pom.xml configure the tomcat-maven-plugin as follows:

             org.codehaus.mojo
             tomcat-maven-plugin
             
                http://localhost:8080/manager/text
                      localhost
                      /test
             
         

Take note of the

http://localhost:8080/manager/text

This is important otherwise you will keep getting 403:Access Forbidded errors when you attempt to deploy.

• To build you war and deploy on Tomcat, use : mvn tomcat:deploy
• To redploy your war, use : mvn tomcat:redeploy
• To undeploy your war, use : mvn tomcat:undeploy

Troubleshooting : If you are getting connection refused : 401 errors while deploying, it means that most probably you have not setup your Maven settings.xml file correctly or that you have added the configuration parameters to the wrong file.

Implementing pagination in JSPs

I recently implemented Pagination in my JSPs so that if there were several results returned by a query (Search function), the user could view the results in a page-wise format. The image on the right is what I ended up with after implementing pagination through an open-source tag library, displaytags. In this post I will explain the basic steps that I followed in order to install and use the tag library.

While implementing pagination is not a complex task as there are only a few scenarios that need to be taken care off, I preferred to use a taglib to implement the same. While the web and Google will throw up several solutions, I tried implementing the pager taglib available at JSPTags first.

The pager taglib has several look and feel features available, I was not happy with the documentation and examples provided and after struggling with the installation of the taglib, I gave it up in favor of the displayTags taglib. I found this library easy to install and use, with a good mixture of code examples and features. Needless to say, I was able to achieve my objective.

Here I will show you the basic steps of setting up the pagination feature using the displayTags library in a Struts based JSP that is deployed on a JBOSS server (version 4.04) running on Java 1.5. Okay, lets get started. We will do this in steps.

1.Download the displayTags library (At the time of writing version displaytag-1.1.1.jar is the latest jar). In the download, you will also get a WAR file that you can directly drop into your web-server and view the examples. But for setting the tagLib for your own use, you are best off extracting (unzipping) the WAR and using the files inside.

Extract the displaytag-1.1.1.jar and place it into your WEB-INF/lib directory.
I did not need to add a directive in my web.xml as I am using JSP2.0. (Tomcat 5.5)

You will also need to make sure that the commons-* jars that come with the displayTags download are available in the WEB-INF\lib directory.

2. In your JSP,add the following directive:
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

3. You may wish to add the CSS styles available in the downloaded displayTags library. There are several theme css files that can be used and I chose to use the file (displaytag.css). Drop this file into your style sheets directory within your WEB-INF and reference it in your JSP.

Be aware that the data that will be displayed by the tagLibrary will be within a table and sometimes nesting a table within a table (if your JSP has one) can cause display problems but in my case, I had a very simple layout so I was fine.

4. Now add the displayTags that will display the data in a paginated format.
Add the following lines to your JSP:
The table name in this case, requestScope.SEARCH_RESULTS_LIST matches the name of a List that has been placed into the request scope by the servlet (Action class) that forwarded to this JSP. So for this table name to be workable, I have a list that I set in the servlet using the following line of code.

request.setAttribute("SEARCH_RESULTS_LIST", searchResults);

In the list, searchResults, I have a row of String data which is named as searchResultRow (set as the property name in line 6 above). The variable base (on line 1) points to the URL that I want page links to forward to.

Lines 3 and 4 are display properties that you can set to control the look and feel of the paginated data results. A more detailed list of what can be done is available here.
Another feature that is advantageous is that data that is presented in a grid layout can have sortable column headers. In other words, clicking on a column will sort the data displayed on the page.

Well, thats it. Build and Deploy your application and if all goes well, you'll have pagination going with no problems. This is what my page looked like, after I finished.