New add-on: SizeReporter

Flow
1

Sometimes, you have to know the size of a component in the browser in pixels. For example, when you want to position a popup below a particular component.

In Vaadin 6, you had to subclass the component to report the size back to the server.

In Vaadin 7, thanks to the new concept of extensions, it is possible to do this without subclassing. The
SizeReporter add-on
 is used like this:

 SizeReporter sizeReporter = new SizeReporter(component);

After the layout has been realized in the browser, you can query width and height:

 int width = sizeReporter.getWidth();
 int height = sizeReporter.getWidth();

You cannot query these values immediately when constructing the component. To wait for the
first size report and all subsequent resizes, register a ComponentResizeListener

 sizeReporter.addResizeListener(new ComponentResizeListener() {
     @Override
     public void sizeChanged(ComponentResizeEvent event) {
         // use event.getWidth() and  event.getHeight()
     }
 });
2

Nice addon. Easy to use and efficient. Is there a roadmap? Last release in january 13? Is it a dead project?

3

Is there a similar add-on but that doesn’t need to be used necessarily with resizable components?

Let me explain better. I have a
two columns layout
 inside an
HorizontalLayout
 and their width is set using expand ratios:

HorizontalLayout layout = new HorizontalLayout();
setContent(layout);
layout.setSizeFull();

VerticalLayout col1 = new VerticalLayout();
VerticalLayout col2 = new VerticalLayout();

layout.addComponent(col1);
layout.addComponent(col2);
layout.setExpandRatio(1, col1);
layout.setExpandRatio(5, col5);

Now, col1 is 1/5 of the 100% width of the HorizonalLayout, and col2 is 4/5 of that width. But actually if I want to get the width of col1, how can I do it?

If I just call
col1.getWidth();
I get

100.0

(which is the width of the column in % Unit), but I need to obtain the width in pixels programmatically and col1 is not a resizable component, so I guess I cannot do it with the SizeReporter add-on.

Is there a way to do this in Vaadin?

4

Hi Anton,
I am looking for a resizable Panel component (or) to make a Vaadin Panel Component as resizable Component.How i can achieve this please assist me regarding this Ur help is more appreciated.

5

Apparently broken and not usable anymore :frowning:
Already the very first line from usage example throws ClassNotFoundException:

SizeReporter sizeReporter = new SizeReporter(mainMenu);
6

Cannot confirm. Tested using this Add-on in one of my Vaadin 7.5.10 projects and it worked flawlessly. Are you sure the problem is not with the “mainMenu” parameter?

7

Cannot confirm 7.6.3

8

Tried to use this add-on inside one of my CustomComponents, when a button is pressed.

[code]
public class MyComponent extends CustomComponent {
…
private final class AnchorBtnClickListener implements ClickListener {
private final Component component;
private static final long serialVersionUID = 7081860874415977274L;

    private AnchorBtnClickListener(Component component) {
        this.component = component;
    }

    @Override
    public void buttonClick(ClickEvent event) {
        new SizeReporter(detailsBody).addResizeListener(new ComponentResizeListener() {
            private static final long serialVersionUID = -2541921563134977815L;

            @Override
            public void sizeChanged(ComponentResizeEvent event) {
                System.out.println("H: " + event.getHeight() + " W: " + event.getWidth());

// UI.getCurrent().scrollIntoView(component);
}
});
}

}

}
[/code]But unfortunately the SizeReport-Listener is never called. What am I doing wrong?

9

Yes now i`m trying to use but again i have the same problem like st.huber90

10

I’m trying the addon right now on my tests and it’s working fine. I had to compile the widgetset in order to get it working, though. Maybe you’ve missed this point.

Cheers,
Mannix