GWT 样式不适用答案

【问题标题】：GWT styles not applyingGWT 样式不适用
【发布时间】：2010-04-21 14:35:49
【问题描述】：

我正在创建一个使用 UiBinder 的 GWT 应用程序，但我遇到了一个奇怪的问题，即样式不适用于我的元素——直到我刷新浏览器，然后在页面刷新前的几分之一秒内短暂应用样式。换句话说：

打开页面；没有使用我定义的样式。
点击刷新
在页面变为空白之前的几分之一秒内使用了样式
页面重新加载，但没有样式

我将包含我的整个 *ui.xml 文件，因为它不是太大。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .idLabelStyle {
            font-weight: bold;
            text-align: center;
            width: 100px;
            border-style: solid;
            border-width: 1px;
            margin-right: 5px;
        }

        .nameLabelStyle {
            font-weight: bold;
            text-align: center;
            width: 500px;
            border-style: solid;
            border-width: 1px;
            margin-right: 5px;
        }

        .addressLabelStyle {
            font-weight: bold;
            text-align: center;
            width: 500px;
            border-style: solid;
            border-width: 1px;
        }
    </ui:style>
    <g:HTMLPanel>
        <g:HorizontalPanel>
            <g:Label addStyleNames="{style.idLabelStyle}">ID</g:Label>
            <g:Label addStyleNames="{style.nameLabelStyle}">Name</g:Label>
            <g:Label addStyleNames="{style.addressLabelStyle}">Address</g:Label>
        </g:HorizontalPanel>
    </g:HTMLPanel>
</ui:UiBinder>

我真的希望我错过了一些简单的东西。

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

而不是addStyleNames= 使用setStyleName= 或setStylePrimaryName= 我过去遇到过这个问题，它在我的情况下解决了它。注意：两种可能性如下所示...

setStyleName
Clears all of the object's style names and sets it to the given style. You should normally use setStylePrimaryName(String) unless you wish to explicitly remove all existing styles.

setStylePrimaryName
Sets the object's primary style name and updates all dependent style names.

【讨论】：

谢谢罗曼。不过，仍然没有运气。我得到和以前一样的结果。 ID 和 ID 都给了我相同的结果.
试试 ID
styleName="..." 是正确的，GWT 在幕后将其转换为 setStyleName。
正如上面评论中提到的，我尝试使用styleName，但还是不行。
您的项目中还有其他样式表吗？您的 html 文件甚至 GWT 代码中是否有任何样式？

【解决方案2】：

幸运或不幸的是，我不再在我的应用程序中使用这个小部件；但是，我不想丢失代码，因为这个问题让我发疯了，我想知道我错过了什么。

不幸的是，在更改了我的代码，然后重新添加小部件进行测试后，我无法再重现该问题。

这可能是我将小部件添加到 UI 的方式；我不记得我最初是如何添加它的（以前更改太多了），但我现在使用add(Widget) 方法将它添加到VerticalPanel，并且样式现在可以毫无问题地应用。

感谢在我的大雁追逐中跟随我的评论者。我希望我有一个更满意的答案...

【讨论】：

做了更多的研究......问题是 GWT 混淆了样式。见groups.google.com/group/google-web-toolkit/browse_thread/thread/…
GWT 确实会混淆样式，但只要您使用上面的格式，就可以了。即addStyleNames="{style.idLabelStyle}" - 注意花括号，以及我们使用style. 前缀限定样式名称的事实。当 GWT 编译这段代码时，他们会使用隐藏的混淆名称，但我们的代码可以使用我们定义的名称。

【解决方案3】：

在 UiBinder 中使用基于单元的面板时；将子元素包裹在标签中，并分别设置它们的对齐方式和大小。

http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/CellPanel.html

【讨论】：