Jak używać ikonek obrazkowych w GWT?

Question

starałem się użyć obrazu kafelki w Zasób obrazu, a ja byłem odnosząc się do GWT samouczek dla niego ...

jedna sekcja mówi trzeba użyć ikonek: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle jest wartością wyliczeniowy , który jest używany w połączeniu z dyrektywy @ sprite, aby wskazać, że obraz ma być wyłożone

więc teraz muszę dodać dyrektywa sprite .. Gdzie? badania o duchy, i przyszedł tutaj: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

Przykład nakazuje utworzenie dwóch plików:

1. MyCssResource
2. MyResources

gdzie chciałbym napisać to:

@sprite .mySpriteClass {gwt-image: "imageAccessor"; other: property;}

?

kilka cytatów dla odniesienia:

@sprite jest wrażliwy na FooBundle w którym CSSResource jest deklarowanej; Metoda rodzica ImageResource o nazwie w deklaracji @ wypukłej będzie używana do komponowania ikonki tła.

Answer 1

Z tego co napisałeś mam zamiar założyć, że MyResources jest interfejsem, który rozciąga ClientBundle i MyCssResources jest interfejsem, który rozciąga CssResource:

interface MyResources extends ClientBundle { 
    @Source("myImage.png") 
    @ImageOptions(repeatStyle = RepeatStyle.BOTH) 
    ImageResource myImage(); 

    @Source("myCss.css") 
    MyCssResource myCss(); 
} 

interface MyCssResource extends CssResource { 
    String myBackground(); 
} 

Więc teraz istnieją dwa sposoby korzystania ImageResource uzyskany z MyResources. Pierwszym jest dołączenie go do reguły CSS za pomocą dyrektywy @sprite. myCss.css:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    /* Additional CSS rules may be added. */ 
} 

Następnie, wszystko z klasą myBackground będzie mieć moje zdjęcie jako tło. Tak więc, stosując UiBinder, na przykład:

<ui:UiBinder> <!-- Preamble omitted for this example. --> 
    <ui:with field="myResources" type="com.mycompany.MyResources"/> 

    <g:FlowPanel styleName="{myResources.myCss.myBackground}"/> 
</ui:UiBinder> 

Można również instancję obrazu obiektów bezpośrednio za pomocą zdefiniowanego ImageResource.UiBinder:

<ui:UiBinder> <!-- Preamble omitted for this example. --> 
    <ui:with field="myResources" type="com.mycompany.MyResources"/> 

    <g:Image resource="{myResources.myImage}"/> 
</ui:UiBinder> 

Bez UiBinder:

MyResources myResources = GWT.create(MyResources.class); 
Image myImage = new Image(myResources.myImage()); 

Answer 2

Tylko dodam to:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    /* Additional CSS rules may be added. */ 
} 

staje

.myBackground { 
    backgroud-image: url(-url of the image-) 
    width: *width of the image* 
    height: *height of the image* 
} 

Pamiętaj, aby zastąpić je w razie u trzeba go: na przykład ustawienie wysokości i szerokości na auto:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    height: auto; 
    width: auto; 
} 

HTH, Walczyłem wiele do tego dowiedzieć;)

Answer 3

Chciałbym dodać również

Pamiętaj, aby zadzwonić ensureInjected() na MyCssResource.java albo

<g:FlowPanel styleName="{myResources.myCss.myBackground}"/> 

nie działa ..

Answer 4

Jeśli używasz gss, @sprite nie działa w ta sprawa. Powinieneś użyć gwt-sprite jak:

.myBackground { 
    gwt-sprite: "myImage"; 
}