我如何在GWT中使用圖像精靈？

Question

我試圖在圖像資源中使用平鋪圖像，我正在參考GWT教程...

一節說你需要使用精靈： http ： //code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle是一個枚舉值，與@sprite指令結合使用，表示圖像是要平鋪的

所以，現在我需要添加一個精靈指令..在哪里？ 關於精靈的研究，我來到這里： http ： //code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

該示例指示創建兩個文件：

1. MyCssResource
2. 為MyResources

我會在哪里寫這個：

@sprite .mySpriteClass {gwt-image：“imageAccessor”; 其他：財產;}

？

更多參考報價供參考：

@sprite對聲明CSSResource的FooBundle很敏感; 在@sprite聲明中命名的兄弟ImageResource方法將用於組成背景精靈。

Answer 1

根據您的編寫，我將假設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。 第一種是使用@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());

Answer 2

讓我加上這個：

@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*
}

請記住在需要時覆蓋它們：例如將高度和寬度設置為auto：

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

HTH，我很努力地找到了;）

Answer 3

我想補充一下

記得在MyCssResource.java上調用ensureInjected（）或者

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

不會工作..

Answer 4

如果您使用gss， @sprite在這種情況下不起作用。 你應該使用gwt-sprite如：

.myBackground {
  gwt-sprite: "myImage";
}