css - GWT Widget 开发 : combining & overriding CSS

Question

我刚刚开始学习 GWT，所以我的问题可能很幼稚。试图找到“标准”解决方案，但找不到。

我正在开发一个 AddressWidget。它作为一个 Composite 小部件实现，它由 AddressWidget 中定义的原子小部件(Labels、TextBoxes、ListBoxes...)组成。 ui.xml。这些微小的构建 block 应该从 common-widgets.css 中获取它们的 CSS。 AddressWidget 本身应该从 address-widget.css 获取默认样式。

由于此小部件将在不同的页面上使用，因此它们应该能够覆盖应用的样式以自定义外观。 IE。 OrderPage 应该应用它自己的 order-page-address-widget.css，ContactDetailsPage – 来自 contact-details -address-widget.css

我该如何实现？

Answer 1

我的建议 - 放弃这个想法。开发和维护将是 hell ，我是认真的。您将不断尝试找出必须更新哪个 CSS 文件，然后您将不得不在多个地方测试每个更新，因为一个文件中的更新可能会弄乱另一个文件中的 CSS。

许多 GWT 开发人员更喜欢使用 CssResource CSS 的方法。不过，我从未听说过任何设计师喜欢这种解决方案。

在代码和设计方面使用 GWT 多年之后，我非常喜欢为整个应用程序使用单个 CSS 文件。 CSS 是为继承而构建的，这就是单个文件所实现的。您可以定义基本样式，例如:

input {
    height: 24px;
}

如果您需要在特定小部件或应用程序的某些部分中更改这些样式，您可以在联系人页面/小部件上设置例如“联系人”类，然后将其添加到您的 CSS 文件中:

.contacts input {
    background: grey;
}

这种方法的优点:

• 更容易在整个应用程序中强制执行一致的外观
• 更容易维护您的 CSS，因为只需更新一个文件，并且不会与其他任何地方定义的 CSS 发生冲突
• 大多数设计师都了解并知道如何使用这种方法
• 如果您想为您的应用程序创建多个皮肤或主题，这是最简单的解决方案
• 很容易使您的 CSS 适应不同的屏幕尺寸，或定义特殊的打印样式。