Tôi làm cách nào để sử dụng hình ảnh sprites trong GWT?

Question

Tôi đã cố gắng sử dụng một hình ảnh lát gạch trong một nguồn tài nguyên hình ảnh, và tôi đã đề cập đến các hướng dẫn GWT cho nó ...

một phần nói rằng bạn cần phải sử dụng sprites: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle là một giá trị liệt kê được sử dụng kết hợp với chỉ thị @ sprite để cho biết rằng hình ảnh được thiết kế để được lát gạch

như vậy, bây giờ tôi cần phải thêm một chỉ thị sprite .. Ở đâu? nghiên cứu về sprites, tôi đến đây: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

Ví dụ dictates việc tạo ra hai tập tin:

1. MyCssResource
2. MyResources

nơi tôi sẽ viết này:

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

?

một số dấu ngoặc kép hơn để tham khảo:

@sprite là nhạy cảm với FooBundle trong đó CSSResource được khai báo; phương thức ImageResource anh chị em tên là trong khai báo @sprite sẽ là được sử dụng để soạn thảo hình nền.

Answer 1

Từ những gì bạn đã viết tôi sẽ không thể cho rằng MyResources là một giao diện mở rộng ClientBundle và MyCssResources là một giao diện mở rộng 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(); 
} 

Vì vậy, hiện nay có hai cách để sử dụng ImageResource thu được từ MyResources. Đầu tiên là đính kèm nó vào một quy tắc CSS bằng cách sử dụng chỉ thị @sprite. myCss.css:

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

Sau đó, mọi thứ với lớp myBackground sẽ có myImage làm nền. Vì vậy, sử dụng UiBinder, ví dụ:

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

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

Người ta cũng có thể khởi tạo trực tiếp các đối tượng Hình ảnh bằng cách sử dụng ImageResource đã xác định.UiBinder:

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

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

Without UiBinder:

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

Answer 2

Chỉ cần cho tôi thêm này:

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

trở thành

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

Ghi để ghi đè lên chúng trong trường hợp u cần nó: ví dụ: thiết lập chiều cao và chiều rộng thành auto:

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

HTH, tôi đấu tranh rất nhiều để thấy rằng ra;)

Answer 3

Tôi muốn thêm cũng

Hãy nhớ để gọi ensureInjected() trên MyCssResource.java hoặc khác

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

không hoạt động ..

Answer 4

Nếu bạn đang sử dụng gss, @sprite không hoạt động trong trường hợp này. Bạn nên sử dụng gwt-sprite như:

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