Javascript extension communication problem

Vaadin 6 / 7 / 8
1

Hi Vaadin experts,

We use vaadin 8.1 version and created a simple input mask with javascript extension for the TextField.
The mask show correctly but if typeing something in the TextField it is not send the changes to the server side I don’t no why.

The javascript lib: https://www.npmjs.com/package/jquery.inputmask

connector.js
 like this:

window.org_vaadin_textfieldformatter_SimpleNumberFormatter = function () {
    console.info("Start org_vaadin_textfieldformatter_SimpleNumberFormatter");
    try {
        var im;
        var el = this.getElement(this.getParentId());
        var connector = this;
        im = new Inputmask(connector.getState().mask);
        im.mask(el);

        // Pass user interaction to the server-side
        var connector = this;
        im.onclick = function () {
            connector.onClick(im.getValue());
        };
    } catch (e) {
        console.error(e);
    }
    console.info("Done");
};


AbstractTextFieldFormatterExtension
class:

[code]
@JavaScript({“jquery-3.2.1.min.js”, “inputmask.js”, “inputmask.regex.extensions.js”, “inputmask.numeric.extensions.js”, “connector.js”})
public abstract class AbstractTextFieldFormatterExtension extends AbstractJavaScriptExtension {

public AbstractTextFieldFormatterExtension(AbstractTextField field) {
    extend(field);
}

public String getValue() {
    return getState().value;
}

public void setValue(String value) {
    getState().value = value;
}

@Override
protected TextFieldFormatterState getState() {
    return (TextFieldFormatterState) super.getState();
}

}
[/code]
SimpleNumberFormatter
:

public class SimpleNumberFormatter extends AbstractTextFieldFormatterExtension {

    public SimpleNumberFormatter (TextField field, String mask) {
        super(field);
        setCharacters(mask);
    }

    private void setCharacters(String mask) {
        getState().mask = mask;
    }
}


TextFieldFormatterState
:

public class TextFieldFormatterState extends JavaScriptExtensionState { // Default masking definitions // 9 : numeric // a : alphabetical // * : alphanumeric public String mask; // pl: 99-9999999 public int repeat; public String value; } Please help me what I wrong.

Richárd

2

Have you tried sending the unmasked contents (im.getValue()?) to the server explicitly in an onBlur event of the element? You could register a JavaScriptFunction in the constructor.

-Olli

3

Did you mean for this?

I have tried this but nothing heppened.

SimpleNumberFormatter.java

    public SimpleNumberFormatter(TextField field, String mask) {
        super(field);
        setCharacters(mask);
        addFunction("onBlur", new JavaScriptFunction() {
            @Override
            public void call(JsonArray arguments) {
                System.out.println("args: " + arguments);
            }
        });
    }
    private void setCharacters(String mask) {
        getState().mask = mask;
    }
}


connector.js

        var im;
        var el = this.getElement(this.getParentId());
        var connector = this;

        im = new Inputmask(connector.getState().mask);
        im.mask(el);

        // Pass user interaction to the server-side
        el.onBlur = function () {
            connector.onBlur(el.getValue());
        };
4

I can not transfer anything tho the server side. This is the main problem.

5

Can you pass anything to the server side (e.g. just a test String “hello”)?

-Olli

6

Can you call a JavaScript function you define on the server from browser console?

-Olli

7

I’m wondering if the right event on client side gets triggered. Could be that the inputmask overrides some relevant listener - does it provide some API that allows you to add listeners after the masking?

-Olli

8

If I not assigne the inputmask for the filed. The transfer workin fine.

. . im = new Inputmask(connector.getState().mask); im.mask(el); . . Can something missing from my code (components)?

9

What kind of listeners should not be overridden?

10

Probably onchange at least. By the way, something to look out for - JavaScript uses all-lowercase listener names, eg. “onchange” instead of “onChange”

-Olli