0

How to get browser width? getScreenWidth() nothing return

asked 2009-03-11 21:45:09 +0800

kingsz1 gravatar image kingsz1
81 1 3

updated 2009-03-11 21:45:56 +0800

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 flag offensive retag edit

12 Replies

Sort by ยป oldest newest

answered 2009-03-12 09:43:36 +0800

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

updated 2009-03-12 09:44:00 +0800

@kingsz1

try

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

Stephan

link publish delete flag offensive edit

answered 2009-03-12 14:16:52 +0800

YamilBracho gravatar image 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>

link publish delete flag offensive edit

answered 2009-03-15 07:14:35 +0800

kingsz1 gravatar image 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.

link publish delete flag offensive edit

answered 2009-03-15 10:44:46 +0800

kingsz1 gravatar image 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.

link publish delete flag offensive edit

answered 2009-03-15 19:20:11 +0800

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

updated 2009-03-15 19:20:37 +0800

@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

link publish delete flag offensive edit

answered 2009-03-16 03:15:19 +0800

kingsz1 gravatar image kingsz1
81 1 3

Thank you terrytornado.

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.

link publish delete flag offensive edit

answered 2011-07-04 07:36:08 +0800

huubf gravatar image huubf
69 1

updated 2011-07-04 07:38:48 +0800

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

terrytornado. How trigger onClientInfo ?


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();
zk.addInit (function (){

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);
}
(...)

link publish delete flag offensive edit

answered 2013-03-08 10:07:21 +0800

fredac gravatar image 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

.

link publish delete flag offensive edit

answered 2013-03-08 10:07:44 +0800

fredac gravatar image 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

.

link publish delete flag offensive edit

answered 2014-04-11 17:52:21 +0800

ramsesx gravatar image ramsesx
48

What is UserWorkspace()?? thanks!

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

Follow
1 follower

RSS

Stats

Asked: 2009-03-11 21:45:09 +0800

Seen: 3,577 times

Last updated: Feb 19

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