javascript extension how to optimize data transport

Vaadin 6 / 7 / 8
1

I created a javascript extension using AbstractJavaScriptExtension

Works fine.
Now i try to optimize the data transport between the server and client.
For example my state (JavaScriptExtensionState) has multiple objects and an array of items.

The client needs to get all the data the first time.
But after when he add an item, i want the server sends the client the new item who was created.

so i need to do this without sending all the state. (changing getState().)

i guessed i could do it on calling a js function from the server with the new item in argument.

Example in the JavaScriptExtensionState:

public void reloadLine(Line line){ callFunction("reloadLine", JsonCodec.encode(ligne, null, Line.class, UI.getCurrent().getConnectorTracker()).getEncodedValue()); } This calls my js function properly and do the job in the client side.

But this fires the onStateChange event too.
And in the console i see that all the state has been sent (encoded in json).

These data are useless and will slow the network.

is there a way that the server communicates with the client without sending all the state ?

2

Hi,

I have no idea if it works any better, but have you tried just calling

JavaScript.getCurrent().execute("myUpdateFunction('some parameters here')"); from the server side?

-Olli

3

i have to call a function from my client javascript object instantiated by the vaadin javascript extension

declare like that :

window.com_ui_dp_soins_plan_js_PlanSoinsJsExt = function(){


... my code


this.myUpdateFunction = function(test){
   alert('Debug : ' + test);
}

but in the server i don’t know how to get the instance of this object

i try this but doesn’t work :

UI.getCurrent().getPage().getJavaScript().execute("window.com_ui_dp_soins_plan_js_PlanSoinsJsExt.myUpdateFunction ('test');");
window.com_ui_dp_soins_plan_js_PlanSoinsJsExt.opt is not a functio

same without window.

4

Ah, sounds like a scoping issue. What if you added myUpdateFunction to window instead of this?

-Olli

5

i won’t have access to my instantiate object this way if it’s not added to “this”

but i could store it in a global javascript variable.

window.com_ui_dp_soins_plan_js_PlanSoinsJsExt = function(){

globalVar = this;

this.myUpdateFunction = function(test){
   alert('Debug : ' + test);
}
function myUpdateFunction(test){
   globalVar.myUpdateFunction(test);
}

I think i can fix that this way. But will have to handle json encode and decode my way too.
So some code i shouldn’t have to wrote.

The js extension did all. just the call function shouldn’t be part of the state in my opinion.
but thinks there is no way to change that and that is the limitation of rpc/gwt

so i will try something like that.

6

Yeah, I agree that there should be an easier way to do this. I don’t think there’s anything that forces updating the state, it’s just the way it has been implemented. But hopefully you can find a workaround!

-Olli

7

yeah thanks you for your help and time