Steuerelement

Ein Steuerelement, Bedienelement oder englisch Widget genannt, ist ein Interaktionselement in einer grafischen Benutzeroberfläche (GUI), beispielsweise eine Schaltfläche oder eine Bildlaufleiste.

gtk3-demo, ein Programm um die in GTK+ version 3 vorhandenen Steuerelemente zu veranschaulichen.

Prinzip

Steuerelemente sind grundsätzlich kleine Programme oder Funktionen/Subroutinen und in einer Programmiersprache wie z. B. C++ geschrieben. Es braucht ein Programm zur Bildsynthese, umgangssprachlich Renderingengine genannt, um sie als Grafik auf dem Bildschirm auszugeben.

Eine grafische Oberfläche besteht aus vielen Einzelelementen, die üblicherweise mit der Maus bedient werden.

Steuerelemente sind im Programm mit Funktionen verknüpft, die ausgeführt werden, sobald das Element etwa durch Mausklick aktiviert wird. Beispielsweise drückt der Benutzer auf einen „Speichern“-Knopf, wodurch eine entsprechende Funktion aufgerufen wird. Diese kann z. B. einen neuen Dialog präsentieren, der eine weitere Eingabe (Dateinamen, Pfad) verlangt. Diese Eingabe wird dann einer anderen Funktion mitgeteilt.

Steuerelemente werden in der Regel durch ein GUI-Toolkit zur Verfügung gestellt. Je nach GUI-Toolkit gibt es nur einfache Steuerelemente, aus denen sich der Programmierer seine eigenen Dialoge zusammenbauen muss, oder komplexere Elemente für häufig benutzte Aufgaben, etwa einen fertigen Dialog zum Speichern einer Datei, in dem die Baumstruktur des Dateisystems usw. von dem Toolkit oder vom Betriebssystem zur Verfügung gestellt wird.

Viele GUI-Toolkits erlauben es dem Programmierer, mehrere Steuerelemente zu einem komplexen, benutzerdefinierten Steuerelement (englisch Custom Control) zusammenzufassen.

Zeichenbasierte Oberflächen basieren ebenfalls auf Steuerelementen, die sie mit Rahmenzeichen und Blockelementen darstellen. Auch solche Software lässt sich häufig mit der Maus bedienen. Moderne Beispiele sind htop und mc, die mit dem Toolkit ncurses entwickelt wurden.

Gebräuchliche Steuerelemente

Jedes Steuerelement hat verschiedene Eigenschaften, sowohl im Verhalten als auch im Aussehen. Gegebenenfalls können Steuerelemente kombiniert und verschachtelt werden. Eventuelle alternative Benennungen und Schreibweisen finden sich in den jeweiligen Artikeln.

• Formular: Das meist unsichtbar im Hintergrund eines Fensters liegende Steuerelement, das alle anderen Steuerelemente enthält
• Symbol, Icon: Ein grafisches Symbol, meist als Repräsentant einer Datei oder eines Fensters oder des dazugehörigen Programms.
• Symbolleiste, Werkzeugleiste: Ein Bereich mit mehreren, meist bildhaften Schaltflächen (Icons) für Programmfunktionen. Kann ein Menü ergänzen oder auch ganz ersetzen.
• Menü: Ein Menü ist eine Auswahlliste, die per Klick eingeblendet wird.
• Menüleiste: Eine Menüleiste fasst (horizontal) mehrere Menüs zusammen; sie ist meist nur einmal in einem Programm oder Fenster vorhanden und kann auch außerhalb des Programmfensters platziert sein, z. B. am oberen Bildschirmrand bei macOS und einigen Linux-Oberflächen.
• Textfeld: Ein- oder mehrzeiliges Feld zur Ein- oder Ausgabe von Zahlen oder Text.
• Schaltfläche, Button: Eine Fläche zum Klicken, um damit eine Aktion auszulösen.
• Auswahlkästchen, Checkbox: Kann üblicherweise gesetzt oder nicht gesetzt sein, manchmal auch ausgegraut werden.
• Optionsfeld, Radiobutton: Zur Auswahl einer Möglichkeit aus einer Gruppe von zwei oder mehr.
• Umschalter, Toggle Switch: Äquivalent zu physischen Kippschaltern. Wird häufig in Apps für mobile Endgeräte verwendet.
• Listenfeld, Listbox: Zur zeilenweisen Auswahl von Texten und anderen Objekten. Mehrzeilig oft mit vertikaler Bildlaufleiste.
• Kombinationsfeld, Combobox: Kombination aus Textfeld und Listenfeld, wobei das Listenfeld unterhalb des Textfeldes angezeigt wird oder ausgeklappt werden kann.
• Dropdown-Listenfeld, Dropdown-Liste: Kombination aus schreibgeschütztem Textfeld und ausklappbarer Auswahlliste, so dass das Textfeld nur einen der Einträge der Liste annehmen kann.
• Beschriftungsfeld, Label: Für einfachen Text; beschriftet andere Felder.
• Baum, Baumansicht: Eine mit Knoten gegliederte hierarchische Liste. Knoten und Elemente können schlichte Textausgaben (wie Textfeld) sein oder wiederum Steuermöglichkeiten anbieten (z. B. die Auswahl, ein Kontextmenü je Element oder Auf-/Zuklappen von Knoten). Häufigste Baumansicht ist die der Verzeichnisstruktur eines Datenträgers in einem Dateimanager.
• Rasteransicht, Data Grid oder Flex Grid: Zur tabellarischen Anzeige von Daten. Die Daten werden in Zellen bearbeitet und können sortiert bzw. gruppiert werden. Eine klassische Anwendung findet das Flex Grid bei der Ansicht von Datensätzen aus einer Datenbank (in diesem Fall auch Data Grid genannt). Gewöhnlich enthält die 1. Spalte eine fortlaufende Nummer. Weitere Spalten zeigen zum Beispiel Datenfelder aus der Kunden- oder Artikelverwaltung (z. B. Name, Vorname, Straße, PLZ, Ort etc.)
• Drehfeld, Auf-Ab, Spinner: Ein Steuerelement, mit dem ein (meistens numerischer) Wert inkrementiert oder dekrementiert werden kann.
• Bildlaufleiste, Scrollbar: Wird benutzt, um den Fensterinhalt vertikal oder horizontal zu verschieben oder Werte stufenlos einzustellen
• Schieberegler, Slider: Wird zur grafischen Auswahl von Werten benutzt.
• Fortschrittsbalken bzw. -anzeige: Zeigt den Fortschritt einer Operation an. Ursprünglich und meistens eine als Balken bezeichnete rechteckige Fläche, innerhalb derer mindestens zwei Teilflächen ihre Größe in Relation zueinander verändern. Beispielsweise kann dadurch visualisiert werden wie viel Prozent einer Datei kopiert wurden. Ebenso gibt es Fortschrittsanzeiger, die tatsächlich lediglich anzeigen, dass eine Operation noch nicht korrekt beendet wurde.
• Statusleiste: Ein Bereich am unteren Rand eines Fensters, in dem der Programmstatus oder ein Hilfetext angezeigt werden kann.
• Registerkarte, Tab: Für mehrseitige Dialogfenster oder mehrere Dokumente pro Fenster. Deren überstehende Bereiche zur Auswahl der einzelnen Karten werden auch Tabs genannt.
• Gruppenfeld: Ein Rahmen mit Überschrift zur Gruppierung inhaltlich zusammengehörender Steuerelemente.
• Multifunktionsleiste, Ribbon: Eine Leiste, die die Vereinigung der Elemente Menü und Symbolleiste, sowie teilweise auch der Titelleiste darstellt.

Farb- und Ebenenpalette in Paint.NET

• Palette, Werkzeugfenster: Spezielle, meist „schwebende“ oder seitlich angeordnete, verankerte Fenster, in denen beispielsweise Eigenschaften bearbeitet werden, Farben oder Ebenen gewählt werden, Dokumentstruktur, Formatvorlagen oder Suchergebnisse anzeigt werden etc. Im Gegensatz zu Dialogen sind Paletten fast immer nicht-modal, erlauben also auch Eingaben außerhalb der Palette und haben keine OK-, Abbrechen- oder Schließen-Schaltflächen.
• Kalendersteuerelement: Ein Kalenderwerkzeug zur Auswahl von Datumsangaben, gelegentlich ergänzt um eine Uhrzeit zur Auswahl eines Zeitpunkts.

In objektorientierten Programmiersprachen stehen die Steuerelemente üblicherweise als Klassen zur Verfügung. Manche Programmiersprachen bieten auch bestimmte Klassen als unsichtbare Steuerelemente an:

• Timer, Zeitgeber: Löst nach bestimmten Intervallen ein Ereignis aus.
• Bilderliste: Beinhaltet die Bilder von Symbolleisten und Menüs.
• Tooltip: Einige GUI-Toolkits bieten eine unsichtbare Komponente an, um Tooltip-Fenster zu gestalten und deren Verhalten zu steuern.

Die sichtbaren Steuerelemente unter Windows 7

Programmierung von Steuerelementen

Visuelle Programmierumgebungen wie beispielsweise Visual Basic oder Gambas erlauben die einfache Programmierung der Steuerelemente.

Beispiele

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).

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

• Liste von GUI-Bibliotheken

Weblinks

Wikibooks: Gambas: Steuerelemente – Lern- und Lehrmaterialien