Native JavaScript and HTML in Vaadin

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.

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.

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.

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.

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

Regards.

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

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.

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)

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.

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.

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.

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.

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.

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.

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

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

SmãrT_ Eñgiñeêr:
Hello i am new on vaadin i have one question can we use HTML code in vaadin ? if yes How

Yes. It depends on which version of Vaadin you’re using and what you’re trying to achieve.

Olli Tietäväinen:

SmãrT_ Eñgiñeêr:
Hello i am new on vaadin i have one question can we use HTML code in vaadin ? if yes How

Yes. It depends on which version of Vaadin you’re using and what you’re trying to achieve.

i am using vaadin 13 and i want make my application menu like hierarchy structure PFA for more info
thank you
17893387.jpg
17893390.jpg

I don’t know if you need to use HTML code for that. You could use e.g. a [TreeGrid]
(https://vaadin.com/components/vaadin-tree-grid) instead. If you want to use HTML, you could maybe create a [Polymer Template]
(https://vaadin.com/docs/v13/flow/polymer-templates/tutorial-template-basic.html).