Include a page from client side

asked 2015-07-20 07:14:47 +0800

aktejo gravatar image aktejo
155 3

I am trying to control page inclusion of an include component from client side script. I was wondering if this kind of operation is supported.

<include id="inclMain" src=""/> <separator/> <button label="include" w:onclick="navigateTo('another.zul')" <!--="" --="">

<script> var navigateTo = function(path){ var wicl=zk.Widget.$(jq('$inclMain')); wicl.src(path); // <-- doesn't work,how to do? } </script>
delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2015-08-13 08:55:43 +0800

vincentjian gravatar image vincentjian
2245 6

No, you can't change the include source from client side. Is there any reason that this need to be done from client?

link publish delete flag offensive edit

answered 2015-08-21 14:43:46 +0800

aktejo gravatar image aktejo
155 3

The same reason why we need to be able to update other widget attribute from client side, for example label.value

With more and more supports from zkoss to client side programming, such as jq, angularjs etc. it is very normal that there will be imminent need to be able to interact with Zkoss from client side as well. one of the important interaction between client to Zkoss of course in navigating <include/> component to other source, using include.setSource().

link publish delete flag offensive edit

answered 2015-08-24 08:22:03 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2015-08-26 08:46:04 +0800

Actually you can do it quite easily. Of course zk is server-based so the client request must be forwarded in some way to the server but this can be done transparently using a simple user event. Check the following snippets:

A main page:

<window border="none" height="100%" width="100%"
        viewModel="@id('vm') @init('test.IndexVM')">

<button label="Include A" w:onClick="include('A.zul')" />
<button label="Include B" w:onClick="include('B.zul')" />

<include id="container" src="@load(vm.includePagePath)" 
    onInclude="@command('set-include-src', path=event.getData())" />

<script type="text/javascript">

    function include(path) {
        zAu.send(new zk.Event(zk.Widget.$('$container'), 'onInclude', path));



And a simple view model command which changes the 'src' attribute of the include page:

public void onSetIncludeSrc(@BindingParam("path") String path) {
    includePagePath = path;

This is a very simple example how to listen for native js events and then post custom events to any of your zul widgets.

hope that helps


link publish delete flag offensive edit

answered 2015-08-26 06:30:17 +0800

aktejo gravatar image aktejo
155 3

updated 2015-08-26 06:32:07 +0800

Dear cyiannoulis
I think it is smart move!

It allows me to have flexibility to control the application either from the server-side as well as client side. I believe this approach is applicable not only in my case to set src from client, but also similar case when one wish to control app behavior from client. But of course only when the widget has dynamic attribute like one in include widget

Thanks! Regards,

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2015-07-20 07:14:47 +0800

Seen: 64 times

Last updated: Aug 26 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More