Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.
@kingsz1
try
int height = evt.getDesktopHeight();
int width = evt.getDesktopWidth();
Stephan
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>
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.
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>
@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
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.
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);
}
(...)
Asked: 2009-03-11 21:45:09 +0800
Seen: 3,589 times
Last updated: Feb 19 '20
