ZK

Hlayout 换行

<hlayout>

<div class=”mydiv” />

</hlayout>

Hlayout

默認

white-space: nowrap;


.mydiv {
white-space: normal;
}

ZK Studio 1.0 发布新功能

个人觉得 下面几个新功能相当不错:

####

####

####

####
http://www.zkoss.org/release/zkstudio-1.0.0.dsp

ZK Demo 会话超时(session timeout)设定详解

原来只是一个小设定

官方文档
http://books.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_session-config_Element#The_timeout-message_Element

会话超时元素 (The session-timeout Element)

[默认: 0 _(根据网页服务器)_]

这个设定可以在客户端送出多个请求之间,指定会话有效的秒数。若指定负数则会话永不失效

默认0秒则使用zk缺省值(定义在/WEB-INF/web.xml中)。

超时讯息元素 (The timeout-message Element)

[可选择的]
[5.0.5 开始]
[默认: _定义在 [MZk.UPDATE_OBSOLETE_PAGE](http://docs.zkoss.org/wiki/Msgzk.properties "http://docs.zkoss.org/wiki/Msgzk.properties") 的讯息_]


指定会话超时後提示的讯息。本设定只有当timeout-uri没被设定才会生效。

<session-config>
    <device-type>ajax</device-type>
    <timeout-message>Session timeout. Please reload.</timeout-message>
</session-config>



国际化

如果你想要指定一个根据地区提示的讯息,你可以指定前缀label接着:key如下

<session-config>
    <device-type>ajax</device-type>
    <timeout-message>label:timeout</timeout-message>
</session-config>



然後你必须要准备i3-Label 文件,参考 ZK Developer’s Reference.


#默认i3-label.properties
#中文i3-label_zh_CN.properties
#可允许多行讯息
timeout={
会话超时,请重整页面
}


JavaScript

你可以提供JavaScript代码来取代默认的讯息对话。只要指定前缀script,客户端会直接直接执行你所设定的代码。

例子,你有一个function叫做foo.timeout用来处理超时之後的效果。你可以设定zk.xml如下


<session-config>
    <device-type>ajax</device-type>
    <timeout-message>script:foo.timeout('Session Timeout')</timeout-message>
</session-config>

这段代码必须为Javascript。

这是zkdemo超时之後的回应(大概 半小时)

拆包一下

script:
  $("#z-timeout").remove();
  $('body').append('<div id="z-timeout"><span>Timeout, <b>move mouse</b> to refresh...<img src="/zkdemo/images/refresh2.gif" style="display:none;"/></span></div>');
  $("#z-timeout").slideDown(1000);
  $('body').mouseover(function() {
    $("img","#z-timeout").show();
    $('#container > div:gt(0)').fadeOut(1000);
    setTimeout("location.reload()", 1500);
  });

zk.xml (推测)

**<timeout-message>**script:<![CDATA[
  $("#z-timeout").remove();
  $('body').append('<div id="z-timeout"><span>Timeout, <b>move mouse</b> to refresh...<img src="/zkdemo/images/refresh2.gif" style="display:none;"/></span></div>');
  $("#z-timeout").slideDown(1000);
  $('body').mouseover(function() {
    $("img","#z-timeout").show();
    $('#container > div:gt(0)').fadeOut(1000);
    setTimeout("location.reload()", 1500);
  });
]]>**</timeout-message>**

贴个效果

ZK 属性 & 变量 & 客制属性

该怎设定 就怎取得
在XML 标准中, 标签上有attribute(属性)


<window>
<attribute name=”title”>My Window</attribute>
<attribute name=”border”>normal</attribute>
<attribute name=”width”>200px</attribute>
這是一個Window
</window>

  • 变量(已经舍弃)
  • 客制属性


    <zk>
    <zscript><![CDATA[
    public void test1() {

    result1.setValue(getData(div1.getAttribute("mykey")));
    result2.setValue(getData(div1.getVariable("mykey", false)));
    

    }
    public void test2() {

    result3.setValue(getData(div2.getAttribute("mykey2")));
    result4.setValue(getData(div2.getVariable("mykey2", false)));
    

    }
    public String getData(Object obj) {

    return obj == null ? "null" : (String) obj;
    

    }
    ]]></zscript>
    <hlayout>

    &lt;vlayout&gt;
        &lt;vlayout&gt;
    
            &lt;div id="div2" style="border: 1px solid red"&gt;
                &lt;custom-attributes mykey2="key2" /&gt;
                &lt;html&gt;&lt;![CDATA[ This is a DIV(div2) + &lt;br /&gt; &amp;lt;custom-attributes mykey2="key2" /&amp;gt; ]]&gt;&lt;/html&gt;
            &lt;/div&gt;
            &lt;button label="get Sth" onClick="test2();" /&gt;
        &lt;/vlayout&gt;
        &lt;hlayout&gt;
            div2 get attribute :
            &lt;label id="result3" value="" /&gt;
        &lt;/hlayout&gt;
        &lt;hlayout&gt;
            div2 get Variable :
            &lt;label id="result4" value="" /&gt;
        &lt;/hlayout&gt;
    &lt;/vlayout&gt;
    &lt;separator width="30px" /&gt;
    &lt;vlayout&gt;
        &lt;vlayout&gt;
            &lt;div id="div1" style="border: 1px solid green"&gt;
                &lt;variables mykey="key1" /&gt;
                &lt;html&gt;&lt;![CDATA[ This is a DIV(div1) + &lt;br /&gt; &amp;lt;variables mykey="key1" /&amp;gt; ]]&gt;&lt;/html&gt;
            &lt;/div&gt;
            &lt;button label="get Sth" onClick="test1();" /&gt;
        &lt;/vlayout&gt;
        &lt;hlayout&gt;
            div1 get attribute :
            &lt;label id="result1" value="" /&gt;
        &lt;/hlayout&gt;
        &lt;hlayout&gt;
            div1 get Variable :
            &lt;label id="result2" value="" /&gt;
        &lt;/hlayout&gt;
    &lt;/vlayout&gt;
    

    </hlayout>
    </zk>


ZK Scope 常用方法与结果

zk的scope是很重要的观念
Execution/Page/Session/Desktop/WebApp
在用zk开发应用时,常常会遇到这样的问题
特别用zk 的grouping 功能做了一个常用方法列表与结果的对照
当遇到如下的问题时,能快速的获得解答

_”如何获取目前要求(request)的路径(path)?”

“如何获取目前页面(page)之标题(title)?”

“如何获取目前之Session?”

“如何获取目前之ZK版号(version)?”

“如何转向另一个页面(redirect)?”_

类似的很多 无法一一列举

如果有想到什麽会陆续更新上来

参考画面

刚接触ZK 应该很有帮助

代码如附件

本文附件下载:*   [scope.zip](http://dl.iteye.com/topics/download/292d04d2-8d8b-3cc8-ba1d-c615a4c4d29f) (1.9 KB)

ZK Client Side Program 初体验

在zul中使用命名空间

<?taglib uri="http://www.zkoss.org/2005/zk/client" prefix="w" ?>
范例元件
<textbox id="name" value="123456789~~~!!!" />
取得元件
<script type="text/javascript"><![CDATA[
zk.afterMount(function() {
  var v = jq('$name'); 
  alert(v.val());
});
]]></script>

打印

<button label="Print" w:onClick="window.print();"/>
关闭
<button label="Close" w:onClick="window.close();" />

参考
http://docs.zkoss.org/wiki/Zk.Widget

http://docs.zkoss.org/wiki/CDG5:_zk#afterLoad