Slightly odd help request for JavaScript interaction

Support
#1

Hi Everyone,

I have probably an odd request. Without going in to all the fine detail, i’m working on a project that needs to make use of the PostMessage WEB API. I need to include data from CUBA backend in the PostMessage.

I already have the concept in place with some test pages and javascript. I don’t have any CUBA UI for it as yet. The receiver is NOT a CUBA web page.

So I think what I am asking here is does anyone know of an existing component or how to go about making a component that I can set data from the CUBA backend and have the Client end execute some javascript to PostMessage with the data and then probably pass some sort of response back to CUBA.

I think something like a TextArea that I could set some JSON in and when that changes on the Client I trigger the PostMessage and if I set the TextArea on the Client then CUBA backend would notice and do something.

Doesn’t need to be a TextArea just thought that kind of potentially does that back and forward part already.

Any help, code, pointers etc greatly appreciated.

#3

If anyone else is interested I did eventually discover this Vaadin Add-on but is isn’t published in the Vaadin Directory.

#4

Hi,

Also, take a look at custom JavaScript extensions of Vaadin: Integrating JavaScript Components and Extensions | Client-Server Integration | Framework | Vaadin 8 Docs You can easily implement the same functionality with less efforts.

For instance, let’s implement simple postMessage API for our application:

  1. Create PostMessageExtenstion class in web module:
@JavaScript("vaadin://post-message.js")
public class PostMessageExtension extends AbstractJavaScriptExtension {
    public PostMessageExtension(UI target) {
        super(target);
    }

    public void postMessage(String message, String targetOrigin) {
        // call JS function from post-message.js object
        callFunction("postMessageParent", message, targetOrigin);
    }
}

Here we specify target JS file that will work on client-side.

  1. Create VAADIN directory in modules/web/web

  2. Create post-message.js file:

window.com_company_postmessage_web_PostMessageExtension = function () {
    var self = this;

    self.postMessageParent = function (msg, targetOrigin) {
        parent.postMessage(msg, targetOrigin);
    }
};

Note that name of property should be the same as FQN of extension class (replace dots with _).

  1. Finally, we can use it:
public class ExtAppMainWindow extends AppMainWindow {
    private PostMessageExtension postMessageBus;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        postMessageBus = new PostMessageExtension(AppUI.getCurrent());
    }

    public void postMessage() {
        postMessageBus.postMessage("Hello!", "*");
    }
}

There is no need to create web-toolkit module and build JS from Java that takes build time.