GWT 元素不可见答案

【问题标题】：GWT elements are not visibleGWT 元素不可见
【发布时间】：2015-05-02 19:59:30
【问题描述】：

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

使用不同的 GWT/GXT 库（使用 ExtGXT 3.x 不能解决问题）；
使用 Maven web-app / 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 开发者插件的浏览器中使用午餐应用程序；
浏览互联网寻找解决方案（尤其是 stackoverflow）；

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

EntryPoint - 类

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;
}

【问题讨论】：

不要两次发布同一个问题来“引起注意”。编辑旧的并添加赏金以吸引更多关注。以后不要向网站发送重复问题的垃圾邮件。
我删除了旧问题并通过描述问题和我为解决它所做的事情来更新一个问题。这不是为了吸引注意力，而是将有关该问题的所有信息集中在一个地方。我认为它更清晰简洁。
你试过IE以外的其他浏览器吗？
谢谢，艾米。这个问题确实很好，我只是不想放弃其他一些问题。现在对于问题本身 - 显示了边框，所以有些东西有效。对于此类用例，我一直使用BorderLayoutContainer，如果示例这样做：sencha.com/examples/#ExamplePlace:borderlayout。你可以试试它而不是BorderLayout吗？
谢谢，但 BorderLayoutContainer 仅在 GXT 3.x 中可用。我使用 GXT 2.3。我尝试在 3.x 上更改 lib，但没有成功。

标签： gwt intellij-idea gxt

【解决方案1】：

这似乎是缺少样式的问题 - 请仔细检查 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 以启动配置。

【讨论】：

我已经以正确答案的形式编写了我们在上面的 cmets 中达到的解决方案，以便其他遇到此问题的人更容易找到。
我明白了，谢谢。我想我找到了所有问题的根源。在正常工作的项目中，不仅有gxt-all.css，还有很多图像，它们代表了工具按钮、滚动元素等小部件的元素。事实证明，在我的情况下，仅仅存在gxt-all.css 是不够的。我只有一个问题 - 为什么在创建项目时所有这些东西都没有包含在 web 目录中。此外，我从未见过任何信息表明所有这些东西（gxt-css，图像 - 文件）都必须参与 GXT 下的项目。
我找到了有关resources 文件夹的信息。希望这可以解决问题（尽管我希望像您一样，这一步应该是自动的......）。
谢谢！安装文件夹应该是第一个查看的地方。）所以问题解决了，但现在我在另一个工作站遇到了几乎同样的问题。我做了所有需要的东西，但是 Firefox 在控制台中显示了很多错误，例如：Error in parsing value for 'filter'. Declaration dropped.. 或 Unknown property '-moz-opacity'. Declaration dropped.. 。我在 CSS-validator 中验证了gxt-all.css，它也显示了相同的错误。我从不同的 gxt-libs 中尝试了 3 个不同的gxt-all.css，但结果是一样的。可能是什么？真的很奇怪。
我将文件夹从工作项目复制到新项目，结果成功了。问题似乎在不正确的 .css 中。

【解决方案2】：

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

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

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

   navPanel.setStyleName("navPanel");

【讨论】：

谢谢，但不会成功。我在上面帖子的cmets中描述的问题的解决方案。

【解决方案3】：

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

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

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

【讨论】：