6

I need to set the size of an absolutePanel regarding to its child size, but the getOffset* methods return 0 because (i think) the child has not been displayed yet.

A Quick example:

AbsolutePanel aPanel = new AbsolutePanel();
HTML text = new HTML(/*variable lenght text*/);
int xPosition = 20; // actually variable
aPanel.add(text, xPosition, 0);
aPanel.setSize(xPosition + text .getOffsetWidth() + "px", "50px"); // 20px 50px

I could also solve my problem by using the AbsolutePanel size to set the child position and size:

AbsolutePanel aPanel = new AbsolutePanel();
aPanel.setSize("100%", "50px");
HTML text = new HTML(/*variable lenght text*/);
int xPosition = aPanel.getOffsetWidth() / 3; // Once again, getOffsetWidth() returns 0;
 aPanel.add(text, xPosition, 0);

In both case, i have to find a way to either:

  • retrieve the size of a widget that has not been displayed
  • be notified when a widget is displayed
Garagos
  • 588
  • 1
  • 4
  • 16

3 Answers3

4

Widget has an onLoad() method you can override that fires when the widget is attached to the DOM, at which point getOffsetWidth() will then return the rendered text size -- unless the widget your string is in already has some size applied. If you can do what you need with CSS (including maybe just setting "overflow: visible;") that's probably better, but sometimes you really need the size, and this technique will give it to you.

phb
  • 41
  • 2
2

I think you should try to solve this with css styles. If I were you, I would try to set a style for parent and/or absolute panel, using addStyle or addStyleNames. Maybe something like...

AbsolutePanel aPanel = new AbsolutePanel();
aPanel.setSize("100%", "50px");
HTML text = new HTML(/*variable lenght text*/);
text.addStyleName("my-custom-style");

in css you would create a css style which would then size your widget appropriately.

The other approach would be....

You could create a function that creates a HTML widget exactly the size you need.

Here's some code for you, to get you started:

public native void customizeHTMLElement(Element elem, String widthInPx) /*-{ 
  elem.style.width = widthInPx;   //this is basically pure js. 
}-*/ 

Then somewhere within your widget make a call to the above function like

public void foo() {
  ...
  customizeHTMLElement(someElement, "20");
  ...
}

Some info about JSNI - http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html

markovuksanovic
  • 15,676
  • 13
  • 46
  • 57
  • Actually there are several widgets in my AbsolutePanel with specific size and positions. As the size and positions are not fixed (data dependant) I can't use a css... – Garagos Apr 23 '10 at 07:48
  • Could you describe what kind of widgets are used - basically provide some more details about the problem you are facing - I might come up with some other solution. What I'm thinking of at the moment is native js methods, which I am very confident would work - but I think it would be better if you somehow managed to use out css styling. – markovuksanovic Apr 23 '10 at 08:32
  • I need to create a widget that represent events in time. So i'm using a HTML widget to represent each occurence of those events (could also be a HorizontalPanel containing a descriptor widget) with position = startDate and width = Duration of the event. As the AbsolutePanel.add() method only takes int for pixel position, i can't work with percentage. So i need a reference size in pixel, either from the AbsolutePanel or one of the occurences. – Garagos Apr 23 '10 at 09:40
  • I think you should go for native js.. you can use gwt's jsni for that. You could create a function that creates a HTML widget exactly the size you need. Here's some code for you, to get you started: public native void customizeHTMLElement(Element elem, String widthInPx) /*-{ elem.style.width = widthInPx; //this is basically pure js. }-*/ Then somewhere within your widget make a call to the above function like public void foo() { ... customizeHTMLElement(someElement, "20"); ... } Some info about JSNI - http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html – markovuksanovic Apr 23 '10 at 11:30
  • Works fine, i used percentages like this: elem.style.left = start + "%"; elem.style.width = size + "%"; elem.style.height = "100%"; – Garagos Apr 23 '10 at 12:15
1

You should call getOffsetHeight() only after widget will be placed and calculated. So GWT have

com.google.gwt.core.client.Scheduler

class to do this.

In my project I use LayoutPanel to show menu at top and other content at center. But I don't know the size of menu. So I provide information to LayoutPanel calculated using getOffsetHeight like this:

layoutPanel.add(widget);
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand()
{
    public void execute()
    {
        int offsetHeight = widget.getOffsetHeight();
        layoutPanel.setWidgetTopHeight(widget, 0, Style.Unit.PX, offsetHeight, Style.Unit.PX);
    }
});
user2214390
  • 11
  • 1