AbstractJavaScriptComponent and Component size

Hi,

I am creating a JavascriptComponent inside a full sized layout.

I need to know the height of the component in pixels but I can’t find a way to do it.

my JS code looks something like:

com_my_Component = function () {
    console.log($(this.getElement()).height());
}

This code returns the size of the whole window but not the one of the component. If I catch the resize event and do the same it works fine. I undestand that this happens because when I call it from the main function, it has not been yet attached to the DOM.

Any ideas of how can I get that height? Any event I can capture?

Thank you in advance!

HI Francesco,

I’m facing the same problem. Have you found a solution?
Even after the component is attached to the DOM, the size is still undetermined, since the layout phase is done afterwards.

Thanks!

This is unfortunately one of the areas where Vaadin provides better support for widgets implemented in GWT as compared to JavaScript implementations. With GWT, you could use LayoutManager.addElementResizeListener() and then the framework takes care of checking for size changes and informing you if the element size has changed.

A workaround for this particular case would be to delay the sizing operation until Vaadin’s layout has finished. This could most easily be done using setTimeout with a 0 ms delay. This might cause some flickering as the browser might momentarily render the situation as it looks before the timeout callback is run. Another problem with this approach is that it does not react if some other part of the Vaadin layout changes or the browser window is resized.


http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
provides a general, although slightly cumbersome way of getting event whenever the size of a specific element has changed.

Now when I think about this, it would not require too much work to let JavaScript components use the same element resize listener mechanism that the framework already provides for components implemented using GWT. I created ticket
#11996
.

Thanks a lot for your answer and opening the ticket.

I thought of the element resize too (used http://benalman.com/projects/jquery-resize-plugin/) and it is working.
I believe however it should be part of the JavaScript component as you requested in the ticket.

I see now that you have fixed the ticket so make it x 2

Is it possible to have the same functionality with AbstractJavaScriptExtension?
I saw that the function is defined, but it is never get called.

Thanks