Listenfeld

Ein Listenfeld (englisch listbox, auch Auswahlliste) ist ein Steuerelement (control, component) einer grafischen Benutzeroberfläche (GUI). Es dient zur Darstellung von durch den Benutzer auswählbaren Einträgen in Listenform. Bei den Einträgen handelt es sich in der Regel um Daten textueller Natur, aber auch die Darstellung von Piktogrammen oder Kombinationen aus Text und Bild sind möglich.

Es wird zwischen verschiedenen Arten von Listenfeldern unterschieden:

• Das normale Listenfeld ist mehrzeilig. Da sich in der Liste häufig mehr Einträge befinden, als das Feld Zeilen besitzt, dient eine vertikale Bildlaufleiste (scrollbar) zum Blättern (scrollen) innerhalb der Liste.
• Neben dem permanent sichtbaren mehrzeiligen Listenfeld existiert noch die platzsparende einzeilige Drop-Down Listbox (Dropdown-Listenfeld, Klappliste). Bei ihr zeigt sich die vollständige Liste erst beim Drücken der zugehörigen Schaltfläche in Form eines Menüs (Popup-Menü, Kontextmenü), das die Auswahl eines Eintrages gestattet.
• Die Kombination aus Listenfeld und einem Textfeld (Textfield oder Textbox) zur direkten Ein- und Ausgabe bezeichnet man als Kombinationsfeld (Combobox).
• Erweiterte Listenfelder mit Symbolen, Text und/oder mehreren Spalten, wie sie in Dateimanagern häufig zu finden sind, werden auch als Listenansicht (Listview) bezeichnet.^[1]

Welche Einträge – als Vorschläge zur Auswahl durch den Anwender – zu welchem Zeitpunkt im Listenfeld angezeigt werden, hängt dabei von der Programmierung der jeweiligen Anwendung ab. Von den Details der Implementierung des Listenfeldes in einem Computerprogramm hängt es auch ab, ob nur ein oder auch mehrere Einträge selektiert werden können. Bei einzeiligen Listenfeldern kann in der Regel nur ein Eintrag selektiert werden. In vielen Komponentenframeworks können die Einträge von mehrzeiligen Listenfeldern jeweils mit einem Kontrollkästchen versehen werden (CheckedListBox), um die Auswahl mehrerer Einträge zu erleichtern.^[2][3]

In der Programmiersprache Java gibt es abhängig vom verwendeten Komponentenframework unterschiedliche Klassen für Listenfelder.

In AWT wird das mehrzeilige Listenfeld durch die Klasse java.awt.List und das einzeilige Drop-Down-Listenfeld durch die Klasse java.awt.Choice repräsentiert.

In Swing wird das mehrzeilige Listenfeld durch die Klasse javax.swing.JList und das einzeilige Drop-Down-Listenfeld durch die Klasse javax.swing.JComboBox repräsentiert.^[4][5] Da es sich hierbei um ein Kombinationsfeld handelt, muss definiert werden, ob es nur zur Auswahl dienen soll oder auch Eingaben über das integrierte Textfeld annehmen soll ( setEditable(true) ).

Unter JavaFX können Listenfelder auf drei Arten realisiert werden:

• Einzeilige Drop-Down-Listenfelder werden als Kombinationsfeld über die Klasse ComboBox repräsentiert.^[6] Ähnlich wie bei Swing kann die textbasierte Änderung über die Methode setEditable ermöglicht oder verhindert werden.
• Mehrzeilige Listenfelder mit einer Spalte werden durch die Klasse ListView repräsentiert.^[7]
• Listen mit mehreren Spalten können als Rasteransicht mit der Klasse TableView realisiert werden.^[8]

In der Auszeichnungssprache HTML gibt es zwei Arten von Auswahllisten.

Einfache Formularfelder werden bereits seit der ersten Version von HTML unterstützt. Dazu zählen auch einzeilige Drop-Down-Listen und mehrzeilige Listenfelder.^[9] Beide Repräsentationen werden durch das <select>-Element erzeugt:

• Fehlt das size-Attribut oder hat es einen Wert kleiner als 2, so wird ein einzeiliges Drop-Down-Listenfeld dargestellt:

<select size = "1">

• Wenn das size-Attribut den Wert 2 oder höher besitzt, wird ein mehrzeiliges Listenfeld dargestellt:

<select size = "2">
Standardmäßig kann in mehrzeiligen Listenfeldern immer nur ein Wert ausgewählt werden. Besitzt das <select>-Element allerdings das multiple-Attribut, so können beliebig viele Werte aus der Liste ausgewählt werden.

Die einzelnen Listeneinträge werden mit <option>-Elementen erzeugt. Ab HTML4 können diese mit Hilfe von <optgroup>-Elementen in Gruppen eingeteilt werden.^[10]

Das nachfolgende Beispiel zeigt, wie man in HTML ein einzeiliges Listenfeld mit Studiengängen erstellen kann.

<select name="Studiengang">
	<optgroup label="Sozialwissenschaften">
		<option>Pädagogik</option>
		<option>Psychologie</option>
	</optgroup>
	<optgroup label="Naturwissenschaften">
		<option>Biologie</option>
		<option selected>Chemie</option>
		<option>Physik</option>
	</optgroup>
</select>

In HTML5 können Textfelder mit einer Datenliste kombiniert werden, um eine Autovervollständigung zu realisieren.^[11] Jedes <input>-Element vom Typ „email“, „number“, „search“, „tel“, „text“ oder „url“ kann mit Hilfe eines <datalist>-Elements mit einer Drop-Down-Liste versehen werden. Wie beim <select>-Element werden die Listeneinträge mit <option>-Elementen erzeugt. Bei großen Datenbeständen werden diese i. d. R. bei Bedarf dynamisch via Ajax und JSON erzeugt.

Das VBA-Beispiel überträgt die Daten aus einem Excel-Tabellenblatt in ein Listenfeld (Listbox). Es beschränkt sich auf drei Spalten, kann aber erweitert werden.

• Lade eine Excel-Datei (beispielsweise Adressen) oder erstelle eine solche Datei. Speichere die Datei unter dem Namen „mappe.xls“.
• Erstelle eine UserForm mit der Bezeichnung „UserForm1“ und ein Listenfeld mit der Bezeichnung „ListBox1“.
• Kopiere den folgenden Userform-Code:

Private Sub UserForm_Initialize()
	'Listbox füllen
	ListBox1.ColumnCount = 3
	ListBox1.BoundColumn = 0
	ListBox1.RowSource = "mappe.xls!A1:C3"
End Sub

Das folgende, ein wenig umfangreichere Beispiel in der Programmiersprache C# zeigt die Implementierung von 2 Listenfeldern. In das 1. Listenfeld werden Quadratzahlen eingetragen, in das 2. Listenfeld Dreieckszahlen. Das Auswahlereignis der Listenfelder wird jeweils mit einer Ereignisbehandlungsroutine verknüpft (siehe Ereignis). Wenn sich die Auswahl in den Listenfeldern ändert, wird die ausgewählte Quadratzahl mit der ausgewählten Dreieckszahl verglichen und eine entsprechende Meldung in einem Textfeld ausgegeben.^[12]

// Konstruktor des Hauptfensters.
public MainForm() : base()
{
	InitializeListBoxesAndTextBox();
}

// Startet die Anwendung und erzeugt das Hauptfenster durch Aufruf des Konstruktors.
public static void Main()
{
	Application.Run(new Main());
}

private System.Windows.Forms.ListBox squareNumbersListBox;
private System.Windows.Forms.ListBox triangularNumbersListBox;

private System.Windows.Forms.TextBox comparisonTextBox;

// Initialisiert die Listenfelder und das Textfeld.
private void InitializeListBoxesAndTextBox()
{
	// Erzeugt das Listenfeld für die Quadratzahlen.
	squareNumbersListBox = new ListBox(); // Aufruf des Standard Konstruktors für das Listenfeld
	squareNumbersListBox.Location = new System.Drawing.Point(50, 50); // Setzt die Position des Listenfelds
	squareNumbersListBox.Size = new System.Drawing.Size(200, 50); // Setzt die Größe des Listenfelds
	squareNumbersListBox.MultiColumn = false; // Legt fest, dass das Listenfeld nur eine Spalte haben kann.
	squareNumbersListBox.SelectionMode = SelectionMode.One; // Legt fest, dass nur ein Element des Listenfelds gleichzeitig ausgewählt werden kann.
	Controls.Add(squareNumbersListBox); // Fügt das Listenfeld dem Hauptfenster hinzu.

	// Erzeugt das Listenfeld für die Dreieckszahlen.
	triangularNumbersListBox = new ListBox();
	triangularNumbersListBox.Location = new System.Drawing.Point(50, 100);
	triangularNumbersListBox.Size = new System.Drawing.Size(200, 50);
	triangularNumbersListBox.MultiColumn = false;
	triangularNumbersListBox.SelectionMode = SelectionMode.One;
	Controls.Add(triangularNumbersListBox);

	// Erzeugt das Textfeld für die Ausgabemeldung.
	comparisonTextBox = new TextBox();
	comparisonTextBox.Location = new System.Drawing.Point(50, 150);
	comparisonTextBox.Size = new System.Drawing.Size(200, 50);
	comparisonTextBox.Multiline = false; // Legt fest, dass das Textfeld nur eine Zeile haben kann und keine Zeilenumbrüche ermöglicht.
	Controls.Add(comparisonTextBox);

	// Verhindert, dass Änderungen des 1. Listenfelds angezeigt werden.
	squareNumbersListBox.BeginUpdate();
	// Diese for-Schleife trägt die Quadratzahlen -10², -9², ..., 9², 10² in das 1. Listenfeld ein.
	for (int i = -10; i <= 10; i++)
	{
		int squareNumber = i * i;
		squareNumbersListBox.Items.Add(squareNumber.ToString());
	}
	// Ermöglicht, dass Änderungen und die hinzugefügten Quadratzahlen des 1. Listenfelds angezeigt werden.
	squareNumbersListBox.EndUpdate();

	triangularNumbersListBox.BeginUpdate();
	// Diese for-Schleife trägt die Dreieckszahlen -10 * -9 / 2, -9 * -8 / 2, ..., 9 * 10 / 2, 10 * 11 / 2 in das 2. Listenfeld ein.
	for (int i = -10; i <= 10; i++)
	{
		int triangularNumber = (i * (i + 1)) / 2;
		triangularNumbersListBox.Items.Add(triangularNumber.ToString());
	}
	triangularNumbersListBox.EndUpdate();

	// Verknüpft die Ereignisbehandlungsmethoden jeweils mit dem Auswahlereignis SelectedIndexChanged der Listenfelder.
	squareNumbersListBox.SelectedIndexChanged += squareNumbersListBox_SelectedIndexChanged;
	triangularNumbersListBox.SelectedIndexChanged += triangularNumbersListBox_SelectedIndexChanged;
}

// Diese Methode wird aufgerufen, wenn der Benutzer die Auswahl des Listenfelds mit den Quadratzahlen ändert.
private void squareNumbersListBox_SelectedIndexChanged(object sender, System.EventArgs e)
{
	setComparisonMessage(); // Methodenaufruf
}

// Diese Methode wird aufgerufen, wenn der Benutzer die Auswahl des Listenfelds mit den Dreieckszahlen ändert.
private void triangularNumbersListBox_SelectedIndexChanged(object sender, System.EventArgs e)
{
	setComparisonMessage(); // Methodenaufruf
}

// Vergleicht, ob die Quadratzahl kleiner, größer oder gleich der Dreieckszahl ist und gibt eine entsprechende Meldung im Textfeld aus.
private void setComparisonMessage()
{
	// Prüft, ob in beiden Listenfeldern jeweils ein Element ausgewählt ist.
	if (squareNumbersListBox.SelectedIndex != -1 && triangularNumbersListBox.SelectedIndex != -1)
	{
		int squareNumber = int.Parse(squareNumbersListBox.SelectedItem.ToString()); // Typumwandlung
		int triangularNumber = int.Parse(triangularNumbersListBox.SelectedItem.ToString()); // Typumwandlung
		if (squareNumber < triangularNumber)
		{
			comparisonTextBox.Text = "Die Quadratzahl " + squareNumber + " ist kleiner als die Dreieckszahl " + triangularNumber + ".";
		}
		if (squareNumber > triangularNumber)
		{
			comparisonTextBox.Text = "Die Quadratzahl " + squareNumber + " ist größer als die Dreieckszahl " + triangularNumber + ".";
		}
		if (squareNumber == triangularNumber)
		{
			comparisonTextBox.Text = "Die Quadratzahl " + squareNumber + " ist gleich der Dreieckszahl " + triangularNumber + ".";
		}
	}
}

1. ↑ Shawn Hickey et al.: Listenansichten. In: learn.microsoft.com. 21. September 2022, abgerufen am 25. Januar 2023. 
2. ↑ CheckedListBox Class. In: learn.microsoft.com. Abgerufen am 23. Januar 2023 (englisch). 
3. ↑ Juned Mughal: Create ListView with Multiple CheckBox in Android Example Tutorial. In: android-examples.com. 4. Juli 2016, archiviert vom Original am 12. Mai 2023; abgerufen am 23. Januar 2023 (englisch). 
4. ↑ How to Use Lists. In: docs.oracle.com. Abgerufen am 6. Februar 2023 (englisch). 
5. ↑ How to Use Combo Boxes. In: docs.oracle.com. Abgerufen am 6. Februar 2023 (englisch). 
6. ↑ Alla Redko: Using JavaFX UI Controls: Combo Box. In: docs.oracle.com. September 2013, abgerufen am 6. Februar 2023 (englisch). 
7. ↑ Alla Redko: Using JavaFX UI Controls: List View. In: docs.oracle.com. September 2013, abgerufen am 6. Februar 2023 (englisch). 
8. ↑ Alla Redko: Using JavaFX UI Controls: Table View. In: docs.oracle.com. September 2013, abgerufen am 6. Februar 2023 (englisch). 
9. ↑ Fill-out Forms and Input fields. HTML+. In: w3.org. 8. November 1993, abgerufen am 23. Januar 2023 (englisch). 
10. ↑ The SELECT, OPTGROUP, and OPTION elements. HTML 4.01 Specification. In: w3.org. 24. Dezember 1999, abgerufen am 23. Januar 2023 (englisch). 
11. ↑ The datalist element. HTML Living Standard. In: html.spec.whatwg.org. 20. Januar 2023, abgerufen am 23. Januar 2023 (englisch). 
12. ↑ ListBox Class. In: learn.microsoft.com. Abgerufen am 23. Januar 2023 (englisch).