-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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>No, you can't change the include source from client side. Is there any reason that this need to be done from client?
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().
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%"
xmlns:w="client"
apply="org.zkoss.bind.BindComposer"
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">
<![CDATA[
function include(path) {
zAu.send(new zk.Event(zk.Widget.$('$container'), 'onInclude', path));
}
]]></script>
</window>
And a simple view model command which changes the 'src' attribute of the include page:
@Command("set-include-src")
@NotifyChange("includePagePath")
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
Costas
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,
Asked: 2015-07-20 07:14:47 +0800
Seen: 64 times
Last updated: Aug 26 '15