Fondations de Vaadin

Pourquoi Vaadin ?

Le Web avec Java EE

Le Web avec Vaadin

Attention

Quelques principes

Contraintes

Architecture générale

Concepts fondamentaux

Servlet

Vaadin Servlet

UI

Caractéristiques

Exemple de configuration explicite

public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        add(new Span("Hello world!"));
    }
}

@VaadinServletConfiguration(
    ui = MyUI.class,
    productionMode = false
)
public class MyVaadinServlet extends VaadinServlet { }

Component

Caractéristiques

Composants disponibles

Samplers

Has Components

Has Components disponibles

Route

Caractéristiques

Chemin par défaut

Exemple de route

@Route("home")
public class MainView extends Div {

  public MainView() {
    setText("Hello world!");
  }
}

Routes : concepts avancés

Composant affiché par la route

Elément @Route.layout

Exemple de code

@Route(layout = ParentView.class)
public class AView extends VerticalLayout { }

public class ParentView extends Div implements RouterLayout { }

Parent de parent

Exemple de code

@Route(layout = ParentView.class)
public class AView extends VerticalLayout { }

@ParentLayout(RootLayout.class)
public class ParentView extends Div implements RouterLayout { }

public class RootLayout extends Div implements RouterLayout { }

Routes paramétrées

Exemple de route paramétrée

@Route("person")
public class PersonView extends Div
                        implements HasUrlParameter<String> {
  @Override
  public void setParameter(BeforeEvent event,
                           String person) {
    setText("Hello " + person + "!"); (1)
  }
}

Exemple de route paramétrée

@Route("person")
public class PersonView extends Div
                        implements HasUrlParameter<String> {
  @Override
  public void setParameter(BeforeEvent event,
        @OptionalParameter String person) {
    if (person == null) {
      setText("Hello nobody!");         (1)
    } else {
      setText("Hello " + person + "!"); (2)
    }
  }
}

Exemple de route paramétrée

@Route("person")
public class PersonView extends Div
                        implements HasUrlParameter<String> {
  @Override
  public void setParameter(BeforeEvent event,
        @OptionalParameter String person) {
    if (person.isEmpty()) {
      setText("Hello nobody!");                    (1)
    } else {
      setText("Hello " + person.split()[0] + "!"); (2)
    }
  }
}

Lien de routeur

Exemple de lien de routeur

new RouterLink("Say hello", HelloView.class, "John");

public class HelloView extends Div
                        implements HasUrlParameter<String> {

  @Override
  public void setParameter(BeforeEvent event,
                           String name) {
    setText("Hello " + name + "!");
  }
}

Programmation Evènementielle

Qui est Subject ?

Exemple

Qui est Observer ?

Côté client

Nature des abonnés

Classe anonyme abonnée

new Button("Click me!").addClickListener(
  new ComponentEventListener<ClickEvent<Button>>() {

    @Override
    public void onComponentEvent(ClickEvent<Button> e) {
      ...
    }
  }
);

new Button("Click me!").addClickListener(event -> {
  ...
});

Classe dédiée abonnée

public class SendFormBehavior
  implements ComponentEventListener<ClickEvent<Button>> {

  @Override
  public void onComponentEvent(ClickEvent<Button> e) {
    ...
  }
}

Problématique liées au pattern Observer

Event Bus

Implémentations existantes

Exemple de cas d’utilisation

public class CountryComboBox extends ComboBox<Country> {

  public CountryComboBox(EventBus bus) {
    addValueChangeListener(event -> {
      bus.post(new CountryChangedEvent(event.getValue()));
    });
  }
}

public class CityComboBox extends ComboBox<City> {

  @Subscribe
  public void changeCities(CountryChangedEvent event) {
    // Refresh cities
  }
}

@Route
public class SampleView extends VerticalLayout {

  public SampleView() {
    EventBus eventBus = new EventBus();
    CountryComboBox countries = new CountryComboBox(eventBus);
    CityComboBox cities = new CityComboBox();
    eventBus.register(cities);
    add(countries, cities);
  }
}

Has Validation

Mettre un composant en erreur

ComboBox combo = new ComboBox();
...
combo.setInvalid(true);
combo.setErrorMessage("Invalid selection");

Error Handler

Par défaut

Notifications

Has Validator

Validateurs disponibles

Exemple d’utilisation

public class EmailField extends TextField implements HasValidator<String> {

  public EmailField() {
    addValueChangeListener(event -> {
      ValidationResult r = getDefaultValidator().apply(getValue(), null);
      if (r.isError()) { setToInvalid(r.getErrorMessage()); }
      else { resetToValid(); }
    });
  }

  @Override
  public Validator<String> getDefaultValidator() {
    return new EmailValidator("Value " + getValue() + " is not an email");
  }
}

Data Binding

Niveaux de data binding

Has Value

Binder

Exemple

Binder<Person> binder = new Binder<>(Person.class);
binder.setBean(new Person());
TextField firstNameField = new TextField("Given name");
TextField lastNameField = new TextField("Family name");
DatePicker birthdateField = new DatePicker("Date of birth");
binder.bind(firstNameField, "firstName");
binder.bind(lastNameField, "lastName");
binder.bind(birthDateField, "birthdate");

// User interaction

Person person = binder.getBean();
String firstName = person.getFirstName();
String lastName = person.getLastName();
LocalDate birthdate = person.getBirthDate();

Has Items

Exemple de code

List<Person> persons = ...;
ListDataProvider<Person> provider =
    new ListDataProvider<>(persons);
Grid<Person> grid = new Grid<>(Person.class);
grid.setDataProvider(provider);
grid.setColumns("firstName", "lastName", "birthdate");

Grid

Affichage des colonnes

Grid<Person> grid = new Grid<>(Person.class);
grid.setColumns("firstName", "lastName");

Libellé de l’en-tête de colonne

Grid<Person> grid = new Grid<>(Person.class);
grid.getColumn("firstName")
    .setHeader("Prénom");

Libellé de la cellule

Exemple : formatage de date

Grid<Person> grid = new Grid<>(Person.class);
grid.addColumn(
    new LocalDateRenderer<>(Person::getBirthdate, "")
);

Exemple : ajout de bouton

grid.addColumn(new NativeButtonRenderer<>(
    "Click me!",
    event -> Notification.show("Hello world!"))
);