Evaluating Vaadin 14 - integrating simple js library like Particles.js...

Previously used Vaadin 8 in anger and am looking at Vaadin 14 for a new project.

I actually like most of what I’ve used so far (comparing to Vaadin 8) but am having trouble with integrating a simple external javascript library.

Does anyone have an example with adding a simple js library like [Particles.js]
(https://www.npmjs.com/package/particlesjs) in a vertical layout or component?

With a previous project (see https://opstoolkit.unswcanberraspace.com) it was very straight-forward to implement Particles.js (for example) into the login page as I dealing with a static login.html page - however, playing around with LoginOverlay have struggled to get something similar with Vaadin 14.

Anyone have an example or tips with defining canvas tags and <script> tags in vaadin 14’s VerticalLayout’s <body> as outlined in npms [particlesjs]
(https://www.npmjs.com/package/particlesjs) page?

Hi,

I think there is no canvas Java class included in Vaadin but you can create one:

@Tag("canvas")
public class Canvas extends HtmlContainer implements ClickNotifier<Canvas> {
    public Canvas() {
    }
}

Then if you follow the particles documentation, you can create the sample

@NpmPackage(value = "particlesjs",version = "2.2.3")
@JsModule("./src/particles-loader.js")
@CssImport("./styles/particles.css")
@Route(value = "particles")
public class ParticlesView extends VerticalLayout {

    public ParticlesView() {
        add(new Span("Done"));
        Canvas canvas = new Canvas();
        canvas.addClassName("background");
        canvas.addAttachListener(event -> {
            event.getUI().getPage().executeJs("initParticles()");
        });
        add(canvas);
    }
}

And particles-loader.js:

import Particles from 'particlesjs';

window.initParticles = function() {
    Particles.init({
        selector:  '.background'
    });
};

And particles.css:

html,
body {
    margin: 0;
    padding: 0;
}

.background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
}

Many thanks Jean-Christophe,

I also came up with a solution (although was no where near as clean as yours). I essentially added the required <canvas> and <script> tags using a [BootstrapListener]
(https://vaadin.com/docs/v13/flow/advanced/tutorial-bootstrap.html#bootstraplistener).

Needed a few other things to get it working as a background for LoginOverlay since LoginOverlay has a backdrop element (which covers the particlesjs background). I had to remove that via javascript (took me a while to figure it out since the backdrop was in a DOM shadow-root so I had to pierce that via Javascript to remove it).

But now I have a similar login page as one of my previous projects. I took this as an exercise while evaluating V14, and must admit I really do like where Vaadin has taken Vaadin14.

did you converted/addapted the backdrop to canvas? best regards

Hey @Ariel,

I actually just ended up creating a class which implements VaadinServiceInitListener and overriding @serviceInit(ServiceInitEvent event).

You can get then add a boot strap listener which provides the Document element object and can then add a “canvas” element (and also add the particles.js library directly to the Document).

E.g.

@SpringComponent
public class ApplicationServiceInitListener implements VaadinServiceInitListener {

	@Override
	public void serviceInit(ServiceInitEvent event) {
		event.addBootstrapListener(response -> {
			
			Document document = response.getDocument();

	        Element body = document.body();
	        Element canvas = document.createElement("canvas");
	        canvas.attr("class", "background");
	        canvas.attr("id", "particle-canvas");
	        
	        Element script = document.createElement("script");
	    	script.attr("src", "./js/particles.min.js");
			script.attr("async", true);
			script.attr("defer", true);
	    	
	    	body.insertChildren(-1, canvas, script);
		});
	}

}

You’ll need to put your particles.min.js library in

src/main/resources/META-INF/resources/particles.min.js

There’s other ways of add js libraries but was easy enough to add it here (and load the library when user access application and take care of the canvas element and the library all in one go).

Then I just did executing some js from the LoginView, e.g.

try {
	var particles = Particles.init({
		selector: '.background',
		maxParticles: 200,
		...
	});
} catch(err) {
	...
}

With the .background class as Jean-Christophe Gueriaud outlined above.

Cheers.