Использовать изображение ClientBundle в качестве фонового изображения

Я пытаюсь использовать изображение из ClientBundle в качестве фонового изображения в шаблоне UIIBinder. Я использовал это обсуждение в качестве руководства, но не смог чтобы заставить его работать.

В моем классе Java у меня есть:

public static interface PriceButtonStyles extends ClientBundle
{
    String paidIcon();

    @ClientBundle.Source("paid_button_53x31.png")
    DataResource paid_buttonAsDataResource();
}

@UiField
PriceButtonStyles priceButtonStyle;

И затем в соответствующем файле шаблона я ссылаюсь на него так:

<ui:style field="priceButtonStyle" type="com.example.client.PriceButton.PriceButtonStyles">

    @url paidIconUrl paid_buttonAsDataResource;

    .paidIcon {
        background: paidIconUrl 0 0 no-repeat;

    }
</ui:style>

Уже в этот момент моя IDE показывает строку "paidIconUrl" красным цветом, указывая на то, что что-то не так:

ide показывает красный цвет

И действительно, когда я пытаюсь запустить его, я получаю:

    ERROR: Type com.ecample.client.PriceButton.PriceButtonStyles does not extend com.google.gwt.resources.client.CssResource Element <ui:style field='priceButtonStyle' type='com.example.client.PriceButton.PriceButtonStyles'> (:7). 
ERROR: Uncaught exception escaped. com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses

Далее в обсуждении групп Google предлагается это может работать с <ui:data>, а не с <ui:style>, поэтому я попытался заставить это работать. Но похоже, что вы не можете включить оба стиля CSS (например, мой метод paidIcon()) и DataResources в ресурсы <ui:data>. Мне не удалось найти много документации по <ui:data>, поэтому я просто хватаюсь за соломинку.


gwt uibinder
person George Armhold    schedule 18.03.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

В дополнение к изображениям, где вы хотите установить свойство src, вы должны установить

<g:Image url="{res.minimize.getSafeUri.asString}" ....>

res создается следующим образом:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:with field="res"
        type="xxx.myRes"></ui:with>
....

и клиентский комплект выглядит так:

package xxx;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface myRes extends ClientBundle {

    @Source("minimize.png")
    ImageResource minimize();

}

В моем случае создание ClientBundle (например, с GWT.<TitleBarBundle>create(myRes.class);) не требовалось.

Спасибо за ваш ответ, Крис Босинг, но я чувствовал, что должен поделиться с вами своим опытом.

С уважением, Стефан

person Stefan    schedule 29.03.2012

arrow_upward
4
arrow_downward

Вот как я это делаю. Это немного отличается от вашего подхода, но отлично сработало для меня в такой ситуации. Ваш ClientBundle будет выглядеть так:

public static interface PriceButtonStyles extends ClientBundle
{
     @Source("PriceButtonStyles.css")
     Styles priceButtonStyles();

     @Source("paid_button_53x31.png")
     ImageResource paidButtonPNG();

     interface Styles extends CssResource {
         String buttonBackground();
     }
}

Тогда вам понадобится PriceButtonStyles.css из первого @Source:

.buttonBackground {
    gwt-image:'paidButtonPNG';
    background-repeat:no-repeat;
}

Ваш *.ui.xml будет выглядеть так:

<ui:with field="res" type="com.ecample.client.PriceButton.PriceButtonStyles"></ui:with>
<g:Label styleName="{res.priceButtonStyles.buttonBackground}"><g:Label>

Несмотря на то, что ваши стили находятся в файле css, компилятор все равно минимизирует и обфусцирует их.
Редактировать: не забудьте вызвать
GWT.<PriceButtonStyles> create(PriceButtonStyles.class).priceButtonStyles().ensureInjected(); Лучшее место для этого — ваш метод EntryPoint

person Chris Boesing    schedule 18.03.2011
comment
Хм, попробовал это, но это ошибка с ОШИБКОЙ: тип результата отложенной привязки «com.example.client.PriceButton.Styles.PriceButtonStyles» не должен быть абстрактным. В верхней части EntryPoint я вызываю GWT.‹PriceButton.Styles.PriceButtonStyles› create(PriceButton.Styles.PriceButtonStyles.class).ensureInjected(). У меня есть PriceButtonStyles.css в том же пакете, что и код Java. Кроме того, мне пришлось переименовать интерфейс верхнего уровня в Стили, так как он не хотел иметь встроенный интерфейс с таким же именем. - person George Armhold; 18.03.2011
comment
Извините за то, что у двух интерфейсов одинаковое имя. Я думаю, что ваша ошибка связана с призывом ввести стиль. Вам нужно поместить интерфейс верхнего уровня между ‹ › и ( ) - person Chris Boesing; 18.03.2011
comment
Вероятно, вам следует добавить аннотацию @ImageOptions(repeatStyle=RepeatStyle.Both) к методу ImageResource, чтобы убедиться, что изображение не спрайтировано в некоторых браузерах (а именно, IE6/7) - person Thomas Broyer; 22.03.2011
comment
Все еще не работает. Стиль применяется, потому что если я добавлю границу: 1px сплошной красный; на .buttonBackground я получаю красивую красную рамку вокруг метки. Но изображение не работает. - person George Armhold; 23.03.2011
comment
Ваше замечание о вызове sureInjected() было очень полезным!! Спасибо! - person madhead; 10.12.2011