many strange problem when change from rootlayout panel to rootpanel
350 views
Skip to first unread message
Message has been deleted
tong123123
Aug 20, 2012, 2:31:31 AM8/20/12
to google-we...@googlegroups.com
At first, I use rootlayoutpanel in my application and everything is alright. (attachment:rootlayoutPanel.png, entryPointClassUsingRootPanel.txt)
but when I change to rootpanel, many strange problem occur (in attachment screen1.png, only the lower part of the origin screen(rootlayoutpanel) is shown.)
the host html is AlsAdminViewerWebApp.html
in the attachment dockLayoutPanel, I use debug mode to check the Window.getClientWidth in onModuleLoad() but the resut is
"window cannot be resolved"
and the baseDockLayoutPanel inside the rootPanel is very strange in IDE debug mode, it's top is -20ex (as shown in dockLayoutPanel.png).
1) why will the result so strange (only the lowest part is shown on the screen) when change from rootLayoutPanel to rootPanel?
2) in fact, if I want to change from RootLayoutPanel to rootPanel, what need to be changed? Do I need to setSize on rootPanel? and do I need to setsize on the including DockLayoutPanel inside the rootPanel? I also have a SimpleLayoutPanel inside the DockLayoutPanel, need to setSize again if use rootPanel?
3) I heavliy use Window.getClientWidth() and Window.getClientHeight() in my application when using RootLayoutPanel becuause I need to adjust widget size to different screen resolution, is Window.getClientWidth() and Window.getClientHeight() still be used if I change to RootPanel instead of RootLayoutPanel?
4) if I setsize to the enclosing DockLayoutPanel inside rootpanel, then it cannot handle different resolution of the screen?
5) At first I use LayoutPanel because it is recommended in developer guide, but in fact when to use normal panel and when to use layoutpanel?
is it layoutpanel if adjust the size if the browser window size is changed, but non-layout panel cannot?
thanks.
but when I change to rootpanel, many strange problem occur (in attachment screen1.png, only the lower part of the origin screen(rootlayoutpanel) is shown.)
the host html is AlsAdminViewerWebApp.html
in the attachment dockLayoutPanel, I use debug mode to check the Window.getClientWidth in onModuleLoad() but the resut is
"window cannot be resolved"
and the baseDockLayoutPanel inside the rootPanel is very strange in IDE debug mode, it's top is -20ex (as shown in dockLayoutPanel.png).
1) why will the result so strange (only the lowest part is shown on the screen) when change from rootLayoutPanel to rootPanel?
2) in fact, if I want to change from RootLayoutPanel to rootPanel, what need to be changed? Do I need to setSize on rootPanel? and do I need to setsize on the including DockLayoutPanel inside the rootPanel? I also have a SimpleLayoutPanel inside the DockLayoutPanel, need to setSize again if use rootPanel?
3) I heavliy use Window.getClientWidth() and Window.getClientHeight() in my application when using RootLayoutPanel becuause I need to adjust widget size to different screen resolution, is Window.getClientWidth() and Window.getClientHeight() still be used if I change to RootPanel instead of RootLayoutPanel?
4) if I setsize to the enclosing DockLayoutPanel inside rootpanel, then it cannot handle different resolution of the screen?
5) At first I use LayoutPanel because it is recommended in developer guide, but in fact when to use normal panel and when to use layoutpanel?
is it layoutpanel if adjust the size if the browser window size is changed, but non-layout panel cannot?
thanks.
Jens
Aug 20, 2012, 4:11:42 AM8/20/12
to google-we...@googlegroups.com
RootLayoutPanel uses absolute positioning while RootPanel does not use absolute positioning and is either the <body> element or any other DIV element with a given ID if you use RootPanel.get("id"). So RootLayoutPanel fills the whole browser window by default while RootPanel.get() is only as heigh as its content.
In your case I think you can do:
RootPanel root = RootPanel.get("id");
root.setSize("100%", "100%");
dockLayoutPanel.setSize("100%", "100%");
root.add(dockLayoutPanel);
Because you use DockLayoutPanel and you dont put it into a RootLayoutPanel you may also need to listen for window resize events and call onResize() on the dockLayoutPanel. Thats something that RootLayoutPanel does automatically for all its children.
-- J.
tong123123
Aug 20, 2012, 5:33:21 AM8/20/12
to google-we...@googlegroups.com
as shown in entryPointClassUsingRootPanel3.txt, I already set
but the result is still the same as shown in rootPanel3.png
My first page layout is
then for baseDockLayoutPanel,
where all three returns FlowPanel, then
where simpleContentPanel is SimpleLayoutPanel which also has setSize("100%", "100%");
any method to change to use rootPanel and without such strange result?
thanks
rootPanel.setSize("100%", "100%");
baseDockLayoutPanel.setSize("100%", "100%");
simpleContentPanel.setSize("100%", "100%");
My first page layout is
RootPanel rootPanel = RootPanel.get("uniqueID");
rootPanel.add(baseDockLayoutPanel);
then for baseDockLayoutPanel,
baseDockLayoutPanel.addNorth(CommonPanel.getHeaderPanel(), 20);
baseDockLayoutPanel.addSouth(CommonPanel.getFooterPanel(), 40);
FlowPanel leftSidePanel = CommonPanel.getLeftSidePanel();
baseDockLayoutPanel.addWest(leftSidePanel, Window.getClientWidth()*0.18);
where all three returns FlowPanel, then
baseDockLayoutPanel.add(simpleContentPanel);
where simpleContentPanel is SimpleLayoutPanel which also has setSize("100%", "100%");
any method to change to use rootPanel and without such strange result?
thanks
Jens
Aug 20, 2012, 5:53:54 AM8/20/12
to google-we...@googlegroups.com
My bad: <html> and <body> must also have a height of 100% to make it work (and <body> also a margin:0px to remove the default margin.)
Also its not a strange behavior.. its just how CSS works. A height of 100% only works if the parent element has a height. And thats also true for the <html> and <body> tag.
-- J
tong123123
Aug 21, 2012, 6:24:53 AM8/21/12
to google-we...@googlegroups.com
thanks, if <html> and <body> set height:100%, then the problem fixed.
in attachment 100%Method.png, the yellow is the body margin:10px, then the blue is the body, everything is normal.
But I try some other method and found some unknown.
1) I try not set height = 100% in html and body, instead I try to add the following code in onModuleLoad
the result is as absolute01.png and absolute02.png
as shown in absolute01.png, when I highlight the body tag, only the top is yellowed, but the margin should applied on all 4 side, so why only the top margin is yellowed?
2) as shown in absolute02.png, when I highlight the div id="uniqueID" tag, the area is blue, but the top and the left is white color, what is it? I have checked and the right and the bottom have no this white space.
3) I try to add one more code in onModuleLoad as follow:
this try to put the baseDockLayoutPanel to absolute position left:0 and top:0 but
the output is widgetPosition00.png, which is same as absolute01.png but with following error message in console
why calling setWidgetPosition will prompt this error in console?
in attachment 100%Method.png, the yellow is the body margin:10px, then the blue is the body, everything is normal.
But I try some other method and found some unknown.
1) I try not set height = 100% in html and body, instead I try to add the following code in onModuleLoad
rootPanel.getElement().getStyle().setPosition(Position.ABSOLUTE);
the result is as absolute01.png and absolute02.png
as shown in absolute01.png, when I highlight the body tag, only the top is yellowed, but the margin should applied on all 4 side, so why only the top margin is yellowed?
2) as shown in absolute02.png, when I highlight the div id="uniqueID" tag, the area is blue, but the top and the left is white color, what is it? I have checked and the right and the bottom have no this white space.
3) I try to add one more code in onModuleLoad as follow:
rootPanel.setWidgetPosition(basseDockLayoutPanel, 0, 0);
this try to put the baseDockLayoutPanel to absolute position left:0 and top:0 but
the output is widgetPosition00.png, which is same as absolute01.png but with following error message in console
14:26:39.432 [ERROR] [alsadminviewerwebapp] Warning: com.google.gwt.user.client.ui.RootPanel descendants will be incorrectly positioned, i.e. not relative to their parent element, when 'position:static', which is the CSS default, is in effect. One possible fix is to call 'panel.getElement().getStyle().setPosition(Position.RELATIVE)'.
java.lang.IllegalStateException: com.google.gwt.user.client.ui.RootPanel is missing CSS 'position:{relative,absolute,fixed}'
at com.google.gwt.user.client.ui.AbsolutePanel.verifyPositionNotStatic(AbsolutePanel.java:288)
at com.google.gwt.user.client.ui.AbsolutePanel.setWidgetPosition(AbsolutePanel.java:218)
at hk.gov.ehr.service.tch.als.admin.viewer.client.AlsAdminViewerWebApp.onModuleLoad(AlsAdminViewerWebApp.java:71)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Thread.java:662)
why calling setWidgetPosition will prompt this error in console?
Reply all
Reply to author
Forward
0 new messages