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