How to define CssResource/CSS file for -webkit-border-image:url(img.png) ?

[fvisticot]

Hello,
I know how to use CssResource an ImageResource to set a background
image:

@sprite .test {
gwt-image:"image";
}

How to configure the css file or the CssResource file to manage the -
webkit-border-image:url(img.png) property ?
Do i need to use @sprite as well ?

[Thomas Broyer]

@sprite will use a background-image, width and height.
If you want to use a border-image, you'll have to instead use a
DataResource and @url, though it won't generate the border
"dimensions", you'll have to "hard-code" them.

interface Resources extends ClientBundle {
@Source("image.png")
DataResource image();
}

@url imageUrl image;
.test {
border-image: imageUrl 27 round stretch;
}

You might be able to have the dimension "generated by the compiler"
with the following trick, though I didn't test it *and* didn't check
whether it generates a overhead or not:
// Two references to the same image, one DataResource for the data and
one ImageResource for the dimensions
interface Resources extends ClientBundle {
@Source("image.png")
DataResource imageData();

ImageResource image();
}

@url imageUrl imageData;
.test {
border-image: imageUrl value("image.getWidth") value
("image.getHeight") round stretch;
}

(well, the above obviously is wrong wrt dimensions, but you get it,
right? ;-) )

[fvisticot]

Thomas,
Thank you for your support, it helps me a lot !!
I have done a brief note to explain the use of ClientBundle to design
a CSS3 rounded button.

The tuto is available here:
http://fvisticot.blogspot.com/2009/12/rounded-button-css3-and-gwt20.html