0

How to capture the Browser Window Resize/Size Event

asked 2014-07-15 14:53:06 +0800

acostache gravatar image acostache
3 1

updated 2014-07-15 15:38:05 +0800

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

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2014-07-17 12:52:55 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2014-07-17 12:58:13 +0800

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

link publish delete flag offensive edit
Your answer
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

Follow
1 follower

RSS

Stats

Asked: 2014-07-15 14:53:06 +0800

Seen: 71 times

Last updated: Jul 17 '14

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