22

画像リソースでタイル画像を使用しようとしていて、GWT チュートリアルを参照していました...

1 つのセクションでは、スプライトを使用する必要があると述べています: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle は、@sprite ディレクティブと組み合わせて使用​​される列挙値であり、画像がタイル表示されることを示します。

だから、今私はスプライトディレクティブを追加する必要があります..どこですか？スプライトについて調べて、ここに来ました: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

この例では、次の 2 つのファイルの作成が指示されています。

  1. MyCssResource
  2. マイリソース

これをどこに書きますか：

@sprite .mySpriteClass {gwt-image: "imageAccessor"; その他: プロパティ;}

?

参考のためのいくつかの引用：

@sprite は、CSSResource が宣言されている FooBundle に敏感です。@sprite 宣言で指定された兄弟 ImageResource メソッドは、背景スプライトを構成するために使用されます。

4

4 に答える 4

31

あなたが書いたことから、MyResourcesはClientBundleを拡張するインターフェースであり、MyCssResourcesはCssResourceを拡張するインターフェースであると推測します。

interface MyResources extends ClientBundle {
  @Source("myImage.png")
  @ImageOptions(repeatStyle = RepeatStyle.BOTH)
  ImageResource myImage();

  @Source("myCss.css")
  MyCssResource myCss();
}

interface MyCssResource extends CssResource {
  String myBackground();
}

したがって、MyResourcesから取得したImageResourceを使用する方法は2つあります。1つ目は、@spriteディレクティブを使用してCSSルールにアタッチすることです。myCss.css：

@sprite .myBackground {
  gwt-image: "myImage";
  /* Additional CSS rules may be added. */
}

次に、myBackgroundクラスを持つものはすべて、背景としてmyImageを持ちます。したがって、UiBinderを使用すると、たとえば次のようになります。

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>

定義されたImageResourceを使用してImageオブジェクトを直接インスタンス化することもできます。UiBinder：

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>

UiBinderなし：

MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());
于 2010-12-28T18:47:58.887 に答える
13

これを追加させてください：

@sprite .myBackground {
  gwt-image: "myImage";
  /* Additional CSS rules may be added. */
}

になる

.myBackground {
  backgroud-image: url(-url of the image-)
  width: *width of the image*
  height: *height of the image*
}

必要に応じてオーバーライドすることを忘れないでください。たとえば、高さと幅を自動に設定します。

@sprite .myBackground {
  gwt-image: "myImage";
  height: auto;
  width: auto;
}

HTH、私はそれを見つけるのに苦労しました;）

于 2011-03-07T21:19:39.590 に答える
4

私も追加したいと思います

MyCssResource.java で ensureInjected() を呼び出すことを忘れないでください。

<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>

動作しません..

于 2012-10-22T09:09:23.453 に答える