PDA

View Full Version : GXT's Image widget?



babyblue
14 May 2009, 5:44 PM
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
15 May 2009, 1:06 AM
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
15 May 2009, 10:13 AM
Never mind, figured it out. Everything is relative to the components already placed before it.

maxpert-gxt
17 Jun 2009, 12:50 AM
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
17 Jun 2009, 12:50 AM
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
19 Jun 2009, 10:43 AM
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
19 Jun 2009, 5:29 PM
I take it back, since I'm using Page Position, it's all absolute.

pablot
27 Jul 2009, 1:07 AM
FYI, my solution was the following:

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