GWT 2.2 根面板 CSS 错误答案

【问题标题】：GWT 2.2 RootPanel CSS errorGWT 2.2 根面板 CSS 错误
【发布时间】：2011-02-28 08:44:15
【问题描述】：

大家好，我刚开始使用 GWT，当我在 Eclipse 中运行项目时遇到以下错误

19:36:16.084 [错误] [adaptivgwt] 警告： com.google.gwt.user.client.ui.RootPanel 后代将不正确定位，即不相对于他们的父元素，当 “位置：静态”，这是 CSS 默认，生效。一种可能解决方法是打电话 'panel.getElement().getStyle().setPosition(Position.RELATIVE)'。

java.lang.IllegalStateException： com.google.gwt.user.client.ui.RootPanel 缺少 CSS '位置：{相对，绝对，固定}' 在 com.google.gwt.user.client.ui.AbsolutePanel.verifyPositionNotStatic(AbsolutePanel.java:279) 在 com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:118) 在 com.ivstel.adaptiv.client.AdaptivGWT.loadLogin(AdaptivGWT.java:29) 在 com.ivstel.adaptiv.client.AdaptivGWT.onModuleLoad(AdaptivGWT.java:21) 在 sun.reflect.NativeMethodAccessorImpl.invoke0(Native 方法）在 sun.reflect.NativeMethodAccessorImpl.invoke（未知资源）在 sun.reflect.DelegatingMethodAccessorImpl.invoke（未知资源）在 java.lang.reflect.Method.invoke（未知资源）在 com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) 在 com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:183) 在 com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510) 在 com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) 在 java.lang.Thread.run(Unknown Source)

这就是我的entry point 的样子：

public class AdaptivGWT implements EntryPoint {

private static AdaptivGWT singleton;

        public static AdaptivGWT get() {
                return singleton;
        }

        public void onModuleLoad() {
                singleton = this;
                loadLogin();
        }

        public void loadLogin() {
                RootPanel.get("login").clear();
                RootPanel.get("main").clear();

                LoginGWT login = new LoginGWT();
                RootPanel.get("login").add(login, 10, 10);
        }

        public void loadMain(User user) {
                RootPanel.get("login").clear();

                MainGWT main = new MainGWT();
                RootPanel.get("main").add(main, 10, 10);
        }
}

HTML 文件。

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="AdaptivGWT.css">

    <title>Adaptiv</title>

    <script type="text/javascript" language="javascript" src="adaptivgwt/adaptivgwt.nocache.js"></script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <div id="login"></div>
    <div id="main"></div>

  </body>
</html>

【问题讨论】：

我猜这个问题的答案在此处未显示的部分：您的主 html 文件，其中包含 main 和 login 标记的 html 元素。那么你也可以添加html吗？

标签： gwt

【解决方案1】：

在add 方法中使用位置参数（即10、10）需要您想要将GWT 小部件添加到的元素作为子元素，也必须是定位元素（即它们必须具有属性：position:） .在您的情况下，div（具有 id main 和 login）没有位置。最好改用add(main)。如果您想将元素定位到左侧/顶部 10 像素，请使用 css 边距或填充（取决于您的用例）。

附带说明，不必同时拥有“登录”和“主”div，您可以简单地使用一个 div，或直接将其添加到正文中，即使用get()。这样您就可以完全控制 GWT，而不是在 html 文件中拥有部分结构。

【讨论】：

非常感谢。删除位置参数修复了它。
我将一堆控件直接添加到 RootPanel。您如何使用 x/y 参数在根面板中添加组件？如何指定我的根面板的位置，或者这不可能？