1

管理を容易にするために、すべてのリソースを ClientBundle に入れたいと考えています。そのため、最初に、ディレクトリの下のファイルでもある単一の css ファイル/warを ClinetBundle に入れる作業を開始しました。ただし、出力でスタイルをレンダリングすることはできませんが/war、css ClientBundle を使用せずに css ファイルを配置するだけで、プログラムは正常に動作しました。

以下は私の簡単なテストケースです（ClientBundleを使用）-cssファイルを同じフォルダーに入れ、ディレクトリclientの下のcssファイルを削除します/war：

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.NotStrict;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test implements EntryPoint {

    private static final int REPORT_TITLE_HEIGHT = 50;
    public static final MyResources INSTANCE = GWT.create(MyResources.class);

    public interface MyResources extends ClientBundle {
        @NotStrict
        @Source("Test.css")
        CssResource css();
    }

    public void onModuleLoad() {

        INSTANCE.css().ensureInjected();

        Window.enableScrolling(false);
        Window.setMargin("0px");

        VLayout vl = new VLayout();
        vl.setWidth100();
        vl.setHeight100();

        HLayout reportTitleBar = new HLayout();
        reportTitleBar.setHeight(REPORT_TITLE_HEIGHT);
        reportTitleBar.setStyleName("report-title-bar");

        vl.setMembers(reportTitleBar);

        RootPanel.get().add(vl);
    }
}

スタイルをレンダリングできません。

/war別の単純なケース - css ClientBundle を使用せずに、css ファイルをフォルダーに戻します。

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test implements EntryPoint {

    private static final int REPORT_TITLE_HEIGHT = 50;

    public void onModuleLoad() {

        Window.enableScrolling(false);
        Window.setMargin("0px");

        VLayout vl = new VLayout();
        vl.setWidth100();
        vl.setHeight100();

        HLayout reportTitleBar = new HLayout();
        reportTitleBar.setHeight(REPORT_TITLE_HEIGHT);
        reportTitleBar.setStyleName("report-title-bar");

        vl.setMembers(reportTitleBar);

        RootPanel.get().add(vl);
    }
}

スタイルを正しくレンダリングできます。

そして私の Test.css コード:

.report-title-bar {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Opera */
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
}

ここでの問題は何ですか、誰か私に光を当ててください。感謝！

4

1 に答える 1

6

css ファイルを clientbundle に入れる場合、css ファイルは GWT Compilers CSS Parser によって解析される必要があります。これは現在、少しハッキングされた古いバージョンに基づいています。（ただし、これは今後変更される可能性があります）

パーサーが機能するには、次のようにバックグラウンド値をエスケープする必要があります。

background-image: literal('-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%)');

他にもエスケープが必要な癖がいくつかあります。ドキュメントを見て、エスケープを検索してください: https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle

于 2012-06-20T17:20:48.693 に答える