-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
I have been looking into how to caputure the browser window's resize event, i.e. do this simple piece of code in ZK.
$(window).resize(function(){ zk.Widget.$('myuuid').listenerFunction(); /* a widget of type X's function */ });
I have tried the following: - in the client code, add this code in a script, in a widget package (of my uuid) - in the client code, add this code inside the widget X (bind_) - on the server code, calling the code using Clients.evalJavaScript.
My constraint: i would really like to have this code on the client (js code), not using a ZUL page. Also, I cannot simply add this to the script of my html page or in a window element, as my widget is a div inside my document body.
I have read about the "client activity watches", have seen fiddles on "(zk) window resize" (or even the browser window resize..), but they do not work or fit my constraint above.
Can you please indicate if this is possible at all in ZK? I suspect it should be as simple as adding that piece of jquery code somewhere, but maybe I am missing the spot.
Thanks in advance, Andrei
Therefore ZK offers the onClientInfo event.
It must be placed on the 'root' window. Means the absolut outer window component in your application.
As an easy usage you can react in this event and store the sizes in the session or better in desktop scope attributes or fire an @GlobalCommand to all who will listen for that.
This is code for a MVVM.
/**
* Reacts on browser resize and stores the desktop height and width.
*/
@Command()
public void updateClientInfo(@BindingParam("orientation") String _orientation, @BindingParam("width") int _width,
@BindingParam("height") int _height) {
// for access the values by new creation of a page/window. Means if NO // resize is fired we can get the sizes from the attribute that is // stored in the desktop scoped. this.windowOuterMain.getDesktop().setAttribute("desktopHeight", _height); this.windowOuterMain.getDesktop().setAttribute("desktopWidth", _width); this.windowOuterMain.getDesktop().setAttribute("deviceOrientation", _orientation);
/**
* Notify all who listen with global command.
*/
Map<String, Object> map = new HashMap<String, Object>();
map.put("desktopHeight", _height);
map.put("desktopWidth", _width);
map.put("deviceOrientation", _orientation);
BindUtils.postGlobalCommand(null, EventQueues.DESKTOP, "onDesktopResize", map);
}
zul:
. . .
<window id="windowOuterMain" width="100%" height="100%" border="none" sclass="outerwin"
onClientInfo="@command('updateClientInfo', width=event.desktopWidth, height=event.desktopHeight, orientation=event.orientation)"
apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('de.oxitec.zkboost.web.base.mainlayout.OXMainLayoutVM')">
. . .
int width = myComponent.getDesktop().getAttribute("desktopWidth");
best Stephan
Asked: 2014-07-15 14:53:06 +0800
Seen: 83 times
Last updated: Jul 17 '14
How to stop combining commands in an ajax call ?
zk.auSend not called on composer
Font Awesome Problem with IE8 when security option "font download" is disabled
Send a client event with JSON data
Toggled Popup - Close ONLY on toggling, not on focus lost
Verify existence -Verificar existencia DNI