AbstractJavaScriptComponent in Window error

Vaadin 6 / 7 / 8
1

Hi,

I have created a custom AbstractJavaScriptComponent wich is working fine.

I have found a problem when inserting the component in a Window though.

When calling this.getElement() from JavaScript I get the DOM element where my component must be created. In a regular layout when this is called, the returned div is already attached to DOM so it has a size. I have realized that when doing this in a Window it has not been yet attached to DOM and it is causing me many problems.

Is it a bug or is this the expected behaviour?

I have found a workaroun in case someone needs it.

Thanks

2

Hi Francesco

i tried the same thing to get HIghcharts working. With a custom AbstractJavaScriptComponent i got it working, but trying to put that stuff in a window brought me to the same misbehaviour.
Actual i am starting to get this work by using getPage and put highcharts directly to execute js.

I am not sure if that works, so i am interested in your workaround …

greets Andi

3

Hi

there is a workaround (codesnipplets) how to get Highcharts 3.0 working within a window

// create a label and setb contentmode to html
label.setContentMode(ContentMode.HTML);
label.setValue("<div id=\"aNewPie\" style=\"width:400px; height:400px;\"></div>");

layoutVer.addComponent(label);

//Create a Window
Window window = new Window("Test Chart");

window.setContent(layoutVer);
this.addWindow(window);
window.setVisible(true);
window.setImmediate(true);

// After all has been initialized and loaded a execute on a JavaScript has to be performed
// with the id of the div created before using the highcharts code

window.getUI().getPage().getJavaScript().execute("$(function() {$('#aNewPie').highcharts({chart: {type: 'bar'},title: {text: 'Fruit Consumption'}," + " xAxis: {" +
        "   categories: ['Apples', 'Bananas', 'Oranges']

" + " }," + " yAxis: {" + " title: {" + " text: ‘Fruit eaten’" + " }" + “},” + “series: [{” + " name: ‘Jane’," +
" data: [1, 0, 4]
" + “}, {” + " name: ‘John’," + " data: [5, 7, 3]
" + " }]" + “});” + “});”);

// Now someone can make the highcharts code filled up with own values

Hope this helps someone :wink:

Andi