[Vaadin 8.5.2] Add DOM attribute on elements

Flow
1

Hi !

I’ve been using Vaading framework [8.5.2]
for few months and there are few things I don’t understand.
In my case, I want to add the dom attribute “autocomplete” with “off” value for few components (TextField and DateField).

So I’ve created a custom TextField class which extends the Vaadin TextField class as you can see below :

	public class MyCustomTextField extends TextField {
		public MyCustomTextField() {
			super();
			ComponentUtils.setProperty(this, "autocomplete", "off");
		}
	}

The setProperty in my ComponentUtils looks like :

  public static void setProperty(Component component, String property, String value) {

    if (component.getId() == null) {
      component.setId(UUID.randomUUID().toString());
    }

    JavaScript.getCurrent()
        .execute("$('#" + component.getId() + "').attr('" + property + "','" + value + "');");
  }

Could you tell me if it’s the best way to do what I want to achieve or if there is a better way ?

Moreover I don’t understand when the component’s id are generated. In fact, when we pass in the setProperty function, I thought we would never enter in the if(component.getId() == null) but I was completely wrong, we always pass in this condition.
So the component’s id after the construct is null and i’m wondering when those ids are generated…

I hope someone will be able to help me.

Thank you in advance.

2

Your approach works, but is prone to timing errors. I.e. the JavaScript call works when the element is attached to DOM, but fails if not. Personally I think, it is more efficient to extend the component on client side, since in GWT there is DOM API that has methods to set e.g. attributes and many other things. In this case I would extend the TextField and its client side Widget VTextField.

Here is an example of extended ComboBox https://github.com/TatuLund/PrefixComboBox (it does totally different things, but you can use it as study material to see the pattern how custom components are done by extending existing ones)

3

Alexandre Pire:
Hi !

I’ve been using Vaading framework [8.5.2]
for few months and there are few things I don’t understand.
In my case, I want to add the dom attribute “autocomplete” with “off” value for few components (TextField and DateField).

So I’ve created a custom TextField class which extends the Vaadin TextField class as you can see below :

	public class MyCustomTextField extends TextField {
		public MyCustomTextField() {
			super();
			ComponentUtils.setProperty(this, "autocomplete", "off");
		}
	}

The setProperty in my ComponentUtils looks like :

  public static void setProperty(Component component, String property, String value) {

    if (component.getId() == null) {
      component.setId(UUID.randomUUID().toString());
    }

    JavaScript.getCurrent()
        .execute("$('#" + component.getId() + "').attr('" + property + "','" + value + "');");
  }

Could you tell me if it’s the best way to do what I want to achieve or if there is a better way ?

Moreover I don’t understand when the component’s id are generated. In fact, when we pass in the setProperty function, I thought we would never enter in the if(component.getId() == null) but I was completely wrong, we always pass in this condition.
So the component’s id after the construct is null and i’m wondering when those ids are generated…

I hope someone will be able to help me.

Thank you in advance.

Hi Alexandre,
in this case, how do you read value from DOM field to Java server side ? Please share you solutions.
Thanks!