New Features of ZK 9.0.0 RC

From Documentation
Revision as of 04:43, 20 January 2022 by Hawk (talk | contribs) (correct highlight (via JWB))
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
DocumentationSmall Talks2019NovemberNew Features of ZK 9.0.0 RC
New Features of ZK 9.0.0 RC

Hawk Chen, Engineer, Potix Corporation
Nov. 13, 2019
ZK 9.0.0 RC


"Easy", "Ajax without Javascript" and "Rich Components" are the 3 top rated ZK values by the community since day one. ZK 9 carries on with the same drive and brings you 20+ new features and components such as Toast, Stepbar, Rangeslider, Drawer, Inputgroup, Anchornav, Linelayout,.. making the development even easier than ever.

ZK 9 requires Java 8 to compile, so please make sure you are with Java SE 8 or later versions. If you are coming from an older ZK version, remember to check out the #Upgrade Notes at the end of the page. For more information please refer to the Release Notes.


Highlighted Features

Upgrade to JDK 8

  • Available for ZK:
  • ce-pe-ee.png

ZK Now Requires Java SE 8 or later

The Java compiler source/target has been updated to Java 8, meaning the Java binary-compatible level is now Java 8 instead of Java 6. Please make sure to use Java 8 or later Java versions.

Support JDK8 Date/Time API

Datebox, Calendar, Timebox and Timepicker components now supports JDK 8 Date/Time API. Their constructors and setters now accept JDK 8 Date/Time and the getters can return JDK 8 Date/Time type. For example Datebox supports the following constructors:


For details, please refer to javadoc: Datebox, Timebox, Calendar, Timepicker

Support CSS3 Flex

  • Available for ZK:
  • ce-pe-ee.png

ZK 9 implement hflex/vflex in a whole new way, a more performant way -- by CSS3 flexbox, which is supported by modern browsers natively. It's no need to execute javascript to calculate the size. This change should be transparent for developers.

However if your application depends on the previous implementation, you can configure the org.zkoss.zul.css.flex library property to false to fall back to the previous implementation.

New Input Components


  • Available for ZK:
  • ce-pe-ee.png

With the new ZK Inputgroup component, you can now prepend or append labels, buttons, checkboxes, or radios to your input components to create your custom input.


Tristate checkbox

  • Available for ZK:
  • ce-pe-ee.png

Since ZK 8.6 we were able to display a 3rd state -- the indeterminate state of a checkbox. In ZK 9 we are taking one step further allowing users to set the indeterminate state, in addition to the checked and unchecked states. Specify mold= "tristate" to enable the tri-state checkbox.


  • Available for ZK:
  • pe-ee.png

An enhanced slider allowing users to choose a range between the specified upper bound and lower bound.



  • Available for ZK:
  • ee.png

Multislider provides multiple handlers for specifying range and boundaries of multiple segments.



  • Available for ZK:
  • ee.png

Searchbox allows users to select one or more entries in a list; and also allows users to filter the list in order to find the target entry.



  • Available for ZK:
  • ee.png

Cascader is a cascading input control used for multi-level input, such as an address input that allows users to drill-down and select Country > State > City.


New Navigation Components


  • Available for ZK:
  • pe-ee.png

Anchornav allows you to navigate to desired ZK components in a page and at the same time highlight the current navigation link based on the current scroll position.


  • Available for ZK:
  • ee.png

Stepbar displays the progress in a workflow and allows you to dynamically add/remove steps.


New Layout Components


  • Available for ZK:
  • ee.png

Linelayout is useful for presenting events happening in different timelines. This component is offered in both vertical and horizontal orientation.



  • Available for ZK:
  • ee.png

Drawer is a component that attaches to the four sides of your web page. Like a desk drawer it can be collapsed/closed to stay out of the view, or opened to display additional information contained in the Drawer.



  • Available for ZK:
  • ee.png

Portal Layout now provides PortalChildren title and frame design, making it extremely easy to create a Kanban-like layout for your application.


More New Components


  • Available for ZK:
  • pe-ee.png

With PDFViewer you can allow users to view PDF documents inside your ZK application without leaving the browser and going to an external application. PDFViewer comes with several controls like zoom in/out, rotate, and go-to-page.

Loading bar

  • Available for ZK:
  • ee.png

A modern, lightweight loading animation for indicating the loading progress. It can be placed on the top of the page under the address bar, or, at the bottom of the browser. You can specify its value (progress in %), position (top/bottom) and whether you would like to display the indeterminate animation.
Loading progress:





  • Available for ZK:
  • ee.png

Toast is a stackable notification that can be pinned on the screen.



  • Available for ZK:
  • ee.png

You can use coachmark to guide users to focus on a specific component in the page. By using the "next" attribute, it leads to the next coachmark for guiding user to the next step. Coachmark (dialog) takes not only text but also ZK components.



New ZK Less Engine

  • Available for ZK:
  • ce-pe-ee.png

The zkless-engine-maven-plugin has been replaced by the zkless-engine npm module (github). It provides a command line interface (CLI) to significantly reduce the general theme build times and the development turn-around when customizing ZK themes (via incremental watch compiler and live reloading in the browser).

This CLI can invoked directly as and integrated into maven or gradle build, making the former - more limited and slower - maven plugin obsolete.

More details in the README

When upgrading a theme to ZK 9 you'll have to escape ZK specific syntax using the escape (e) function. (here the commit upgrading ZK's default styles)

Upgrade to jQuery 1.12.4

  • Available for ZK:
  • ce-pe-ee.png

The underlying jQuery version is upgraded to 1.12.4 to include security fixes.

Upgrade Notes

Upgrade Tips

  • The Java binary-compatible level is Java 8 since ZK 9.
  • ZK Databinding 1 is moved to a legacy module "zkplus-legacy".
  • ZK DSP Library is moved to a new module "zweb-dsp".
  • SimpleLocalTimeConstraint is used by default instead of SimpleConstraint in Timebox and Timepicker.
  • It is advised to use instead of Clients.showNotification, as the former follows single responsibility principle.
  • Custom Themes based on zkThemeTemplate need to merge the latest changes (see New ZK Less Engine).


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