Enhanced layouts using hflex and span

There are two methods of controlling the width of a column, width and hflex. Both these options are specified in the column or listheader definition. The width attribute takes a precise number such as 100px whereas hflex is used to specify a proportional width such as hflex="1". If the total width of all columns is smaller than the Grid then whitespace will be shown on the far right of the grid. To counteract this one can use the span attribute which when set to true will make every column's width a bit larger to cover the whole grid.

ZK 5.0.6 has enhanced hflex and span to give the developer more power when controlling the size of the grid, listbox and tree columns. Firstly let's take a look at the hflex enhancement.

The min value

As developers we may wish for the width of a column to be dictated by the size of the content. This requirement is satisfied by the min option, which when used let's hflex know to size the component dependent upon its content. For example.

It now possible using the span to designate a column which will cover the extra space. This is done by providing span with a column number where the first column is numbered 0. For example if span="2" is used this will expand the third column.

Generating custom SEO content

SEO using ZK has just got more powerful. Originally SEO was implemented by enabling the crawlable option, however, a new feature has been introduced to supplement this. It is now possible to implement an application-specific SEO renderer which will output generated content which will be indexed by search engines but not visible to end users.

To make use of this feature a rendering class needs to be implemented, for example:

Simplified Tree Model

The TreeModel has been simplified with the introduction of the DefaultTreeModel which provides an mutable and sortable tree model for tree data which are small enough to be completely loaded into memory. It is then possible to manipulate the tree dynamically, such as adding a node using DefaultTreeNode.add(TreeNode).

Customize effects when showing and hiding a widget

Using ZK 5.0.6 it is now possible to apply client-side actions to widgets which descend from the class HtmlBasedComponent using the action property. This feature enables developers to control actions without the need for JavaScript.

The syntax for actions is as follows:

action="action-name1: effect1; action-name2: effect2"

The following example demonstrates how to set the action of a window to slide down.

Specify the application's name in zk.xml

ZK 5.0.6 introduces an easier way to specify the name of the application. Previously ZK developers used the method WebApp.setAppName(String). However, it is now possible to set the application’s name in the zk.xml, for example:

Enable ignoring of wiring for zscript and xel

ZK 5.0.6 now provides more control over the wiring of zscript variables and XEL. It is now possible to turn this wiring off which can improve the performance of applications which rely heavily on zscript. It should be noted that using zscript in a production application is not best practice, for more information please consult the performance tips.

To disable autowiring one is required to specify the following options within zk.xml.