enhancement
major
major
major
#29755
React-UI: Auswahl in Objektlisten (<object-list selection>) – Karten direkt anwählbar
Kontext
Eine <object-list> (z. B. als Raster von Karten) zeigt Objekte nur an; sie kennt keine Auswahl. Wer ein Element der Liste anwählen will, muss in jede Karte eine eigene Schaltfläche legen, die das Element in einen Kanal schreibt.
Beispiel: Demo-Anwendung tl-demo-react, Seite Demos → HTML-Inhalte, Bereich Exposés (com.top_logic.demo.react/src/main/webapp/WEB-INF/views/demo/html-demo.view.xml). Jede Karte trug unter der Vorschau einen Link Anzeigen (<button appearance="link"> mit <write-channel name="expose"/>). Erwartet wird, dass die Karte selbst anwählbar ist und die gewählte Karte als ausgewählt erkennbar ist.
Verhalten
<object-list> erhält eine Auswahl über einen Kanal, wie <table selection="...">, <kanban-board selection="..."> und <calendar selection="...">:
- Ein Klick auf ein Element (die ganze Fläche des Elements, z. B. die Karte) schreibt das Element in den Auswahlkanal.
- Mit selection-mode="multi" (wie beim Kanban-Board) wählt Strg/Cmd-Klick ein Element zusätzlich an oder ab, Umschalt-Klick einen Bereich, langes Drücken auf einem Touchscreen schaltet um; der Kanal hält dann bei mehreren gewählten Elementen deren Menge. Bei Einzelauswahl gibt Strg/Cmd-Klick auf das gewählte Element die Auswahl auf.
- Tastatur: Pfeiltasten bewegen den Fokus zwischen den Elementen (im Raster hoch/runter zeilenweise), Pos1/Ende springen an Anfang/Ende, Enter/Leertaste wählt. Nur ein Element liegt in der Tab-Reihenfolge.
- Das gewählte Element ist sichtbar markiert (Ring in der Interaktionsfarbe, leichte Tönung), ein Element unter dem Mauszeiger hebt sich ab; die Liste wird als Listbox angesagt (role="listbox" / role="option", aria-selected).
- Ändert sich der Kanal von außen, folgt die Markierung.
- Ein in einem Element liegendes eigenes Bedienelement (Schaltfläche, Link) behält seinen Klick und löst keine Auswahl aus.
- Ohne selection bleibt die Liste wie bisher eine reine Anzeige.
Die Demo-Seite verwendet <object-list selection="expose"> ohne Anzeigen-Schaltfläche; der Kanal expose startet mit dem ersten Exposé, sodass die angezeigte Karte auch die markierte ist.
Technische Hinweise
- ObjectListElement (com.top_logic.layout.view.list) hat die Konfigurationseigenschaften selection (Kanalreferenz) und selection-mode.
- Die Auswahllogik des Kanban-Boards (stabile Schlüssel je Objekt, Auswahl per Klick mit Umschalten/Bereich/Anker, Einzel-/Mehrfachauswahl, Aufzeichnung des Auswahlkommandos für Skripttests über die fachliche Identität) liegt im wiederverwendbaren ItemSelection (com.top_logic.layout.react.control.selection); das Kanban-Board baut darauf auf.
- Die Layout-Container (ReactLayoutControl: ReactGridControl, ReactStackControl, ReactColumnsControl) werden über setItems(List<Item>) (Inhalt zusammen mit seinem Objekt) auswählbar: Zustand selectable, itemKeys, selected, multiSelect, Kommando selectItem (aufgezeichnet als selectItemByKey). Der Client rendert die Elemente aller drei Container über einen gemeinsamen Baustein (items.tsx, nun auch für TLColumns, das damit auch itemClass beachtet); die Tastaturbedienung liefert der wiederverwendbare Hook useRovingFocus.
- Kanban-Board und Layout-Container implementieren die Schnittstelle ItemSelector; die Kanalanbindung ist für beide die ItemSelectionBinding (vormals KanbanSelectionBinding, Unterklasse von SelectionChannelBinding).
- Die Artikel view-layer/layout und view-layer/channels beschreiben die Auswahl der <object-list>.