skip to content
Ryan Wu
Table of Contents

It turned out to be a small setting.

Official docs:
The session-config Element — The timeout-message Element

The session-timeout Element

[Default: 0 (depends on the web server)]

This setting specifies how many seconds a session stays valid between client requests. A negative value means the session never expires.

A default of 0 seconds uses ZK’s own default (defined in /WEB-INF/web.xml).

The timeout-message Element

[Optional]
[Since 5.0.5]
[Default: the message defined by MZk.UPDATE_OBSOLETE_PAGE]

The message shown after a session times out. This setting only takes effect when timeout-uri is not set.

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

Internationalization

If you want a message that changes with the locale, prefix the value with label: and a key:

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

Then prepare an i3-label file. See the ZK Developer’s Reference.

# default i3-label.properties
# Chinese i3-label_zh_CN.properties
# multi-line messages are allowed
timeout={
Session timed out. Please reload the page.
}

JavaScript

You can supply JavaScript instead of the default message dialog. Prefix the value with script: and the client will run that code directly.

Say you have a function foo.timeout that handles the effect after a timeout. Set zk.xml like this:

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

That code has to be JavaScript.

This is what the ZK demo does after a timeout (about half an hour):

Unpacked:

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 (inferred):

<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>

And the effect: