Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
javascript extension how to optimize data transport
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 ?
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
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.
Ah, sounds like a scoping issue. What if you added myUpdateFunction to window instead of this?
-Olli
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.
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