Validating Your Online Form When User Clicks Submit with ZK Framework

Posted by admin on August 19, 2014  /   Posted in Business, Online Platform, Web Development, ZK

So you’re using ZK Framework to build your online forms, and your forms have fields which needs validations. You have a “Submit” button which your user will click when they’re done filling out the form. You’re using the MVVM paradigm with the data binding. You tried adding constraints to the fields, but you want the validations to happen only when your users click the “Submit” button. We have discovered this little trick that might help you.

Most likely, you are using the @bind(…) method to bind your form fields to the View Model attribute, e.g:

<textbox value="@bind(vm.someAttribute)" constraint="no empty" .../>

We noticed that when we used @bind() in conjunction with a constraint on the field, the validation was triggered immediately, for example, when the cursor left the corresponding input field. Depending on your requirement, this might be acceptable, but in one of the project that we have with our client, we went the extra mile for our client and opted for a cleaner solution, which is to trigger the validation only when the user clicks the “Submit” button.

The answer is to break the @bind() into @load() and @save(), and make sure the @save() is called before the command which handles the “Submit” button, i.e:

     value="@load(vm.someAttribute) @save(vm.someAttribute, before='save')" 
     constraint="no empty" .../>

<button label="Submit" onClick="@command('save')"/>

Note that the @save() expression has before=’save’, which matches the name of the ‘save’ @command() handler. This way, the validation is invoked just before the ‘save’ command, and the invalid input pop message is only shown at that time.

That’s it for now. We hope this tip helps someone out there with the same situation.

A little bit about us, NextCoder is a team of data analysts, software architects, and developers.  Using our up-to-date skills and experience, we help businesses make profitable decisions while increasing their capacity to grow. We combine Business Intelligence methodology with our vast software development experience to provide effective and unique solutions for our clients. Some of our products includes:

Tutoring Metrics

Team Tag 24

ZK + TimelineJS + JQuery = Visualizing Business Data Along The Time Dimension : Part Two

Posted by admin on August 13, 2013  /   Posted in BI and Custom Development, Business, Web Development, ZK

by Cancan Gunadi

In our previous blog, Visualizing Business Data Along The Time Dimension, we have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way.

In this blog, we’ll show you the technical detail behind the implementation. We used TimelineJS, an interactive web-based timeline tool, and integrated it into the system that we’re building for our client. The system itself is built using ZK Framework.

First, in case you haven’t already, you can visit the actual Live Demo of this timeline on our server here (log on using the provided credential).

We assume some familiarities with the ZK Framework and TimelineJS libraries. We recommend you to visit their respective documentations.


The timeline area is contained inside a ZK iframe tag inside one of the ZK .zul file as such:

<window id="mainWin" apply="${mainCtrl}">
    <iframe id="iframe" src="jsp/timeline.jsp>

The iframe loads a JSP file which contains the TimelineJS script which is shown below. Some of the details of the JSP and zul file have been removed for the sake of simplicity.

// normal JSP import stuffs... here...

   <!-- jQuery -->
   <script type="text/javascript" src="../timelinelib/jquery-min.js"></script>
   <!-- BEGIN TimelineJS -->
   <script type="text/javascript" src="../timelinejs/storyjs-embed.js"></script>

   <script type="text/javascript">
       $(document).ready(function() {
       <% if (docs != null && docs.size() > 0) { %>
           var dataObject = 
                   "headline":"Progress Info",
                   "text":"<%= user.getFullName() %>",
                   <% if (startDate != null) { %>
                   <% } %>
                   "date": [  
                   <%for (Document doc : docs) {%>
                           "startDate":"<%= doc.getDate() %>",
                              "<a class='timeline-doc-link' 
                                  doc_id='<%= doc.getId() %>' 
                                  href='#'><%= doc.getTitle() %></a>",
                           "text":"<%= doc.getText() %>",
                   <% } %>            


               type:       'timeline',       
               source:     dataObject,
               embed_id:   'timelineContainer',
               font:       'Arvo-PTSans',
               start_at_end: true,
           // div with id "timelineContainer" is the div that wraps 
           // around the entire timeline area, defined in the <body>
           // section.
           $('div#timelineContainer').click(function(event) {
               var clickedElem = 
                   document.elementFromPoint(event.pageX, event.pageY);
               if (clickedElem.nodeName == 'A' 
                       && clickedElem.className == 'timeline-doc-link') {
                   // parent is [object Window] according to firebug
                      new parent.zk.Event(
               return event;
       <% } else { // if no item to be shown ... %>

               '<span style="font-size:75%;color:grey;">
               No progress information submitted yet.</span>');

       <% } %>    

    <!-- END TimelineJS -->

    <div id="timelineContainer"></div>

Line 12-53 of the JSP is the TimelineJS script which is dynamically generated using the JSP scriplet for-loop (line 24) to insert the available items (or “documents” in this case) into the timeline.

Making the Timeline More Useful

To make the timeline more useful, hyperlinks were added to the timeline, which can be clicked to open new ZK Tabs containing the detail of the timeline item. To achieve this, the javascript code in the timeline script needs to be able to send an event to the enclosing ZK container so the ZK application can respond and open a new ZK Tab.

Line 28-31 shows the <a> element which is tagged with a CSS class “timeline-doc-link” and a custom attribute “doc-id” which contains the id of the document.

On line 58-73, JQuery code is used to add a click handler to the “div” element with id “timelineContainer”, which is a wrapper around the timeline (The div is defined in the of the HTML).

Line 59-62 retrieves the element which received the click and checks if it’s really the anchor element with the special css class.

Line 65-69 is the real key to enable the interaction between the timeline and the rest of the application, it takes advantage of a very useful ZK feature for sending Event to parent element. Using the “parent.zAu.send” method, we sent an event (called “onDocRequestedFromIframe”) to the parent ZK component “mainWin” (refer to the ZUL snippet shown earlier). From there, the ZK main controller (Java code) that is attached to the main Window component can respond by opening a new ZK Tab to show the requested document.

The result is nicely integrated timeline which can interact with the rest of the ZK application via ZK Events as shown in the following figure. Eventhough the timeline script resides within an iframe, this approach allows the timeline script to invoke Tabs, Menus, and other component within the containing ZK application.

Figure 1 - Seamless Integration of TimelineJS into ZK Application

Figure 1 – Seamless Integration of TimelineJS into ZK Application

In a Nutshell

We have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way, and how to implement it using the ZK Framework, TimelineJS and a little bit of JQuery and Javascript codes. We have shown how to enable seamless interactions between the TimelineJS script and the containing ZK Application using ZK’s Events.

We hope this post can be beneficial for anyone who may be looking to implement similar functionality.

Please also check out our main blog page where you can find useful information regarding Data Management, Business Intelligence, and more (click here).

Visualizing Business Data Along The Time Dimension

Posted by admin on June 18, 2013  /   Posted in BI and Custom Development, Business, Web Development, ZK

by Cancan Gunadi

From time to time businesses are faced with the need to visualize their business data along the time dimension. It is very valuable for the businesses to have a way to visualize information such as milestones or key events in a meaningful way. This visualization answers questions such as “When was the last Sales Milestone achieved?”, “How do I see the progress of XYZ?”, or “What was the last step completed by a training class participant, and when?”

One way we have found to be both effective and engaging is to use a “timeline”. Timeline can be described as a sequence of related events arranged in chronological order and displayed along a line (usually drawn left to right or top to bottom). Data can be aggregrated though a nightly ETL job and key events be made available to be plotted on the timeline by the same job.


In our implementation, we used TimelineJS, an interactive web-based timeline tool, and integrated it into the system that we’re building for our client. The system itself is built using ZK Framework. I will write more about the technical detail of how this is done in my next blog.

Here’s an example of how the timeline visualization looks like. Please visit the actual live demo on our server here. (log on using the provided credential).


In this mock up example, we show the sales milestones on the timeline. This timeline is interactive, user can slide the timeline bar (bottom half of the timeline widget) with mouse to the left of right, or even swipe with his/her finger on a touch-screen. Clicking on each “flag/event” on the timeline brings up a related bar chart above the timeline bar. If the user needs more detail, he can click on the hyperlink next to the bar chart to open a new tab with all the detail regarding this milestones (See my next blog post for interesting technical detail about the interaction between the TimelineJS, the containing HTML inline frame, and the ZK Framework). User can also navigate to the previous milestone by using the arrow button to the left of the bar chart.

In a Nutshell

We have shown one of the ways to visualize business data along the time dimension in a meaningful and engaging way. Using this timeline, businesses can quickly see when a key event occured, time-wise, in relation to other/previous key events.

Stay tuned for my next blog post, where I will describe the technical detail on how to implement this timeline visualization using the TimelineJS, and ZK Framework.

Please also check out our main blog page where you find useful information regarding Data Management, Business Intelligence, and more (click here).

Embedding a ZK application inside a WordPress page

Posted by admin on December 28, 2012  /   Posted in Web Development, ZK

by Cancan Gunadi

There is no doubt that WordPress has emerged into one of the frameworks of choice when it comes to customizable presentation layer that manages static and series-oriented contents. But one obvious area that WordPress isn’t designed to handle is dynamic, transactional UI such as those found in a full-blown web-applications.

What if I offer to show you to have the cake and eat it too?
Have you ever wondered how to embed another web application inside a WordPress page?

Case Study
For example, one of our clients’ project, which is built using WordPress, requires a sophisticated (in terms of presentation and validation) registration form. This online registration form takes the input from the user and writes to a non-wordpress database.

In this case, the form is a Java web application written using ZK Ajax Framework (http://zkoss.org) which talks to Spring-Hibernate backend. To make things more interesting, this Java web application needs to accept a query string parameter that is passed through the main WordPress website URL. That means having to go through WordPress’ PHP code.

Let us see how to do this.

First, the setup. I have an existing WordPress installed like usual within apache and the ZK Java web application is deployed on tomcat.

This is an example of how the registration form looks like:

Let’s say that my WordPress site is at “http://mysite.com?myparam=abc”. Now I want to add a page on this site which contains the Java web application (the registration form). The Java web application itself is reachable via this url: “http://mysite.com/somepath/zkform?someparam=somevalue” and the “myparam” parameter above must be propagated from the main URL of my WordPress site to the Java web app, i.e: “http://mysite.com/somepath/zkform?myparam=abc“.

In my project, I implemented this by first storing the query string parameter in a cookie, then using a custom iframe (implemented using WordPress shortcode) to retrieve the query string from the cookie and append it to the ZK application URL.


  1. Write a WordPress plugin which stores the query string param in a cookie such as the following:
  2. add_action('init', 'storeParamInsideCookie');
    function storeParamInsideCookie() {
        $myparam = $_GET['myparam'];
        if (isset($myparam)) {
            $cookieResult = setcookie("myparam", $myparam);
  3. Write another WordPress plugin which defines a shortcode for inserting the Java web application inside an IFrame. The shortcode extracts the param from the cookie, and then pass it along to the src of the iframe:
  4. if ( !function_exists( 'myiframe_shortcode' ) ) :
        function myiframe_shortcode( $atts, $content = null ) {
            $myparam = $_COOKIE['myparam'];        
            $html .= ' $value) {
                if( $value != '' ) { // adding all attributes
                    $html .= ' ' . $attr . '="' . $value . '"';
                } else { // adding empty attributes
                    $html .= ' ' . $attr;
            $html .= ' src="' . $content;
            global $wp_query;
            if (isset($myparam)) {
                $html .= '?myparam=' . $myparam;
            $html .= '"';
            $html .= '>';
            return $html;
        add_shortcode('myiframe', 'myiframe_shortcode');
  5. Install the plugins and activate them in WordPress.
  6. Create a WordPress page, and call the myiframe shortcode to embed the Java web application within the page. Using the normal WordPress editor, add the following line to the page:
  7. [myiframe width="800" height="700"]http://mysite.com/somepath/zkform[/myiframe]

And… voila! Here’s how the resulting page looks like:

In this article, I have shown you how to make two popular application frameworks work seamlessly. A custom ZK -based Java web application that provides sophisticated functionality beyond what WordPress can do, is inserted into a WordPress page using an iframe. Not only that, I have also shown how parameters can travel between WordPress and ZK via a query string and a cookie, thus extending the usefulness of this method in a variety of situations.

As a caveat, there are also other factors that need to be considered when putting something like this together, such as managing the sometime-unavoidable scrollbar of the iframe, which may result in additional scrolling on top of the normal browser scrollbar. Obviously, the php codes that we show here can be improved, but hopefully this post gave you some inspiration on how it can be achieved. Enjoy!

We serve businesses of any type and size
Contact Us Today