New Features of ZK 6.5.2

From Documentation
DocumentationSmall Talks2013MarchNew Features of ZK 6.5.2
New Features of ZK 6.5.2

Timothy Clare, Potix Corporation
March 26, 2013
ZK 6.5.2


ZK 6.5.2 concentrates on fixing bugs and introducing a few new features and community improvements such as the moving of functionality to ZK Bind to ZK CE and theme improvements.

ZK 6.5 series focuses on taking developers to achieve real device transparency in one codebase and component set, exploring the area of combined desktop & tablet UI and touch experiences. Introducing responsive design and responsive components to always fit your device screen resolution and tablet-specific user interaction methods such as swiping and device orientation detection which are done automatically to save developers time, effort and to increase massive productivity.

Moving MVVM (ZK Bind) functionality to our community edition

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

ZK 6.5.2 brings improvements for our community edition as some features have been moved from PE and EE to CE. The biggest of these changes is the implicit event object which supports in command binding expression, for example:

<treeitem ... onDrop="@command('move',target=event.dragged.value,">

Previously you could not use this functionality in ZK CE.

Debugging MVVM (ZK Bind)

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

In ZK 6.5.2 it is now possible to more effectively debug MVVM, thus enabling developers to resolve problems quicker and more effectively. To turn on ZK Bind debugging all that is needed is to edit the zk.xml file adding the following:


Please do not enable it in the production environment otherwise it will reduce performance. For more information please refer to the developer's reference.

Improved Theme Support

ZK 6.5.2 has introduced quite a few theme improvements for the benefit of our developers.

Folder based theme

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

With the introduction of ZK 6.5.2 it is now possible to use a theme from a folder significantly simplifying the task of developers and designers alike. The following gives a top level view of a folder structure.

Theme skeleton.png

Not only that as creating a structure for the theme manually can be tedious and error-prone the ZK developers have written a tool to do this. The tool can be found here.

Ztx session.png

For more information please visit the following Small Talk.

Tablet themes

  • Available for ZK:
  • ee.png

It is now possible to produce themes for only tablets. This means that now themes can have suport for desktop-only, tablet-only or both. The following is a very simple example:

Partial dark tablet.png

For more information please consult the Small Talk.

Registering themes

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

To support the above functionality a change to the registration mechanism is needed. Since the origin of the new theme is from a folder, ZK 6.5.2 extends the theme registration API for this purpose. ThemeOrigin is an enum defined to specify the origin of the registered theme.

For example:

 1 ...
 2 import org.zkoss.zul.theme.Themes;
 3 import org.zkoss.web.theme.StandardTheme.ThemeOrigin;
 4 ...
 5 public class MainViewModel {
 6 	...
 7 	@Init
 8 	public void init() {
 9 		...
10 		Themes.register("dark", ThemeOrigin.FOLDER);
11 		...	
12 	}
13 	...
14 }
  • Available for ZK:
  • ee.png

You can also register tablet themes by prefixing the theme name with "tablet:", for example:

1 Themes.register("tablet:dark", ThemeOrigin.FOLDER);

For more information on both these techniques please visit the following Small Talk.

DHtmlLayoutPortlet supports Portlet 2.0

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

Big news is that ZK's DHtmlLayoutPortlet now supports the Portlet 2.0 specification. This means that developers and users can use ZK to run on a Portlet server that supports JSR 286. This is all handled transparently so developers do not need to do anything to make this functionality work.

The position of Popup, Tooltip and ContextMenu is now even more customizable

Since 6.5.2, it is now possible to specify the position of the Popup, Tooltip and ContextMenu using a formula which will execute on the client side. This gives developers much more power over how to display their popups.

          <!-- bottom right of mouse pointer -->
          <label value="Click Me!" popup="status, x=(zk.currentPointer[0] + 30), y=(zk.currentPointer[1] + 50)"/>
          <popup id="status" width="300px">
                  This user is online now !
                  <a label="Mail him/her"/>

For more information please visit the Developer's Reference

Download & other resources


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