Implementing ZK MVC

From Documentation

Stop.png This article is out of date, please refer to for more up to date information.

The MVC is developers' favorite pattern as it neatly separates the various application layers in a clear manner. ZK fosters this process by allowing UI declaration to be done using an XML declarative language. It should be noted, however, that we can create Swing programmatic UIs using Richlets.

ZK MVC revolves around two key items, the GenericForwardComposer and the apply attribute. The GenericForwardComposer is a utility class which adds auto-wire functionality providing access to UI objects from Java code without any effort. Let’s see the demonstration of how to add functionality to the login page.

Creating a controller (GenericForwardComposed) & applying it

Firstly we need to create a controller class named LoginViewCtrl which extends from the GenericForwardComposer, this is a trivial matter in Java.

<syntax lang="xml"> public class LoginViewCtrl extends GenericForwardComposer </syntax>

To create this class, we need to link it to our ZUL file. This has to be done by indicating the apply attribute.

<syntax lang="xml" high="4"> <?page title="ZK Store - Login"?> <window id="loginWin" border="normal" width="300px" title="You are using: ${desktop.webApp.version}" apply="demo.web.ui.ctrl.LoginViewCtrl">

<grid> <rows> <row> Name: <textbox id="nameTxb"/></row> <row> Password:<textbox id="passwordTxb" type="password"/></row> </rows> </grid> <button id="confirmBtn" label="confirm"/> <label id="mesgLbl"/> </window> </syntax>

As demonstrated in the code above, we set the apply attributes value to the full class name with path. In this case, it would be demo.web.ui.ctrl.LoginViewCtrl.

Auto-wiring components and events

When the GenericForwardComposer is applied, we can declare the components within the class as private variables which will be auto wired with the equivalent ZUL components.

<syntax lang="java" high="13,14,15"> import org.zkoss.zul.Label; import org.zkoss.zul.Textbox;

import demo.model.bean.User; import demo.web.UserCredentialManager;


* @author Ian Tsai

public class LoginViewCtrl extends GenericForwardComposer {

private Textbox nameTxb; private Textbox passwordTxb; private Label mesgLbl; } </syntax>

You can now access the UI components on the server-side and interact with them. All the wiring and the communication is taken care of by ZK automatically.

The next step is to enable the capturing of events. In this specific case we need to capture the onClick event of the button confirmBtn. To do this we need to create a method with a specific signature, in this case we use the event name followed by a $ and followed by the component ID. Therefore in our case the method signature is as follows:

<syntax lang="java"> public void onClick$confirmBtn() </syntax>

Notice that the method does not take any parameters, however if necessary the method can take an Event object as a parameter or the subsequent subclass which is applicable in the context.

Lastly we need to consider that people coming to the login.zul page may already be logged in just as our use case indicates. Therefore we need to setup a mechanism that checks whether that is the case before loading the UI. This is done by overriding the GenericForwardComposer method GenericForwardComposer.doAfterCompose(Component) which is called when the events and components are being wired. Thus if you override this method please make sure to call the super method. At this stage your doAfterCompose(Component) method should look like this:

<syntax lang="java"> public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp);

//to be implemented, let’s check for a login } </syntax>

By now we have an understanding of what advantages ZK provides us by wiring the components, events and data automatically. We need to move on to our goal of implementing a user management system to check credentials and redirect according to our use case. The next section walks through how user credentials was implemented using a session.

Last Update : 2011/06/23

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.