EL Expression"

From Documentation
m ((via JWB))
 
(28 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
 
+
{{Deprecated | url=[http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/el_expression.html zk-mvvm-book/8.0/data_binding/el_expression]|}}
  
  
Line 10: Line 10:
 
== Basic Format ==
 
== Basic Format ==
 
<!-- which part in zk bind annotation is EL & how to use -->
 
<!-- which part in zk bind annotation is EL & how to use -->
All ZK bind annotation has the general format:
+
[[ZK Developer's Reference/MVVM/Syntax/Data Binding| All ZK bind annotation]] has the general format:
  
 
''' @[Annotation]( value=[EL-expression], [arbitraryKey]=[EL-expression] ) '''
 
''' @[Annotation]( value=[EL-expression], [arbitraryKey]=[EL-expression] ) '''
Line 42: Line 42:
  
 
</source>
 
</source>
* 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.
+
* If evaluation result of <code>vm.currentField</code> is firstName, the binder loads <code>vm.person.firstName</code>. So which property of <code>vm.person</code> that a binder loads depends  on <code>vm.currentField</code>'s evaluation result.
  
 
+
== Call ViewModel Methods ==
== Call Methods ==
 
  
 
You can use EL expression to call a method in a ViewModel.
 
You can use EL expression to call a method in a ViewModel.
Line 53: Line 52:
  
 
<label value="@load(vm.concat(vm.foo,'postfix'))"/>
 
<label value="@load(vm.concat(vm.foo,'postfix'))"/>
 +
 +
</source>
 +
 +
== Call Tag Library's Methods ==
 +
 +
We could [[ZUML Reference/ZUML/Processing Instructions/taglib| call tag library's methods in a zul with EL expression]]; equally, we can also call them in a data binding expression and this calling can be nested. The syntax is as follows:
 +
 +
<source lang="xml">
 +
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
 +
...
 +
<label value="@load(c:cat('A-',vm.value))" />
 +
<label value="@load(c:cat3('$',c:formatNumber(vm.price, '00'), ' per person'))" />
 +
 +
</source>
 +
* Line 1: Declare the tag library for [[ZUML Reference/EL Expressions/Core Methods| core methods]].
 +
* Line 3: [[ZUML Reference/EL Expressions/Core Methods/cat| core's cat method]].
 +
* Line 4: Nested calling with [[ZUML Reference/EL Expressions/Core Methods/cat3| core's cat3 method]] and [[ZUML_Reference/EL_Expressions/Core_Methods/formatNumber | formatNumber]].
 +
 +
==Call Xel Methods ==
 +
The [[ZUML Reference/ZUML/Processing Instructions/xel-method| xel method]] allows developers to call a Java class's static method in EL expression without defining a tag library. You can also use this feature in data binding expression.
 +
 +
<source lang="xml">
 +
 +
<?xel-method prefix="x" name="max"
 +
    class="java.lang.Math"
 +
    signature="int max(int,int)"?>
 +
...
 +
<intbox value="@bind(vm.value1)"/>
 +
<intbox value="@bind(vm.value2)"/>
 +
<label value="@load(x:max(vm.value1,vm.value2))"/>
  
 
</source>
 
</source>
Line 58: Line 87:
 
= Tips =
 
= Tips =
 
Some EL characters are illegal in XML attribute or ZK annotation, you should replace them with other EL operators.
 
Some EL characters are illegal in XML attribute or ZK annotation, you should replace them with other EL operators.
{{LastUpdated}}
+
{| class='wikitable' | width="100%"
{| border='1px'
+
! Character !! Replacement  
! Characters !! Replacement  
 
 
|-
 
|-
 
| =
 
| =
Line 68: Line 96:
 
| ne
 
| ne
 
|-
 
|-
| &
+
| &&
 
| and
 
| and
 
|-
 
|-
Line 76: Line 104:
 
| <=
 
| <=
 
| le
 
| le
 +
|-
 +
| >
 +
| gt
 +
|-
 +
| >=
 +
| ge
 
|}
 
|}
  
Line 89: Line 123:
  
 
=Version History=
 
=Version History=
{{LastUpdated}}
+
 
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 07:35, 8 July 2022

Stop.png This article is out of date, please refer to zk-mvvm-book/8.0/data_binding/el_expression for more up to date information.


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 ViewModel 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 and this calling can be nested. The syntax is as follows:

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
...
	<label value="@load(c:cat('A-',vm.value))" />
	<label value="@load(c:cat3('$',c:formatNumber(vm.price, '00'), ' per person'))" />

Call Xel Methods

The xel method allows developers to call a Java class's static method in EL expression without defining a tag library. You can also use this feature in data binding expression.

<?xel-method prefix="x" name="max"
    class="java.lang.Math"
    signature="int max(int,int)"?>
...
	<intbox value="@bind(vm.value1)"/>
	<intbox value="@bind(vm.value2)"/>
	<label value="@load(x:max(vm.value1,vm.value2))"/>

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
> gt
>= ge

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.



Last Update : 2022/07/08

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