Native JavaScript and HTML in Vaadin

General
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.

21

It has nothing to do with you html code. CustomLayout has special code in it that scans the html and removes all Javascript code from it except from event handlers like onclick=“alert(‘adsf’)” .
This has been done to prevent JS injection (i think)

22

Then, making me explain, I must assume that Vaadin does not allow reuse html pages with embedded javascript code … very bad news you just gave me, but thank you anyway, jajaj …

I consider this decision a conceptual error in Vaadin team. This enormously limits the possibilities of incorporating Vaadin components already built in pure HTML and JavaScript.

Regards.

23

CustomLayouts are made for basic Html layouts, not for actual Html/Js components with logic in them. Integrating a html/Js page/component with the “Integrating a Javascript component” method i linked to above is actually really easy to do.
You should read the tutorial on the wiki page and have a go. Your Javascript Connector in that case would just be your slightly (and i really mean slightly) modified Html/JS page. The Server side of the “new” component can be really basic if you don’t need client<–>server communication.

24

That does not solve my problem, at least that is what I understand.

What we explained in “Integrating a JavaScript component” (https://vaadin.com/wiki?p_p_id=36&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=row-1&p_p_col_pos=1&p_p_col_count=3&p_r_p_185834411_title=Integrating+a+JavaScript+component&p_r_p_185834411_nodeName=vaadin.com+wiki&_36_struts_action=%2Fwiki%2Fview )
it is not what I need. Here you are limited to call Javascript code from the Vaadin application or java code. What we I need is for my javascript code (that is embedded in the HTML code) to run with my code html without needing that I invoke, why do I have to invoke if it was invoked in the html code?

I insist that all I need is my html page (with embedded javascript code) to run. As same does it in the browser, but this time, from a Vaadin application.

Regards.

Regards.

25

mpuebla, I don’t see your point here. Marius is telling you what to do to integrate Javascript with Vaadin and you always answer in a poor manner. You have to do your work here…

You should read the
book
of vaadin diffinitely, first, and when you get used to it read
chapter 16
.

Let me ask you something… If you started a project using raw html and javascript code and you have reached a point in which you want to continue its development using vaadin, it’s a bad idea to turn to vaadin (it’s my humble opinion).

You’ll need to choose continueing with native html+js or, unfortunately, rewrite your code with Vaadin.

The latter option would be the best way. I can’t see a scenario in which you mix an application developed using two different “frameworks”. As I told you several post upwards, you can reuse your server calls if you make it through an API.

26

My apologies if I offended by my answers, it was not my intention. was just trying explain why the answers did not solve my problem. Apparently, there is no choice to rewrite the HTML code with Vaadin components and that will not, violate the principle of code reuse.

About his view on using Vaadin or not, I commented:
My intention was to continue to expand the application you think reuse, since Vaadin, building a Vaadin component so others could use it without knowing the javascript. I thought it was possible from Vaadin, I disagree with you when you say “using two different frameworks.” I’m by not mixing “two different” frameworks ", only I use Vaadin and pure html + javascript, which can be programmed from a plain text editor. Anyway think of that option.

Regards.

27

In the “Integrating a Javascript Component” you can write Javscript code on the client. From there it should not be difficult to integrate an html file.
If you don’t want any communication to the serverside. You might even just use a BrowserFrame.

28

Please read Marius’ latest comment :), I think you can make it work

29

Hello i am new on vaadin i have one question can we use HTML code in vaadin ? if yes How