Seminar Vaadin Komponentenentwicklung und JavaScript-Integration

Seminarprofil

Das Seminar behandelt die Entwicklung wiederverwendbarer Vaadin-Komponenten und die kontrollierte Integration von Browsertechnik. Composite, CustomField, Element API, Properties, Events, JavaScript-Module sowie das Einbinden bestehender Web- und React-Komponenten stehen im Mittelpunkt.

Lernziele

• wiederverwendbare Java-Komponenten mit klarer API entwerfen
• eigene Formularfelder vollständig in Binder und Validierung integrieren
• Properties, Attribute, Events und Client-Aufrufe sicher abbilden
• Web Components oder React-Komponenten in Vaadin kapseln
• Komponenten thematisieren, testen, paketieren und versionsfähig veröffentlichen

Zielgruppe

Erfahrene Vaadin- und Java-Entwickler, Framework-Teams und Verantwortliche für interne Komponentenbibliotheken.

Voraussetzungen

Praxis in Vaadin Flow und Java; Grundkenntnisse in HTML, CSS und JavaScript oder TypeScript.

Inhaltsverzeichnis

1. Kapitel 1: Komposition und Java-Komponenten-API
2. Kapitel 2: CustomField und Formintegration
3. Kapitel 3: Element API und Browserintegration
4. Kapitel 4: Theming, Tests und Paketierung

Kapitel 1: Komposition und Java-Komponenten-API

Inhaltsverzeichnis

• Composite und kapselnde Komponenten
• öffentliche Eigenschaften und Ereignisse
• Lebenszyklus und Zustandsführung
• Wiederverwendung und Abhängigkeitsgrenzen

Schritt-für-Schritt-Anleitung

1. Einen wiederkehrenden UI-Baustein fachlich abgrenzen.
2. Eine kleine und konsistente Java-API definieren.
3. Interne Komponenten und Listener vollständig kapseln.
4. Lebenszyklus und Zustand mit automatisierten Tests prüfen.

Kapitel 2: CustomField und Formintegration

Inhaltsverzeichnis

• zusammengesetzte Werte
• Modell- und Präsentationswert
• Validierung und Fehlerstatus
• Binder-Kompatibilität und Barrierefreiheit

Schritt-für-Schritt-Anleitung

1. Ein fachliches Wertobjekt für das neue Feld festlegen.
2. Teilfelder zu einem konsistenten Modellwert zusammenführen.
3. Validierung und Fehleranzeige implementieren.
4. Das Feld in Binder, FormLayout und Tastaturnavigation testen.

Kapitel 3: Element API und Browserintegration

Inhaltsverzeichnis

• Properties, Attribute und Events
• JavaScript-Module und Client-Aufrufe
• Web Components und React-Wrapper
• Synchronisation und Sicherheitsgrenzen

Schritt-für-Schritt-Anleitung

1. Ein bestehendes Browser-Element als Java-Komponente registrieren.
2. Werte und Ereignisse typisiert zwischen Server und Client übertragen.
3. Notwendige JavaScript-Module gezielt laden.
4. Client-Eingaben validieren und serverseitige Vertrauensgrenzen einhalten.

Kapitel 4: Theming, Tests und Paketierung

Inhaltsverzeichnis

• CSS-Teile und Design Tokens
• browserlose und Browser-Tests
• Maven-Modul und Abhängigkeiten
• Versionierung und Dokumentation

Schritt-für-Schritt-Anleitung

1. Stabile Styling-Einstiegspunkte definieren.
2. Server- und Clientverhalten auf geeigneten Testebenen prüfen.
3. Komponente und Ressourcen als eigenständiges Modul paketieren.
4. API, Kompatibilität und Änderungsregeln dokumentieren.

Praxisprojekt

Eine Binder-fähige Fachkomponente und ein Wrapper für ein Browser-Element werden entwickelt, gestaltet, getestet und als wiederverwendbares Modul paketiert.

Arbeitsweise

Codezentrierte Übungen mit schrittweiser Erweiterung, Debugging auf Server und Client sowie abschließendem API-Review.