New Features of ZK 5.0.5"

From Documentation
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Template:Smalltalk_Author|
 +
|author=Timothy Clare, Technology Evangelist, Potix Corporation
 +
|date=November 2, 2010
 +
|version=ZK 5.0.5
 +
}}
 +
 +
ZK 5.0.5 is a maintenance release focusing on fixing bugs and releasing new improved features for ZK components. ZK  5.0.5 brings with it an upgrade to jQuery 1.4.3 as well as enhancements to the Listbox, Tree and hlayout among others.
 +
 
=Specify whether clicking a Listitem will uncheck others=
 
=Specify whether clicking a Listitem will uncheck others=
  
Line 4: Line 12:
  
 
For more information please refer to the [[ZK_Component_Reference/Data/Listbox#Deselect_others_when_clicking_an_item_with_checkmark | ZK Component Reference]].
 
For more information please refer to the [[ZK_Component_Reference/Data/Listbox#Deselect_others_when_clicking_an_item_with_checkmark | ZK Component Reference]].
 +
 +
=Specify whether clicking a control will select a Listitem=
 +
 +
When clicking a BUTTON, INPUT, TEXTAREA or A tag, the selection state of the item won't be changed. For example, when an user clicks the textbox in the following example, the selection state of the item won't be changed as only the textbox gains the focus.
 +
 +
With ZK 5.0.5 this is now possible using the attribute <mp>nonselectableTags</mp>. For example, if you want to select the item, no matter what tag the user clicks, you could specify an empty string as follows.
 +
 +
<source lang="xml">
 +
<listbox nonselectableTags="">
 +
    <listitem><listcell><textbox/></listcell></listitem>
 +
    <listitem><listcell><button label="button"/></listcell></listitem>
 +
    <listitem><listcell><h:input xmlns:h="native"/></listcell></listitem>
 +
    <listitem><listcell><datebox/></listcell></listitem>
 +
</listbox>
 +
</source>
 +
 +
For more information please refer to the [[ZK_Component_Reference/Data/Listbox#Nonselectable_tags | ZK Component Reference]].
 +
 +
=The Listbox/Tree supports the option to check/uncheck on right click=
 +
 +
If a listbox's checkmark (<javadoc method="isCheckmark()">org.zkoss.zul.Listbox</javadoc>) is enabled, the selection will be toggled when user right click on item. If you prefer not to select/deselect item on right click, you could specify false to this library property called <tt>org.zkoss.zul.listbox.rightSelect</tt> in <tt>WEB-INF/zk.xml</tt>.
 +
 +
<source lang="xml">
 +
<library-property>
 +
<name>org.zkoss.zul.listbox.rightSelect</name>
 +
<value>false</value>
 +
</library-property>
 +
</source>
 +
 +
For more information please refer to the [[ZK_Component_Reference/Data/Listbox#Toggle_selection_when_right_clicking_an_item_with_checkmark | ZK Component Reference - Listbox]] and [[ZK_Component_Reference/Data/Tree#Toggle_selection_when_right_clicking_an_item_with_checkmark | ZK Component Reference - Tree]].
 +
 +
=Vertical alignment in a hlayout=
 +
 +
By default the vertical alignment of the hlayout is "center". It is now possible to change this by specifying the sclass to <mp>z-valign-top</mp> or <mp>z-valign-bottom</mp> for top or bottom alignment respectively.
 +
 +
<source lang="xml">
 +
<vlayout>
 +
    <hlayout>
 +
        center: <textbox/>
 +
    </hlayout>
 +
    <hlayout sclass="z-valign-top">
 +
        top: <textbox/>
 +
    </hlayout>
 +
    <hlayout sclass="z-valign-bottom">
 +
        bottom: <textbox/>
 +
    </hlayout>
 +
</vlayout>
 +
</source>
 +
 +
[[File:SmallTalks_New_Features_5.0.5_hlayout.png]]
 +
 +
For more information please refer to the [[ZK_Component_Reference/Layouts/Hlayout#Vertical_Alignment | ZK Component Reference]].
 +
 +
=Access components in a 3rd party framework=
 +
 +
With ZK 5.0.5 there is a new method for integrating ZK components into foreign frameworks. The methodology centers around a new method <javadoc method="render(javax.servlet.ServletContext, javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse, org.zkoss.zk.ui.Component, java.lang.String, java.io.Writer)">org.zkoss.zkplus.embed.Renders</javadoc>.
 +
 +
For more information please refer to the [[ZK_Developer's_Reference/Integration/Embed_ZK_Component_in_Foreign_Framework | ZK Developer's Reference]].
 +
 +
=Generating a ZUL page as an HTML fragment=
 +
 +
By default, if a ZUL page is requested by the browser directly, it will generate a complete HTML structure, including HTML, HEAD and BODY tags. However, if the inclusion is done using javax.servlet.RequestDispatcher's include then the ZUL page will be generated as a HTML fragment without the HTML, HEAD or BODY tags.
 +
 +
Now it is possible to request a ZUL page and have it outputted as an HTML fragment for assembling it at the client then it is now possible.
 +
 +
For more information please refer to the [[ZK_Developer's_Reference/Integration/Use_ZK_as_Fragment_in_Foreign_Templating_Framework | ZK Developer's Reference]].
 +
 +
=Upgraded the client engine to jQuery 1.4.3=
 +
 +
ZK 5.0.5 has upgraded the client engine to jQuery 1.4.3 which brings with it all the improvements which has gone into it. Such improvements include performance improvements to .css() Get, closest(), filter() and .find().
 +
 +
For more information please refer to the [http://blog.jquery.com/2010/10/16/jquery-143-released/ jQuery blog].
 +
 +
=New LabelLocator which allows you to return an InputStream instead of a URL=
 +
 +
When you require internationalization in your application you can use an interface called <javadoc type="interface">org.zkoss.util.resource.LabelLocator</javadoc> to load from another resource such as a database. The <javadoc type="interface">org.zkoss.util.resource.LabelLocator</javadoc> interface requires a URL to be returned. However, ZK 5.0.5 introduces a new interface named <javadoc type="interface">org.zkoss.util.resource.LabelLocator2</javadoc> which enables the return of a InputStream rather than a URL.
 +
 +
For more information please refer to the [[ZK_Developer's_Reference/Internationalization/Labels#Loading_Locale-dependent_labels_from_database | ZK Developer's Reference - Internationalization]].
 +
 +
=Listbox now supports the span attribute=
 +
 +
By default when <mp>sizeByContent</mp> is used the column only takes up the required space which can lead to gaps at the side of the listbox, for example:
 +
 +
[[Image:ZKComRef_Listbox_Nospan.png]]
 +
 +
With ZK 5.0.5 by setting <mp>span</mp> to true you can have the columns take up the entire space of the Listbox.
 +
 +
[[Image:ZKComRef_Listbox_Span.png]]
 +
 +
For more information please refer to the [[ZK_Component_Reference/Data/Listbox#span | ZK Component Reference - Listbox]].
 +
 +
 +
[[Category:ZK]]
 +
[[Category:Release]]
 +
{{Template:CommentedSmalltalk_Footer|
 +
|name=Potix Corporation
 +
}}

Revision as of 10:43, 8 November 2010

DocumentationSmall Talks2010OctoberNew Features of ZK 5.0.5
New Features of ZK 5.0.5

Author
Timothy Clare, Technology Evangelist, Potix Corporation
Date
November 2, 2010
Version
ZK 5.0.5

ZK 5.0.5 is a maintenance release focusing on fixing bugs and releasing new improved features for ZK components. ZK 5.0.5 brings with it an upgrade to jQuery 1.4.3 as well as enhancements to the Listbox, Tree and hlayout among others.

Specify whether clicking a Listitem will uncheck others

When clicking a listitem with a checkbox in ZK 5.0.4 and earlier the checkbox would become checked and uncheck the other rows. Since, ZK 5.0.5 the spec has been changed and by default when clicking a listitem it will become checked but will not uncheck other rows. If you prefer to uncheck other rows when clicking a listitem you can specify true to this library property called org.zkoss.zul.listbox.checkmarkDeselectOthers in WEB-INF/zk.xml.

For more information please refer to the ZK Component Reference.

Specify whether clicking a control will select a Listitem

When clicking a BUTTON, INPUT, TEXTAREA or A tag, the selection state of the item won't be changed. For example, when an user clicks the textbox in the following example, the selection state of the item won't be changed as only the textbox gains the focus.

With ZK 5.0.5 this is now possible using the attribute nonselectableTags. For example, if you want to select the item, no matter what tag the user clicks, you could specify an empty string as follows.

<listbox nonselectableTags="">
    <listitem><listcell><textbox/></listcell></listitem>
    <listitem><listcell><button label="button"/></listcell></listitem>
    <listitem><listcell><h:input xmlns:h="native"/></listcell></listitem>
    <listitem><listcell><datebox/></listcell></listitem>
</listbox>

For more information please refer to the ZK Component Reference.

The Listbox/Tree supports the option to check/uncheck on right click

If a listbox's checkmark (Listbox.isCheckmark()) is enabled, the selection will be toggled when user right click on item. If you prefer not to select/deselect item on right click, you could specify false to this library property called org.zkoss.zul.listbox.rightSelect in WEB-INF/zk.xml.

<library-property>
	<name>org.zkoss.zul.listbox.rightSelect</name>
	<value>false</value>
</library-property>

For more information please refer to the ZK Component Reference - Listbox and ZK Component Reference - Tree.

Vertical alignment in a hlayout

By default the vertical alignment of the hlayout is "center". It is now possible to change this by specifying the sclass to z-valign-top or z-valign-bottom for top or bottom alignment respectively.

<vlayout>
    <hlayout>
        center: <textbox/>
    </hlayout>
    <hlayout sclass="z-valign-top">
        top: <textbox/>
    </hlayout>
    <hlayout sclass="z-valign-bottom">
        bottom: <textbox/>
    </hlayout>
</vlayout>

SmallTalks New Features 5.0.5 hlayout.png

For more information please refer to the ZK Component Reference.

Access components in a 3rd party framework

With ZK 5.0.5 there is a new method for integrating ZK components into foreign frameworks. The methodology centers around a new method Renders.render(ServletContext, HttpServletRequest, HttpServletResponse, Component, String, Writer).

For more information please refer to the ZK Developer's Reference.

Generating a ZUL page as an HTML fragment

By default, if a ZUL page is requested by the browser directly, it will generate a complete HTML structure, including HTML, HEAD and BODY tags. However, if the inclusion is done using javax.servlet.RequestDispatcher's include then the ZUL page will be generated as a HTML fragment without the HTML, HEAD or BODY tags.

Now it is possible to request a ZUL page and have it outputted as an HTML fragment for assembling it at the client then it is now possible.

For more information please refer to the ZK Developer's Reference.

Upgraded the client engine to jQuery 1.4.3

ZK 5.0.5 has upgraded the client engine to jQuery 1.4.3 which brings with it all the improvements which has gone into it. Such improvements include performance improvements to .css() Get, closest(), filter() and .find().

For more information please refer to the jQuery blog.

New LabelLocator which allows you to return an InputStream instead of a URL

When you require internationalization in your application you can use an interface called LabelLocator to load from another resource such as a database. The LabelLocator interface requires a URL to be returned. However, ZK 5.0.5 introduces a new interface named LabelLocator2 which enables the return of a InputStream rather than a URL.

For more information please refer to the ZK Developer's Reference - Internationalization.

Listbox now supports the span attribute

By default when sizeByContent is used the column only takes up the required space which can lead to gaps at the side of the listbox, for example:

ZKComRef Listbox Nospan.png

With ZK 5.0.5 by setting span to true you can have the columns take up the entire space of the Listbox.

ZKComRef Listbox Span.png

For more information please refer to the ZK Component Reference - Listbox.

Comments



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