Hi all,
I am trying to allow my application to operate on all screen resolutions and to do this I need to adjust my layouts based on the sizing of the window.
Is there a way to find out the size of a window (or the main layout of the window) in PIXELS, even though the size is specified in percentage?
For example, I’ve set a horizontal layout to be 100% with setSizeFull() but when I try to retrieve the width, with getWidth() the width in percentage not pixels.
Thanks,
Ajay
Hi!
I visited Toronto last summer, enjoyed it a lot! 
On to your problem:
I’m not 100% sure, but the WebApplicationContext has a WebBrowser instance that has the width and the height of the screen (in pixels I hope).
You can access them with this code:
WebApplicationContext ctx = (WebApplicationContext)myApplication.getContext();
int width = ctx.getBrowser().getScreenWidth();
int height = ctx.getBrowser().getScreenHeight();
HTH,
Jonatan
I’d like to know too, if there’s an answer for this original question.
I’ve tried the
ctx.getBrowser().getScreenWidth();
-method (5.3.1) but all I got out of it was 0. Am I just doing something wrong or doesn’t it work with anyone?
I’m also looking forward too see how to get the screen width and height. That method returns 0 for me as well on itmill-toolkit-5.4.0.
Anyone knows how to do it?
Thanks in advance
Hi guys,
I checked into the problem further, and apparently this was never implemented in IT Mill Toolkit v5 and not in Vaadin either… 
I suggest you file a ticket about it so that it gains the attention of the R&D team.
/Jonatan
Hi guys,
ctx.getBrowser().getScreenWidth() should indeed be implemented and return the screen width. Note however that this is not the same as the main layout width or browser width (necessarily). Screen width is the horizontal resolution of the client machine. If the client runs the browser maximized, it will be quite close to the browser width. If the user does not use a maximized windows, the browser width will probably not be even close to the screen width.
Getting the size of components in pixels on server side will probably not be possible in the near future as it would dramatically increase the size of the data sent between the client and the server. If needed you can make your own (client side) widget and use e.g. element.getOffsetWidth() to find out the actual width of a DOM element.
Getting the size of the client screen is not helpful in most situations, generally what we need is to get client size of the browser window -excluding borders, menu bars, etc-
Given that information scaling everything else is relatively simple. I need to know when the browser window changes size, that should not be a significant amount of server communication.
Is this possible?
Thanks in advance
If you need resize events, you could check out
ResizeListener
. I’m not sure if this is what you need, but it could help. Remember to call setImmediate(true) for the window so you get the events immediately.
Just checking that you are aware of that you can use relative (%) widths and the components will scale automatically when the window size changes? E.g. 100% width will use exactly the area available, excluding scrollbars, borders etc.
Hi!
I just committed some code to trunk [8480]
, which makes original hint by Jonatan work - at least partly. The information is not there during init method, but on later request it is available. With transaction listener it is usable even for layouting. I also made client to send client width/height and render area width/height on initial uidl request. Those can also be accessed via transaction listener. Compared to ResizeListener method expained by Risto one can save one visit to server with this.
Please note that only Browser.getClientWidth/height is official api, so parameters in initial uidl request are likely to change in the future when we have time to improve these things later.
A code snippet I used for testing below.
getContext().addTransactionListener(new TransactionListener() {
public void transactionEnd(Application application,
Object transactionData) {
int screenHeight = ((WebApplicationContext) getContext())
.getBrowser().getScreenHeight();
System.err.println("Transax end, screensize " + screenHeight);
}
public void transactionStart(Application application,
Object transactionData) {
int screenHeight = ((WebApplicationContext) getContext())
.getBrowser().getScreenHeight();
HttpServletRequest r = (HttpServletRequest) transactionData;
try {
String parameter = r.getParameter("cw");
String parameter2 = r.getParameter("vw");
String parameter3 = r.getParameter("vh");
int parseInt = Integer.parseInt(parameter);
int parseInt2 = Integer.parseInt(parameter2);
clickme.setHeight(parseInt / 2 + "px");
clickme.setWidth(parseInt2 / 2 + "px");
} catch (Exception e) {
// TODO: handle exception
}
System.err.println("Transax start, screensize "
+ screenHeight
+ "B"
+ ((WebApplicationContext) getContext()).getBrowser()
.getBrowserApplication());
}
});
Unfortunately, I am also in a situation where I NEED to know the size of the window, and the fact that the published API does not work, is just pain. (Can the R&D team consider fixing this anytime soon?)
Moreover, none of the provided methods in this thread seem to work for me in Vaadin 6.0.1. If I add a resize listener to the main window, it never gets called. The workaround provided by Matti also does not work for me – the transactionStart() method never gets called, and in the transactionEnd() I can only get 0 for the width.
Please test the 6.1.0-pre1 version
http://vaadin.com/download/prerelease/6.1/6.1.0/6.1.0-pre1/
to see if it works for you. The fix Matti mentioned is included in 6.1.0-pre1 but not in 6.0.1 so you must upgrade to get this to work.
Hi!
Did you put your window into “immediate mode” using setImmediate(true) ? If not, the size is left into variable buffer in browsers until some other component requests a visit to server side.
cheers,
matti
Thanks guys for all the responses. Not using setImmediate() may have been causing the problem. (Indeed, my main window was not setting this flag.)
I am saying “may” because I found another workaround (a little bit clumsy one, but it works). The workaround involves having one of the client-side components to call com.google.gwt.user.client.Window.getClientWidth() and getClientHeight(), and transmit this information back to the server side.