Integrating Vaadin Widgets to HTML/JavaScript

Vaadin 6 / 7 / 8
1

Hello,
I am pretty new to Vaadin and using Vaadin 7.1.8. I am looking at the possibility of integrating a Vaadin widget to an existing HTML + JavaScript client.

Firstly I want to confirm if this is something supported by Vaadin. Haven’t seen much info about this in the docs.

Now what I am doing is, the necessary methods of a Vaadin widget is exposed as a native Javascript API(btw does Vaadin already have a native ineterface for this so that I dodn’t have to do this for every Vaadin widget that I want to use?) in my entry point class and calling those APIs from my JavaScript client.

I compiled the widgetset and added the script tag on the page pointing to the <my_widgetset>.nocache.js file.

The page loads fine and I am able to add the Vaadin widget on to the page but having 2 problems:

  1. During page load I see this error in the Firefox console:


    TypeError: $wnd.vaadin is undefined
    function onAttach_0(){

What this error means? I don’t have any usage of $wnd.vaadin in my code and is coming from the GWT compiled code. I have added only the <my_widgetset>.nocache.js to the page. Is there some other JS files neeed to be on the page that initializes $wnd.vaadin?

  1. I also see this error on the page(e.g. while typing some txt on the RichTextArea widget):


    com.google.gwt.logging.client.LogConfiguration SEVERE: Exception caught: (TypeError)
    …
    …
    lineNumber: 562 columnNumber: 2: $getShortcutHandlerOwner(…) is nullcom.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError)

Thanks much for any help,
dw

2

Unfortunately, this is not really something Vaadin supports at this point. Almost none of the widgets have a useful public Java API (much less a native one), and many of them depend on the Vaadin clientside communication backend being available. The separation of comms concerns to Connectors in Vaadin 7 was a good start in the effort to convert the Vaadin widgets into pure GWT ones, but we’re not there yet and probably won’t be for a while.

To have even a chance of getting things to work, you’ll want to follow the directions on
how to embed Vaadin on a Web page
. The first error is due to vaadinBootstrap.js not being loaded; it sets the window.vaadin variable. The second error seems to be due to the fact that VRichTextArea expects that one of its DOM ancestors is a ShortcutActionHandlerOwner - basically either a VUI, VPanel or VWindow. This is a good example of the sort of hidden assumptions and dependencies the widgets have, as they were not originally designed to work standalone.

3

Thanks much for the useful pointers.

I did go through the section “how to embed Vaadin on a Web page”. It does provide the details on how we can embed a Vaadin UI in to a Web page, but what I found missing in that doc is how we can pass the data back and forth between the parent application and Vaadin. When you embedd Vaadin UIs in to another application, most likely the data that need to be loaded in these widgets will be passed from the other application. Similarly any value updated by the user from the UI need to be passed back from Vaadin widgets to the main application. The doc doesn’t cover how we can do that or may be it is explained somewhere else?