ZK (framework)

ZK

Developer(s)	zkoss.org
Stable release	8.0.1 / 19 January 2016
Operating system	Cross-platform (JVM)
Type	Ajax Web Framework
License	LGPL / ZOL / Commercial[1]
Website	zkoss.org

ZK is an open-source Ajax Web application framework, written in Java,^[2][3][4] that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

The core of ZK consists of an Ajax-based event-driven mechanism, over 123 XUL and 83 XHTML-based components,^[5] and a mark-up language for designing user interfaces. Programmers design their application pages in feature-rich XUL/XHTML components, and manipulate them upon events triggered by end user's activity. It is similar to the programming model found in desktop GUI-based applications.

ZK uses a server-centric approach in which the content synchronization of components and the event pipe-lining between clients and servers are automatically done by the engine, and Ajax plumbing codes are completely transparent to web application developers. Therefore, the end users get the similar engaged interactivity and responsiveness as a desktop application, while programmers' development retains a similar simplicity to that of desktop applications.

It's important to note that ZK does not use the standard web request <=> response mechanism and DOES NOT send form fields to the server using GET + query parameters or one POST request. Instead, AJAX requests are sent to the server to update the internal state of each screen widget. At the browser, ZK only downloads a JSON description of the web page and uses a client renderer to turn that into a UI. It's quite efficient and under closer inspection, does not download everything at once. A look at the traffic between client and the server reveals several requests going back and forth between client and browser until the page rendering eventually completes.

The optional client-side customization allows the developer to leverage the client-side resources with the so-called server+client fusion, for customization and to reduce the Ajax traffic.

In addition to component-based programming in a manner similar to Swing, ZK supports a mark-up language for rich user interface definition called ZUML.

• ZUML is designed for non-programmer developers to design user interfaces intuitively.
• ZUML allows developers to meld different markup languages, such as Mozilla XUL language and XHTML, seamlessly into the same page.
• ZUML allows developers to embed scripts in pure Java language (interpreted by BeanShell) and use EL expressions to manipulate the components and access data.

Features

webui interface of iDempiere under ZK6

• Simply Java. ZK is renowned for its "Ajax without JavaScript" approach, enabling developers to build rich internet applications transparently without any knowledge of Ajax and JavaScript.
• Responsive design themes along with Bootstrap support
• HTML 5 and CSS 3 support
• Over 100 Ajax components offer UI designers a variety of feature rich components to meet the demands of enterprise Ajax applications.
• ZUML makes the design of rich user interfaces similar to authoring HTML pages. ZUML is a variant of XUL inheriting all features available to XML, and separates the UI definition from the run-time logic.
• Event-driven component-based model (similar to desktop programming models) supporting multiple event driven GUI design patterns.^[6]
• Support for Model-View-Controller (MVC)^[7] decoupling View, Model and Controller for easy to develop and maintain.
• Model-View-Presenter^[8] and Model-View-ViewModel (MVVM)^[9] design patterns that decouples the controller furthermore to minimize the code required and to maximize the maintainability.
• Databinding capability via in-ZUML-page annotations that transparently automates CRUD and state synchronization between UI view and the data and POJO.
• Application components, such as spreadsheet, pivot table, and calendar.
• Embedding scripting support with Java (Beanshell^[10]). This is an important benefit as you can use a unified programming language for both user interface and backend programming. Optional support for other serverside Java scripting in other languages such as JavaScript (Rhino^[11]), Ruby (JRuby^[12]), Python (Jython^[13]) and Groovy.^[14]
• Support for integrating with existing web frameworks via a JSP custom tag library, JSF support, Portlet, and a Servlet Filter. Has support for Spring and Hibernate.
• Extensible in that programmers can create new custom UI controls. Groups of controls can be re-used as a macro component.
• Extensive charting with ZK Charts

ZK 8.0

Released on October 6, 2015, ZK 8 aims to leverage the advancing client-side power with client-side command binding and template injection while still allowing the user to enjoy the equally important server-side integration and security.
Its main features include UI templating for easily applying a predesigned layout, clear view/logic separation and effortless integration with third-party JavaScript libraries.

Differences from XUL

• ZK is a server side framework which emits HTML and thus does not depend on client side presence of Gecko making it portable to any browser. ZK takes ZUML (xul and xhtml) serverside pages as input and outputs dhtml for the browser.
• ZK processes user interface logic on the server in Java. This increases choice in the scripting engines and application libraries that can be used to create logic. Presentation effects can be delegated to the browser using the Client-side Actions feature to reduce server load for dhtml effects. Running the application logic on the server in a single application container reduces the amount of cross browser and browser version testing when compared to extensively programming the DOM at the browser.
• While ZK and XUL have an overlapping subset of components, ZK has its own unique component sets. The component library can be extended with custom components. Macro components can be defined that are composites of components.
• ZK provides serverside databinding annotations to declaratively bind UI components to serverside data.
• Look and Feel differences.

System requirements

• JRE version 1.5 or later
• A Web server supporting Servlet 2.3 or later

Prerequisites of programming skills

Required

• Basic knowledge of Java or a Java scripting engine language such as Groovy, Rhino (Java JavaScript), JRuby (Java Ruby) or Jython (Java Python)
• Basic knowledge of HTML and XUL

Optional

• Knowledge of a scripting language to write the glue logic (running on the server):
  • BeanShell (Java interpreter), JavaScript, Groovy, Ruby, Scala and Python currently supported.
• Object Oriented Programming. You can choose to do AWT/Swing style programming against the ZK API. You can choose to program one or more custom UI controller classes in Java. This is entirely optional. Alternatively you can choose to use zscript script tags for user interface logic which is similar to dhtml programming.
• Servlet Programming. ZK is built on top of the Servlet API. You can choose to do regular Servlet programming and use ZUML as the page language.
• Ajax. ZK is built on top of Ajax but it automatically converts user input at the browser to Java events at the server so you do not have to either program or understand browser Ajax.
• JavaScript (on the client side). You can choose to use client side actions on your components for performing dhtml logic but most user interfaces do not require this.
• Declarative Databindings. ZK has an optional syntax for binding user interface controls to your POJO Java Beans. ZK will automatically call your POJO setter/getter methods with zero programming in response to user input at the browser.
• Expression Language. ZK supports JSTL style EL.

ZUML

ZUML (ZK User Interface Markup Language) is a markup language for rich user interfaces definition.

• ZUML is designed for non-programmers to design user interfaces efficiently with the ZUML markup
• ZUML allows developer to meld different markup languages, such as Mozilla XUL language and XHTML, seamlessly into the same page.
• ZUML allows developers to embed script in pure Java language (interpreted by BeanShell) and use EL expressions to manipulate the components and access data.
• ZUML is supported by ZK.
• Official Documentation : ZUML Reference

Client-side technologies

ZK is a server-centric framework. Technically you don't need to know about the implementation at the client side. It is how ZK Mobile running on Java Mobile VM is done.

Since ZK 5.0, the so-called Server+client Fusion^[15] architecture is introduced. Developers are allowed to access the client-side widgets directly if they want to. ZK Client Engine is based on jQuery.^[16] Technically you can use jQuery-compliant libraries and widgets.

ZK Add-Ons

ZK Charts
Provides a complete API which makes visualization of your data exceptionally easy. The intuitive API allows you to present your server-side data on the client as ZK Charts handles the client-server of data for you transparently.

ZK Pivottable
An Ajax data summarization component, which takes raw data from a flat table and organizes them by desired categories arranged on columns and rows, enabling developers to take advantage of a ready made component for demonstrating complex sets of data online.

ZK Spreadsheet
An online collaboration for multiple users that allows user to control or configure Web spreadsheet with pure Java and seamlessly integrate Java EE and other back-end services.

See also

• List of rich internet application frameworks
• Comparison of JavaScript frameworks
• List of Ajax frameworks
• List of widget toolkits based on JavaScript

References

1. ZK 3 and older versions are licensed under GPL.
2. Chen, Henri (2008). ZK - Ajax without JavaScript. Apress. p. 125. ISBN 978-1-59059-901-3.
3. Staeuble, Markus (2008). ZK Developer's Guide. Packt Publishing. p. 184. ISBN 978-1-84719-200-4.
4. Van der Schyff, Andre (2009-03-31). "A look at MVC frameworks". ITWeb. MVC frameworks provide limited functionality when compared to ZK, Echo and other Java Web frameworks.
5. "ZK Explorer". Zkoss.org. Retrieved 2010-08-25.
6. Massey, Simon. "Implementing event-driven GUI patterns using the ZK Java AJAX framework". http://www.ibm.com/. IBM. Retrieved 5 July 2014. External link in |website= (help)
7. "ZK - ZK Developer's Reference/MVC - Documentation". Books.zkoss.org. 2014-01-27. Retrieved 2014-03-02.
8. "ZK - Small Talks/2011/November/Hello ZK MVVM - Documentation". Books.zkoss.org. Retrieved 2014-03-02.
9. "ZK - Small Talks/2011/November/MVVM in ZK 6 - Design your first MVVM page - Documentation". Books.zkoss.org. Retrieved 2014-03-02.
10. "Lightweight Scripting for Java". BeanShell. Retrieved 2014-03-02.
11. "Rhino | MDN". Mozilla.org. 2012-08-09. Retrieved 2014-03-02.
12. "Home — JRuby.org". Jruby.codehaus.org. 2014-02-25. Archived from the original on August 30, 2009. Retrieved 2014-03-02.
13. "Jython : Homepage". Jython.org. Retrieved 2014-03-02.
14. "Groovy - Home". Groovy.codehaus.org. 2014-02-18. Archived from the original on March 2, 2014. Retrieved 2014-03-02.
15. Clare, Timothy (02-09-2010). "Server+client Fusion: An Architectural Proposal". Dr. Dobb's. A good framework architecture is flexible empowering developers and architects to implement their applications in a smart and elegant manner. Check date values in: |date= (help)
16. Mahajan, Sachin (2010-10-19). "Enhance Ajax development with a fusion of jQuery, ZK, and Java code". IBM developerWorks. The marriage between server-side Java code and jQuery can help you tackle the challenges in enterprise Ajax application development.

External links

• Official website
• ZK Live Demo
• An Interview with ZK Creator Tom Yeh
• Tutorial: ZK Rich Client Framework and Agile Development
• Tutorials for Informix applications with ZK I II III IV V VI VII
• Tutorials from IBM developerWorks I II IIIIV
• ZK - Ajax without JavaScript published by Apress
• ZK Developer's Guide published by Packt
• Ria com Framework ZK (Portuguese) published by Editora Ciência Moderna Ltda
• Rich Internet applications using ZK at IBM developerWorks
• Implementing event-driven GUI patterns using the ZK Java AJAX framework at IBM developerWorks
• Next-Generation Applications Using Ajax and OpenAjax at OpenAjax Alliance
• Zero-code AJAX framework sought at InfoWorld.
• Designing rich AJAX Web interfaces with ZK at Linux.com
• AJAX, DHTML and JavaScript Libraries at Smashing Magazine
• ZK and Agile at TheServerSide
• The ZK Framework at Dr.Dobb's Portal
• Explore the CDI programming model in ZK at IBM developerWorks
• ZK - AJAX without the JavaScript at IBM developerWorks
• Ajax with the ZK Framework at developer.com
• ZK Ajax Java Web Framework: Ajax with no JavaScript at infoQ.com