ZK ‘zau.send()’ Sample

When using the ZK framework out-of-the-box, there is not much need to rely on any other communication methods than using the regular controller methods, except you want to pass client-side data that you can’t catch otherwise, eg. from javascripts. Here the most simple sample to talk from a zul page to a controller and passing data. You find the relevant ZK info/reference here, but I still miss a short and crisp sample.

Requirements:

  • Any Netbeans IDE beyond version 6.0 (with Glassfish or Tomcat installed)
  • ZK plugin to create ZK web app

Tutorial:

  • Create WebApp ‘ZKzausend’

    Create ZK Web Application

    Create ZK Web Application

  • Modify the default index.zul
    Add a id, a controller reference and simple javascript

    index.zul

    <?xml version="1.0" encoding="UTF-8"?>
    <zk xmlns="http://www.zkoss.org/2005/zul">
        <window id="info" apply="controller.IndexController">
    
            <html><![CDATA[
        <script type="text/javascript">
          function sendToServer(){
            payload = screen.width+'x'+screen.height;
            zAu.send(new zk.Event(zk.Widget.$(this), 'onUser', payload));
          }
        </script>
        <a href="#" onClick="sendToServer();">Click Me !</a>
        ]]>
            </html>
    
            <button id="btnExec" label="Some regular button" />
        </window>
    </zk>
    

    Note: Yes, you can retrieve the screen resolution in the controller too using evt.getScreenWidth(). This serves as a sample for your more sophisticated JQuery scripts.

  • Create the controller

    Controller Class

    package controller;
    
    import org.zkoss.zk.ui.Component;
    import org.zkoss.zk.ui.event.Event;
    import org.zkoss.zk.ui.event.ForwardEvent;
    import org.zkoss.zk.ui.util.GenericForwardComposer;
    
    public class IndexController extends GenericForwardComposer {
    
        @Override
        public void doAfterCompose(Component comp) throws Exception {
            super.doAfterCompose(comp);
        }
    
        public void onUser$info(Event event) {
            ForwardEvent eventx = (ForwardEvent) event;
            System.out.println("Client Screen Size:" + eventx.getOrigin().getData());
        }
    }
    

    Notes:

    • You need to cast the event to ForwardEvent, otherwise event.getData() returns Null !
    • Make sure the zul page window id (“info”) and the zau.send parameter (“onUser”) are matching public void onUser$info(Event event)

  • Deploy and Run the sample

    Running Web Application

    Check the Glassfish logfile

    Logfile

Advertisements

2 thoughts on “ZK ‘zau.send()’ Sample

  1. Pingback: ZK ‘Client-Server’ Communication Sample Part 2 « The JavaDude Weblog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s