使用gwt和ui-binder更改悬停时的图像 [英] change image on hover using gwt and ui-binder

问题描述

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

我想要做的是更改当我将鼠标悬停在图像上时，图像就会出现。我的问题是：什么是最好的方式来做到这一点，是我目前的方法是最好的方法呢？

我的代码看起来类似于：

 < ui：with field ='res'type ='path.to.my.app.AppResources'/> 
 ... 
  < / g：Horizo​​ntalPanel> 
  

然后绑定到 ImageBundle 类通过 AbstractImagePrototype 。

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

  @UiHandler（image1）
 public void onMouseOver（MouseOverEvent event）
 {
 / *在这里做？ * / 
} 
  

例如，当用户将鼠标悬停在image1上时，我想用image2替换image1 （并在指针离开图像时放回image1）。我是否替换image1对象？我是否使用该图像的setUrl函数？我是否创建一个全新的图像，并使用水平面板的添加/删除功能来添加它？这似乎非常低效。我甚至不需要一个 ImageBundle ;我可以通过像< g：Image .... url ='path / to / image1.png'/> 之类的东西添加图片，然后使用CSS和悬停属性来换出图像？

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

解决方案

PushButton 适合这种行为。您可以转到：hover 以外的父亲 - 您可以为按钮的不同面指定任意的html和小部件。

请参阅 UiBinder中的gwt pushButton 例如在uibinder中。

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

i am using the declarative/ui-binder method of adding images to a page. this is in combination with using the ImageBundle functions that GWT provides.

what i would like to do is change the image out when i hover over the image. my questions are: what are the best way to do this, and is my current method the best method in the first place?

my code looks something similar to:

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

that is then tied into an ImageBundle class via the AbstractImagePrototype.

then, in my main handler, i have something like:

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

say i want to replace image1 with image2 when the user hovers over image1 (and put image1 back when the pointer leaves the image). do i replace the image1 object? do i use the setUrl function for that image? do i create a whole new image, and use the add/remove functions for the horizontal panel to add it on? that seems awfully inefficient. do i not even need an ImageBundle; can i add images via something like <g:Image .... url='path/to/image1.png' /> and then use CSS and the hover attribute to swap out the image?

some guidance would be great. the GWT documentation is seriously lacking in this area. thanks.

解决方案

PushButton is good for this kind of behavior. You can go father than :hover - you can specify arbitrary html and widgets for different faces of the buttons.

See gwt pushButton in UiBinder for an example in uibinder.

There will be more overhead in this approach, since it does register mouse handlers and set up a whole widget - if you really only need the rollover image and not any other event handling, a :hover css selector (maybe with a @sprite?) is probably best.

这篇关于使用gwt和ui-binder更改悬停时的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！