使用 gwt 和 ui-binder 更改悬停时的图像

Question

我正在使用声明性/ui-binder 方法将图像添加到页面。这与 GWT 提供的 ImageBundle 函数结合使用。

我想做的是将鼠标悬停在图像上时更改图像。我的问题是：最好的方法是什么？我当前的方法首先是最好的方法吗？

我的代码看起来类似于：

<ui:with field='res' type='path.to.my.app.AppResources' />
...
<g:HorizontalPanel ui:field='horizPanel' >
    <g:Image ui:field='image1' resource='{res.image1}'/>
</g:HorizontalPanel>

然后通过 AbstractImagePrototype 将其绑定到 ImageBundle 类中。

然后，在我的主处理程序中，我有类似的内容：

@UiHandler("image1")
public void onMouseOver(MouseOverEvent event)
{
    /* What do I do here? */
}

说当用户将鼠标悬停在 image1 上时，我想用 image2 替换 image1 （并在指针离开图像时将 image1 放回去）。我要替换 image1 对象吗？我是否对该图像使用 setUrl 函数？我是否创建一个全新的图像，并使用水平面板的添加/删除功能来添加它？这看起来效率极低。我什至不需要ImageBundle吗？我可以通过 添加图像，然后使用 CSS 和悬停属性来交换图像？

一些指导会很好。 GWT 文档在这方面严重缺乏。谢谢。

Answer 1

PushButton 非常适合这种行为。您可以比 :hover 更进一步 - 您可以为按钮的不同面指定任意 html 和小部件。

有关 uibinder 中的示例，请参阅 UiBinder 中的 gwt PushButton。

这种方法会产生更多的开销，因为它确实注册了鼠标处理程序并设置了整个小部件 - 如果您确实只需要翻转图像而不需要任何其他事件处理，则可以使用 :hover css 选择器（也许使用 @sprite？）可能是最好的。

Answer 2

在这里使用鼠标处理程序似乎有点开销。我将使用 css 和悬停选择器，

.foo {
    background: url('path/to/image1.png');
    /* height, width, etc. */
}

.foo:hover {
    background: url('path/to/image2.png');
    /* ... */
}

然后使用呈现 div 元素（例如 SimplePanel）而不是图像的小部件，并将样式 foo 设置为 stylePrimaryName

<g:HorizontalPanel ui:field='horizPanel' >
    <g:SimplePanel ui:field='image1' stylePrimaryName='foo'/>
</g:HorizontalPanel>