Envisage ZK 6: The Next Generation Data Binding System"

From Documentation
Line 125: Line 125:
  
 
==Automatic Java annotated data dependency tracking==
 
==Automatic Java annotated data dependency tracking==
*Controllable load on save
+
*Controllable load on save
*@NotifyChange to notify property changes
+
*@NotifyChange to notify property changes
*@DependsOn to specify property change dependency
+
*@DependsOn to specify property change dependency
 +
<source lang="java">
 +
@NotifyChange //notify firstname change
 +
public void setFirstname(String fn) {
 +
    firstname = fn;
 +
}
 +
 
 +
@NotifyChange //notify lastname change
 +
public void setLastname(String ln) {
 +
    lastname = ln;
 +
}
 +
 
 +
@DependsOn({"firstname","lastname"}) //full name will change if either firstname and/or lastname change
 +
public String getFullname() {
 +
    return firstname + " " + lastname;
 +
}
 +
</source>
  
 
==Embedded validation cycle==
 
==Embedded validation cycle==

Revision as of 07:58, 21 October 2011

DocumentationSmall Talks2011OctoberEnvisage ZK 6: The Next Generation Data Binding System
Envisage ZK 6: The Next Generation Data Binding System

Author
Henri Chen, Principal Engineer, Potix Corporation
Date
October 21, 2011
Version
ZK 6


Introduction

This is a whole new data binding system with new specifications and implementations. Based on the experiences learned from our version one data binder and feedbacks from users' and contributors' suggestions, we have cooked this easy to use, flexible, features rich new data binding system in ZK6.

Features

A whole new, clean annotation expression

  • Same Java style annotation expression in zul: The new ZK annotation is consistent with Java's annotation style. If you know the Java style, you know the ZK Style. For details, please refer to [link].
  • A set of collaborated annotations: ZK Bind use a set of annotations to make using data binding as intuitive and clear as possible.
    • @bind(...): used to bind data and command
    • @converter(...): used to specify converters along with parameters
    • @valiator(...): used to specify validators along with parameters
    • @form(...): used to bind a form.

EL 2.2 flexiable expressions

  • ZK Bind accept EL 2.2 syntax expression that you can provide flexible operations easily.
  • Bind to bean properties, indexed properties, Map keys seamlessly.
  • Bind to component custom attributes automatically.
  • Bind to Spring, CDI, and Seam managed bean automatically.

One way load only data binding

  • Load when bean property changes
<label value="@bind(load=vm.person.fullname)"/>
  • Conditional load after executing command
<label value="@bind(load=vm.person.firstname after 'update')"/>
  • Conditional load before executing command
<label value="@bind(load=vm.person.firstname before 'delete')"/>
  • Multiple conditional load before/after different/same commands
<label value="@bind(load={vm.person.firstname after 'update', vm.person.message after 'delete'})"/>

One way save only data binding

  • Save when UI component attribute changes
<textbox value="@bind(save=vm.person.firstname)"/>
  • Multiple save to property of different target beans
<textbox value="@bind(save={vm.person.firstname, vm.tmpperson.firstname})"/>
  • Conditional save before executing command
<textbox value="@bind(save=vm.person.firstname before 'update')"/>
  • Conditional save after executing command
<textbox value="@bind(save=vm.person.firstname after 'delete'"/>
  • Multiple conditional save before/after executing different/same commands
<textbox value="@bind(save={vm.selected.firstname before 'update', vm.newperson.firstname before 'add'}"/>

Initial data binding

  • Load when UI components are first added into the binding system
<label value="@bind(init=vm.selected.firstname)"/>

Two way data binding

  • Short expression of both save and load bindings
<textbox value="@bind(vm.person.firstname)"/>
  • Load and save on different target beans
<textbox value="@bind(load=vm.selected.firstname, save={vm.selected.firstname, vm.newperson.firstname before 'add'})"/>

Bind to any attributes of the UI components

  • Bind symmetrically to all attributes of UI components
<hlayout>
    <textbox value="@bind(vm.symbol)" instant="true"/>
    <button onClick="@bind('subscribe')" disabled="@bind(empty vm.symbol)" label="Subscribe" />
</hlayout>

Event command binding

  • Bridge ZK event to command
  • Automatic event listener registration
  • Simple command name invocation
<button onClick="@bind('subscribe')" disabled="@bind(empty vm.symbol)" label="Subscribe" />

Template/Collection binding

  • Binding on Listbox/Grid/Tree/Combobox
  • Local variable scope is limited to the container component
  • Support index property
<listbox width="300px" model="@bind(vm.albumList)" selectedItem="@bind(vm.selectedAlbum)" vflex="true">
    <template name="model" var="a">
        <listitem label="@bind(a.title)"/>
    </template>
</listbox>

Form binding

  • Middle form binding to avoid affecting back-end data beans
  • Submit a form in a whole
  • Conditional save for different commands
<grid self="@form(id='fx', load=vm.selected, save={vm.selected on 'update', vm.newAlbum on 'add'})">
    <row>Title: <textbox value="@bind(fx.title)"/></row>
    <row>Artist: <textbox value="@bind(fx.artist)"/></row>
    <row><checkbox checked="@bind(fx.classical)"/> Classical</row>
    <row>Composer: <textbox value="@bind(fx.composer)"/></row>
</grid>
<button onClick="@bind('add')" label="Add"/>

Automatic Java annotated data dependency tracking

  • Controllable load on save
  • @NotifyChange to notify property changes
  • @DependsOn to specify property change dependency
@NotifyChange //notify firstname change
public void setFirstname(String fn) {
    firstname = fn;
}

@NotifyChange //notify lastname change
public void setLastname(String ln) {
    lastname = ln;
}

@DependsOn({"firstname","lastname"}) //full name will change if either firstname and/or lastname change
public String getFullname() { 
    return firstname + " " + lastname;
}

Embedded validation cycle

*Bind validator by name or by EL expression *Embedded system Validator: provide commonly used validators that user can use directly by specify the name

Enhanced converter mechanism

*Bind converter by name or by EL expression *Embedded system Converters: provide commonly used converters that user can use directly by specify the name

GenericBindComposer

*Ease UI component tree, binder, and data source association *Each binder covers only the applied component tree *Inter-BindComposer communications

Bind on demand

*Support dynamically add/remove bindings by API. *Attatched components with binding annotations are automatically managed by the existing binder if covered. *Detached components that were managed by a binder are automatically removed from the management.

Support seamless MVVM design pattern

*You can now utilize MVVM design pattern to achieve "separation of data and logic from presentation" easily with the new ZK Bind data binding system. For details about how to apply MVVM design pattern with ZK Bind, please see this series of Smalltalks[link].

The Album Example with ZK Bind

This is an example "steal" from the article Presentation Model by Martin Fowler. The use case is simple, whenever an album is selected from the