PDA

View Full Version : Composite images in GXT. How do they work?



francescoNemesi
9 Sep 2009, 8:26 AM
Hello,

I am investigating how GXT uses composite images and Image Bundles as I need to create a custom object similar to the header of a TabItem. My object needs rounded corners, i found the image

gxt/images/default/box/corners-blue.gif

This contains ALL 4 rounded corners, top left and right and bottom left and right. The main css file gxt-all.css contains the following classes:



.x-box-blue .x-box-bl,
.x-box-blue .x-box-br,
.x-box-blue .x-box-tl,
.x-box-blue .x-box-tr {
background-image: url(../images/default/box/corners-blue.gif);
}


The 4 classes relate to the 4 corners, but they point to the same gif file. This to me means that GXT internally somehow knows how to split the image in its 4 components and use them. AFAIK GWT bundles and uses single images, not composites like corners-blue.gif.

How is this done? I looked in the GXT source code and I couldn't find any reference to either the css classes or the image directly.

Any help or insight greatly appreciated.

Thanks,
Francesco

sven
9 Sep 2009, 8:36 AM
I suggest to inspect the elements with firebug. Each corner will have different background positions that are assigned also with css.

francescoNemesi
9 Sep 2009, 8:59 PM
Thanks,

I will try that.

F