New Features of ZK 9.0.0 RC"

From Documentation
(36 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{Template:Smalltalk_Author|
 
{{Template:Smalltalk_Author|
 
|author=Hawk Chen, Engineer, Potix Corporation
 
|author=Hawk Chen, Engineer, Potix Corporation
|date= 2019
+
|date= Nov. 13, 2019
|version=ZK 9.0.0}}
+
|version=ZK 9.0.0 RC}}
  
 
__TOC__
 
__TOC__
Line 9: Line 9:
 
= Introduction =
 
= Introduction =
  
"Easy", "Ajax without Javascript" and "Rich Components" are the three 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.  
+
'''"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 [https://www.zkoss.org/product/zk/releasenote/9.0.0 Release Notes].  
+
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 [https://github.com/zkoss/zk/blob/master/zkdoc/release-note Release Notes].  
  
== Download and Demo ==
+
== Download ==
 
<br />
 
<br />
{{ZK Download}}
+
<div><div style="float: left;"><imagelink link="http://www.zkoss.org/download/zk?zk9" image="/_w/images/0/00/Download-zk-7.png" /></div>
{{ZK Demo}}
 
  
 
<br />
 
<br />
Line 32: Line 31:
  
 
==Support JDK8 Date/Time API==
 
==Support JDK8 Date/Time API==
Datebox, Calendar, Timebox and Timepicker components now supports JDK 8 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 <tt>Datebox</tt> supports the following constructors:
 +
 
 +
<source lang='java'>
 +
org.zkoss.zul.Datebox#Datebox(java.util.Date)
 +
org.zkoss.zul.Datebox#Datebox(java.time.LocalDate)
 +
org.zkoss.zul.Datebox#Datebox(java.time.LocalDateTime)
 +
org.zkoss.zul.Datebox#Datebox(java.time.LocalTime)
 +
org.zkoss.zul.Datebox#Datebox(java.time.ZonedDateTime)
 +
</source>
 +
For details, please refer to javadoc: [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Datebox.html Datebox], [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Timebox.html Timebox], [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Calendar.html Calendar], [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Timepicker.html Timepicker]
  
 
= [[ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.zul.css.flex | Support CSS3 Flex]]  =
 
= [[ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.zul.css.flex | Support CSS3 Flex]]  =
  
 
{{ZK All}}
 
{{ZK All}}
Since ZK 9 you can configure the org.zkoss.zul.css.flex library property to use CSS3 flex implementation for calculating ZK Flex.
+
ZK 9 implement hflex/vflex in a whole new way, a more performant way --  by [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox 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 <tt>org.zkoss.zul.css.flex</tt> library property to '''false''' to fall back to the previous implementation.
  
 
= New Input Components  =
 
= New Input Components  =
 
==[[ZK_Component_Reference/Containers/Inputgroup|Inputgroup]]==
 
==[[ZK_Component_Reference/Containers/Inputgroup|Inputgroup]]==
 
{{ZK All}}
 
{{ZK All}}
With the new ZK Inputgroup component, you can now prepend or append buttons, checkboxes, or radios to your input components to create your custom input.
+
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.
 
[[File:Inputgroup-small.png | center]]
 
[[File:Inputgroup-small.png | center]]
  
 
==[[ZK_Component_Reference/Input/Checkbox#tristate | Tristate checkbox]]==
 
==[[ZK_Component_Reference/Input/Checkbox#tristate | Tristate checkbox]]==
 
{{ZK All}}
 
{{ZK All}}
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.
+
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.
  
==Rangeslider==
+
==[[ZK_Component_Reference/Input/Rangeslider|Rangeslider]]==
 
{{ZK PE}}
 
{{ZK PE}}
 +
An enhanced slider allowing users to choose a range between the specified upper bound and lower bound.
 
[[File: Rangeslider.png | center]]
 
[[File: Rangeslider.png | center]]
  
==Multislider==
+
==[[ZK_Component_Reference/Input/Multislider|Multislider]]==
 
{{ZK EE}}
 
{{ZK EE}}
 +
Multislider provides multiple handlers for specifying range and boundaries of multiple segments.
 
[[File: Multislider.png | center]]
 
[[File: Multislider.png | center]]
  
Line 62: Line 74:
 
[[File:Searchbox.gif | center]]
 
[[File:Searchbox.gif | center]]
  
==Cascader==
+
==[[ZK_Component_Reference/Input/Cascader|Cascader]]==
 
{{ZK EE}}
 
{{ZK EE}}
 
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.
 
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.
Line 72: Line 84:
 
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.
 
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.
  
==Stepbar==
+
==[[ZK_Component_Reference/Supplementary/Stepbar|Stepbar]]==
 
{{ZK EE}}
 
{{ZK EE}}
 
Stepbar displays the progress in a workflow and allows you to dynamically add/remove steps.
 
Stepbar displays the progress in a workflow and allows you to dynamically add/remove steps.
Line 88: Line 100:
 
[[File: Drawer.gif | center ]]
 
[[File: Drawer.gif | center ]]
  
==Kanban==
+
==[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren#Title|Kanban]]==
 
{{ZK EE}}
 
{{ZK EE}}
 
Portal Layout now provides PortalChildren title and frame design, making it extremely easy to create a Kanban-like layout for your application.
 
Portal Layout now provides PortalChildren title and frame design, making it extremely easy to create a Kanban-like layout for your application.
Line 97: Line 109:
 
==[[ZK_Component_Reference/Multimedia_and_Miscellaneous/Pdfviewer|PDFViewer]]==
 
==[[ZK_Component_Reference/Multimedia_and_Miscellaneous/Pdfviewer|PDFViewer]]==
 
{{ZK PE}}
 
{{ZK PE}}
With PDFViewer you can allow users to view PDF documents inside your ZK application without leaving the browser and going to an external application.
+
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==
+
==[[ZK_Developer%27s_Reference/UI_Patterns/Useful_Java_Utilities#Loadingbar|Loading bar]]==
 
{{ZK EE}}
 
{{ZK EE}}
A modern loading animation under the address bar for indicating the loading progress.
+
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.
 
+
<br/>
 +
Loading progress:<br/>
 
[[File: Loadingbar.gif | center]]
 
[[File: Loadingbar.gif | center]]
 
<br/>
 
<br/>
 +
Indeterminate:<br/>
 
[[File: Loadingbar2.gif | center]]
 
[[File: Loadingbar2.gif | center]]
  
Line 115: Line 129:
 
==Coachmark==
 
==Coachmark==
 
{{ZK EE}}
 
{{ZK EE}}
You can use coachmark to guide users to focus on a specific item in the page.
+
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.
 
[[File:Coachmark.png | center ]]
 
[[File:Coachmark.png | center ]]
 
<br/>
 
<br/>
Line 134: Line 148:
 
(here [https://github.com/zkoss/zkThemeTemplate/commit/bb3de98705f946a1963a631e72c4f274d6e5005d#diff-bb84def0e04e8c6a797323bdd1e451ebR1 the commit] upgrading ZK's default styles)
 
(here [https://github.com/zkoss/zkThemeTemplate/commit/bb3de98705f946a1963a631e72c4f274d6e5005d#diff-bb84def0e04e8c6a797323bdd1e451ebR1 the commit] upgrading ZK's default styles)
  
== Upgrade jQuery version==
+
== Upgrade to jQuery 1.12.4==
 
{{ZK All}}
 
{{ZK All}}
The underlying jQuery version is upgraded to 1.12.4 to include security fixes.
+
The underlying jQuery version is upgraded to '''1.12.4''' to include security fixes.
  
 
<div style="height:70px; border-radius:5px;font-family: 'Didact Gothic', sans-serif; text-align:center; padding:5px; background-color: #0093f9;">
 
<div style="height:70px; border-radius:5px;font-family: 'Didact Gothic', sans-serif; text-align:center; padding:5px; background-color: #0093f9;">
 
<h1 style="margin: 5px;padding-bottom: 15px;border:2px dashed #F7EEEE;color:#fff;">Upgrade Notes</h1>
 
<h1 style="margin: 5px;padding-bottom: 15px;border:2px dashed #F7EEEE;color:#fff;">Upgrade Notes</h1>
 
</div>
 
</div>
 +
 
= Upgrade Tips =
 
= Upgrade Tips =
 
*The Java binary-compatible level is Java 8 since ZK 9.
 
*The Java binary-compatible level is Java 8 since ZK 9.
Line 152: Line 167:
 
<br/>
 
<br/>
  
{{ZK Download}}
+
<div><div style="float: left;"><imagelink link="http://www.zkoss.org/download/zk?zk9" image="/_w/images/0/00/Download-zk-7.png" /></div>
  
 
<br/>
 
<br/>

Revision as of 04:35, 19 November 2019

DocumentationSmall Talks2019NovemberNew Features of ZK 9.0.0 RC
New Features of ZK 9.0.0 RC

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


Introduction

"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.

Download







Highlighted Features

Upgrade to JDK 8

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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:

org.zkoss.zul.Datebox#Datebox(java.util.Date)
org.zkoss.zul.Datebox#Datebox(java.time.LocalDate)
org.zkoss.zul.Datebox#Datebox(java.time.LocalDateTime)
org.zkoss.zul.Datebox#Datebox(java.time.LocalTime)
org.zkoss.zul.Datebox#Datebox(java.time.ZonedDateTime)

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

Support CSS3 Flex

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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

Inputgroup

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Inputgroup-small.png

Tristate checkbox

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Rangeslider

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png

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

Rangeslider.png

Multislider

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Multislider.png

Searchbox

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Searchbox.gif

Cascader

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Cascader.gif

New Navigation Components

Anchornav

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Stepbar

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Stepbar.png

New Layout Components

Linelayout

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Linelayout.png

Drawer

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Drawer.gif

Kanban

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Kanban.png

More New Components

PDFViewer

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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:

Loadingbar.gif


Indeterminate:

Loadingbar2.gif

Toast

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Toast.png

Coachmark

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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.

Coachmark.png



Enhancements

New ZK Less Engine

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion 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 Notification.show 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).






Comments



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