Plain HTML and Javascript integration in Vaadin

Hi Guys,

I’m working on a project where I want to have a plain html code with some javascript support in vaadin application. Is there any way to do that.

Please let me know.

Depends a bit on how complicated it is and how much you want to interact with the server-side code. Plain HTML can be displayed in a Label and simple JavaScript integration can be done with the JavaScript class: https://vaadin.com/docs/-/part/framework/advanced/advanced-javascript.html

Hi,

did you look at that link about the Javascript integration I posted above? You should be able to run any javascript with that. Otherwise, you might want to create a custom JavaScript add-on: https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html or a GWT add-on: https://vaadin.com/docs/-/part/framework/gwt/gwt-overview.html (perhaps an extension of CustomLayout)?

-Olli

Thank you for your quick reply.

I have gone though vaadin found that custom layout can solve my problem, however I’m stuck at a place.
I have made use of custom layout and it worked but now I want to have a script inside custom layout.

Could you please help

Yes, I had gone through it. However I have a huge javascript library that I want to make use of it. I’m trying to use JS as it is because I have code in JS that I can make reuse of it.

Thanks :slight_smile:

I have made use of @Javascript annotation, now the external JS in included in head section of the application, however I have a block of code with script tag inside custom layout which is not working.

You can use the @JavaScript annotation to include any .js file from the resources. Check e.g. here: https://vaadin.com/wiki/-/wiki/Main/Integrating+a+JavaScript+component

-Olli

Can you just externalize the script block to a file instead?

-Olli

I have tried to externalize but it didn’t worked. When I’m adding the script code in browser console then it is working fine.

If you can call it from the console, you should be able to use JavaScript.getCurrent().execute to get the same result. Just pay attention to execution scopes.

-Olli

Thank you for the help, its working.

Good to hear!

Is there any way by which, I can load multiple external javscript file before the init method for the corresponding client-side connector is invoked. I have tried @Javascript annotation but it gets too long in length… Is there any alternative for it

Hi,

what do you mean too long in length? I don’t think there’s a limit on how many JavaScript resources you can put in one @JavaScript annotation. You can split them to different files if you’d prefer, though.

-Olli

Hi,

Yes I can put any no of Javacript resources in @Javascript annotation however it doesn’t look good when it has many resources… Splitting them in different files, do you mean having @Javascript annotation in different files?

Is there anyway by which I can have multiple javascript resources in one file other than using @Javascript … Please let me know:)

Yes, you can put the @JavaScript annotation in multiple different files (note that there’s a check so that you shouldn’t be able to include the same file more than once). I’m not aware of other ways of including JavaScript files, but that’s just me…

-Olli