{"id":38,"date":"2008-06-18T17:14:51","date_gmt":"2008-06-18T17:14:51","guid":{"rendered":"http:\/\/cyberpen.wordpress.com\/?p=38"},"modified":"2022-10-31T17:53:35","modified_gmt":"2022-10-31T17:53:35","slug":"want-richstunning-web-applications-zk-is-right-for-you","status":"publish","type":"post","link":"https:\/\/www.confianzit.com\/cit-blog\/want-richstunning-web-applications-zk-is-right-for-you\/","title":{"rendered":"Want Rich\/Stunning Web Applications? ZK is right for you !"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”3.22″][et_pb_row _builder_version=”4.9.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ column_structure=”3_5,2_5″ sticky_enabled=”0″][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.9.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ module_class=”blog-left-content” sticky_enabled=”0″]<\/p>\n

The first thing that came to my mind when ever I heard \u201cWeb Application<\/a>\u201d was JSP on front-end. May be I was too used to it or May be too comfortable with it. During that time I had to learn ZK for a project and the result is \u201cI am totally smitten by it<\/strong>\u201d. The rich GUI experience and easiness of coding really made me blind. This is not a starter tutorial for ZK. The ones provided in their website are too good. I am here to write about some of the note worthy aspects of ZK and some code snippets I believe would be useful for some one. I am still a newbie, So feel free to correct me or add in some valuable comments\/Suggestions.<\/span><\/p>\n

What ZK is?<\/span><\/p>\n

\u201cZK is an event-driven, component-based framework to enable rich user interfaces for Web<\/span><\/span><\/p>\n

applications. \u201d-Definition from the creators itself.<\/span><\/span><\/p>\n

Some stunning Features of ZK<\/strong><\/span><\/span><\/span><\/p>\n

* Rich GUI Experience<\/strong><\/span><\/span><\/p>\n

* Ability to Differentiate the Business Logic From Implementation<\/strong><\/span><\/span><\/p>\n

* Server Push Technology<\/strong><\/span><\/span><\/p>\n

* Internationalization<\/strong><\/span><\/span><\/p>\n

Rich GUI Experience<\/strong><\/span><\/span><\/span><\/p>\n

Everyone wants a rich GUI experience in their web applications<\/a>. But the very need shouldn’t compromise the speed. Putting it in another way, the page should load fast. ZK includes an AJAX-based event-driven engine, a rich set of XUL and XHTML components and a markup language called ZUML (ZK User Interface Markup Language) which is not only easy to use, but also delivers a high quality GUI experience with out compromising speed.<\/span><\/span><\/p>\n

One of the key aspect of ZK driven projects are the responsiveness of the application. At times you will scratch your head thinking whether its a desktop application!<\/span><\/span><\/p>\n

Ability to Differentiate the Business Logic From Implementation<\/strong><\/span><\/span><\/span><\/p>\n

This one of the most important feature of ZK. It is easy to isolate the business logic completely from the User Interface. I can explain this with a simple example. I am using ZK to create a login screen which accepts user name & password from the user for authentication. First let me show you the real code and then explain how it works.<\/span><\/span><\/p>\n

************************************Code**************************************<\/span><\/span><\/p>\n

Login.zul <\/span><\/span><\/span><\/p>\n

<?xml version=”1.0″ encoding=”UTF-8″?><\/span><\/span><\/p>\n

<div align=”center”><\/span><\/span><\/p>\n

<window id=”login” Title=”Login page” border=”normal” <\/span><\/span><\/p>\n

width=”400px” mode=”modal” <\/span><\/span><\/p>\n

use=”cyberpen.web.LoginWindow”><\/span><\/span><\/p>\n

<label id=”errLabel” style=”color: red”\/><\/span><\/span><\/p>\n

<grid><\/span><\/span><\/p>\n

<rows><\/span><\/span><\/p>\n

<row><\/span><\/span><\/p>\n

<div align=”right”><\/span><\/span><\/p>\n

<label value=”User Name :”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<div align=”center”><\/span><\/span><\/p>\n

<textbox id=”username” constraint=”no empty”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<\/row><\/span><\/span><\/p>\n

<row><\/span><\/span><\/p>\n

<div align=”right”><\/span><\/span><\/p>\n

<label value=”Password :”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<div align=”center”><\/span><\/span><\/p>\n

<textbox id=”password” type=”password” constraint=”no empty”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<\/row><\/span><\/span><\/p>\n

<row spans=”2″ align=”center”><\/span><\/span><\/p>\n

<button label=”Login” onClick=”login.onLogin()”\/><\/span><\/span><\/p>\n

<\/row><\/span><\/span><\/p>\n

<\/rows><\/span><\/span><\/p>\n

<\/grid><\/span><\/span><\/p>\n

<\/window><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

LoginWindow.java<\/strong><\/span><\/span><\/span><\/p>\n

package cyberpen.web;<\/span><\/span><\/p>\n

import org.zkoss.zul.Textbox;<\/span><\/span><\/p>\n

import org.zkoss.zul.Window;<\/span><\/span><\/p>\n

public class LoginWindow extends Window {<\/span><\/span><\/p>\n

\/**<\/span><\/span><\/p>\n

* <\/span><\/span><\/p>\n

*\/<\/span><\/span><\/p>\n

private static final long serialVersionUID = 8477939400437670121L;<\/span><\/span><\/p>\n

public void onLogin(){<\/span><\/span><\/p>\n

String User_Name = ((Textbox) getFellow(“username”)).getValue();<\/span><\/span><\/p>\n

String PassWord= ((Textbox) getFellow(“password”)).getValue();<\/span><\/span><\/p>\n

}<\/span><\/span><\/p>\n

}<\/span><\/span><\/p>\n

********************************End Of Code************************************<\/span><\/span><\/p>\n

Lets see how this works. In the Login.zul file every distinct component has got a unique id. Please note that the id’s must be unique, if two components have the same id, ZK will throw an error during compilation.<\/span><\/span><\/p>\n

<row><\/span><\/span><\/p>\n

<div align=”right”><\/span><\/span><\/p>\n

<label value=”User Name :”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<div align=”center”><\/span><\/span><\/p>\n

<textbox id=”<\/span>username<\/strong><\/span><\/span>” constraint=”no empty”\/><\/span><\/span><\/p>\n

<\/div><\/span><\/span><\/p>\n

<\/row><\/span><\/span><\/p>\n

As you can see the unique id for the textbox that takes the value of UserName is “<\/span>username<\/strong><\/span><\/span>” . And We are getting this value directly in our java program. How is this possible ?<\/span><\/span><\/p>\n

We have explicitly given in the Login.zul file that it should use the class \u201c<\/span>cyberpen.web.LoginWindow<\/strong><\/span><\/span>\u201d<\/span><\/span><\/p>\n

<window id=”login” Title=”Login page” border=”normal” <\/span><\/span><\/p>\n

width=”400px” mode=”modal” <\/span><\/span><\/p>\n

use=”<\/span>cyberpen.web.LoginWindow<\/span><\/span>“><\/span><\/span><\/p>\n

…….<\/span><\/span><\/p>\n

<\/window><\/span><\/span><\/p>\n

Please note that full path to the location should be explicitly given. <\/span><\/span><\/p>\n

Now how are we reading the value from textbox? <\/span><\/span><\/p>\n

You can see that the Login Button onClick is mapped to the function \u201clogin.onLogin()\u201d<\/span><\/span><\/p>\n

<button label=”Login” onClick=”login.onLogin()”\/><\/span><\/span><\/p>\n

Please note \u201clogin\u201d is the unique id of the window component of our zul page which is asked to use the class \u201c<\/span>cyberpen.web.LoginWindow<\/strong><\/span><\/span>\u201d and <\/span>OnLogin()<\/strong><\/span> is the method defined inside this class. <\/span><\/span><\/p>\n

Now we use ZK’s getFellow() method to read the value of username and password and store it in seperate variables.<\/span><\/span><\/p>\n

String userName = ((Textbox) getFellow(“username”)).getValue();<\/span><\/span><\/p>\n

String passWord= ((Textbox) getFellow(“password”)).getValue();<\/span><\/span><\/p>\n

where \u201cusername\u201d & \u201cpassword\u201d are the unique id’s of the textboxes for UserName and Password respectively.<\/span><\/span><\/p>\n

So whats the exact point?<\/span><\/span><\/p>\n

You can give the zul page to a web designer<\/a> and ask him to decorate it while the underlying logic remains the same. Web designer need not know java or worry about any underlying stuff. Put it in converse, if you want to change the underlying business logic you don’t need to change anything in the front end.<\/span><\/span><\/p>\n

This is worry free compared to having a long jsp file with lots of java scripts, and control flowing back and forth. It will be harder to make it and more harder to redesign later.<\/span><\/span><\/p>\n

Server Push Technology<\/strong><\/span><\/span><\/span><\/p>\n

Server push means to put content from the server to the client actively. See\u00a0https:\/\/www.zkoss.org\/wiki\/ZK Developer’s Reference\/Server Push<\/a> for more details. <\/span><\/span><\/span><\/p>\n

Is it worth Learning?<\/span><\/span><\/p>\n

I would say \u201cYES\u201d . At the end of the day, the question is \u201cDid you make something simpler and easy to use\u201d \ud83d\ude42<\/span><\/span><\/p>\n

ZK is a sourceforge project that is growing better day by day. See : http:\/\/www.zkoss.org\/<\/span><\/span><\/p>\n

Some Improvements required for ZK<\/strong><\/span><\/span><\/span><\/p>\n

    \n
  1. \n

    The components needs to appear the same across different browsers. There are lots of hot fixes for some of the known issues please look through the ZK forum. But still there are some problems that I experienced while working on it, especially Mozilla Firefox failing to understand the height=\u201d100%\u201d , width=\u201d100%\u201d attributes.<\/span><\/span><\/p>\n<\/li>\n<\/ol>\n

      \n
    1. \n

      Paint support is required which is due on the next release.<\/span><\/span><\/p>\n<\/li>\n<\/ol>\n

      Viewer comments\/suggestions are welcome.<\/span><\/span><\/p>\n

      HTH,<\/p>\n

      Anoop Menon<\/p>\n

      Confianz Global Inc. is a leading\u00a0Odoo ERP Development Company in USA<\/a>. Get in touch with us for\u00a0Odoo ERP Customization<\/a>\u00a0&\u00a0Implementation<\/a>. So\u00a0<\/span>contact Confianz<\/a>\u00a0<\/span>today!<\/em><\/p>\n

      [\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_code _builder_version=”4.9.4″ _module_preset=”default” locked=”off” global_module=”2151″]<\/p>\n

      <\/p>\n
      \n
      \n

      Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n