Измените изображение на пахни, используя GWT и UI-Binder

Question

Я использую метод Declarative/UI-Binder для добавления изображений на страницу. это в сочетании с использованием ImageBundle функции, которые предоставляет GWT.

Что я хотел бы сделать, так это изменить изображение, когда я завишу над изображением. Мои вопросы: как лучше всего это сделать, и является ли мой текущий метод лучшим методом в первую очередь?

Мой код выглядит нечто похожее на:

<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 (и положите обратное изображение1, когда указатель покидает изображение). Заменить ли я объект Image1? Я использую функцию Seturl для этого изображения? Создаю ли я совершенно новое изображение и использую функции добавления/удаления для горизонтальной панели, чтобы добавить его? Это кажется ужасно неэффективным. мне даже не нужно ImageBundle; Могу ли я добавить изображения через что -то вроде <g:Image .... url='path/to/image1.png' /> а затем используйте CSS и атрибут Hover, чтобы обмениваться изображением?

Некоторое руководство было бы здорово. В этой области серьезно не хватает документации GWT. Спасибо.

Answer 1

PushButton хорош для такого рода поведения. Ты можешь пойти отца, чем :hover - Вы можете указать произвольный HTML и виджеты для разных лиц кнопок.

Видеть gwt pushbutton in uibinder Для примера в Uibinder.

В этом подходе будет больше накладных расходов, так как он регистрирует обработчики мыши и настраивает целый виджет - если вам действительно нужно только изображение Rollover, а не какая -либо другая обработка событий, :hover Селектор CSS (возможно, с @sprite?) Вероятно, лучше.

Answer 2

Использование обработчиков мыши здесь кажется немного накладным. Я бы использовал CSS и селектор Hover

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

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

Затем используйте виджет, который отображает элемент Div (например, SimplePanel) вместо изображения и установите стиль Foo As StylePrimaryName

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