GXT's Image widget?

[babyblue]

Is there a GXT equivalent of com.google.gwt.user.client.ui.Image?



public void onModuleLoad() {

ContentPanel background = new ContentPanel();
background.setHeaderVisible(false);
background.setSize(900, 600);
background.setPosition(0, 0);
background.add(new Image(IMAGE_PATH));

ContentPanel chart = new ContentPanel();
chart.setHeaderVisible(false);
chart.setSize(200, 200);
chart.setPosition(100, 100);
chart.add(getPieChart());
new Draggable(chart);
new Resizable(chart);

ContentPanel text = new ContentPanel();
text.setHeaderVisible(false);
text.setSize(200, 200);
text.setPosition(10, 50);
text.addText(TEXT);
new Draggable(text);
new Resizable(text);

LayoutContainer parent = new LayoutContainer();
parent.add(background);
parent.add(chart);
parent.add(text);

RootPanel.get().add(parent);
}


The desired effect is to have a background and 2 widgets floating on top of it. With out the background, the chart and text widgets are positioned correctly. But when background is added, everything get shifted to below the background. My guess is this is because Image is not gxt Component. Is there a GXT version of Image widget I can use?

Thanks in advance.

[takayser]

i would suggest to set the background with css, something like this:


.background-panel {
background: url(../images/background-panel.jpg) no-repeat;
}

and set the style with something like this:


panel.setStyleName("background-panel");

[babyblue]

Never mind, figured it out. Everything is relative to the components already placed before it.

[maxpert-gxt]

Can you enlighten us with your discovery ?

I mean since this is a forum it doesn't hurt to post the explanation on how you figured it out.

[maxpert-gxt]

i would suggest to set the background with css, something like this:


.background-panel {
background: url(../images/background-panel.jpg) no-repeat;
}and set the style with something like this:


panel.setStyleName("background-panel");

This, my friend, in normal logical settings SHOULD work, but it doesn't.

[babyblue]

Can you enlighten us with your discovery ?

I mean since this is a forum it doesn't hurt to post the explanation on how you figured it out.

The CSS method doesn't work because it doesn't resize.

The code I posted at the top works fine, just need to use negative position on widget. What I mean is if the image is at (0, 0, windowwidth, windowheight), and I want corner of floatingA to be in the exact middle of the screen, then floatingA would be placed at (windowidth/2, -windowheight/2). Notice the negative for height, since they layout is basically a vertical float.



public void updatePositionAndSize(LayoutContainer background) {
int left = background.getAbsoluteLeft();
int top = background.getAbsoluteTop();
int width = getWidth();
int height = getHeight();

double centerX = _savedCenterX * background.getWidth();
double centerY = _savedCenterY * background.getHeight();
int x = (int)(centerX - 0.5*width + left);
int y = (int)(centerY - 0.5*height + top);
setPagePosition(x, y);

[babyblue]

I take it back, since I'm using Page Position, it's all absolute.

[pablot]

FYI, my solution was the following:

ContentPanel cp = new ContentPanel();
northContentPanel.setBodyStyleName("logo");
.logo {
background: url('logo.gif') no-repeat;
}