Vaadin flow, designer and autocompletion

Flow
1

Hi,

I’m trying Vaadin flow and designer and I don’t know if it’s “normal” or if my IDE is misconfigured but I have some troubles to “autocomplete” my code (and to know what value or attribute I can put to use vaadin components).
For example (I create a sample project from Spring bakery), in form-buttons-bar, vaadin-button got some properties:

  • <vaadin-button id="cancel" slot="left" on-click="_cancel" theme="raised" disabled="[[cancelDisabled] ]"> [[cancelText] ] </vaadin-button>
    How do you know if there is slot, on-click attributes ? (there is nothing inside Vaadin Designer. I don’t see something here https://vaadin.com/components/vaadin-button/html-examples/button-basic-demos . I don’t have any autocomplete inside Intellij :/)
    How do you know which value you “can” put inside theme ? (In Vaadin 8, in Java you had button.setStyleName(ValoTheme.BUTTON_PRIMARY)). In Vaadin 10 you have to enter button.getElement().setAttribute(“theme”,“primary”) or enter a value inside Vaadin Designer with no autocomplete).
    To bind saveButton click to a Java method, it’s done with on-click attributes (and some code). As a Vaadin8 developer, I can do like that (in FormButtonBar.java):

    @Id(“save”)
    private Button save;

    public Registration addSaveListener(ComponentEventListener<HasClickListeners.ClickEvent> listener) {
    return save.addClickListener(listener);
    }

What’s the “difference” between 2 ways to bind the click action ? (if there is a difference)

Thanks for your answers

2

Hi,

The current IDE plugins (Vaadin plugin and Designer) don’t offer any autocompletion for Flow templates. The best way to discover valid attributes and attribute values is through the component documentation and examples, as you already found out. First place I would always look is the page of the component on vaadin.com. For example, the Button has some examples related to the Lumo theme https://vaadin.com/components/vaadin-button/html-examples/button-lumo-theme-demos. Next place would be the component sources on GitHub https://github.com/vaadin/vaadin-button.

I created https://github.com/vaadin/designer/issues/1674 for tracking possible improvements to the Flow integration of the Designer plugin.

As to the clicklistener problem, could you elaborate on that? I’m not sure if I understand the issue. Note that we also have a great Gitter chat for Flow were you can ask for help: https://gitter.im/vaadin/flow

3

Thanks for your reply.

For click listener, it’s implemented like that in the demo: (I put my own comment)
In form-buttons-bar.html:

<vaadin-button id="save" slot="left" on-click="_save">   [[saveText]
]  </vaadin-button>

/** @event save */
_save() {
  this.dispatchEvent(new CustomEvent('save'));
}

→ I don’t where to find the on-click attribute of vaadin-button (not here https://github.com/vaadin/vaadin-button , not in the demos of vaadin-button, not here https://vaadin.com/components/vaadin-button/html-examples/button-basic-demos ). But if I understand it correctly it’s not “linked” to vaadin-button. It’s a polymer “feature” (https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-event-handlers.html ).

Then in FormButtonBar:

@DomEvent("save")
public static class SaveEvent extends ComponentEvent<FormButtonsBar> {
	public SaveEvent(FormButtonsBar source, boolean fromClient) {
		super(source, fromClient);
	}
}

public Registration addSaveListener(ComponentEventListener<SaveEvent> listener) {
	return addListener(SaveEvent.class, listener);
}

But I think you can replace this code (form-buttons-bar.html and FormButtonBar) by:

@Id("save") private Button save; // done by Vaadin Designer

public Registration addSaveListener(ComponentEventListener<HasClickListeners.ClickEvent> listener) { return save.addClickListener(listener); }

This code looks like Vaadin 8 code and you don’t need to know how Polymer works and there is less code (done with autocompletion and the code is compiled). So I don’t understand why it’s done like that in the demo. (and if what the advantage)

4

Jean-Christophe Gueriaud:
This code looks like Vaadin 8 code and you don’t need to know how Polymer works and there is less code (done with autocompletion and the code is compiled). So I don’t understand why it’s done like that in the demo. (and if what the advantage)

The overly complex code is probably remainder from some workarounds for early Flow versions or just a mistake. We will fix it. Thank you for pointing this out.