# How to get browser width? getScreenWidth() nothing return

kingsz1
81 1 3

Hi all. I did read this Browser's Information and Controls

I used its example code in index.zul to detect the browser width:

<?xml version="1.0" encoding="UTF-8" ?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<div style="margin: 7px auto;">
<window id="mainWIN" title="ZK" border="normal" width="770px" height="570px" mode="overlapped">

<grid onClientInfo="onClientInfo(event)">
<rows>
<row>Time Zone <label id="tm"/></row>
<row>Screen <label id="scrn"/></row>
</rows>

<zscript>
void onClientInfo(ClientInfoEvent evt) {
tm.setValue(evt.getTimeZone().toString());
scrn.setValue(
evt.getScreenWidth()+"x"+evt.getScreenHeight()+"x"+evt.getColorDepth());
}
</zscript>
</grid>

</window>
</div>
</zk>


But nothing return & display. I just want to get the browser resolution and adjust the window size when app start-up, ex, 1024 (or more) width use size1, and 800 width use size2. How to do this?

Thanks to all.

delete retag edit

## 12 Replies

9393 3 7 16
http://www.oxitec.de/

@kingsz1

try

int height = evt.getDesktopHeight();
int width = evt.getDesktopWidth();

Stephan

YamilBracho
1722 2

The problem here is that the onClientInfo is never executed because this event is only available in a root component (a component without any parent). So you have to rewrite your code :

<?xml version="1.0" encoding="UTF-8" ?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<grid onClientInfo="onClientInfo(event)">
<rows>
<row>Time Zone <label id="tm"/></row>
<row>Screen <label id="scrn"/></row>
</rows>

<zscript>
void onClientInfo(ClientInfoEvent evt) {
int height = evt.getDesktopHeight();
int width = evt.getDesktopWidth();

tm.setValue(evt.getTimeZone().toString());
scrn.setValue(
width + "x" + height + "x" + evt.getColorDepth());
}
</zscript>
</grid>
</zk>



kingsz1
81 1 3

Thank you, terrytornado and YamilBracho. Unfortunately those code were still not working.

In this forum a thread was for similar problem, but no exactly solution, only has a link of:
http://www.potix.com/zkdemo/test/clientinfo.zul

This link is working well to display the screen width, but we are not able to view its code.

Why the zk team is not giving a working code or sample? I supposed many of application is required to adjust the window size according to the user' browser's size.

kingsz1
81 1 3

Now i get the screen width through a java class:

package info;

import java.awt.Dimension;
import java.awt.Toolkit;

public class ScrWidth {

public static String getScrnWid()
{
// Get the default toolkit
Toolkit toolkit = Toolkit.getDefaultToolkit();

// Get the current screen size
Dimension scrnsize = toolkit.getScreenSize();

String strHeight = Integer.toString(scrnsize.height);
String strWidth = Integer.toString(scrnsize.width);
return strWidth;
}
}


then in index.zul, to display the screen width:

<grid id="MacInfo">
<rows>
<row>Screen Width <label id="sw"/></row>
</rows>

<zscript>
sw.setValue(info.ScrWidth.getScrnWid());
</zscript>
</grid>


Now my question is, when I set the screen width as:

<window id="mainWIN" title="Main window" border="normal" width="1250px" height="870px" mode="overlapped" position="center">
...
</window>


How to re-size the window to a certain value, ex, width="1024"?
Thank you all.

9393 3 7 16
http://www.oxitec.de/

@kingsz1

Our codes must work.

But you need to know the onClientInfo event it's only working for the root window.

So i have this event catching in the controller of my index.zul because
that's it's all times my main Window. Other called pages are in the CENTER area
of the borderlayout defined in this index.zul.
To have all times access to these height and width values i store them in a UserWorkspace class.

   public void onClientInfo(Ecent event){
UserWorkspace().getInstance().setDesktopHeight( evt.getDesktopHeight() );
UserWorkspace().getInstance().setDesktopWidth( evt.getDesktopWidth() );
}


Stephan

kingsz1
81 1 3

I downloaded the zkdemo-3.6.0 and now found the "clientinfo.zul" source code. In that file, there is not any <window> ... </window>, but only with <grid> ... </grid>. That is why when I place the example code into <window> ... </window> then it doesn't work.

In the document highlight the "ROOT", but I am not really understand this. I remark this information here because I supposed the beginners like me, may have similar problem.

Thank you again for help and your team's good work.

huubf
69 1

Hi KingSz1
I'm not much of a mathmatition either :-(

using java toolkit will get size of server, no use on webclients, should not have tried your idea

now i use (zk 3.6.4)
ZUL
<window id="winsearch"
apply="my.Search"
use="my.SearchWindow"
xmlns:h="http://www.w3.org/1999/xhtml"
onUser="winsearch.setWidth(event)">

<script src="../script/jquery.js">
</script>
<script>
jQuery.noConflict();

comm.sendUser("\${winsearch.uuid}", jQuery(document).width());
});

</script>

in my.SearchWindow class
(...)
int screenwidth=1280;
public void setWidth(Event event) {
String data = (String) event.getData();
logger.debug("screenwidth " + data);
screenwidth=Integer.parseInt(data);
}
(...)

fredac
9

the attribute onClientInfo="onClientInfo(event)" must set on the root component of the page (or on the very first component at least) in this case

.

fredac
9

the attribute onClientInfo="onClientInfo(event)" must set on the root component of the page (or on the very first component at least) in this case

.

ramsesx
48

What is UserWorkspace()?? thanks!

[hide preview]