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!