在 GWT 中需要应用程序范围的 CSS 常量

Question

我想在 GWT CssResource 中将一些颜色定义为常量，并在整个应用程序中使用这些常量；但我不知道该怎么做。

我会告诉你我已经尝试过什么。我创建了一个 ClientBundle 和一个 CssResource，如下所示：

public interface Resources extends ClientBundle {
  public interface MyStyle extends CssResource {
    String JUNGLEGREEN();
    String example();
    ...
  }
  @Source("Resources.css")
  MyStyle css();
}

我定义了一些 Resources.css 中的常量：

@def JUNGLEGREEN #1F3D0A;

在 Resources.css 中，我像这样使用这些常量：

.example { color:JUNGLEGREEN; }

我不知道如何在其他 CSS 文件和 UiBinder 模板中重用这些常量。我想在其他一些 UiBinder 文件中执行此操作，例如 LoginView.ui.xml:

<ui:with field='resources' type='com.example.Resources' />
<ui:style>
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>

...但它似乎无法编译。你知道我怎样才能实现我的目标吗？

Answer 1

我们是这样做的：

• 我们将所有常量属性放在

@def black #241b15;   /* text color */
@def orange #ff4f00;   /* links */

• 每个 ui.xml 文件中的 constant.css 文件中，您可以通过以下方式引用这些常量：

<ui:style src="../../resources/css/constants.css">
    .myStyle {
        color: orange;
    }
</ui:style>

希望有所帮助。

编辑：

为了避免 元素中的相对路径，您可以执行以下操作：

• 在 css 文件中再次定义常量（例如 constants.css）

@def junglegreen #1f3d0a;

• 创建一个 ClientBundle 和 CssResource 来检索定义的常量

public interface MyResources extends ClientBundle {

    public static final MyResources INSTANCE = GWT.create(MyResources.class);

    public interface Constants extends CssResource {

        String junglegreen();
    }

    Constants constants();
}

- 使用 @eval 注释来访问常量

<ui:style>
    @eval green com.gwt.client.widget.test.MyResources.INSTANCE.constants().junglegreen();

    .someClass {
        color: green;
    }
</ui:style>

我知道如何处理的唯一方法使用常量而不引用 css 文件本身。

Answer 2

我知道这个答案可能有点晚了，但可能会对某人有所帮助。我遇到了同样的问题，并且能够通过添加以下内容来解决它：

Resources.css().ensureInjected()

我在我的工厂中添加了它，但在几个地方尝试了它，无论我把它放在哪里，它都有效。

Answer 3

你应该能够使用

<ui:style>
  @IMPORT url("../../../global.css");
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>