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?
The onResize() code follows.
public void onResize()
{
int layoutHeight = RootLayoutPanel.get().getOffsetHeight();
int horizHeight = horizPanel.getOffsetHeight();
int topLabelHeight = topLabel.getOffsetHeight(); // These two have
the same height.
int bottomLabelHeight = bottomLabel.getOffsetHeight();
int vborder = 0;
if( layoutHeight - topLabelHeight - bottomLabelHeight > horizHeight )
vborder = ( layoutHeight - horizHeight ) / 2;
else
vborder = topLabelHeight ;
layoutPanel.setOffsetHeight( layoutHeight + "px" );
// Center scrollpanel vertically.
layoutHeight .setWidgetTopBottom( scrollPanel, vborder, Style.Unit.PX,
vborder, Style.Unit.PX );
int layoutWidth = RootLayoutPanel.get().getOffsetWidth();
int horizWidth = horizPanel.getOffsetWidth();
int hborder = 0;
if( layoutWidth > horizWidth )
hborder = ( layoutWidth - horizWidth ) / 2;
layoutPanel.setOffsetWidth( layoutWidth + "px" );
// Center scrollpanel horizontally
topLayoutPanel.setWidgetLeftRight( scrollPanel, hborder, Style.Unit.PX,
hborder, Style.Unit.PX );
super.onResize();
}
--
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 [email protected].
To post to this group, send email to [email protected].
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.
