css - GWT CSS资源

Question

CSS资源接口(interface)

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;
}

当你尝试编译时我有错误

[ERROR] The following non-obfuscated class is present in a strict CssResource: panel-body. Fix by adding String accessor method(s) to the CssResource interface for obfuscated classes, or use an @external declaration for unobfuscated classes.

[ERROR] The following non-obfuscated class is present in a strict CssResource: input-group-addon. Fix by adding String accessor method(s) to the CssResource interface for obfuscated classes, or use an @external declaration for unobfuscated classes.

[ERROR] The following non-obfuscated class is present in a strict CssResource: input-group. Fix by adding String accessor method(s) to the CssResource interface for obfuscated classes, or use an @external declaration for unobfuscated classes.

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

Answer 1

如果你只是想摆脱编译错误，只需在你的 CSS 中添加一个包含所有类的 @external 行，如下所示:

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

这样您就可以告诉 GWT:“忽略这些类，我会处理它们”。参见 the relevant doc .

但是!
使用 CSSResource 的要点之一是您可以这样做:

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

代替这个:

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

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

使用 CSSResource，您可以理想地定义具有所有必要方法的样式接口(interface)，在您的 Java 代码中使用它们，并让其他人(设计人员)负责支持实际的 CSS 文件和属性。< br/>而且，由于现在您的 Java 代码只关心接口(interface)方法，GWT 可以获取您的 CSS 并对其进行清理、缩小和混淆，以便在编译和运行时更好地对其进行管理。

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