GWT UiBinder 和图像精灵

发布于 2024-11-13 03:41:39 字数 1505 浏览 3 评论 0原文

我无法让 CSS 图像精灵出现在 GWT UiBinder 中。我确实回顾了如何在 GWT 中使用图像精灵？，但发现我已经按照建议做了。

我有一个 ui.xml、ClientBundle 接口以及一个 CssBundle 嵌套接口和一个 css 文件。

ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field="resources"
    type="edu.wts.upholdingthetruth.poweroftheword.client.resources.POWResources" />

    <g:FlowPanel width="100%" styleName="{resources.sprites.underMenuGlow}" />
</ui:UiBinder>

ClientBundle:

public interface POWResources extends ClientBundle {
    public static final POWResources INSTANCE = GWT.create(POWResources.class);

    @Source("site1/undertopglow.png")
    ImageResource underTopGlow();

    @Source("sprites.css")
    public Sprites sprites();

    public interface Sprites extends CssResource {

            String underMenuGlow();
    }

    // other stuff
}

sprites.css:

@sprite .underMenuGlow {gwt-image: "underTopGlow"}

因此，我编译了我的应用程序（不会抱怨），并且在浏览器中，我的图像丢失了。当我在 Chrome 的开发者工具中查看该页面时，我看到相应的 div 引用了混淆的 css 类，但我无法在任何地方找到该类定义。

另一方面，我能够使用显示图像。

我是否缺少一个步骤来通过这样的 css 精灵显示图像？

原文

I'm having trouble getting CSS image sprites to appear in GWT UiBinder. I did review how do i use image sprites in GWT?, but found I was already doing what was suggested.

I have a ui.xml, ClientBundle interface with a CssBundle nested interface, and a css file.

ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field="resources"
    type="edu.wts.upholdingthetruth.poweroftheword.client.resources.POWResources" />

    <g:FlowPanel width="100%" styleName="{resources.sprites.underMenuGlow}" />
</ui:UiBinder>

ClientBundle:

public interface POWResources extends ClientBundle {
    public static final POWResources INSTANCE = GWT.create(POWResources.class);

    @Source("site1/undertopglow.png")
    ImageResource underTopGlow();

    @Source("sprites.css")
    public Sprites sprites();

    public interface Sprites extends CssResource {

            String underMenuGlow();
    }

    // other stuff
}

sprites.css:

@sprite .underMenuGlow {gwt-image: "underTopGlow"}

So, I compile my app (which does not complain), and in the browser, my image is missing. When I review the page in Chrome's Developer Tools, I see the corresponding div references the obfuscated css class, but I was not able to find that class defined anywhere.

I was, on the other hand, able to display the image using <g:Image resource="{resources.underTopGlow}" />.

Is there a step I am missing to get images to display via css sprites like this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呢古 2024-11-20 03:41:39

您必须在代码中的某个位置对 CssResource 调用 ensureInjected() ；或者

POWResources.INSTANCE.sprites().ensureInjected();

，如果您不与其他代码共享样式/图像，则可以将 ClientBundle 替换为 UiBinder 从 ui:style 和 ui:image <

@UiField POWResources resources;
…
resources.sprites().ensureInjected();

创建的隐式 ClientBundle /code> （然后 UiBinder 将为您调用 ensureInjected）：

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>

You have to call ensureInjected() on your CssResource somewhere in your code; either:

POWResources.INSTANCE.sprites().ensureInjected();

@UiField POWResources resources;
…
resources.sprites().ensureInjected();

Alternatively, if you don't share the styles/images with other code, you can replace your ClientBundle with the implicit one that UiBinder creates from ui:style and ui:image (and UiBinder will then take care of calling ensureInjected for you):

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>

回复收藏 0 原文

~没有更多了~