ZK MVVM REFERENCE summary

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/qq_40646143/article/details/86512921

Annotation Expression
@id(..)	id used to identify the instance, for example, the model view or Form
@init(..)	For instance initialization
@load(..)	For binding data and commands, and is used to load data into the target parameters
@save(..)	For binding data and commands and parameters for saving data
@bind(..)	Binding data and parameters used for loading and saving of
@ref(..)	An expression used to refer to
@converter(..)	Its parameter is used to specify the converter
@validator(..)	And parameter specifies the authentication
@command(..)	And the parameters for the event is bound to command
@global command(..)	Events and parameters used to bind to the global command
@template(..)	To render the container assembly is used to determine the template

1), ZK commonly used characters

Some el character is illegal in xml property or zk comments, you should replace them with other el operators.

Tips
=	eq
!=	born
&&	and
<	lt
<=	the
>	gt
>=	e

E.g:

                        <h5 if="${arg.action eq 'create'}">新增</h5>
                        <h5 if="${arg.action ne 'create'}">修改</h5>

2),@init at viewModel Attribute

The first place we usually use this comment is to assign to the component ViewModel ViewModel property.
When used in viewmodel property, we should specify the fully qualified class name in a string of text @init in.

Using the following example:

<z:div 
           viewModel="@id('vm') @init('com.tuogo.sephora.rb.system.zk.mvvm.SecUserFormVM')">
</z:div>

3),@init at Form Binding

We can also be filled with predefined values using the initial binding on the form binding.
And it is used together viewmodel

Use as follows:

   <z:div 
           viewModel="@id('vm') @init('com.tuogo.sephora.rb.system.zk.mvvm.SecUserFormVM')"
           form="@id('m') @load(vm.domainModel) @save(vm.domainModel,before={'submit'})">
   </z:div>

4), Iteration Variable- iteration variable use

We typically use a collection of binding with <template> and specify "var" attribute named iterator variable that represents each entry of the set of
If you do not specify var iterator variable name, the default name var is: each.

Use the following

<template name="model" var="item">
...
</template>

5), Implicit Iteration Status Variable- implicit iterative state variables

zk automatically set the iteration state variable names based on the name of the iteration variable, the variable storage iteration index.
For example, if the set var = "item", the iteration index is itemstatus.index:
If you do not specify the iteration variable var name, the default variable called implicit iteration status: ForEachStatus.

<listbox>
 <template name="model" var="item">
    <listitem >
        <listcell label="@load(itemStatus.index)"/>
    </listitem>
 </template>
</listbox>

6), Binding on Listbox- bound to listbox

<listbox model="@load(vm.orders)" selectedItem="@bind(vm.selected)" hflex="true" height="200px">
 <listhead>
    <listheader label="Row Index"/>
    <listheader label="Id"/>
    <listheader label="Quantity" align="center" width="80px" />
    <listheader label="Price" align="center" width="80px" />
    <listheader label="Creation Date" align="center" width="100px" />
    <listheader label="Shipping Date" align="center" width="100px" />
</listhead>
<template name="model" var="item">
 <listitem >
    <listcell label="@load(itemStatus.index)"/>
    <listcell label="@load(item.id)"/>
    <listcell label="@load(item.quantity)" style="@load(item.quantity lt 3?'color:red':'')"/>
    <listcell label="@load(item.price)"/>
    <listcell label="@load(item.creationDate)"/>
    <listcell label="@load(item.shippingDate)"/>
</listitem>
 </template>
</listbox>

We will ListBox bound to the model set type attributes: list <order>
We will "selectitem" bound to the same object type collection (order) ViewModel properties. Each time the user selects a list box item, Binder will save the selected object to the ViewModel. Therefore, we can get the user's choice
Value "var" attribute: item represents an object model, and therefore use dot notation refer to its properties, for example the number of projects. It is indexed in the collection can be referenced by itemstatus.index.
With the power of el, we can achieve a simple presentation logic on zul. Here we show the number of red. Color of less than 3.

7),@ToServerCommand

We want to place the order by the client to inform binding triggers the server. We only pay attention to the commands in this comment received on the server.
Note: If the value of the annotation contains the value "*" indicates acceptance of all the commands to inform the server.

Use specific refer to this article https://blog.csdn.net/qq_40646143/article/details/85716973

8),@WireVariable

If the member field in the ViewModel @wirevariable by the comment, the variable (if present) will be connected to this field.
Automatic before connecting Binder and ViewModel. For more information on wiring variables, please read wiring variables.

Here's how it use

public class OrderVM {

    @WireVariable
    private MessageService messageService;

    ...
}

9),@Wire

Although the design principles of the MVVM pattern is ViewModel should not reference UI components, but zk still provides two methods to retrieve the ViewModel UI components. However, we do not recommend this use, because it would lose an important advantage of the view model: loosely coupled with the view.

E.g. page input box, the background may be acquired according to the id is input to the input box of the content, using the following

                        <div class="col-lg-10">
                            <z:textbox id="channel"
                                       sclass="form-control"
                                       value="@load(m.channel)"
                                       readonly="true"
                            />
                        </div>

Get back as follows

    @Wire("#channel")
    private Textbox channel;

10),@AfterCompose

@AfterCompose
@AfterCompose(superclass=true)

Range: the class or method
Notes mark life-cycle approach to identify the call () in the doAfterCompose BindComposer of.
In ViewModel class, there is at most only a method Aftercompose-annotated @ annotations. Subclass comment if you set the parent class element to true, first call @ Aftercompose-annotated comments of the parent class ViewModel, this logic is repeated in the parent class. If a class is not @AfterCompose method will not invoke any method (including the parent class).