GEDOPLAN

Die Webanwendungsentwicklung hat sich in den letzten Jahren stark verändert. Die Javascript-basierten Frameworks sind bei einer Neuentwicklung meist die erste Wahl. Obwohl sich damit gestandene Java-Entwickler aus ihrem Ökosystem entfernen wird immer wieder argumentiert, dass es ja „nur“ eine andere Programmiersprache ist, die zum Einsatz kommt. Ich persönlich bin der Meinung, dass bei Verwendung eines Java-basierten Backends eigentlich Jakarta Faces die bessere Wahl für eine Webanwendung wäre. Aber das sei hier an dieser Stelle nur am Rande erwähnt.

Was mache ich aber, wenn ich mit meinem Java-Entwicklerteam eine moderne Webanwendung entwickeln möchte Jakarta Faces nicht einsetzen möchte und auf lange Weiterbildungen meiner Entwickler verzichten will? Dann ist die Antwort: Schaue dir doch mal Vaadin an.

Mit Vaadin Flow kann ich meine gesamte Oberfläche in Java entwickeln, ohne jegliche Kenntnisse von HTML, CSS oder Javascript zu haben. Ich kann sie ähnlich wie Desktop-Oberfläche per Komponenten zusammenstellen. Der Client wird dann anschließend auf dem Server erstellt und an den Browser weitergereicht. Die Kommunikation zwischen der Oberfläche und dem Server wird durch Vaadin gesteuert. Starten wir also mit einer einfachen Komponente.

public class CustomerDetailView extends HorizontalLayout {
  private TextField firstName = new TextField("First name");
  ...
  public CustomerDetailView() {
    add(firstName, ...);
  }
}

Wir nutzen das horizontale Layout von Komponenten, um Elemente, wie bspw. ein Eingabefeld anzeigen zu lassen. Damit die Eingaben gespeichert werden können verwenden wir eine Entität, die wir später auch in der Datenbank ablegen können.

@Data
@Entity
public class Customer {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  private String firstName;
  private String lastName;
  private LocalDate dateOfBirth;
  private Set<Interest> interests;
}

Als nächstes müssen wir unsere Java-Daten-Klasse mit der Oberfläche verbinden. Auch hierfür hat Vaadin Flow eine elegante Lösung. Das sogenannte Bean-Binding erledigt diese Aufgabe fast wie von selbst.

public class CustomerDetailView extends HorizontalLayout {
  private TextField firstName = new TextField("First name");
  ...
  private Binder<Customer> binder = new Binder<>(Customer.class);
  ...
  public CustomerDetailView() {
    binder.bindInstanceFields(this);
    ...
  }
}

Der Binder sorgt dafür, dass alle Attribute meiner Entität mit den Komponenten verbunden werden. Dazu müssen die Variablen für die Komponenten genauso benannt werden, wie die Attribute meiner Entität. Die hier vorgestellte Methode ist natürlich nicht die einzige Möglichkeit Daten mit den Komponenten zu verbinden. Es ist ebenso möglich die Zuordnung manuell zu machen.

Anschließend benötigen wir noch eine Aktionskomponente, damit wir die Eingaben auch verarbeiten lassen können. Zusätzlich benötigen wir noch einen Handler, der die Aktionen ausführt.

@PostConstruct
void init() {
  saveButton.addClickListener(event -> {
    customerService.create(binder.getBean());
    customerCreatedEvent.fire(binder.getBean());
    ...
  });
}

Wir übergeben hier die über den Binder verbundene Bean-Instanz an den Service. Dieser speichert die Daten über eine Repository-Klasse in der Datenbank. Anschließend feuern wir ein CDI-Event um weiteren Komponenten das Erstellen eines neuen Datensatzes anzukündigen.

void refresh(@Observes @Created Customer customer) {
  setItems(customerService.listAll());
}

Die empfangende Komponente beobachtet das CDI-Event und kann dann wie in unserem Beispiel die Liste der Kunden aktualisieren. Damit haben wir eine lose Kopplung unserer Komponenten erreicht.

Ich hoffe ich konnte mit diesem kleinen Beispiel zeigen, das Vaadin Flow durchaus eine Alternative zu Javascript-Frameworks oder auch Jakarta Faces darstellen kann, wenn man als Entwickler auf den Komfort des Java-Ökosystems nicht verzichten möchte. Das komplette Beispiel findet ihr wie immer in GitHub: https://github.com/GEDOPLAN/quarkus-vaadin-demo