Listen to resize-event on client side

Vaadin 6 / 7 / 8 Framework UI
1

I am developing a pure Vaadin 7 - application from scratch. in this application I want to use a custom widget which will show some special graphical stuff. It’s very important for me to handle the resizing when the user changs the size o th browser-window.
To test the integration with vaadin I started with a widget which extends a ResizeComposite (which is able to track the resizing). I started with some buttons with some simple ClickHandlers for tst purposes and a label which are layouted by a HeaderPanel:

public class DendrogramWidget extends ResizeComposite {

    public static final String CLASSNAME = "dendrogram";

    private HeaderPanel mainPanel;
    private Button header = new Button("graph-header");
    private Button footer = new Button("graph-footer");
    private Label label = new Label("later on, here will come the graphical stuff");

    public DendrogramWidget() {

        this.mainPanel = new HeaderPanel();
        this.initWidget(this.mainPanel);
        this.setStyleName(CLASSNAME);
        this.mainPanel.setSize("100%", "100%");

        this.mainPanel.add(header);
        this.mainPanel.add(label);
        this.mainPanel.add(footer);

        this.mainPanel.setHeaderWidget(header);
        this.mainPanel.setContentWidget(label);
        this.mainPanel.setFooterWidget(footer);

        this.header.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                String name = ((Button)event.getSource()).getText();
                label.setText("clicked on "+name);
            }

        });

        this.footer.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                String name = ((Button)event.getSource()).getText();
                label.setText("clicked on "+name);
            }

        });

    }

    @Override
    public void onResize() {
        super.onResize();
        label.setText("onResize() called ["+DendrogramWidget.this.getOffsetWidth()+","+DendrogramWidget.this.getOffsetHeight()+"]
");
    }

}

The server-side Code looks like this:

[code]
@Theme(“kuba”)
public class KubaUI extends UI {

@Override
protected void init(VaadinRequest request) {
    final Layout layout = this.createComponents();
    this.setContent(layout);
}

private Layout createComponents() {
    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSizeFull();

    // placeholder title
    Panel title = new Panel("title");
    title.setWidth("100%");
    mainLayout.addComponent(title);

    // placeholder toolbar
    Panel toolbar = new Panel("toolbar");
    toolbar.setWidth("100%");
    mainLayout.addComponent(toolbar);

    // content area
    HorizontalLayout contentLayout = new HorizontalLayout();
    contentLayout.setSizeFull();
    mainLayout.addComponent(contentLayout);
    mainLayout.setExpandRatio(contentLayout, 1);

    Dendrogram dendrogram = new Dendrogram();
    dendrogram.setSizeFull();
    contentLayout.addComponent(dendrogram);
    contentLayout.setExpandRatio(dendrogram, 0.5f);

    // placeholder product-table
    Panel products = new Panel("product-table");
    products.setSizeFull();
    contentLayout.addComponent(products);
    contentLayout.setExpandRatio(products, 0.2f);

    // placeholder kpi-table
    Panel kpis = new Panel("kpi-table");
    kpis.setSizeFull();
    contentLayout.addComponent(kpis);
    contentLayout.setExpandRatio(kpis, 0.3f);

    // placeholder statusline
    Panel status = new Panel("status line");
    status.setWidth("100%");
    mainLayout.addComponent(status);

    return mainLayout;
}

}
[/code]As you can see, I’m concentrating on the general layout first. The Vaadin-Integration works very well and the Layout acts as expected, but there is an issue concerning the resizing of the custom widget. I have to listen to resize-events because I will have to rearrange the graphical content in the widget. I’m doing this by overriding the onResize()-Method of the ResizeComposite.
But unfortunately nothing happens- it seems like onResize() isn’t called at all. I also tried to add a Resize-EventHandler to the HeaderPanel without success.

What’s wrong? I’m quite new to Vaadin - maybe I am missing something… For now I’m totally stuck… :frowning:

Any suggestions?

Greetings, Jens

2

Hi Jens,
my suspicion would be that vaadin does custom size calculations - and hence needs the server roundtrip to have these sizes updated. As long as they don’t change - well: there is no onresize.
My guess would be trying CssLayout with only your custom widget setting width=height=100% by CSS - then resize the browser. It would at least help locate the issue. The next thing I’d do then is use Chrome’s event debugging capabilities and add an Event Listener Breakpoint to control > resize
Good luck! - and let us know!
Cheers
Sebastian

3

ResizeComposite relies on the system using GWT layouting and widgets that support RequiresResize throughout the application. However, Vaadin layouting is not based on those.

Note that many browsers do not support element resize events so such resizes usually have to be “guessed” from window resize and resizes of other components.

See the
Vaadin 7 mini-tutorials
 - the last two under “Custom widgets” might be of help.

4

I know that this is an old question, but i faced this problem today.
I solved it this way:

I’ve implemented the interface com.vaadin.client.ui.layout.ElementResizeListener on my Widget Connector, and when my Widget becomes attached to the DOM, I’ve registered an element resize listener on the LayoutManager. It’s working.

LayoutManager.get(getConnection()).addElementResizeListener(getWidget().getNativeElementContainer(), this);
5

The remark from Eduardo helped me a lot. However it took me a while to know how to implement his statement “when the Widget becomes attached to the DOM”. This was the missing piece, you can do it in the constructor of the Connector for instance:

       getWidget().addAttachHandler(new Handler() {
            @Override
            public void onAttachOrDetach(AttachEvent event)
            {
                if (event.isAttached())
                    LayoutManager.get(getConnection()).addElementResizeListener(getWidget().getElement(), FlowchartConnector.this);
                else
                    LayoutManager.get(getConnection()).removeElementResizeListener(getWidget().getElement(), FlowchartConnector.this);
            }
        });

Hope it helps someone…