Положение фона GWT ImageResource

Я пытаюсь использовать один .png в качестве кнопки с эффектом наведения (а-ля this) в GWT с использованием UIBinder, но у меня тяжелые времена.

Вот мой файл ui.xml:

<ui:with field="functionResources" type="myapp.client.application.functions.FunctionResources"/>

<ui:style>

    .clickableIcon{
        cursor: hand;
        cursor: pointer;            
    }

    .clickableIcon:hover{
        cursor: hand;
        cursor: pointer;                        
        background-position: 0 -76px;
        border: 1px solid blue;
    }
</ui:style>

<g:VerticalPanel ui:field="buttonPanel">
    <g:Image ui:field="survivalIcon" debugId="survivalIcon" width="76px" resource="{functionResources.survivalIcon}" styleName="{style.clickableIcon}"/>

</g:VerticalPanel>

Я могу получить .png в комплекте и отображать в браузере просто отлично. Однако мой :hover CSS не работает должным образом. Он действительно будет отображать синюю рамку вокруг изображения при наведении курсора, поэтому я знаю, что CSS работает, но изображение не меняется.

Похоже, что связанное изображение переопределяет свойство background-position как 0 0 в самом стиле элемента, что сводит на нет мой стиль на уровне класса. Есть ли способ сказать GWT не устанавливать фоновую позицию для связанного ImageResource? Или есть лучший способ сделать это вообще?

Спасибо.


gwt uibinder clientbundle
person Jeff Allen    schedule 30.08.2012    source источник
comment
Обратите внимание, что мне удалось заставить это работать с объявлением !important, но на мой вкус это немного хакерски.   -  person Jeff Allen    schedule 31.08.2012

Ответы (1)


arrow_upward
2
arrow_downward

Из плохой документации, которую я нашел в Интернете, вы не можете переопределить свойство background-position g:Image.

Альтернативой может быть использование системы спрайтов GWT для создания фонового изображения, для которого вы сможете переопределить свойство background-position.

Например,

<div class="{functionResources.style.survivalIcon} {style.clickableIcon}"/>

где FunctionResources будет иметь:

public interface FunctionResources extends ClientBundle {
    public interface Style extends CssResource {
        String survivalIcon();
    }

    Style style();
    ImageResource survivalIconImage();
}

и в отдельном файле CSS с именем style.css у вас будет:

@sprite .survivalIcon {
    gwt-image: "survivalIconImage";
}

Это создаст div с нужным вам фоновым изображением. Вы сможете изменить свойство background-position элемента div по своему желанию.

Конечно, этот метод можно применить к любому элементу DOM, поддерживающему фоновое изображение.

person spg    schedule 07.09.2012