GWT Widget开发：结合＆amp;覆盖CSS

Question

我刚开始学习GWT所以我的问题可能是愚蠢的。试图找到一个“标准”解决方案但找不到它。

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

由于此窗口小部件将在不同页面上使用，因此它们应该能够覆盖应用的样式以自定义外观。即 OrderPage 应该来自 order-page-address-widget.css ， ContactDetailsPage - 来自联系方式 - 详细信息-address-widget.css

我该如何实现？

Answer 1

我的建议 - 放弃这个想法。发展和维护将是地狱，我的意思是。您将不断尝试找出哪个CSS文件需要更新，然后您必须在多个位置测试每个更新，因为一个文件中的更新可能会破坏另一个文件中的CSS。

许多GWT开发人员更喜欢使用CssResource方法来处理CSS。但是，我从来没有听过任何设计师喜欢这个解决方案。

在代码和设计方面使用GWT多年后，我更倾向于为整个应用程序使用单个CSS文件。 CSS是为继承而构建的，这就是单个文件所实现的目标。您可以定义基本样式，例如：

input {
    height: 24px;
}

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

.contacts input {
    background: grey;
}

这种方法的优点：

• 在整个应用程序中更容易实现一致的外观
• 更容易维护您的CSS，因为有一个文件需要更新，并且与其他地方定义的CSS没有冲突
• 这是大多数设计师理解并知道如何使用
的方法
• 如果您想为应用程序创建多个皮肤或主题，这是最简单的解决方案
• 很容易让CSS调整到不同的屏幕尺寸，或定义特殊的打印样式。