New Features of ZK 5.0.6

From Documentation
DocumentationSmall Talks2011FebruaryNew Features of ZK 5.0.6
New Features of ZK 5.0.6

Author
Timothy Clare, Technology Evangelist, Potix Corporation
Date
February 23, 2010
Version
ZK 5.0.6

ZK 5.0.6 is a maintenance release focusing on fixing bugs and releasing new improved features for ZK components.

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.

<zk>
	<button label="Show a modal window" onClick="wnd.doModal()"/>
	<window id="wnd" title="Modal" border="normal" window="300px"
	 action="show: slideDown" visible="false">
		This is a modal window.
	</window>
</zk>

For more information please refer to the ZK Developer’s Reference, Actions and Effects.

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:

<!-- in WEB-INF/zk.xml -->
<preference>
	<name>org.zkoss.zk.ui.WebApp.name</name>
	<value>My Killer Application</value>
</preference>

For more information please refer to the ZK Configuration Reference, org.zkoss.zk.ui.WebApp.name.

The Doublespinner component

A new component name Doublespinner has been introduced in ZK 5.0.6. This component is very similar to the normal spinner component except instead of handing an integer value it will handle a double.

The following is a basic example.

ZKComRef Doublespinner.png

 <window title="Double Spinner" border="normal" width="150px">
     <doublespinner />
 </window>

For more information please look at the ZK Component Reference.

Intercepting document-level key events

If there is no widget which has focus when the application’s user presses a key then ZK will attempt to locate the first root component and forward the event to it. In the following example the div component will receive the onOK event.

<div onOK="doSomething()">
...
</div>

For more information please click here.

Round mold for Doublespinner, Intbox, Longbox, Doublebox, Decimalbox and Textbox

A new rounded mold has been introduced for the Doublespinner, Intbox, Longbox, Doublebox, Decimalbox and Textbox. To use this mold please just set the attribute mold to the value rounded. For example:

<textbox mold="rounded" />

The rounded mold for the above components is demonstrated in the image below.

Roundedmold.png

Simplified Tree Model

The TreeModel has been simplified with the introduction of the DefaultTreeModel which provides an mutable and sortable tree model for trees 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).

For more information please visit ZK Developer's Reference, Tree Model.

Databinding supports GroupsModel with Listbox/Grid

Enable ignoring of wiring for zscript and xel

ZK 5.0.6 now provides the option to turn off wiring of zscript variables and XEL. To do this one is required to specify the following options within zk.xml.

For Zscript

<!-- in WEB-INF/zk.xml -->
<library-property>
	<name>org.zkoss.zk.ui.composer.autowire.zscript</name>
	<value>false</value>
</library-property>

For XEL

<!-- in WEB-INF/zk.xml -->
	<library-property>
		<name>org.zkoss.zk.ui.composer.autowire.xel</name>
		<value>false</value>
	</library-property>

For more information please refer here for zscript and here for XEL.

New hflex attribute options, min and span

New attribute options have been added to hflex to help make powerful layouts even easier to achieve. ZK 5.0.6 introduces two new options, min and span.

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.

<borderlayout height="100%">
  <north title="North" collapsible="true" vflex="min">
    <borderlayout  vflex="min">
      <west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true" vflex="min">
        <div style="background:#B8D335">
        <label value="25%" style="color:white;font-size:50px" />
    </div>
    </west>
      <center border="none" flex="true" vflex="min">
        <div style="background:#E6D92C">
          <label value="25%" style="color:white;font-size:50px" />
        </div>
      </center>
      <east size="50%" border="none" flex="true" vflex="min">
        <label value="Here is a non-border" style="color:gray;font-size:30px" />
      </east>
    </borderlayout>
  </north>
  <center border="0">
    <box pack="center" align="center" width="100%" height="100%">
      <label value="This is the working area"
        style="font-size:30px" />
    </box>
  </center>
</borderlayout>

Vflexborderlayout.png

As you can see, the height of the north region of the outer borderlayout is determined by its child borderlayout. And the height of the inner borderlayout, in this example, is determined by the height of its west child region.

For more information please see the ZK Developer's Reference.

The span attribute

Sometimes it is preferred for the contents to fill the entire grid in a proportional manner. This can be achieved using the attribute span.

For example:

    <listbox width="800px" span='true'>
	<listhead>
 			<listheader label="Product" hflex="min"/>
 			<listheader label="Description" hflex="min"/>
 			<listheader label="Comment" hflex="min" />
 	</listhead>

ZK5DevRef GridColumn span.png

For more information please see the ZK Developer's Reference.

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:

package foo;
import org.zkoss.zk.ui.sys.SEORenderer;
import org.zkoss.zk.ui.Page;
public class MySEORenderer implements SEORenderer {
    public void render(Page page, java.io.Writer out)
    throws java.io.IOException {
        out.write("<a href=\"whatever\">whatever</a>");
    }
}

Then the class needs to be specified in the zk.xml file, for example:

<!-- in WEB-INF/zk.xml -->
<preference>
    <name>org.zkoss.zk.ui.sys.SEORenderer.class</name>
    <value>foo.MySEORenderer</value>
</preference>

Note that this class will be instantiated and invoked even if the crawlable option is not enabled. For more information please see the ZK Configuration Reference.

Comments



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