ZK comment @ContextParam and @BindingParam Tutorial

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

First, let's look at how the use of @BindingParam

grammar

@BindingParam("keyString")

description

• Command parameter method

• Tell binder retrieve this parameter with the specified key from the binding parameters on the ZUL. The method of annotation to the command parameters. It declared the application parameters should be written from the binding parameters with the specified key in the ZUL.

example

* Binding parameter passing command

Page code

<listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
<listhead>
    <listheader label="Name"/>
    <listheader label="Price" align="center" />
    <listheader label="Quantity" align="center" />
</listhead>
<template name="model" var="item">
    <listitem onMouseOver="@command('popupMessage', myKey='myValue', content=item.description)">
        <listcell label="@bind(item.name)"/>
        <listcell label="@bind(item.price)"/>
        <listcell label="@bind(item.quantity)"/>
    </listitem>
</template>
</listbox>

Get background value by the value key, as follows

@Command
public void popupMessage(@BindingParam("myKey")String target, @BindingParam("content")String content){
    //...
}

• Target value "myValue", description attribute value of the object content

 

Next, understand how to use @ContextParam

grammar

@ContextParam(ContextType.TRIGGER_EVENT)

Enum class

public enum ContextType {
    BIND_CONTEXT, //BindContext 实例
    BINDER, // 绑定实例
    TRIGGER_EVENT, // 触发命令事件
    COMMAND_NAME, //命令名
    EXECUTION, //执行实例
    COMPONENT, //当前绑定的组件实例
    SPACE_OWNER, //当前组件的spacessOwner的IdSpance实例
    VIEW, //绑定器的视图组件
    PAGE, //当前组件的页实例
    DESKTOP, //当前组件的桌面实例
    SESSION, //会话实例
    APPLICATION; //应用程序实例
  
    

    private ContextType() {
    }
}

 

description

• Parameters of the method (method for the initial and commands)
• Tell binder transfer of the specified type of context object.

• Comments apply to the initial parameter (or commands) method. The method can obtain the various ZK context object, such as: Page parameters or desktop applications annotations.

Examples official website

Page code

<vbox id="vbox" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('eg.ContextParamVM')">
<button id="cmd" label="cmd" onClick="@command('cmd')" />
</vbox>

The above view model used zul

public class ContextParamVM{
    @Command
    public void cmd(@ContextParam(ContextType.COMPONENT) Component component,@ContextParam(ContextType.VIEW) Component view) {
    }
}

• In the above example, the variable component is a button object, a view is Vbox object.

 

@ContextParam and @BindingParam get the event object

• There are two ways to retrieve the event object:
• 1. Using reserved keywords event in the list of @command parameters ZUL.

• 2. Application Notes @ContextParam (context. Trigger_event) method on the parameters of the command. Here we have a tab to display the contents of the user input in the text box. Content is stored in the value entered by the user InputEvent property, so we can pass it through the event. Bind a command to a value of onChanging property.

Use the following

Page code

<vbox>
<label id="msg" value="@load(vm.message)" />
<textbox onChanging="@command('showTyping',v=event.value)" />
</vbox>

Background code

public class EventViewModel {
//getter for "message"
@Command
@NotifyChange("message")
public void showTyping(@BindingParam("v") String value, @ContextParam(ContextType.TRIGGER_EVENT) InputEvent event)
    typingMessage = value;
    //typingMessage = event.getValue(); same effect
}
}

• The first parameter value received from the ZUL. The second is to pass by the binder, so we do not need to specify it in ZUL.

 

@ContextParam in the real items is how it is used?

Page code

                            <z:combobox model="@load(vm.accountNoList)" 
                                        autodrop="true"
                                        autocomplete="true" 
                                        buttonVisible="false"
                                        value="@bind(m.accountNo)"
                                        onChange="@command('reloadAccount')">
                                <z:template name="model">
                                    <z:comboitem label="@load(each)"/>
                                </z:template>
                            </z:combobox>

Background Get the code

    @Command
    @SmartNotifyChange({ "account" })
    public void reloadAccount(@ContextParam(TRIGGER_EVENT) Event event) {
            Combobox box = (Combobox) event.getTarget();
            Comboitem _sel = box.getSelectedItem();
    }

• accountNo是用户实体中的一个字段,由于页面组件使用的是Combobox所以使用的是onChange改变事件,没有使用onChanging事件,事件是根据所用的控件来决定的
• buttonVisible = "false" ---> means that do not show the drop-down button
• autocomplete = "true" ---> meaning autocomplete drop-down box contents
• autodrop = "true" -> pull-down means automatically displays the contents (contents drop-down list of the input fuzzy match)