GWT CSSResource

Question

CSSResource接口

public interface AppResources extends ClientBundle {
    public static final AppResources INSTANCE = GWT.create(AppResources.class);

    interface Style extends CssResource {
        String login();
    }

    @Source("css/style.gss")
    Style style();

    @Source("images/logo.png")
    ImageResource logo();
}

样式

.login {
    width: 100%;
    height: 100%;
}

.login .panel-body {
    text-align: center;
}

.login .loginWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.login .input-group {
    padding-bottom: 10px;
    width: 300px;
}

.login .input-group-addon {
    width: 100px;
}

当您试图编译时，我有错误

错误以下非混淆类出现在严格的CssResource中:面板-主体。通过将字符串访问器方法添加到混淆类的CssResource接口中，或为未混淆的类使用@外部声明来修正此问题。 错误以下非混淆类存在于严格的CssResource中:输入组-加载项。通过将字符串访问器方法添加到混淆类的CssResource接口中，或为未混淆的类使用@外部声明来修正此问题。 错误以下非混淆类存在于严格的CssResource中:输入组。通过将字符串访问器方法添加到混淆类的CssResource接口中，或为未混淆的类使用@外部声明来修正此问题。

是的，可以通过在界面样式中添加这些样式来解决问题，但我想知道是否可以应用一种育儿方式登录，而孩子会自动向上移动？

Answer 1

如果您只想消除编译错误，只需在CSS中的所有类中添加一个@external行，如下所示：

@external panel-body, loginWrapper, input-group, input-group-addon;

这样你就可以告诉GWT：“忽略这个类，我会处理它们”。见相关医生。

但!

使用CSSResource的要点之一是您可以这样做：

myWidget.addClassName(AppResources.INSTANCE.style().panelBody());
myWidget.removeClassName(AppResources.INSTANCE.style().loginWrapper());

而不是这样：

myWidget.addClassName("panel-body");
myWidget.removeClassName("loginWrapper");

第二个版本更容易出错，因为您是手工编写类名，在启动应用程序之前，您不会知道是否正确(除非IDE检查CSS类名并事先警告您)。

使用CSSResource，您可以使用所有必要的方法理想地定义样式接口，并在您的Java代码中使用它们，并让其他人(设计人员)负责支持实际的CSS文件和属性。

而且，由于您的Java代码现在只关心接口方法，GWT可以使用您的CSS并清理它，缩小它并混淆它，以便在编译和运行时能够更好地管理它。

这些额外好处的代价是必须为您希望GWT管理的每个CSS类定义一个方法。如果您只有一堆类，那么最好为它们添加方法。