Zum Hauptinhalt springen

Lists

ChatGPT öffnen
Info

Dieser Abschnitt beschreibt gemeinsame Funktionen aller Listenkomponenten und ist keine Klasse, die instanziiert oder direkt verwendet werden kann.

Es gibt drei Arten von Listen, die in Ihren Apps verwendet werden können: ListBox, ChoiceBox und ComboBox. Diese Komponenten zeigen alle eine Liste von Schlüssel-Wert-Elementen an und bieten Methoden zum Hinzufügen, Entfernen, Auswählen und Verwalten der Elemente innerhalb der Liste.

Diese Seite beschreibt die gemeinsamen Eigenschaften und das Verhalten aller Listenkomponenten, während spezifische Details zu jeder Komponente auf ihren jeweiligen Seiten behandelt werden.

Verwendung von ListItem​

Listenkomponenten bestehen aus ListItem-Objekten, die einzelne Elemente innerhalb einer Liste repräsentieren. Jedes ListItem ist mit einem eindeutigen Schlüssel und einem Anzeigetext verbunden. Wichtige Merkmale der ListItem-Klasse sind:

  • Ein ListItem kapselt einen eindeutigen Schlüssel Object und einen Text String, der innerhalb der Listenkomponente angezeigt wird.
  • Sie können ein ListItem erstellen, indem Sie einen Schlüssel und einen Text angeben oder nur den Text angeben, sodass ein zufällig generierter Schlüssel erzeugt wird.

Verwaltende ListItem-Objekte mit der API​

Die verschiedenen Listenkomponenten bieten mehrere Methoden zum Verwalten der Liste von Elementen und zur Beibehaltung eines konsistenten Zustands zwischen der Liste und dem Client. Durch die Verwendung dieser Methoden können Sie die Elemente innerhalb der Liste effektiv verwalten. Die API ermöglicht es Ihnen, mit der Liste zu interagieren und sie zu manipulieren, um den Anforderungen Ihrer App gerecht zu werden.

Hinzufügen von Elementen​

Info

Um die Leistung zu optimieren, ist es effizienter, eine Liste von ListItem-Objekten zuerst zu erstellen, statt bei jedem Aufruf der add()-Methode eine Nachricht vom Server an den Client auszulösen. Sobald Sie diese Liste haben, können Sie sie alle auf einmal mit der insert(int index, List<ListItem> items)-Methode hinzufügen. Dieser Ansatz reduziert die Kommunikation zwischen Server und Client und verbessert die Gesamteffizienz. Für detaillierte Richtlinien zu diesem und anderen Best Practices in der WebforJ-Architektur verweisen Sie bitte auf Client/Server Interaktion.

Elemente entfernen​

  • Ein Element entfernen:

  • Alle Elemente entfernen:

    • Sie können alle Elemente aus der Liste mit der removeAll()-Methode entfernen.

Elemente auswählen​

Alle Listenarten implementieren das SelectableList-Interface. Dieses Interface ermöglicht verschiedene Möglichkeiten zur Auswahl des aktuellen ListItem.

Mit einem bestimmten ListItem​

select(ListItem item) nimmt ein ListItem als Parameter zur Auswahl entgegen.

List demoList = new List();
ListItem demoItem = new ListItem("demo","Demo Item");
demoList.add(demoItem);
demoList.select(demoItem);

Mit einem bestimmten Schlüssel eines ListItem​

selectKey(Object key) akzeptiert einen Schlüssel zu einem ListItem als Parameter zur Auswahl.

List demoList = new List();
demoList.add("demo","Demo Item");
demoList.selectKey("demo");

Mit einem bestimmten Index eines ListItem​

selectIndex(int index) nimmt einen Index zu einem ListItem als Parameter zur Auswahl entgegen.

List demoList = new List();
demoList.add("demo","Demo Item");
demoList.selectKey(0);

Weitere Listenoperationen​

  • Zugriff auf und Aktualisierung von Elementen:

  • Abrufen von Informationen über die Liste:

    • Sie können die Größe der Liste mit der size()-Methode abrufen.
    • Um zu überprüfen, ob die Liste leer ist, verwenden Sie die isEmpty()-Methode.

Iterieren über Listen​

Alle Listenkomponenten implementieren das Java Iteratable Interface, das eine effiziente und intuitive Methode bietet, um durch den Inhalt einer Liste zu iterieren. Mit diesem Interface können Sie leicht jede ListItem durchlaufen, was es einfach macht, auf jedes Element zuzugreifen, es zu ändern oder Aktionen mit minimalem Aufwand auszuführen. Das Iterable-Interface ist ein Standardmuster der Java-Sprache, das sicherstellt, dass Ihr Code für jeden Java-Entwickler vertraut und wartbar ist.

Der folgende Code zeigt zwei einfache Möglichkeiten, um durch eine Liste zu iterieren:

list.forEach(item -> {
   item.setText("Modifiziert: " + item.getText());
});

for (ListItem item : list) {
   item.setText("Modifiziert2: " + item.getText());
}

Gemeinsame Listenattribute​

Label​

Alle Listenkomponenten können ein Label zugewiesen werden, das ein beschreibender Text oder Titel ist, der mit der Komponente verbunden ist. Labels bieten eine kurze Erklärung oder Aufforderung, um den Benutzern zu helfen, den Zweck oder die erwartete Auswahl für diese spezifische Liste zu verstehen. Neben ihrer Bedeutung für die Benutzerfreundlichkeit spielen Listenlabels auch eine entscheidende Rolle für die Barrierefreiheit, indem sie Screenreader und unterstützende Technologien in die Lage versetzen, genaue Informationen bereitzustellen und die Tastaturnavigation zu erleichtern.

Hilfetext​

Jede Listenkomponente kann Hilfetext unter der Liste mit der setHelperText()-Methode anzeigen. Dieser Hilfetext bietet zusätzlichen Kontext oder Erklärungen zu den verfügbaren Optionen und stellt sicher, dass die Benutzer die notwendigen Informationen haben, um informierte Entscheidungen zu treffen.

Horizontale Ausrichtung​

Alle Listenkomponenten implementieren das HasHorizontalAlignment-Interface, das Ihnen die Kontrolle darüber gibt, wie Text und Inhalt innerhalb der Komponente ausgerichtet sind.

Verwenden Sie die setHorizontalAlignment()-Methode, um die Ausrichtung festzulegen:

  • HorizontalAlignment.LEFT (Standard)
  • HorizontalAlignment.MIDDLE
  • HorizontalAlignment.RIGHT
ListBox<String> listBox = new ListBox<>();
listBox.setHorizontalAlignment(HorizontalAlignment.LEFT);

Um die aktuelle Ausrichtung abzurufen:

HorizontalAlignment alignment = listBox.getHorizontalAlignment();

Expanses​

Alle Listenkomponenten in webforJ implementieren ebenfalls das HasExpanse-Interface, sodass Sie die gesamte Größe und das visuelle Gewicht der Komponente anpassen können. Dies ist nützlich, um die Komponente an verschiedene UI-Kontexte wie Formulare, Dialoge, Seitenleisten usw. anzupassen.

Verwenden Sie die setExpanse()-Methode, um den Expansionsgrad festzulegen. Zu den Optionen gehören:

  • Expanse.NONE
  • Expanse.XSMALL
  • Expanse.SMALL
  • Expanse.MEDIUM (Standard)
  • Expanse.LARGE
  • Expanse.XLARGE
ListBox<String> listBox = new ListBox<>();
listBox.setExpanse(Expanse.LARGE);

Sie können die aktuelle Einstellung mit folgendem Befehl abrufen:

Expanse current = listBox.getExpanse();

Themen​

📄️ ChoiceBox

Das ChoiceBox-Komponente ist ein Benutzeroberflächenelement, das entwickelt wurde, um den Benutzern eine Liste von Optionen oder Auswahlmöglichkeiten zu präsentieren. Benutzer können eine einzelne Option aus dieser Liste auswählen, typischerweise durch Klicken auf das ChoiceBox, was das Anzeigen einer Dropdown-Liste mit verfügbaren Wahlmöglichkeiten auslöst. Die Benutzer können auch mit den Pfeiltasten auf das ChoiceBox zugreifen. Wenn ein Benutzer eine Auswahl trifft, wird die gewählte Option im ChoiceBox-Button angezeigt.

📄️ ComboBox

Das ComboBox-Komponente ist ein Benutzeroberflächenelement, das dafür entwickelt wurde, den Benutzern eine Liste von Optionen oder Auswahlmöglichkeiten sowie ein Feld für die Eingabe eigener benutzerdefinierter Werte bereitzustellen. Benutzer können eine einzelne Option aus dieser Liste auswählen, typischerweise durch Klicken auf das ComboBox, was die Anzeige einer Dropdown-Liste mit verfügbaren Auswahlmöglichkeiten auslöst, oder sie können einen benutzerdefinierten Wert eingeben. Benutzer können auch mit den Pfeiltasten mit dem ComboBox interagieren. Wenn ein Benutzer eine Auswahl trifft, wird die gewählte Option im ComboBox angezeigt.