css – 如何在GWT中使用图像精灵?

前端之家收集整理的这篇文章主要介绍了css – 如何在GWT中使用图像精灵?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在图像资源中使用平铺图像,我正在引用GWT教程…

一节说你需要使用精灵:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle is an enumerated value
that is used in combination with
the@sprite directive to indicate that
the image is intended to be tiled

所以,现在我需要添加一个精灵指令..哪里?
研究精灵,我来到这里:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

该示例指示创建两个文件

> MyCssResource
> MyResources

我在哪里可以写:

@sprite .mySpriteClass {gwt-image:
“imageAccessor”; other: property;}

一些更多的引用可供参考:

@sprite is sensitive to the FooBundle
in which the CSSResource is declared;
a sibling ImageResource method named
in the @sprite declaration will be
used to compose the background sprite.

解决方法

从你写的内容我将假设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());

猜你在找的CSS相关文章