Les fondations de Vaadin v8

Pourquoi Vaadin ?

Le Web avec Java EE

Le Web avec Vaadin

Quelques principes

Contraintes

Architecture générale

Composants

UI

Appel d’UI.init()

Notion de composant

Composants disponibles

Samplers

Containers et layouts

Layouts disponibles

Programmation Evènementielle

Qui est Subject ?

Exemple

Qui est Observer ?

Côté client

Implémentation du clic

Architecture des abonnés

UI abonné

public class MyUI implements ClickListener {

  private Button button1;
  private Button button2;

  @Override
  public void buttonClick(ClickEvent e) {

    if (e.getSource() == button1) ...
    else if (e.getSource() == button2) ...
  }
}

Classe anonyme abonnée

button.addClickListener(new ClickListener() {

  @Override
  public void buttonClick(ClickEvent e) {
    ...
  }
}

Classe dédiée abonnée

public class SendFormBehavior implements ClickListener() {

  @Override
  public void buttonClick(ClickEvent e) {
    ...
  }
}

Problématique liées au pattern Observer

Event Bus

Implémentations existantes

Exemple de cas d’utilisation

public class CountryComboBox extends ComboBox {

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

public class CityComboBox extends ComboBox {

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

public class EventBusUI extends UI {

    public void init(VaadinRequest request) {
        EventBus bus = new EventBus();
        CountryComboBox countries = new CountryComboBox(bus);
        CityComboBox cities = new CityComboBox();
        bus.register(cities);
        // Layout components & set content
    }
}

Erreurs

Mettre un composant en erreur

Exceptions inattendues

Notifications

Comment valider ?

Validateurs disponibles

Exemple d’utilisation d’un Validator

TextField email = TextField(”Email");
email.addValidator(new EmailValidator());

Navigation

Modèle

Exemple d’utilisation

public class NavigatorUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Navigator navigator = new Navigator(this, this);
        setNavigator(navigator);
        navigator.addView("", new InitialView());
        navigator.addView("other", new OtherView());
    }
}

Data Binding

Niveaux de data binding

Has Value

Binder

Exemple

Binder<Person> binder = new Binder<>(Person.class);
TextField firstNameField = new TextField("Give name");
TextField lastNameField = new TextField("Family name");
DateField birthDateField = new DateField("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();
Date birthdate = person.getBirthDate();

Has Items

Exemple

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

Spécialisations de Data Provider

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").setCaption("Given Name");

Libellé de la cellule

Exemple : formatage de date

Grid<Person> grid = new Grid<>(Person.class);
Column<Person, ?> column = grid.getColumn("birthDate");
Renderer renderer = new LocalDateRenderer("EE dd MMM yy");
column.setRenderer(renderer);

Exemple : rendu HTML

Grid<Person> grid = new Grid<>(Person.class);
Column<Person, ?> column = grid.getColumn("biography");
Renderer renderer = new HtmlRenderer();
column.setRenderer(renderer);

Exemple : ajout de bouton

Grid<Person> grid = new Grid<>(Person.class);
Column<Person, String> column =
    grid.addColumn(person -> person.getFirstName());
ButtonRenderer<String> buttonRenderer =
    new ButtonRenderer<>(event -> Notification.show("Shown"));
column.setRenderer(buttonRenderer);

Intégration avec CDI

Avantages

Référencement de l’UI

@CDIUI("main")
public class MyUI extends UI {

    public void init(VaadinRequest request) {
        // Do something here
    }
}

Enregistrement de Views

@CDIView("hello")
public class MyView extends HorizontalLayout
                    implements View() { }

@CDIUI("") public class MyUI extends UI {

    @Inject
    private ViewProvider viewProvider;

    public void init(VaadinRequest request) {
        Navigator navigator = new Navigator(this, this);
        navigator.addProvider(viewProvider);
        navigator.navigateTo("hello");
    }
}