ClientBundle görüntüsünü background-image olarak kullanma

Question

Bir UIBInder şablonunda bir arka plan görüntüsü olarak bir ClientBundle görüntüyü kullanmaya çalışıyorum. Rehber olarak this discussion'u kullandım, ancak çalışmaya başlayamadı. Benim Java sınıfta

Ben:

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

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

@UiField 
PriceButtonStyles priceButtonStyle; 

Ve ardından ilgili şablon dosyasında ı başvuru onu istiyorum: Bu noktada Zaten

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

    @url paidIconUrl paid_buttonAsDataResource; 

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

    } 
</ui:style> 

benim IDE "paidIconUrl" dizesini gösteriyor kırmızı, o şey belirten pek doğru değil:

Bunu çalıştırmayı denediğinizde

Gerçekten de ben alıyorum:

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 

Biraz ileride Google Groups discussion yılında <ui:data> yerine <ui:style> ile işe yarayabilecek ileri sürülmektedir, bu yüzden bu işi yapmaya çalıştı. Ancak, hem CSS stillerini (ör. paidIcon() yöntemim) hem de <ui:data> kaynaklarında DataResources içeremezsiniz. <ui:data> üzerinde çok fazla belge bulamadım, bu yüzden gerçekten sadece payetle uğraşıyorum.

Answer 1

İşte nasıl yaparım. Yaklaşımınızdan biraz farklı ama bu tür bir durumda benim için çok çalıştı. Sizin ClientBundle şu şekilde görünecektir:

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

Sizin * .ui.xml şu şekilde görünecektir:

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

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

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

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

Sonra ilk @Source gelen PriceButtonStyles.css gerekir

Stilleriniz bir css dosyasında olsa bile, derleyici tarafından en aza indirilir ve gizlenir.
Düzenleme:
Bunun en iyi yer Eğer src özelliğini ayarlamak istediğiniz Görüntüler, ek olarak da GirişNoktası yöntemi

Answer 2

GWT.<PriceButtonStyles> create(PriceButtonStyles.class).priceButtonStyles().ensureInjected(); olduğunu aramaya unutma, sen ayarlamak zorunda

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

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

ve istemci demeti: l

res böyle örneği bunun gibi:

ClientBundle oluşturma (ör. Benim durumumda GWT.<TitleBarBundle>create(myRes.class);) gerekli değildi.

Cevabınız için teşekkürler Chris Boesing, ama deneyimlerimi sizlerle de paylaşmak zorunda olduğumu hissettim.

Selamlar, Stefan