ZK入门

官网：
https://www.zkoss.org

翻译自：
https://www.zkoss.org/wiki/ZK_Getting_Started/Learn_ZK_in_10_Minutes

ZK是什么

ZK是一个ui框架，不用学习JavaScript或者AJAX就可以构建出牛逼的web和mobile应用

快速构建用户界面

可以通过各种ZK组件快速构建用户界面，根据自己的需求配置组件的样式、行为、功能等

上面的registration form使用zul语言来进行描述

<window border="normal" width="400px" title="Welcome! New User">
    <grid hflex="1"> <!-- hflex="1" - available width inside parent (window) -->
        <columns visible="false">
            <column/><!-- define 2 columns to enable auxhead/er -->
            <column/>
        </columns>
        <auxhead>
            <auxheader colspan="2" label="Registration Form" style="font-size:16px" image="../images/picture.png"/>
        </auxhead>
        <rows>
            <row>
                User Name <textbox id="nameBox" hflex="1" constraint="no empty"/>
            </row>
            <row>
                Gender:
                <radiogroup id="genderRadio">
                    <radio label="Male" value="male" image="/images/male.png" checked="true"/>
                    <radio label="Female" value="female" image="/images/female.png"/>
                </radiogroup>
            </row>
            <row >
                Birthday <datebox id="birthdayBox" hflex="1" constraint="no empty, no today, no future"/>
            </row>
            <row spans="2" align="center" >
                <hlayout>
                    <checkbox id="acceptTermBox"/> Accept Term of Use
                </hlayout>
            </row>
            <row spans="2" align="right">
                <hlayout>
                    <button id="resetButton" label="Reset" />
                    <button id="submitButton" label="Submit" disabled="true"/>
                </hlayout>
            </row>
        </rows>
    </grid>
</window>

一个标签代表一个component，一个component可以包含其他component
可以给component id属性，这样就可以通过id对他进行控制

直观的ui控制

ZK是一个基于component的框架，事件驱动的编程模型。因此，开发者可以给component增加一些事件响应函数与用户进行交互

ui控制器

需要写一个控制器继承自SelectorCompose来控制ui
通过 @Wire注解来提取component的java对象。然后就可以通过这些变量进项操作

package foo;
// some import statements are omitted for brevity.
public class RegistrationComposer extends SelectorComposer<Component> {
    @Wire
    private Button submitButton;    
    @Wire
    private Checkbox acceptTermBox;

变量名submitButton和acceptTermBox与ZUL文件中的id属性关联

<window border="normal" width="400px" title="Welcome! New User"
apply="foo.RegistrationComposer">
<!-- omit other components for brevity -->
</window>

通过定义apply属性来使用controller控制ui component
将controller应用到根component，可以这个根component的所有自components

处理用户action

上面的registration form只有在Accept term of use选中时才可以点击submit
通过监听component的事件来处理用户action，ZK提供一个注解@Listen。
如下：

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;
import org.zkoss.zul.Checkbox;

public class RegistrationComposer extends SelectorComposer<Component> {
    @Wire
    private Button submitButton;
    @Wire
    private Checkbox acceptTermBox;

    //处理acceptTermBox的oncheck事件
    @Listen("onCheck = #acceptTermBox")
    public void changeSubmitStatus(){
        if (acceptTermBox.isChecked()){
            submitButton.setDisabled(false);
            submitButton.setImage("/images/submit.png");
        }else{
            submitButton.setDisabled(true);
            submitButton.setImage("");
        }
    }

}

当用户勾选或者取消勾选时会触发oncheck事件，然后ZK会调用@Listen注解的方法

容易的后端集成

集成第三方库

public class RegistrationIntegrateComposer extends SelectorComposer<Component> {

    //omit other variables for brevity
    private static Logger logger = Logger.getLogger(RegistrationIntegrateComposer.class.getName());
    private LegacyRegister legacyRegister = new LegacyRegister();
    private User newUser = new User();

    @Listen("onClick = #submitButton")
    public void register(){
        //save user input into newUser object
        legacyRegister.add(newUser);
        logger.debug("a user was added.");
        //...
    }
}

集成业务和持久框架

@VariableResolver(org.zkoss.zkplus.spring.DelegatingVariableResolver.class)
public class RegistrationSpringComposer extends SelectorComposer<Component> {

    @WireVariable
    private RegistrationDao registrationDao;

    @Listen("onClick = #submitButton")
    public void submit(){
        // omit irrelevant code for brevity
        registrationDao.add(newUser);
    }
}

使用 @WireVariable注解变量，ZK会使用variable resolver注入spring beans