Hi,
There is no jsComponent in Flow UI, instead web components can be used. Taking Slider | jQuery UI as an example, below how it can be integrated.
JS libraries can be imported form server side using annotations: How to load resources dynamically in Vaadin
In the code below, @NpmPackage is used to define NPM dependency, @CssImport to import corresponding styles. @JsModule to import custom JS file (in our case it is something similar to classic connector file)
@Tag("demo-slider")
@NpmPackage(value = "jquery", version = "1.9.1")
@NpmPackage(value = "jquery-ui", version = "1.13.2")
@CssImport("jquery-ui/dist/themes/base/jquery-ui.css")
@JsModule("./src/slider/slider.js")
public class Slider extends Component implements HasSize {
...
}
In the client side part, the ready method can be used to init corresponding JS library.
import 'jquery/jquery.js'
import 'jquery-ui/dist/jquery-ui.js'
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {ElementMixin} from '@vaadin/component-base/src/element-mixin.js';
class Slider extends ElementMixin(PolymerElement) {
static get is() {
return 'demo-slider';
}
...
ready() {
super.ready();
this._slider = $(this);
this._slider.slider({
min: this.min,
max: this.max,
change: function (event, ui) {
if (this.value === ui.value) {
return;
}
this.value = ui.value;
const slideChangeEvent = new CustomEvent('custom-slide-changed', {detail: {value: ui.value}});
this.dispatchEvent(slideChangeEvent);
}
});
}
...
}
customElements.define(Slider.is, Slider);
export {Slider};
helpfull links:
Also important to note, that Import annotations can be used on any component and also on view controllers. Js functions can be executed from sever side using Calling client-side JavaScript from Vaadin components
flowui-js-component.zip (175.5 KB)
Regards,
Gleb