为您的捆绑图像创建资源:
interface MyResources extends ClientBundle {
@Source("mySpriteImage.png")
ImageResource mySpriteImage();
@Source("myCss.css")
MyCssResource myCss();
}
interface MyCssResource extends CssResource {
String myBackground();
}
所以现在有两种方法可以使用从 MyResources 获取的 ImageResource。第一种是使用@sprite 指令将其附加到CSS 规则。myCss.css:
@sprite .myBackground {
gwt-image: "mySpriteImage";
}
.image1 {
width: 16px;
height: 16px;
background-position: 0 0;
}
.image2 {
width: 16px;
height: 16px;
background-position: -16px 0;
}
.image3 {
width: 32px;
height: 32px;
background-position: -16px -16px;
}
/* ... */
你创建你的精灵类并设置你的类名。
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:Image styleName="{myResources.myCss.myBackground} {myResources.myCss.image1}"/>
</ui:UiBinder>