Example javascript widget integration wanted

I’d like to port CKEditor for Vaadin to use the new connector/javascript integration scheme. It currently is using LegacyConnectors, etc. to get it working under Vaadin 7, but the new RPC/JS integration appears to give a big advantage. When we first built this component under Vaadin 6, we used the TinyMCE add-on for guidance.

Is there anything like that out there we can use as a framework? CKEditor is a large javascript widget that can be added to replace one or more DIV or TEXTAREA elements so they become the editor. There is a large block of JSON we give at editor creation/initialization time, and then we previously waited for the editor’s events to fire to tell us the editor was ready. After that, we typically need to send a few setValue/getValue type RPCs to set/get the HTML content, and perhaps a few more to append HTML, etc.

If you have a recommendation of an exiting add-on or other Vaadin 7 component that is open source and has done this nicely, we’d love to use it as our framework. Thanks for any tips/ideas…

Hi, is this addon not working for you?


If it doesn’t work for you and you are not familiar to vaadin widget development i can recommend you the AbstractJavaScriptExtension (
). You can use it to extend a TextArea Component.

Yes, we wrote that add-on, but like I said, it’s using the LegacyConnector and related changes for the Vaadin 7 port. We’d like to do a rewrite using the newest mechanisms, hopefully making it more robust and easier to handle bi-directional RPCs between the browser and server.

Is there a benefit to creating an extension to a TextArea versus making it a standalone JS widget? While they have similar concepts, they are unrelated, and CKEditor even replaces the contents of a DOM element (i.e. a DIV or TEXTAREA HTML element) when it’s activated.

Nobody has a working semi-complex javascript widget integrated yet that they can share?

Some items I know that make CKEditor a bit tricky is that the DOM element that Vaadin creates (I presume it’ll already have an ID I can use, or do I have to set one?) will be a DIV by default, and the editor requires that we append it to that DIV element. The editor itself has events that fire, including one that specifies that it’s ready to go, so any requests to use the editor before that fires needs to be ignored or queued.

The editor also has additional events that fire, and we’ll somehow need to tie in their events firing to calling back to Vaadin server code.

Also, when the component is made read-only, we essentially remove the actual CKEditor and replace that main DIV element with the HTML that the editor had created. When it goes back to editable mode, we then empty the DIV and create a new CKEditor that we append to it.

I’ve been looking at the JavaScript documentation for add-ons, but I confess I do not fully grasp how to assemble it all and ensure the timing is correct.

Did you manage to find some good, complex example on vaadin7 - Javascript integration to be used as a framework ?
I am also looking for a similar solution