Native JavaScript and HTML in Vaadin

General
1

Hello I’m a new user of Vaadin.
I’d like to ask on 2 questions:

  1. I have a Panel component and I’d like to insert into panel some native HTML code. Is it possible?
  2. Is possible to handle components events on client side in native JavaScript?

Thanks

2

There are (at least) two ways to include native HTML in a Vaadin application.

If you want to define the contents of the panel in HTML and possibly embed some Vaadin components in it, check out
CustomLayout
. It is also possible to add javascript event handling code in a CustomLayout for non-Vaadin elements in that layout.

For smaller snippets, a
Label
 with content type CONTENT_XHTML may be what you are looking for.

As for handling component events of Vaadin widgets on the client side, I would recommend developing your own client-side GWT component for that, possibly extending the existing ones. While a heavier approach, it allows you to integrate smoothly with how the rest of the component in question works. More information on developing client side components can be found
here
. Your own client-side widgets would also allow you to inject arbitrary HTML to the document.

3

Hi,

The same topic was discussed a while ago here:

http://vaadin.com/forum/-/message_boards/message/68879

Summary was that there are two hacks to do that. Demos here:

http://uilder.virtuallypreinstalled.com/run/Calling_External_JavaScript/

And the right way is to vote for this:

Component/Widget for invoking external JavaScript

4

Update to this thread too:

There is a built-in API in Vaadin for calling external JavaScript. Here is a demo and sample:
http://demo.vaadin.com/sampler/#JSApi

5

Sorry for necroposting, but I have another question on this topic.

I have flash component, that can raise 2 types of javascript events with some important information. Is it possible to handle them on server side?

6

Yes, in Vaadin7 this can be done very easily. See the tutorial on the Vaadin7 wiki:
RPC using Javascript
.

7

I’ve searched for an example of handling javascript events for non-Vaadin elements in a CustomLayout, but couldn’t find one. I am starting to wonder if it is at all possible with vaadin 6 and since you are the only one that said it our right can you please explain how this should be done or point me to an example. Thanks in advance.

8

In a way similar to what is done in
this thread
 for a Label, you should be able to do e.g.

Note that this works for reacting to some browser events but might not work for executing JavaScript immediately when the page is loaded or the layout is shown. For that, you probably need to include the JavaScript earlier in the page load by using a custom servlet and overriding one of the writeAjaxPage…() methods (easier options exist for Vaadin 7 with @JavaScript etc.).

9

Hello every one.
I also have a question: I need to catch the vaadin designed UI in html codes form to be stored in the database, how can I do this? thanks.

10
11

Hello:

Has passed a long time since you answered the initial question. I have a similar but only appreciate information on what documentation analyzed to solve my problem.
I have a web application developed only with HTML and JavaScript. I need to reuse from Vaadinand then increase its functionality. The idea that I have thought has 2 steps:

  1. Develop a vaadin app that manages to visualize exactly the same application as I have.

  2. Then Vaadin build a client-side component, that allows to use the same component in Vaadin future applications. Of this form I continue to have the control of future applications from the Vaadin framework.

Any ideas, study materials or suggestions?

12

You need to rebuild your user interface from scratch somehow. I mean, Vaadin brings you lots of out-of-the-box UI components, such as Buttons, Grids/Tables, Charts, Labels, Forms… Additionally, it brings you some mechanism to build a single application (aka UI) using several pages (aka Views), and managing the routing (with Navigation), plus the usage of sessions and so on.

Fortunately, you will be able to reuse your existing API, as I suppose you may have built some API (Restful I guess, or SOAP). If you have some data model, you may be able to reuse it or port it to Java POJOs.

To sum up:

  2. You will need a lot of time to port your existing application to Vaadin, but it’s not impossible nor a waste of time/resources.
  3. You MUST consider the advantages (lot’s of advantages, such as rapid development, UI components…) and drawbacks of choosing Vaadin (e.g. including Charts is not a free option).
  4. You should implement a DAO pattern to reuse your existing database access (if you have an api or whatever).
  5. You should port your data model (I don’t know whether you have it coded in Javascript or whatever), so as to benefit from all Java advantages.
  6. You can use JavaScript within your Vaadin Application, but I see it like a trick (I don’t see it as a right solution to developing). You create a Label and tell it that its ContentMode is HTML. You add some HTML code as Label’s content. Then, you can call a javascript function (which will do whatever you want, e.g. introduce in your Label, which may have a div, some javascript UI component such as Google Charts). Your UI class (or View) must have a @JavaScript annottation to introduce within the HTML the JS file. I’ve done this (calling a restfull WS made with jersey with ajax in JS), but I’m having trouble, so I may build a lightweight component with
    https://vaadin.com/book/-/page/gwt.html


​
Hope it helps!

13
14

First of all thanks for taking the time to respond to my comment.

For your comments, I interpret the existing application must rebuild from scratch in my new Vaadin application. But it is precisely that, I do not want to do. What I need is to reuse the existing web application interface and some javascript code that has some built-in functionality, ie, do not understand why I have to rebuild the application, for that I make from scratch in vaadin. What I want is to make a Vaadin component from a web application that has only HTML and JavaScript, can not be that Vaadin not let me do that. I have not built a Vaadin component to the interface, but I guess the building is Vaadin UI components from the use of HTML and JavaScript code basically. HTML and JavaScript is interpreted by browsers, so why should rebuild the application, there are pieces that do not fit here.

I appreciate your response, but I’ll keep looking for an alternative to avoid having to rebuild the application in Vaadin.

I look forward to a response.

15

So, why do you need Vaadin if you don’t want to use its UI Components nor its page navigation (for instance)?

I’d want to explain it to me, really, please.

16

Granted, it may seem contradictory but it is not, he explained:

I need to reuse, from Vaadin, the existing application so that later be part of a large development project. I’m working on a very ambitious project for which I decided to use the Vaadin framework. The application that want to reuse is only one component of the great project I’m developing for Vaadin. Logically I add some features, after the component encapsulates on a Vaadin.

I hope I explained.

Regards.

17

To integrate a JS component into Vaadin and use it as a “normal” component just follow this tutorial

Integrating a Javascript component

You should be able to integrate your html/Javascript component easily. For communication with the Vaadin Server side use ServerRPC, ClientRPC and Shared states.
When your “component” is an entire page and not just a small js component that doesn’t exist in Vaadin (yet) i’d also recommend recreating the page with Vaadin components even if it’s a bit more work at first.

18

It could explain a little more “ServerRPC, ClientRPC and Shared states” variant. I do not know these elements.

Regards.

19

Who do you wanna to explain it to you? There you have a little
guide
 to learn a bit.

20

I think I understand your comments, that in order to run a website which already has JavaScript code calls, I have to develop a Vaadin component as explained in: https://vaadin.com/book/-/page/gwt.html , is my understanding correct?

With “CustomLayout” (https://vaadin.com/book/-/page/layout.customlayout.html) I managed to display the web page, but only shows me the html, vaadin not execute JavaScript code calls that already appear in the Web page. If browsers running
Why, Vaadin not running? That call javascript code is already in my html page I put in the “CustomLayout” at the end of all, are the browsers that display it.

The only explanation I can think of is that as the javascript code is not explicitly in the html page, it is implied, that is, in the html page only appear events associated with html code, but does not appear javascript. I guess that’s why Vaddin not run, because it also depends on the used javascript framework. All these assumptions are mine.

If someone could enlighten me.