Seminar Vaadin Flow Grundlagen

Seminarprofil

Der Einstieg vermittelt die Entwicklung moderner Webanwendungen vollständig in Java. Ausgehend von einem Spring-Boot-Projekt entstehen Komponenten, responsive Layouts, navigierbare Views, Formulare, Datenlisten und eine lauffähige CRUD-Anwendung.

Lernziele

• ein aktuelles Vaadin-Flow-Projekt mit Java und Spring Boot einrichten
• Komponenten, Layouts, Events und den serverseitigen UI-Zustand verstehen
• Views, Routen, Parameter und Hauptlayouts strukturiert umsetzen
• Formulare, Binder, Validierung, Grid und Datenzugriff kombinieren
• eine vollständige Anwendung testen, absichern und produktionsnah bauen

Zielgruppe

Java-Entwickler, Full-Stack-Entwickler und technische Einsteiger in Vaadin Flow.

Voraussetzungen

Sichere Java-Grundkenntnisse; grundlegende Kenntnisse in Maven oder Gradle und Spring Boot sind hilfreich. JavaScript-Kenntnisse sind nicht erforderlich.

Inhaltsverzeichnis

1. Kapitel 1: Projektstart und Entwicklungsumgebung
2. Kapitel 2: Komponenten, Layouts und Ereignisse
3. Kapitel 3: Views und Navigation
4. Kapitel 4: Formulare und Datenlisten
5. Kapitel 5: Anwendung vervollständigen

Kapitel 1: Projektstart und Entwicklungsumgebung

Inhaltsverzeichnis

• Java- und Spring-Boot-Projekt
• Vaadin-Abhängigkeiten und Projektstruktur
• Entwicklungsmodus und Live Reload
• erste Route und erste Komponente

Schritt-für-Schritt-Anleitung

1. Ein neues Projekt mit passender Java- und Spring-Boot-Version anlegen.
2. Abhängigkeiten und Verzeichnisstruktur prüfen.
3. Die Anwendung im Entwicklungsmodus starten.
4. Eine erste View registrieren und im Browser aufrufen.

Kapitel 2: Komponenten, Layouts und Ereignisse

Inhaltsverzeichnis

• Eingabe-, Anzeige- und Aktionskomponenten
• VerticalLayout, HorizontalLayout und FormLayout
• Events und ValueChangeMode
• Zustand, Sichtbarkeit und Aktivierung

Schritt-für-Schritt-Anleitung

1. Komponenten für einen konkreten Anwendungsfall auswählen.
2. Ein responsives Grundlayout zusammensetzen.
3. Ereignisse mit klaren Listenern verbinden.
4. UI-Zustände nachvollziehbar aktualisieren und leere Zustände berücksichtigen.

Kapitel 3: Views und Navigation

Inhaltsverzeichnis

• Route und RouteAlias
• MainLayout und verschachtelte Navigation
• Routenparameter und Query-Parameter
• Navigation Lifecycle und Fehlerrouten

Schritt-für-Schritt-Anleitung

1. Mehrere Views mit eindeutigen Routen anlegen.
2. Ein gemeinsames Hauptlayout mit Navigation erstellen.
3. Datensatz- und Filterzustände in URLs abbilden.
4. Nicht gefundene oder nicht erlaubte Ziele kontrolliert behandeln.

Kapitel 4: Formulare und Datenlisten

Inhaltsverzeichnis

• Grid und DataProvider
• Binder und Feldbindung
• Konverter und Validatoren
• CRUD-Ablauf und Service-Anbindung

Schritt-für-Schritt-Anleitung

1. Daten aus einem Service in einem Grid anzeigen.
2. Ein Formular an ein Bearbeitungsmodell binden.
3. Pflichtfelder, Konvertierungen und fachliche Regeln ergänzen.
4. Anlegen, Ändern, Löschen und Aktualisieren als konsistenten Ablauf umsetzen.

Kapitel 5: Anwendung vervollständigen

Inhaltsverzeichnis

• Fehlerbehandlung und Benachrichtigungen
• Grundlagen der Zugriffssicherung
• browserlose und manuelle Tests
• Production Build und Konfiguration

Schritt-für-Schritt-Anleitung

1. Technische und fachliche Rückmeldungen vereinheitlichen.
2. Views mit einfachen Zugriffsregeln absichern.
3. Kritische UI-Abläufe automatisiert prüfen.
4. Einen Produktionsbuild erzeugen und mit externer Konfiguration starten.

Praxisprojekt

Schrittweise entsteht eine vollständige Verwaltungsanwendung mit Navigation, Grid, Formular, Validierung, Service-Schicht, Zugriffsschutz und Produktionsbuild.

Arbeitsweise

Jeder Themenblock wird unmittelbar in der Referenzanwendung umgesetzt. Kurze Erläuterungen wechseln mit geführten Übungen und eigenständigen Erweiterungen.