当前位置: 代码迷 >> Web前端 >> ZK6学习札记 一
  详细解决方案

ZK6学习札记 一

热度:486   发布时间:2012-07-30 16:19:05.0
ZK6学习笔记 一

ZK6学习笔记 一(升级信息与比较:RC---RC2--6.0last)

?

ZK6绑定是一种全新的数据绑定系统与新规范和实现。ZK绑定现在还支持使用MVVM设计模式。MVVM是一种变体的模型/视图/控制器(MVC设计模式,帮助实现分离数据和逻辑从表现很容易。它将视图层与层之间的紧密耦合模型避免视图和控制器层。UI设计师和程序员可以做他们的工作在平行的和独立。

/img/2012/06/25/1252173985.png

先看zk6RC的一个例子,HelloMVVM.zul:

?

<window apply="org.zkoss.bind.BindComposer" viewModel="@bind(vm='org.zkoss.mvvm.examples.hello.HelloViewModel')"> 
    <label value="@bind(vm.message)"/> 
    <button label="Show" onClick="@bind('showHello')"/>
</window>
?

?ViewModel:HelloViewModel.java

?

public HelloViewModel {
     private String message;
     public String getMessage() {
	 return message;
     }
     @NotifyChange("message")
     public void showHello() {
	 message = "Hello World!";
     }
}

?

?在zk6升级到RC2之后绑定的方式有了更新,就上面的例子改变如下:

View:HelloMVVM.zul

?

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('org.zkoss.mvvm.examples.hello.HelloViewModel')">
    <label value="@load(vm.message)"/>
    <button label="Show" onClick="@command('showHello')"/>
</window>

?ViewModel:HelloViewModel.java

?

?

public HelloViewModel {
     private String message;
     public String getMessage() {
	 return message;
     }
	 @Command @NotifyChange("message")
     public void showHello() {
	 message = "Hello World!";
     }
}

?2012年2月14日zk发布了最后一个6.0版本,Released on February 14, 2012.它与RC2比较更新了Tooltarbutton的触发模式,该模式的触发在toolbarbutton单击事件触发之后发生,toolbarbutton将会被选中。

?

<window title="Toolbarbutton" border="normal" width="250px" >
     <toolbar >
	 <toolbarbutton label="File system" mode="toggle" >
	 <attribute name="onCheck"><![CDATA[
	 if(event.isChecked()){
	 result.setValue("Activated:"+event.getTarget().getLabel());
	 }else{
	 result.setValue("Deactivated:"+event.getTarget().getLabel());
	 }
	 ]]></attribute>
	 </toolbarbutton>
	 </toolbar>
	 <label id="result" />
</window>

?

/img/2012/06/25/1252173985.png

?zk6的升级信息还包括Servlet3的增强、Servlet 3插件支持、jQuery和CSS 3样式服务器端选择器、升级到jQuery 1.6.4、Menubar支持键盘导航、Combobutton、Absolutelayout(绝对位置布局),Anchorlayout(灵活布局))现在在CE中、EventListener优先级、消息框改进、Hlayout支持valign等等.

?

消息框

?

语法:Messagebox.show(btn.getLabel(), new Button[] {Button.CANCEL, Button.OK}, _listener);

例子:

?

Messagebox.show("Yes and No", "Test", new Messagebox.Button[] {Messagebox.Button.YES, Messagebox.Button.NO},

????new String[] {"Yes, it is correct"}, Messagebox.INFORMATION, null, null);

?

?

学习参考文档:http://www.zkoss.org/product/zk/releasenote/6.0.0

  相关解决方案