Hi!
It is the 3rd or 4th sites I'm doing with GWT, it is a very sexy solution
which is working nicely, but I'm still having some basic problems of setting
the height of some elements of my sites. This is really basic, but not so
easy to handle...
I really hope that some GWT guru can help us (I'm sure I'm not the only one
to get that issue) on what is the best practice to handle such cases.
*Problems:*
1) How do I set the height of a widget when setHeight() does not work with %
or not as expected (either height=0, or not as expected)?
2) Why in onLoad(), headerPanel.getOffsetHeight() and
footerPanel.getOffsetHeight() are == 0? (Please read code bellow)
3) Same with ScrollerPanel, how can I set the height of it without need to
set it in pixels?
4) Why height in % behavior does not work when included in a DecoratorPanel?
I could read on gwt group that the height is very browser dependent and
would require heavy calculs - BUT - do we need to do them in Applications?
*Code principles:*
- gwt 2.1.0.m2 (same issus with 2.04)
- NOT using declarative UI with UiBinder - good old style java code
- Using Standard Mode, and, LayoutPanels
*Site description:*
- 1 FlowPanel used as like VerticalPanel, filled with
- 1 headerPanel: FlowPanel containing 2 other FlowPanel: logoPanel, and
flagPanel
- 1 tabPanel: TabLayoutPanel containing few tabs
- 1 footerPanel: FlowPanel containing a Label
*Idea:*
- header is fixed height depending on logos (image) height, and possible
margin/padding in css.
- footer is fixed height depending on label height, and possible
margin/padding in css
- tabPanel's height depends on the document height => it should fill the
whole space between header and footer.
*Solutions in mind:*
- use tabPanel.setHeight( "100%" ), but it does take the 100% of the whole
page (!), not the 100% of the space between header/ footer.
- calculate tabPanel's height in px, BUT, I need to know the height of the
header and the footer, which isn't accessible through getOffsetHeight()...
*Code*:
Here is my Application.java file:
public class Application extends Composite implements ResizeHandler {
final FlowPanel logoPanel = new FlowPanel();
final FlowPanel flagPanel = new FlowPanel();
final FlowPanel headerPanel = new FlowPanel();
final SimplePanel headerWrapperPanel = new SimplePanel();
final CipherPanel cipherPanel = new CipherPanel();
final OptionPanel optionPanel = new OptionPanel();
final AboutPanel aboutPanel = new AboutPanel();
final TabLayoutPanel tabPanel = new TabLayoutPanel( 3, Unit.EM );
final FlowPanel footerPanel = new FlowPanel();
final FlowPanel panel = new FlowPanel();
public Application() {
final Image padlockImg = new Image( Resources.inst.padlock() );
final Image titleImg = new Image( Resources.inst.title() );
final Image flagUKImg = new Image( Resources.inst.flagUK() );
final Image flagFRImg = new Image( Resources.inst.flagFR() );
final Image flagESImg = new Image( Resources.inst.flagES() );
final Label emailLabel = new Label( Strings.inst.contactEmail() );
flagUKImg.addStyleName( "App_flagImg" );
flagFRImg.addStyleName( "App_flagImg" );
flagESImg.addStyleName( "App_flagImg" );
logoPanel.add( padlockImg );
logoPanel.add( titleImg );
logoPanel.addStyleName( "App_logoPanel" );
flagPanel.add( flagFRImg );
flagPanel.add( flagUKImg );
flagPanel.add( flagESImg );
flagPanel.addStyleName( "App_flagPanel" );
headerPanel.add( logoPanel );
headerPanel.add( flagPanel );
//headerWrapperPanel.setWidget( headerPanel );
tabPanel.add( cipherPanel, CipherPanel.Strings.inst.panelTitle() );
tabPanel.add( optionPanel, OptionPanel.Strings.inst.panelTitle() );
tabPanel.add( aboutPanel, AboutPanel.Strings.inst.panelTitle() );
tabPanel.addStyleName( "App_tabPanel" );
tabPanel.setSize( "80%", "100%" );
emailLabel.addStyleName( "App_emailLabel" );
footerPanel.add( emailLabel );
panel.add( headerPanel );
//panel.add( headerWrapperPanel );
panel.add( tabPanel );
panel.add( footerPanel );
panel.addStyleName( "App_panel" );
initWidget( panel );
}
protected void onLoad() {
super.onLoad();
String txt = "logo panel: " + logoPanel.getOffsetHeight() + " header
height: " + headerPanel.getOffsetHeight() + " header wrapper height: " +
headerWrapperPanel.getOffsetHeight() + " footer height: " +
footerPanel.getOffsetHeigh
t() + " panel.height: " + panel.getOffsetHeight();
Window.alert( txt );
}
}
Note: no size has been set in the .css.
*Description:*
- Here, I'm using tabPanel.setSize( "80%", "100%" ), which does set the
height but definitely too big, it seams that it use the 100% of the
ClientWidth!
- Also, in onLoad() I'm printing the height of the logoPanel (which is
correct), headerPanel (which is ==0), I've used a headerWrapperPanel (which
is ==0), footerPanel (==0 too) -
*Why these panels do not get the height of their inner panels?*
I also got the problem with ScrollerPanel, impossible to tell it
setHeight("100%")... It is a nightmare!
We need to set the size in pixel which is almost impossible in some case...
Why is it still so complicated to set widget's height in the second version
of GWT?
GWT is a sweet toolkit! I love the idea, and I love it, BUT, some times it
is a pain! With such basic stuffs, it is quite annoying...
Thanks to all, and be happy!
--
Jeanluc
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
