template

Index :: Javascript :: Widgets

Der Begriff Widget (Zusammensetzung aus 'window' und 'gadget') bezeichnet Interaktions- oder Steuerelemente, aus denen sich grafisch orientierte Benutzeroberflächen konstruieren lassen.
In HTML-Dokumenten soll durch die Nachbildung von Programm-Frontends ein intuitiver Zugriff auf die Funktionalität einer browserbasierten Applikation ermöglicht werden.

In vielen Sprachen (z.B. VisualBasic, Delphi, Java, HTML) sind GUI-Programmbibliotheken implementiert, die dem Entwickler/Autor eine Sammlung von standardisierten Elementen in Form von Klassen oder Objekten zur Verfügung stellen. Hier eine Auflistung typischer Bausteine:

NameBeschreibung
Fensterkomponenten
Window (Fenster)Separate Fläche oder Arbeitsbereich; umrahmt, meist mit Titelleiste, verschiebbar und in der Größe änderbar. Dient als Container für andere Elemente.
   w_win.js : Window-Klasse
MenüHorizontale Auswahlliste mit DropDown-Listen für die grundlegenden Funktionen eines Programms; üblicherweise am oberen Fensterrand platziert. Popup-Variante: vertikale Auswahlliste als Kontextmenü.
Toolbar (Symbolleiste)Fläche mit horizontal oder vertikal angeordneten, meist bildhaften Schaltflächen (Icons) am Fensterrand, üblicherweise oben oder links. Kann ein Menü ergänzen oder auch ganz ersetzen.
StatusbarStatuszeile am unteren Fensterrand, meist mit Anzeigefeldern oder Gripper zur Größenänderung des Fensters.
Basiselemente
Button (Schaltfläche)Knopf zum Drücken; mit Icon, Beschriftung oder beidem.
Checkbox (Auswahlkästchen, Häkchen)Control zum Auswählen/Markieren eines Elements oder einer Eigenschaft.
Radiobutton (Option)Control zur Auswahl genau einer von mehreren Möglichkeiten.
TextboxEin- oder mehrzeiliges Feld zur Texteingabe/-anzeige.
ComboboxKombination aus einem Textfeld und einer Dropdown-Auswahlliste.
Listbox (Liste)Auflistung von ein- oder mehrfach auswählbaren Textzeilen, evtl. mit Checkboxen.
Zusatzelemente
Scrollbar (Bildlaufleiste, Rollbalken)Horizonales oder vertikales Control zum Scrollen von Fensterinhalten.
Slider (Schieberegler)Horizonales oder vertikales Control zum Einstellen eines Wertes.
Tabs (Registerkarten)Control für mehrseitige Dialogfenster oder mehrere Dokumente pro Fenster; üblicherweise am oberen Fensterrand platziert.
Sonderelemente
Treeview (Baumansicht)Vertikal angeordnete Liste mit aufklappbaren Elementen; meist mit Icons zum Öffnen/Schließen von Unterbereichen, evtl. mit Checkboxen.

Während die Basiselemente schon mittels HTML darstellbar sind, müssen Fensterkomponenten und alle anderen Elemente eigens per Javascript/DOM erstellt werden. Hierzu greift man am besten auf fertige oder selbstgeschriebene Module zurück, die z.B. auch das Event-Handling für Drag'n'drop-Operationen und Tastaturabfragen vereinfachen.

Index :: Javascript


template