By instruction in book of vaadin i create MaskTextField.java
@JavaScript({ “masktextfield.js”,“masktextfield-connector.js”, “jquery.maskedinput-1.3.min.js”,“jquery-1.7.2.min.js”})
public class MaskTextField extends AbstractJavaScriptComponent{
public void setValue(String value) {
getState().value = value;
}
public String getValue() {
return getState().value;
}
public void setMask(String mask) {
getState().mask = mask;
}
@Override
protected MaskTextFieldState getState() {
return (MaskTextFieldState) super.getState();
}
}
create file MaskTextFieldState.java
public class MaskTextFieldState extends JavaScriptComponentState {
private static final long serialVersionUID = 1L;
public String value;
public String mask;
}
After I create file masktextfiled.js
var mylibrary = mylibrary || {};
mylibrary.MaskTextField = function (element) {
element.innerHTML = "<input id='timemask' type='text' />";
var masktextfield = $("#timemask").mask("99:99:99");
this.getValue = function() {
return $("#timemask").val();
};
this.setValue = function(value) {
$("#timemask").val(value);
};
And create connector file masktextfield-connector.js
window.com_example_javascriptmask_MaskTextField = function() {
// Create the component
var masktextfield = new mylibrary.MaskTextField(this.getElement());
// Handle changes from the server-side
this.onStateChange = function() {
this.getState().value = masktextfield.getValue();
};
Put .js file “masktextfield.js”,“masktextfield-connector.js”, “jquery.maskedinput-1.3.min.js”,“jquery-1.7.2.min.js” in root package.
In ui class init method i create javascriptcomponent and put in layout. Input text field show, but mask ##:##:## not visible
and component method getValue setValue don’t work.
what am I doing wrong?