I'm trying to develop an app with a screen (using A&P) so that it fills the browser window. The app basically displays a bunch of images in tiles. Images are roughly the same size, 300 by 400 pixels. As the user resizes the window, the app calculates how many full images can be displayed horizontally. It is slightly more complicated in that there is a strip above the image and below that contain info about the images.
The layout I've come up with is based on a LayoutPanel.
-LayoutPanel
--Label
---ScrollPanel
----HorizontalPanel
-----Image 1
-----Image 2
-----Image N
---Label
The ScrollPanel is included in case the window is adjusted to smaller than the height of an image. Than the user can simply scroll vertically. Also, the ScrollPanel positioning is adjusted within the LayoutPanel to center the HorizontalPanel of images.
As the window is resized, the number of images that fits in the HorizontalPanel is recalculated and an onResize() is called to force the page to update. The onResize() also positions the ScrollPanel in the center of the LayoutPanel (between the two Labels).
The math for this is pretty straightforward and not what I'm having trouble with. The problem is that it doesn't work in the ideal way. All the math for positioning seems fine. However, the initial display often times includes scrollbars - even when the LayoutPanel is sufficiently large to contain the HorizontalPanel of images (ie. the ScrollPanel width and height match the width and height of the HorizontalPanel!).
I've tried deferring the onResize(), but that doesn't help.
In debugging, I can see that while moving the edge of a window (during a resize) that the height and width (gotten with getOffsetWidth() and getOffsetHeight()) of the ScrollPanel is jumping around quite a bit. For example, if the window is made narrower, the width doesn't smoothly decrease. Instead it may increase and decrease (maybe I have a shaky hand?).
Anyway, is there a better way to do this? Any suggestions on the way I'm doing it?
Let browser do its work.
Try
<g:ScrollPanel><g:FlowPanel ui:field="panel"></g:....></..>
then
panel.add(image1);
panel.add(image2);
...
and set style float:left for images.
--
Tomek
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
No comments:
Post a Comment