使用 gwt 和 ui-binder 更改悬停图像答案

【问题标题】：change image on hover using gwt and ui-binder使用 gwt 和 ui-binder 更改悬停图像
【发布时间】：2011-11-28 21:32:07
【问题描述】：

我正在使用声明式/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；我可以通过<g:Image .... url='path/to/image1.png' /> 之类的方式添加图像，然后使用 CSS 和 hover 属性来换出图像吗？

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

【问题讨论】：

标签： image gwt hover uibinder declarative

【解决方案1】：

PushButton 适合这种行为。你可以比:hover 更父亲——你可以为按钮的不同面指定任意的html和小部件。

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

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

【讨论】：

两个 cmets 都有帮助，但你是对的。一个按钮非常适合这个。

【解决方案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>

【讨论】：