How add TextChangeListener to my component with Javascript Integration ?

Hi, how can i add a TextChangeListener to my add on ?
Vaadin 7.7.9.

MyComponent.java

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950package com.example.searchfield;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.function.Consumer;

import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;
import com.vaadin.ui.JavaScriptFunction;

import elemental.json.JsonArray;

@StyleSheet({“jquery.tagsinput.css”, “http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css”})
@JavaScript({“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”, “jquery.tagsinput.js”, “https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js”, “mylibrary.js”, “mycomponent-connector.js”})
public class MyComponent extends AbstractJavaScriptComponent {

// Java 8
ArrayList<Consumer<String>> listeners =
        new ArrayList<Consumer<String>>();
public void onChange(Consumer<String> listener) {
    listeners.add(listener);
}

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

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

@Override
public MyComponentState getState() {
    return (MyComponentState) super.getState();
}

public MyComponent() {
    addFunction("onClick", new JavaScriptFunction() {

        @Override
        public void call(JsonArray arguments) {
            getState().setValue(arguments.getString(0));
            for (Consumer<String> listener: listeners)
                listener.accept(arguments.getString(0));
        }
    });
}

}
MyComponentState.java
12345678910111213141516package com.example.searchfield;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class MyComponentState extends JavaScriptComponentState {

private  String value;

public String getValue() {
    return value;
}

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

}
mycomponent-connector.js
12345678910111213141516171819202122window.com_example_searchfield_MyComponent =
function() {
// Create the component
var mycomponent =
new mylibrary.MyComponent(this.getElement());

// Handle changes from the server-side
this.onStateChange = function() {
    mycomponent.setValue(this.getState().value);
};


// Pass user interaction to the server-side
var self = this;
mycomponent.click = function() {
    self.onClick(mycomponent.getValue());
};

};
mylibrary.js
12345678910111213141516171819202122232425262728293031323334353637383940414243444546// Define the namespace
var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
element.innerHTML =

            "<input type='text' id='tags_1'  class='v-textfield v-widget' name='value'/>" ;
           //class='v-textfield v-'
    // Style it
  //  element.style.border = "thin solid red";
   // element.style.display = "inline-block";
    
    // Getter and setter for the value property
    this.getValue = function () {
        alert('oi');
        return  'oi';
    };
    this.setValue = function (value) {
          $('#tags_1_tagsinput').find('span').remove()

    };

   /* // Default implementation of the click handler
    this.click = function () {
            alert("Error: Must implement click() method");
    };

    // Set up button click
    var button = element.getElementsByTagName("input")[1]

;
var self = this; // Can’t use this inside the function
button.onclick = function () {
alert(‘oi’);
self.click();
};
*/
var inputtext = element.getElementsByTagName(“input”)[0]
;
inputtext.oninput = function(){
alert(this.value);
};
$(‘#tags_1’).tagsInput({width:‘auto’});

};
Thanks for help!

I’m not sure if you got this solved already (sorry about the late reply!), but if you didn’t, you can use ServerRpc pretty much the same way as with regular non-JavaScript components. You just need to register the RPC on the server-side as usual, and within JavaScript side of things you can access it via var rpcProxy = this.getRpcProxy();
and then when you want to trigger something just call

rpcProxy.yourMethod(yourParameters); and when you get the event to Java side of things you can call fireEvent since AbstractJavaScriptComponent extends AbstractClientConnector. Or you can do the event-handling manually if you don’t want to bother with the EventRouter.