изменить изображение при наведении курсора с помощью gwt и ui-binder - PullRequest
Новая
       30

изменить изображение при наведении курсора с помощью gwt и ui-binder

1 голос
/ 29 ноября 2011

Я использую декларативный метод / 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? */
}

скажем, я хочу заменить изображение1 на изображение2, когда пользователь наводит курсор на изображение1 (и вернуть изображение1, когда указатель покидает изображение). заменить объект image1? использовать функцию setUrl для этого изображения? создать новое изображение и использовать функции добавления / удаления для горизонтальной панели, чтобы добавить его? это кажется ужасно неэффективным. мне даже не нужен ImageBundle; Могу ли я добавить изображения через что-то вроде <g:Image .... url='path/to/image1.png' />, а затем использовать CSS и атрибут hover для замены изображения?

было бы замечательно какое-то руководство. документация GWT серьезно отсутствует в этой области. спасибо.

Ответы [ 2 ]

3 голосов
/ 29 ноября 2011

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

См. gwt pushButton в UiBinder для примера в uibinder.

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

2 голосов
/ 29 ноября 2011

Использование обработчиков мыши в данном случае выглядит немного сложнее. Я бы использовал 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>
...