Question

How to write a widget which reacts on resizing?

The following does not work. onResize() called only once at the beginning. Latter changing browser windows size does not cause this method to be called, despite the fact that DIVs are resized.

public class MyWidget extends SimpleLayoutPanel {

private Label label;

public MyWidget() {
    label = new Label("A");
    add(label);
}

@Override
public void onResize() {
    super.onResize();
    int width = label.getElement().getClientWidth();
    int height = label.getElement().getClientHeight();
    int fontsize = (width>height?height:width);
    if( fontsize > 0 ) {
        DOM.setStyleAttribute(label.getElement(), "font-size", Integer.toString(fontsize)+"px");
    }
}

}

and main module

public void onModuleLoad() {

    MyWidget myWidget = new MyWidget();
    DOM.setStyleAttribute(myWidget.getElement(), "position", "fixed");
    DOM.setStyleAttribute(myWidget.getElement(), "top", "0px");
    DOM.setStyleAttribute(myWidget.getElement(), "left", "0px");
    DOM.setStyleAttribute(myWidget.getElement(), "bottom", "0px");
    DOM.setStyleAttribute(myWidget.getElement(), "right", "0px");

    RootPanel rootPanel = RootPanel.get();
    rootPanel.add(myWidget);


}

UPDATE 1

Version based on ResizComposite also does not work. In this case onResize never called at all.

public class MyWidget extends ResizeComposite  {

private Label label;

public MyWidget() {
    label = new Label("A");
    DOM.setStyleAttribute(label.getElement(), "position", "fixed");
    DOM.setStyleAttribute(label.getElement(), "top", "0px");
    DOM.setStyleAttribute(label.getElement(), "left", "0px");
    DOM.setStyleAttribute(label.getElement(), "bottom", "0px");
    DOM.setStyleAttribute(label.getElement(), "right", "0px");

    SimpleLayoutPanel simpleLayoutPanel = new SimpleLayoutPanel();
    simpleLayoutPanel.add(label);

    initWidget(simpleLayoutPanel);
}

@Override
public void onResize() {

    int width = label.getElement().getClientWidth();
    int height = label.getElement().getClientHeight();
    int fontsize = (width>height?height:width);
    if( fontsize > 0 ) {
        DOM.setStyleAttribute(label.getElement(), "font-size", Integer.toString(fontsize)+"px");
    }

    super.onResize();
}

}

Answer 1

You have to add to a ProvidesResize widget (RootLayoutPanel, ResizeLayoutPanel) or a HeaderPanel for the RequiresResize to be honored. See http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize