GWT 元素不可见

Question

我已经在这里问过这样的问题，但还没有得到可行的答复。解决这个问题对我来说真的很重要。因此，我尝试使用 ExtGWT 2.3.0 / GWT 2.5.1 开发一个应用程序，但遇到了小部件（GWT 和 GXT）在浏览器中不可见的问题。一个多星期以来，我一直在努力解决这个问题，但不幸的是我失败了。我已经尝试过的东西：

使用 GWT/GXT 的不同库（使用 ExtGXT 3.x 不能解决问题）；
使用 Maven 网络应用程序/gxt3+ 原型创建项目；
在 Tomacat 上部署项目/在 GWT 下享用午餐；
在 GWT 模块中使用不同的样式（如 <inherits name='com.google.gwt.user.theme.standard.Standard'/>）；
重写 .css-文件；
通过 Maven / GWT 编译器编译项目；
清理所有相关临时目录中的缓存文件（如 Windows' 以及 Intellij IDEA 的）；
制作 Maven 的 clean install;
使用不同版本的不同浏览器（IE 8 和 11，Chrome，FF 24 和 36）；
尝试在带/不带 GWT 开发人员插件的浏览器中运行应用程序；
浏览互联网寻找解决方案（尤其是 Whosebug）；

也许我遗漏了 smth 但操作列表非常大。顺便说一句，我记录了操作，没有抛出任何错误或异常。如果我在 .css 中声明小部件的边框设置，它们的边框将变得可见，证明小部件在页面上。所以，如果有人遇到过这样的问题或者可以提出一些建议，请告诉我。坦率地说，这对我来说非常重要。请查看项目文件夹结构/设置的屏幕截图。提前谢谢你。

入口点 - class

public class ProjectEntryPoint implements EntryPoint {
    @Override
    public void onModuleLoad() {
        Viewport viewport = new Viewport();
        final BorderLayout borderLayout = new BorderLayout();

        BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 20);
        northData.setSplit(false);
        northData.setCollapsible(false);

        BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
        centerData.setCollapsible(false);

        BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200, 150, 300);
        westData.setCollapsible(true);
        westData.setSplit(true);

        ContentPanel mainPanel = new ContentPanel();
        mainPanel.setStyleName("mainPanel");
        ContentPanel navPanel = new ContentPanel();
        mainPanel.setStyleName("navPanel");

        HTML headerHTML = new HTML();
        headerHTML.setHTML("<h1>RSS Reader</h1>");

        viewport.add(mainPanel, centerData);
        viewport.add(navPanel, westData);
        viewport.add(headerHTML, northData);
        viewport.setLayout(borderLayout);
        viewport.layout();
        RootPanel.get().add(viewport);
    } 
}

模块

<module rename-to='Project'>
  <inherits name='com.google.gwt.user.User' />
  <inherits name='com.extjs.gxt.ui.GXT' />
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <entry-point class='GXT3App.client.ProjectEntryPoint' />
  <source path='client' />
  <source path='shared' />
  <add-linker name="xsiframe" />
</module>

.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="gxt-all.css">
    <title>Project</title>
    <script type="text/javascript" language="javascript" src="Project/Project.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>
  </body>
</html>

.css

.mainPanel {
    border: 1px solid black;
}

.navPanel {
    border: 1px solid black;
}

Answer 1

这肯定不是答案，但您的代码有错别字：

    ContentPanel mainPanel = new ContentPanel();
    mainPanel.setStyleName("mainPanel");
    ContentPanel navPanel = new ContentPanel();
    mainPanel.setStyleName("navPanel");

最后一行（我认为）应该在哪里

   navPanel.setStyleName("navPanel");

Answer 2

似乎是缺少样式的问题 - 请仔细检查您在主机页面中引用它的位置是否提供 gxt-all.css。使用浏览器的开发人员工具查看它是否没有抛出 404.

GXT 2.3 捆绑的 setup.txt 文件中的 步骤 1 中似乎提到了缺少的资源：

在 Eclipse 中创建一个 Google Web Application Project 项目。

将下载中 /resources 文件夹的内容复制到 war 文件夹中的 {foldername} 位置。将 {foldername} 替换为您为 war 文件夹中的资源创建的文件夹的名称。

将以下样式表添加到您的主机页面。

<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />

如果您使用图表，请将以下脚本添加到您的主机页面。

将以下条目添加到项目模块 xml 文件中。
```
<inherits name='com.extjs.gxt.ui.GXT'/>
```
Eclipse 设置（对于其他开发环境应该类似）。这些说明假设您有一个现有项目和启动配置。
1. 将 gxt.jar 添加到项目中。
2. 添加 GXT jar 以启动配置。

Answer 3

我解决了这个问题。我不会说这是一个优雅的解决方案，但它确实有效。如上所述，问题在于缺少 .css-文件，该文件定义了描述小部件样式的选择器 (gxt-all.css)。创建项目时，请确保以下包含相关文件的文件夹出现在项目的 webapp 目录中（如果您使用 Maven 的 web-app-archetype）：

图表
css（包含 gxt-all.css 和 gxt-grey.css）
桌面
快闪
图片
主题

您可以在文件夹 resources 的 GXT 安装存档中找到所有这些东西。要使用它，只需将所有文件夹放入您的项目中，并在您的主机-html 中定义 gxt-all.css 的路径。它适用于 GXT 2.x.

GWT 元素不可见

GWT elements are not visible

gwt

intellij-idea

gxt