Question

从GWT页面（http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles），它提到了两种方式（对于现代应用程序）：

使用ClientBundle中包含的CssResource。

在UiBinder模板中使用内联元素。


现代GWT应用程序通常使用CssResource和UiBinder的组合。

所以我的问题是，我应该何时使用css文件并为其创建CssResource，何时应该使用＆lt; ui：style＆gt;？直接在ui.xml文件中定义样式？是否存在任何性能影响（即在客户端上下载的资源大小）以这两种方式？

Answer 1

没有性能影响 - 如果在UiBinder文件中指定CSS，GWT编译器将根据.ui.xml文件中内联的规则动态创建CssResource并使用它。

所以，这真的只取决于您是否想要在应用中的其他位置分享该风格。如果您希望Something.ui.xml中的按钮与SomethingElse.ui.xml中的另一个按钮具有相同的样式，那么您应该在CssResource中指定该样式。否则，请在UiBinder文件中指定样式，其他类不能访问它。

Answer 2

使用UiBinder，CssResource主要用于动态更改样式。如果您不打算动态更改样式，请不要在CssResource上浪费时间。

我建议使用CSS文件。这将风格与UiBinder中的标记区分开来，这有助于在项目中与超过1个人进行协作 - 对于庞大的项目尤其如此。在某些时候，你的.ui.xml文件可能变得非常庞大，并且其中包含CSS只会让事情变得更糟。

您可以轻松地将CSS文件附加到任何UiBinder，然后像往常一样使用它。这是一个例子：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style src="../css/StyleSheet.css" />
    ...
    ...
            <g:LayoutPanel ui:field="layoutName" styleName="{style.aCssRule}" >
    ...

以这种方式使用样式，如果您想要动态更改窗口小部件的样式，您只需要在此CSS文件中创建一个CssResource（在ClientBundle中），您就可以开始摇滚了。

将CSS样式与GWT小部件相关联的首选方法是什么（使用UiBinder）？

2 个答案: