1

我正在使用向页面添加图像的声明性/ui-binder 方法。这与使用ImageBundleGWT 提供的功能相结合。

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

我的代码看起来类似于：

<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>

然后ImageBundle通过AbstractImagePrototype.

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

@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 和悬停属性来换出图像吗？

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

4

2 回答 2

3

PushButton对这种行为有好处。你可以去父亲比:hover- 你可以为按钮的不同面指定任意 html 和小部件。

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

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

于 2011-11-29T05:05:21.237 回答
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>
于 2011-11-29T00:35:42.407 回答