Javascript Libraries with Vaadin 10

Flow
1

Hi!

Vaadin is great, but not always adequate for a rich user experience and we need other libraries from time to time.

I know we can integrate Javascript libraries in Vaadin 10, but there isn’t any clear documentation on how to integrate JS libraries with Vaadin 10 (Flow).

There is a single page documentation on how to import JS libraries, but I would like to see some complex examples say, importing d3 or highcharts.

Any guides or samples available?

Cheers!
Guru

2

Hi!

Since Vaadin doesn’t have Java wrappers for these libraries, the only Vaadin specific thing is importing the library and your own JavaScript which uses it. As you said, this is documented, but I don’t think we have any demos of using these libraries since it should work exactly same as without Vaadin (except the importing).

Br,
Pekka

3

If you want to interact with e.g. D3 directly from Java, you could do something like

@Route("d3")
@JavaScript("https://d3js.org/d3.v5.min.js")
public class D3View extends VerticalLayout {

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);

        add(new ThreeBalls());
        ComboBox<String> colorSelect = new ComboBox<>();
        List<String> colors = new ArrayList<>();
        colors.add("Fuchsia");
        colors.add("Gold");
        colors.add("Teal");
        colors.add("Aqua");
        add(colorSelect);
        colorSelect.setItems(colors);
        Page page = attachEvent.getUI().getPage();
        colorSelect.addValueChangeListener(e -> {
            page.executeJavaScript("d3.selectAll('circle').style('fill',$0)",
                    colorSelect.getValue());
        });
    }

    @Tag("svg")
    public static class ThreeBalls extends Component {
        public ThreeBalls() {
            getElement().setProperty("innerHTML",
                    "<svg width=\"720\" height=\"120\">"
                            + "  <circle cx=\"40\" cy=\"60\" r=\"10\"></circle>"
                            + "  <circle cx=\"80\" cy=\"60\" r=\"10\"></circle>"
                            + "  <circle cx=\"120\" cy=\"60\" r=\"10\"></circle>"
                            + "</svg>");
        }

    }

}
4

Thanks for the tip, Artur.

5 
I receive the message:
<div class="v-system-error">(ReferenceError) : d3 is not defined</div>

I also tried to load a carousel named vanillaSlideshow. There I get:
<div class="v-system-error">(TypeError) : vanillaSlideshow is undefined</div>

Is it necessary to enable JS everywhere? And can I check, if the .js file is really loaded anywhere?

6

Dennis Heitmann:

Is it necessary to enable JS everywhere? And can I check, if the .js file is really loaded anywhere?

I had a similar problem and created this issue: https://github.com/vaadin/flow/issues/6223.