Entwurfsaufträge für die Views, abgeleitet aus dem Prozesskatalog. Jeder Brief nennt Zweck, bediente Prozesse (P0001 … P0020), gezeigte Daten, ausgelöste Zustandsübergänge und die tragenden Vaadin-Bausteine. Die Briefs dienen doppelt: als Vorlage, die sich an Claude Design übergeben lässt, und als Umsetzungsleitfaden für Vaadin Flow. Sie sind Absichts- und Anordnungsskizze, keine pixelgenaue Vorgabe. Bewusst auf den Umfang des Migrationsartikels zugeschnitten. Stand: 8. Juli 2026. Nachtrag vom 20. August 2026: Die Briefs sind die Absichtsskizze des Entwurfsstands; in der umgesetzten Anwendung (bis v00.40.00) wirken Suche und Statusfilter view-lokal statt global in der Navigationsleiste, und hinzugekommen sind unter anderem die Tabellenansicht der Redaktionstafel, ein Markdown-Editor, Rücksprung-Schaltflächen sowie UND/ODER-Tag- und Mehrfach-Status-Filter.
Die Views folgen aus den Prozessen, nicht aus dem Datenmodell. Diese Erdung verhindert datenzentrierte Formulare, die alles anzeigen und nichts unterstützen. Alle Masken sitzen in einer gemeinsamen Navigationshülle – einem AppLayout mit Seitenschublade und einer Navigationsleiste, die eine globale Suche und einen Statusfilter aufnimmt (die querschnittlichen Prozesse P0019 und P0020). Zwei der sieben Briefe – die Redaktionstafel und die Verlaufsansicht – beschreiben bewusst Eigenbauten, weil Vaadin für sie kein fertiges Widget mitbringt; das ist offen benannt, damit der spätere Aufwand nicht überrascht.
Diese Maske ist der Einstieg in den Bestand: Ein Issue wird mit seinem Titel nach der Konvention „Blog – Bereich – Thema" erfasst, mit Tags versehen und in eine geordnete Folge von Teilen gegliedert. Gezeigt werden der Titel, die Tags als Abzeichen sowie die Teile mit ihrer Reihenfolge, ihrem aus dem Verlauf gelesenen aktuellen Arbeitszustand und der Anzahl ihrer Sprachfassungen. Ausgelöst werden das Anlegen des Issues, das Vergeben und Entfernen von Tags, das Hinzufügen eines Teils – der im Ausgangszustand BACKLOG beginnt – sowie das Umsortieren der Teile; letzteres betrifft ausschließlich die inhaltliche Reihenfolge und niemals die Statushistorie.
Bediente Prozesse: P0001, P0002, P0003, P0004, P0019.
Vaadin-Bausteine: SplitLayout mit einem Master-Grid der Issues links und der Detailsicht rechts; Tags als Lumo-Badge-Spans; die Teile als Grid mit aktivierter Zeilen-Umsortierung per Drag-and-Drop; ein TextField in der Navigationsleiste für die Suche.
Hier wird zu einem Teil je Sprache das Manuskript erfasst und gepflegt; zugleich ist die Maske der Ausgangspunkt, um aus einer Fassung eine Veröffentlichung zu planen. Gezeigt werden je Teil die Sprachfassungen mit Sprache, Manuskriptverweis und geplanter Zeichenzahl sowie darunter die bereits bestehenden Veröffentlichungen der jeweiligen Fassung. Eine eigene Statusdimension besitzt diese Ebene nicht; ausgelöst werden das Anlegen und Pflegen der Fassung sowie der Absprung in die Planung einer Veröffentlichung.
Bediente Prozesse: P0005, P0006; Absprung zu P0008 und P0012.
Vaadin-Bausteine: Tabs je Sprache oder ein FormLayout je Fassung; ein TextField für den Verweis, ein IntegerField für die geplante Zeichenzahl; darunter ein Grid der Veröffentlichungen mit Status-Abzeichen und einem Schaltknopf „Veröffentlichung planen".
Die Tafel führt den redaktionellen Fortschritt aller Teile auf einen Blick und erlaubt, nach dem Arbeitszustand zu filtern. Die Teile erscheinen als Karten, gruppiert in Spalten je Arbeitszustand von BACKLOG bis REVIEW und den Endzuständen; jede Karte trägt das Titelpräfix ihres Issues, den Teil, die Tags und die vorhandenen Sprachen. Das Verschieben einer Karte in eine andere Spalte schreibt den Arbeitszustand fort, wobei der Wechsel angehängt und der Ausgangswert aus dem aktuellen Zustand abgeleitet wird.
Bediente Prozesse: P0007, P0020 (redaktionelle Dimension).
Vaadin-Bausteine: kein Stock-Kanban – die Tafel entsteht aus einem HorizontalLayout von spaltenweisen VerticalLayouts mit Drag-and-Drop, die Karten als gestaltete Flächen; ersatzweise, falls das Ziehen zu aufwendig gerät, ein nach Arbeitszustand gruppiertes Grid.
Diese Maske trägt die Kernaussage des Artikels, indem sie die beiden orthogonalen Lebenszyklen einer Veröffentlichung nebeneinanderstellt. Ein Kopfbereich zeigt Fassung, Publikationsort, Datum, Verweis und den optionalen Auftraggeber; darunter liegen zwei gleichwertige Bereiche, links die Akquise mit ihren Zuständen von REQUESTED bis REVIEW, rechts die Herstellung von PLANNED über PREPARED bis PUBLISHED samt dem Rücksprung UPDATE_NEEDED. In jedem Bereich stehen der aktuelle Zustand prominent und der jüngste Verlaufseintrag darunter. Ausgelöst werden das Planen der Veröffentlichung unter Beachtung der Sprachregel, das Fortschreiben der Herstellung, das Anstoßen einer Aktualisierung, das Führen der Akquise, das Setzen der Erscheinungsdaten sowie das Anlegen einer Zweitverwertung, die eine neue Veröffentlichung erzeugt.
Bediente Prozesse: P0008, P0009, P0010, P0011, P0012, P0013.
Vaadin-Bausteine: ein HorizontalLayout mit zwei gleichwertigen Spalten – diese visuelle Zweiteilung ist selbst die Botschaft; Zustände als Badge; das Fortschreiten je Dimension über Schaltknöpfe oder ein Select; die Ortswahl als ComboBox, deren Einträge die Sprachregel filtert, sodass nur Orte erscheinen, deren unterstützte Sprachen die Sprache der Fassung einschließen; ein DatePicker für das Datum. Für den Blogartikel ist genau dieses zweispaltige Bild das überzeugendste Beweisstück der Entflechtung.
Die Ansicht zeigt eine der drei Statusketten lückenlos – als Prüfpfad und zugleich als sichtbaren Beleg der Orthogonalität. Gezeigt wird die nach der Folgenummer geordnete Reihe der Statuswechsel mit Folgenummer, Vor- und Folgezustand, Akteur und Zeitpunkt. Der Prozess ist rein lesend.
Bediente Prozesse: P0015.
Vaadin-Bausteine: kein Stock-Timeline-Widget – ein nach der Folgenummer geordnetes Grid oder eine VerticalLayout-Liste von Einträgen; einbettbar als Reiter in die Redaktionstafel (Arbeitszustand) und in die Veröffentlichungssicht (beide Dimensionen). Maßgeblich ist die Ordnung nach der Folgenummer, nicht nach dem Zeitstempel.
Hier werden die Orte mit Namen und unterstützten Sprachen gepflegt. Gezeigt wird eine Übersicht der Orte mit ihrer jeweiligen Sprachmenge. Ein Statusübergang entsteht nicht; das Entfernen einer Sprache verlangt jedoch Umsicht, damit bestehende Veröffentlichungen in dieser Sprache nicht in einen unzulässigen Zustand geraten – die Maske weist darauf hin.
Bediente Prozesse: P0014.
Vaadin-Bausteine: ein Grid der Orte mit einem Bearbeitungsdialog auf FormLayout-Basis; die Sprachen als CheckboxGroup oder MultiSelectComboBox.
Die Konsole steuert und beobachtet den idempotenten Import in seinen drei Schritten. Gezeigt werden der Zustand der lokalen Rohkopie mit dem Zeitpunkt der letzten Extraktion, eine Vorschau der rekonstruierten Ebenen, ein Protokoll des letzten Laufs mit den Zählungen für angelegt, aktualisiert und übersprungen sowie eine kleine Aufstellung, wie sich der konflierte Ursprungsstatus auf die drei Dimensionen verteilt. Die Extraktion legt die Rohdaten lokal ab, das Transformieren und Laden spielt sie idempotent ein, und der Wiederholungslauf erzeugt keine Dubletten.
Bediente Prozesse: P0016, P0017, P0018.
Vaadin-Bausteine: eine schlichte Seite mit Schaltknöpfen für Extrahieren, Transformieren-und-Laden sowie Wiederholen, einem Protokoll-Grid, einer ProgressBar und einer kleinen Tabelle für die Statusverteilung. Da der Import dem Wegwerfmodul nahesteht, bleibt die Maske bewusst schmucklos.
Die Seitenschublade führt den Themen-Arbeitsplatz als Einstieg, die Redaktionstafel, die Publikationsorte und die Import-Konsole. Vom Themen-Arbeitsplatz gelangt man in die Teile, von dort in den Sprachfassungs-Editor und weiter in die Veröffentlichungssicht. Die Verlaufsansicht ist überall dort eingebettet, wo eine Statusdimension geführt wird. Die globale Suche und der Statusfilter in der Navigationsleiste wirken auf den Themen-Arbeitsplatz und die Redaktionstafel.
Jeder Brief lässt sich als Prompt an Claude Design geben, um daraus ein Mockup zu erzeugen und es im Gespräch zu verfeinern; besonders die Veröffentlichungssicht lohnt den visuellen Entwurf, weil das zweispaltige Nebeneinander die Kernaussage sichtbar macht. Die Entwürfe sind als Absichts- und Anordnungsskizze zu behandeln und anschließend auf die genannten Vaadin-Bausteine abzubilden, nicht als pixelgenaue Vorgabe. Sobald Claude Design konkret zum Einsatz kommt, sind dessen aktuelle Ausgabe- und Übergabemöglichkeiten gegen die Dokumentation zu prüfen, um sich nicht auf einen veralteten Stand zu verlassen.