ZK Developer's Reference/MVVM/Data Binding/EL Expression

EL Expression in Data Binding

In ZK bind annotation, we adopt EL expression to specify a binding target and reference an implicit object. The binding target is mostly a ViewModel's (nested) properties. You can use EL expression in a ZUL which is described in the section ZK Developer's Reference/UI Composing/ZUML/EL Expressions. But using EL in ZK bind annotation is a little bit different in format and evaluation.

Basic Format

All ZK bind annotation has the general format:

@[Annotation]( value=[EL-expression], [arbitraryKey]=[EL-expression] )

It starts from a "@" symbol followed by an annotation's name like "id" or "bind". Inside parentheses we can write multiple key-value pairs separated with a comma. The key is a self-defined name (not an EL expression), and it's like a key in a Map. The value is an EL expression but is not enclosed with "${" and "}". The default key name is "value". If you only write a EL expression without specifying its key name, it's implicit set to key named "value". Hence we usually omit this default key name when writing ZK bind annotation. In most case, we can just write a annotation as follows:

@[Annotation]( [EL-expression])

We just need to write one key-value pair and omit default key name. We often use multiple key-value pairs for passing parameters to command, converter, and validator.

Although all ZK bind annotation has the general format, the way how a binder parse and evaluates the EL expression is different among different annotations. We'll describe the differences in the following sections.

Run-time Evaluation

A binder usually evaluates an EL expression each time when it wants to access the target object. Hence The evaluation result might be different from time to time.

Command binding according to run-time value

<button label="Cmd" onClick="@command(vm.checked?'command1':'command2')" />

<groupbox visible="@load(not empty vm.selected)" />

• When clicking the button, the binder executes a command upon value of "vm.checked".

Indirect reference

<label value="@bind(vm.person[vm.currentField])"/>

• If evaluation result of vm.currentField is firstName, the binder loads vm.person.firstName. So which property of vm.person that a binder loads depends on vm.currentField's evaluation result.

Call Methods

You can use EL expression to call a method in a ViewModel.

Call concat() of a ViewModel

<label value="@load(vm.concat(vm.foo,'postfix'))"/>

Call Tag Library's Methods

We could call tag library's methods in a zul with EL expression; equally, we can also call them in a data binding expression. The syntax is as follows:

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<label value="@load(c:cat(vm.value,'A'))"/>
<textbox value="@load(c:cat(c:cat('abc',vm.value), 'def'))" />

Line 3: We call core's cat method.

Tips

Some EL characters are illegal in XML attribute or ZK annotation, you should replace them with other EL operators.

Character	Replacement
=	eq
!=	ne
&&	and
<	lt
<=	le

For example:

<image src="@load(vm.picture ne null ? 'images/'.concat(vm.picture) : 'images/NoImage.png')"/>

<label value="@bind(vm.age lt 18?'true':'false')"/>

Version History

Version	Date	Content
6.0.0	February 2012	The MVVM was introduced.