Up to date and fully worked out example code for integrating a JavaScript c

Flow
1

Hi,

I’ve spent several hours trying to figure out how to:

a) create a simple JS component from local JS (not from npm)
b) create the server side component for it
c) add that component to a form
d) communication between that JS component and server

And I’m still stuck at a …

I’ve read everything that I can think of but can’t figure it out fully.

This seems to be closest to what I want to achieve but this is wasy outdated:

https://vaadin.com/docs/v8/framework/gwt/gwt-javascript

2

Hi,

Are you using Vaadin 14?
Are you using plain JS or do you want to use web component?

What is the library? (I might have an example that looks like this library) Is it a Javascript module or a “simple” javascript library?

3

Hi,

Thanks, Yeah, Vaadin 14.

I’m trying to learn how to extend a PolymerElement and do custom rendering (i.e. draw prorammatically what the component looks like on the page. Also how to embed three.js component into an ohter PolymerElement). And the use that in a Vaadin componentn.

The JS I want write from scratch to lear how the magic works. So no library for that part.

Also pointers to documentation of examples how to communicate to/from the JS web component to the server side Vaadin component would be nice in the next phase.

If you don’t have full examples then pointer to what classes are involved and general outline would also help.

I’ve made some progress since I posted but I would like to learn to do these things in the canonical way.

Thanks.

wbr Kusti

4

Hi,

I probably suggest you to use LitElement instead of PolymerElement, it’s easier to learn and is more future proof.
I also encourage you to use Typescript if you are using Vaadin 14.5+.

For example you can create a typescript file in your frontend folder my-test-component.ts :

import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-date-picker';
import '@vaadin/vaadin-form-layout/vaadin-form-layout';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import '@vaadin/vaadin-split-layout/vaadin-split-layout';
import '@vaadin/vaadin-text-field';
import {css, customElement, html, LitElement, property} from 'lit-element';


@customElement('my-test-component')
export class MyTestComponent extends LitElement {
    static get styles() {
        return css`
        :host {
            display: block;
        }
        `;
    }
    @property({ attribute: true })
    public test: String = "test";

    /**
     * Main method of the component
     *
     */
    render() {
        return html`Test attribute ${this.test}"`;
    }

}

And a Java component:

@JsModule("./my-test-component.ts")
@Tag("my-test-component")
public class MyTestComponent extends Component {

    public MyTestComponent() {
    }


    public String getTest() {
        return getElement().getProperty("test");
    }

    public void setTest(String test) {
        getElement().setProperty("test", test);
    }

}

(I didn’t test my code but it should work).

You can also find some example here for Lit Element https://vaadin.com/docs/v14/flow/templates/basic
And here for Polymer: https://vaadin.com/docs/v14/flow/templates/polymer-templates/tutorial-template-intro#when-to-use-polymer-templates

5

You also have an example of threejs integration in pure javascript: https://vaadin.com/forum/thread/17942059/how-can-i-integrate-three-js-library

6

Nice, thank you.

I will try to work from there.

How about pointers to how to implement the JS component <=> server communication. I expect I will want to transfer json data back and forth.

wbr Kusti

7

From Java to Javascript you can do this:
https://github.com/jcgueriaud1/amcharts-demo/blob/master/src/main/java/org/vaadin/jeanchristophe/XYChart.java#L39

From Javascript to Java, I don’t know where I have an example.