Kontext

Der View-Designer der React-Oberfläche (com.top_logic.layout.view.designer, Entwicklungsmenü → Designer) zeigt links den Entwurfsbaum der Sichtenkonfiguration und rechts das Konfigurationsformular des gewählten Knotens. Der Baum wird von DesignTreeBuilder aus der app.view.xml aufgebaut: Er folgt den Eigenschaften vom Typ Konfiguration (ITEM/LIST) mit @TreeProperty und löste bisher nur <view-ref view="…"> (ReferenceElement.Config) auf, indem die referenzierte Datei geladen und als Kindknoten eingehängt wird.

Fehlverhalten

Sichten, die nicht über <view-ref> eingebunden sind, sondern erst zur Laufzeit geöffnet werden, kamen im Entwurfsbaum nicht vor und konnten deshalb im Designer weder angewählt noch bearbeitet werden:

• Rahmen eines <tile-stack>: die Startsicht initial="…" und die Sichten, die <navigate-push view="…"> auf den Stapel legt (in der React-Demo z. B. projects/overview.view.xml → projects/milestones.view.xml → projects/milestone-list.view.xml). Im Baum endete projects.view.xml an einem Blatt "Tile-stack".
• Dialogsichten aus <open-dialog dialog-view="…"> und Fenster aus <open-view-window>.

Die Funktion Sicht auswählen des Designers (SelectViewCommand) half dabei nicht: Nur <view-ref> und die Seitenwurzel markierten ihre Darstellung mit der Quelldatei (data-view-source); ein Klick in einen Rahmen, Dialog oder ein Fenster wurde deshalb der umgebenden Sicht zugeordnet, und die Auswahl blieb z. B. auf projects.view.xml. Ein Klick auf eine deaktivierte Schaltfläche beendete die Auswahl gar nicht, weil der Browser für deaktivierte Elemente kein Klick-Ereignis auslöst.

Beobachtet in tl-demo-react: Projekte → Öffnen (P1) → Kachel "Meilensteine", dann Entwicklung → Designer → "Sicht auswählen" und Klick auf die Überschrift oder die Schaltfläche "Freigeben": die Auswahl blieb auf projects.view.xml; der Befehl "Freigeben" aus projects/milestone-list.view.xml war im Designer nicht erreichbar.

Ursachen im Baumaufbau: Die Verweise auf Sichtdateien waren einfache Zeichenketten-Eigenschaften, die der Baumaufbau nicht als Verweis erkennt; und sie stehen oft in Eigenschaften, die keine Baumeigenschaften waren (z. B. <on-activate> einer Tabelle, die Aktionsliste eines Befehls), so dass der Baum nicht bis zu ihnen hinabstieg.

Außerdem verwarf Verwerfen ungespeicherte Änderungen nicht zuverlässig: Der Designer bearbeitet die zwischengespeicherte Konfiguration einer Sichtdatei, und "Verwerfen" baute den Baum aus demselben Zwischenspeicher wieder auf.

Lösung

Sichtverweise

• Eigener Typ für Sichtverweise: Jede Konfigurationseigenschaft, die eine Sichtdatei benennt, hat den Werttyp com.top_logic.layout.view.ViewRef (mit ViewRefFormat) statt String: view von <view-ref>, initial eines <tile-stack>, view eines Rahmens (<frame>), view von <navigate-push>, <open-view-window> und <show-view>/`<show-views>`, dialog-view von <open-dialog>, layout des Detaildialogs einer Kompositionstabelle, default-view/`login-view` und die Einstiegspunkte von ViewConfig sowie view der klassischen Komponente ReactViewComponent (tl-chat-classic). Die XML-Schreibweise bleibt unverändert (Pfad relativ zu /WEB-INF/views/).
• Baumeigenschaften bis zu den Verweisen: Die Eigenschaften, über die solche Verweise erreicht werden, sind Baumeigenschaften (@TreeProperty), u. a. die Rahmen eines <tile-stack>, on-activate und drops von Tabellen, Bäumen und Kanban-Boards, die Aktionslisten von Befehlen und Aktionen (actions, <with-transaction>, <if>, <switch>, with-result, Upload), action von Schaltflächen, Menüeinträgen und Kacheln, on-submit eines <value-input>, Titel- und Kopfinhalte von Panel und Karte sowie entsprechende Eigenschaften in Diagramm-, WYSIWYG- und Datenlisten-Elementen. Sie erscheinen im Entwurfsbaum als Knoten statt als Felder im Formular. Der Test TestViewRefsAreTreeReachable stellt sicher, dass jeder Sichtverweis über Baumeigenschaften erreichbar bleibt.

Navigation im Designer

• Eine Sichtdatei auf einmal: Der Entwurfsbaum zeigt genau eine Sichtdatei. Jede Eigenschaft vom Typ ViewRef erscheint als Verweisknoten auf die benannte Datei (in einer nach der Eigenschaft benannten Gruppe, z. B. "Startsicht" und "Rahmen" eines <tile-stack>); ein Klick darauf öffnet diese Datei im Baum. Der Pfad bleibt im Formular des verweisenden Knotens bearbeitbar. Eine Datei, die sich nicht laden lässt, erscheint als Fehlerknoten.
• Brotkrumennavigation: Über dem Baum zeigt eine Brotkrumenleiste die Kette der Dateien von der app.view.xml bis zur geöffneten; ein Klick auf einen Eintrag kehrt dorthin zurück. Sie ist mit dem neuen allgemeinen Sichtelement <breadcrumb path="…" label="…"/> gebaut, das einen Pfad aus einem Kanal anzeigt und auch in Anwendungen verwendet werden kann.
• Entwurfssitzung: Der Designer hält den Baum jeder geöffneten Datei (DesignSession); ungespeicherte Änderungen und der Aufklappzustand bleiben beim Wechsel zwischen Dateien erhalten. Anwenden speichert die geänderten Sichten aller geöffneten Dateien, Verwerfen verwirft die Änderungen aller geöffneten Dateien (der Zwischenspeicher ihrer Konfigurationen wird dazu mit ViewLoader.discardCachedConfig geleert) und kehrt zur app.view.xml zurück.
• Sicht auswählen: Jede angezeigte Sicht markiert ihre Darstellung selbst mit ihrer Datei (ViewElement), gleich ob sie als Seite, über <view-ref>, als Rahmen, Dialog oder Fenster angezeigt wird. Die Auswahl wird beim Drücken der Maustaste abgeschlossen, so dass auch deaktivierte Schaltflächen auswählbar sind; das ausgewählte Element wird dabei nicht ausgelöst. Der Designer öffnet die Datei der angeklickten Sicht; die Brotkrumenleiste zeigt die kürzeste Verweiskette von der app.view.xml zu ihr.

Darstellung des Entwurfsbaums

• Gruppen mit einem Eintrag: Eine Eigenschaftsgruppe mit genau einem Eintrag wird mit diesem in einer Zeile angezeigt ("Bei Aktivierung › Navigate-push …"); die Zeile steht für den Eintrag, ihr Kontextmenü bietet zusätzlich das Hinzufügen zur Gruppe an.
• Symbole: Jede Zeile trägt ein Symbol und einen Stil nach Knotenart: Sichtdatei (fett), Element, Befehl/Aktion, sonstiger Konfigurationsteil, Eigenschaftsgruppe (gedämpft, kursiv), Verweis auf eine andere Datei (Linkfarbe), Fehler (Fehlerfarbe). Elemente und Befehle zeigen ein Symbol ihrer Art, das ihr Konfigurationstyp mit der neuen allgemeinen Annotation @TypeIcon("css:bi bi-…") angibt (com.top_logic.basic.config.annotation; geerbt entlang der Typhierarchie, der spezifischste Typ gewinnt; aufgelöst durch TypeIcons). Die Typliste von "Element hinzufügen…" zeigt dieselben Symbole.

Migration

Konfigurationsdateien (.view.xml, Anwendungskonfiguration) müssen nicht angepasst werden.

Java-Code, der die Getter der oben genannten Eigenschaften aufruft oder solche Konfigurationen programmatisch erzeugt, erhält bzw. übergibt jetzt einen com.top_logic.layout.view.ViewRef statt eines String, z. B. ViewConfig#getDefaultView(), ReferenceElement.Config#getView(), NavigatePushCommand.Config#getView(), OpenDialogCommand.Config#getDialogView():

• Den Pfad relativ zu /WEB-INF/views/ liefert getPath(), den vollständigen Ladepfad fullPath() (statt ViewLoader.VIEW_BASE_PATH + config.getView()).
• Beim Setzen: config.setView(new ViewRef("customers/detail.view.xml")).
• ChildGroup.view(...) und ChildGroup.EmbeddedView sowie der Konstruktor OpenDialogAction(ViewRef, …) arbeiten ebenfalls mit ViewRef.

In designer.view.xml heißt das Attribut design-tree der Designer-Befehle <save-design>, <revert-design> und <select-view> jetzt session; <design-tree> nimmt session statt input. Nur relevant für Anwendungen, die eine eigene Designer-Sicht überlagern.