Combobox

Benutzeroberflächenelement
(Weitergeleitet von Combo-Box)

Eine Combobox, Combo-Box (von englisch combo box) oder Kombinationsfeld ist ein Steuerelement in einer grafischen Benutzeroberfläche (GUI), über das der Benutzer eine Auswahl aus vorgegebenen Möglichkeiten treffen oder alternativ eigene Eingaben tätigen kann. Der Name Combobox leitet sich davon ab, dass sie als Kombination aus einem Textfeld und einem Listenfeld (Auswahlliste, Listbox, Drop-Down-Menü) betrachtet werden kann. Bei einer Combobox sind daher optional Tastatureingaben in das Textfeld der Combobox möglich oder aber die Auswahl/Änderung eines der vorgegebenen Listeneinträge. Comboboxen sind nicht zu verwechseln mit einer Selectbox oder einer Dropdown-Liste – diese erlauben keine freien Benutzereingaben, die Komponente des Textfeldes fehlt hier also.

Funktionsweise und Gestaltung

Bearbeiten

Welche Einträge – als Vorschläge zur Auswahl durch den Anwender – zu welchem Zeitpunkt in der Liste der Combobox angezeigt werden, hängt dabei von dem jeweiligen Anwendungsfall ab. Von den Details der Implementierung der Combobox in ein Computerprogramm hängt es auch ab, ob das sichtbare Textfeld zunächst leer ist oder ob ein voreingestellter Wert angezeigt wird. Auch die Liste selbst kann zunächst leer sein, und sich erst später mit den im Textfeld eingegebenen Zahlen oder Texten autovervollständigen.

Bei der mit dem Textfeld kombinierten Listbox handelt es sich meistens um eine platzsparende, einzeilige sogenannte Drop-down Listbox, die sich erst beim Drücken des zugehörigen Buttons zeigt. Genau genommen spricht man dann von einer Drop-Down Combobox.

 
Verbund aus Kombinationsfeld und Schieberegler.

Diverse Implementierungen erlauben Programmierern die Möglichkeit, kleine Symbole neben den jeweiligen Listeneinträgen anzuzeigen. Allgemein muss es sich bei den Listeneinträgen nicht um textbasierte Inhalte handeln. In diversen Office-Paketen können auch Farben, Schraffierungen, Linienarten oder Linienstärken über eine Combobox ausgewählt werden. Das Konzept dahinter nennt man „Owner-Draw“.[1]

Darüber hinaus ist es auch nicht zwingend so, dass das Drop-Down-Fenster eine Listbox sein muss. In Adobe Photoshop und Adobe InDesign werden beispielsweise an einigen Stellen Schieberegler angezeigt, wenn der Benutzer die Combobox ausklappt.

Anwendungsbeispiele

Bearbeiten
 
Eine Combobox im Webbrowser Mozilla Firefox
Datenbankanwendungen
Für die Verwaltung einer Adressdatenbank bietet sich beispielsweise eine Combobox für die Anrede an. Die vorgegebenen Werte lauten 'Herr, Frau, Firma', zusätzlich hat der Bearbeiter aber auch die Möglichkeit, eigens definierte Anreden einzugeben (etwa Herr Dr.).
Adressleiste im Webbrowser
Ein typisches Beispiel für eine Combobox ist die Adressleiste eines Webbrowsers. Die Internetadresse kann in das Textfeld eingegeben werden, bereits besuchte Seiten finden in der DropDown-Liste Platz und können vom Benutzer mit wenig Aufwand wieder aufgerufen werden.
Webanwendungen
Der Benutzer tippt etwas in ein Textfeld ein, worauf sich eine Auswahlliste mit vorgeschlagenen Begriffen öffnet, aus denen der Benutzer wählen kann.
Beziehungen zwischen Datenobjekten
Wenn etwa in einer Erfassungsmaske für Aufträge u. a. einzugeben ist, welcher Sachbearbeiter für die Bearbeitung zuständig ist, wird häufig eine Combobox verwendet. Die 'aufgeklappte' Box zeigt zur Eingabeauswahl die Namen möglicher Sachbearbeiter (aus einem entsprechenden Datenbestand) an. Nach der Auswahl (und wenn die Auftragsdaten nur angezeigt werden) ist nur der Name des gewählten Sachbearbeiters sichtbar; dessen Kennung ist im Datensatz des jeweiligen Auftrags gespeichert.

Beispiele

Bearbeiten

Im Gegensatz zu HTML 4 bietet HTML5 die Möglichkeit, eine Auswahlliste zu definieren:

<input name="anrede" list="anrede" />
<datalist id="anrede">
 <option value="Herr"></option>
 <option value="Frau"></option>
</datalist>

In der Programmiersprache Java unter Swing ist JComboBox die Combobox GUI-Komponente.

Ist die JComboBox als nicht editierbar programmiert (setEditable(false)), verhält sie sich wie eine Drop-down Listbox, wie auch die AWT-Komponente Choice. Sun bietet in Swing die mehrzeilige Listbox JList an – jedoch nicht als eigenständige Drop-down Listbox, sondern es wird eine „kastrierte“ JComboBox benutzt.

MS Access

Bearbeiten
 
Kombinationsfeld in MS Access

In der grafischen Entwicklungsumgebung von MS Access wird die Combobox im Erfassungsformular (im Beispiel für 'Aufträge') als Elementtyp 'Kombinationsfeld' angelegt und so wie in der nebenstehenden Grafik gezeigt angewendet. Der Entwickler spezifiziert in diesem Fall (bei Datenanzeige aus einem Datenbestand) für das Kombinationsfeld u. a. folgende Eigenschaften: Breite der Box; Anzahl Zeilen der Box; Datenquelle für die anzuzeigenden Personen; Name der ID im Datenbestand PERSON; Name des Fremdschlüssels im Datenbestand AUFTRAG u. v. a.

Das folgende Beispiel in der Programmiersprache C# zeigt die Implementierung eines Hauptfensters mit einer Combobox und einem Textfeld und die Verknüpfung des Auswahlereignis mit einer Ereignisbehandlungsroutine (siehe Ereignis).[2]

using System.Windows.Forms;

public class MainForm : System.Windows.Forms.Form
{
	// Konstruktor des MainForms.
    public MainForm() : base()
    {
        InitializeComboBox();
        InitializeTextBox();
    }

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

    internal System.Windows.Forms.TextBox personTextBox;

    // Initialisiert das Textfeld.
    private void InitializeTextBox()
    {
		personTextBox = new System.Windows.Forms.TextBox();
		personTextBox.ScrollBars = ScrollBars.Vertical;
		personTextBox.Location = new System.Drawing.Point(50, 25);
		personTextBox.Size = new System.Drawing.Size(200, 100);
		personTextBox.Text = "Name und Anzahl der Verkommen:";
		personTextBox.Multiline = true; // Legt fest, dass die Textfeld mehrere Zeilen haben kann und Zeilenumbrüche ermöglicht
		Controls.Add(personTextBox);
    }

    internal System.Windows.Forms.ComboBox personsComboBox;

    // Initialisiert die Combobox und fügt ein Array vom Typ string hinzu.
    private void InitializeComboBox()
    {
        personsComboBox = new System.Windows.Forms.ComboBox();
        string[] personen = new string[]{"Hamilton, David", "Hensien, Kari",
                "Hammond, Maria", "Harris, Keith", "Henshaw, Jeff D.",
                "Hanson, Mark", "Harnpadoungsataya, Sariya",
                "Harrington, Mark", "Harris, Keith", "Hartwig, Doris",
                "Harui, Roger", "Hassall, Mark", "Hasselberg, Jonas",
                "Harnpadoungsataya, Sariya", "Henshaw, Jeff D.",
                "Henshaw, Jeff D.", "Hensien, Kari", "Harris, Keith",
                "Henshaw, Jeff D.", "Hensien, Kari", "Hasselberg, Jonas",
                "Harrington, Mark", "Hedlund, Magnus", "Hay, Jeff",
                "Heidepriem, Brandon D."};

        personsComboBox.Items.AddRange(personen);
        personsComboBox.Location = new System.Drawing.Point(50, 150);
        personsComboBox.DropDownStyle = ComboBoxStyle.DropDownList;
        personsComboBox.Size = new System.Drawing.Size(200, 100);
        personsComboBox.TabIndex = 0;
        Controls.Add(personsComboBox);

        // Verknüpft die Ereignisbehandlungsmethode mit dem Auswahlereignis SelectedIndexChanged der Combobox.
        personsComboBox.SelectedIndexChanged += new System.EventHandler(personsComboBox_SelectedIndexChanged);
    }

	// Diese Methode wird aufgerufen, wenn der Benutzer die Auswahl der Combobox ändert.
	// Sie sucht alle Vorkommen des Namens der Person im Array und gibt den Namen und die Anzahl der Vorkommen im Textfeld aus.
    private void personsComboBox_SelectedIndexChanged(object sender, System.EventArgs e)
    {
        string selectedName = (string) personsComboBox.SelectedItem;

        int numberOfOccurences = 0;
        int index = -1;

        // Ruft die Methode FindStringExact auf, um das erste Vorkommen in der Liste zu finden.
        index = personsComboBox.FindStringExact(selectedName);

		// Entfernt den gefundenen Namen und erhöht die Anzahl der gefundenen Namen.
		// Ruft dann die Methode FindStringExact erneut auf und übergibt den Index des aktuell gefundenen Elements, damit die Suche dort beginnt statt am Anfang der Liste.
		while (index != -1)
        {
            personsComboBox.Items.RemoveAt(index);
            numberOfOccurences += 1;
            index = personsComboBox.FindStringExact(selectedName, index);
        }
        // Update the text in personTextBox.
        personTextBox.Text = personTextBox.Text + "\r\n" + selectedName + ": " + numberOfOccurences;
    }
}

Siehe auch

Bearbeiten

Einzelnachweise

Bearbeiten
  1. Jim Walker et al.: Microsoft Docs > How to Create an Owner-Drawn Combo Box. Microsoft, 21. August 2020, abgerufen am 5. Mai 2022 (englisch).
  2. Microsoft Docs > ComboBox.SelectedIndexChanged Event. Microsoft, abgerufen am 5. Mai 2022 (englisch).