Javascript components in JMIX 2.0 and flowui

Support
#1

Hello,

I am currently working on migration from 1.5 to 2.0.
In the past, I created QR code input field. With help of javascript component and composite component I created reusable input. It uses javascript library for QR code scanning.

I was using approaches mentioned in:
https://demo.jmix.io/sampler/#main/0/sample?id=java-script-component-time-picker

https://docs.jmix.io/1.x/jmix/1.5/ui/custom-components/js-component.html

Code is:

qr-code-scanner.xml

<composite xmlns="http://jmix.io/schema/ui/composite">
    <cssLayout id="qrCodeScannerRootBox" width="100%" stylename="qr-code-scanner">
        <popupView id="scannerPopup" hideOnMouseOut="false" >
            <vbox width="600px">
                <jsComponent id="qrCodeScannerJsComponent" initFunctionName="com_generalbytes_dnameter_html5qrcode_init">
                    <dependencies>
                        <dependency path="vaadin://html5-qrcode/html5-qrcode-connector.js" type="JAVASCRIPT"/>
                        <dependency path="vaadin://html5-qrcode/html5-qrcode.min.js" type="JAVASCRIPT"/>
                    </dependencies>
                </jsComponent>
            </vbox>
        </popupView>
    </cssLayout>
</composite>

QrCodeScanner.kt

@CompositeDescriptor("qr-code-scanner.xml")
class QrCodeScanner: CompositeComponent<PopupView>(), CompositeWithHtmlDescription, CompositeWithContextHelp {

    private lateinit var scannerPopup: PopupView
    private lateinit var qrCodeScanner: JavaScriptComponent

    private var valueConsumer: Consumer<String>? = null

    ...
}

Now I am trying to do same thing in JMIX 2.0, but I didnt find any mentions about javascript components in docs. Any hint how to proceed?

Thank you very much

#3

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: Loading Resources | Advanced Topics | Vaadin Docs

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 Remote Procedure Calls | Element API | Creating UI | Vaadin Docs

flowui-js-component.zip (175.5 KB)

Regards,
Gleb

3 Likes
Integrating React Editor
#5

Hi!

See also this example in the online demo application: https://demo.jmix.io/ui-samples/sample/custom-component

Regards,
Dmitriy

1 Like
#6

Hello guys,

provided example and source code helped a lot. I was able to re-implement my component easily. I am not much familiar with Vaadin, so it saved me a lot of time.

Thank you!
Jakub

2 Likes