Grafisches Widget

In diesem Artikel geht es um wiederverwendbare Komponenten zum Erstellen von Benutzeroberflächen. Für kleine Desktop-/Webanwendungen siehe Software -Widget. Für andere Verwendungen siehe Widget.
GTK3-Demo, ein Programm, um das zu demonstrieren Widgets in Gtk+ Version 3.
Qt Widgets nach drei verschiedenen gerendert Häute (künstlerisches Design): Plastik, Keramik und Fenster
Verschiedene Widgets gezeigt in Ubuntu.
Beispiel für aktivierte und deaktivierte Widgets; das rahmen Unten ist deaktiviert, sie sind grau.

A Grafisches Widget (Auch Grafisches Steuerelement oder Kontrolle) in einem grafische Benutzeroberfläche ist ein Element der Interaktion, so wie ein Taste oder ein Scrollleiste. Kontrollen sind Softwarekomponenten mit dem ein Computerbenutzer interagiert durch direkte Manipulation Informationen zu einer Anwendung lesen oder bearbeiten. Benutzeroberflächenbibliotheken wie z. Windows Presentation Foundation, Qt, Gtk, und Kakao, enthalten eine Sammlung von Kontrollen und die Logik, um diese zu rendern.[1]

Jedes Widget erleichtert eine bestimmte Art von Benutzer-Computer-Interaktion und erscheint als sichtbarer Teil der GUI der Anwendung, wie sie durch das Thema definiert und von der Rendering-Engine gerendert werden. Das Thema lässt alle Widgets ein einheitliches ästhetisches Design halten und schafft ein Gefühl allgemeiner Zusammenhalt. Einige Widgets unterstützen die Interaktion mit dem Benutzer, z. B. Beschriftungen, Tasten, und Kontrollkästchen. Andere handeln als Behälter diese Gruppe, die die Widgets ihnen zum Beispiel hinzugefügt haben Fenster, Panelsund Registerkarten.

Strukturierung einer Benutzeroberfläche mit Widget -Toolkits Ermöglicht den Entwicklern, Code für ähnliche Aufgaben wiederzuverwenden und Benutzern eine gemeinsame Sprache für die Interaktion bietet und die Konsistenz im gesamten Informationssystem aufrechterhalten.

Grafische Benutzeroberflächenbauer Erleichterung des Genehmigung von GUIs in a Wysiwyg Art und Weise, die a Markup -Sprache der Benutzeroberfläche. Sie generieren automatisch alle Quellcode Für ein Widget aus allgemeinen Beschreibungen des Entwicklers, normalerweise durch direkte Manipulation.

Geschichte und Verwendung

Weitere Informationen: Verlauf der grafischen Benutzeroberfläche

Jedes Widget zeigt eine vom Benutzer veränderliche Informationsanordnung an, wie z. Fenster oder ein Textfeld. Das definierende Merkmal eines Widgets besteht darin, einen einzelnen Interaktionspunkt für die zu liefern direkte Manipulation einer bestimmten Art von Daten. Mit anderen Worten, Widgets sind grundlegende visuelle Bausteine, die in einer Anwendung alle von der Anwendung verarbeiteten Daten und die verfügbaren Interaktionen dieser Daten verarbeitet werden.

GUI-Widgets sind grafische Elemente, mit denen die Human-Maschine-Schnittstelle eines Programms erstellt wird. GUI -Widgets werden wie implementiert wie Softwarekomponenten. Widget -Toolkits und Software -Frameworks, wie z. Gtk+ oder Qt, enthalten sie in Software -Bibliotheken damit Programmierer sie verwenden können, um GUIs für ihre Programme zu erstellen.

Eine Familie gemeinsamer wiederverwendbarer Widgets hat sich entwickelt, um allgemeine Informationen basierend auf dem zu halten Palo Alto Research Center Inc. Forschung für die Xerox Alto Benutzeroberfläche. Verschiedene Implementierungen dieser generischen Widgets werden häufig zusammen verpackt in Widget -Toolkits, mit welchen Programmierern grafische Benutzeroberflächen (GUIs) erstellen. Die meisten Betriebssysteme enthalten eine Reihe von Widgets, die ein Programmierer in eine Anwendung einbeziehen kann, und geben an, wie es sich verhalten soll.[2] Jede Art von Widget wird im Allgemeinen als Klasse durch objektorientierte Programmierung definiert (Oop). Daher stammen viele Widgets aus der Klassenvererbung.

Im Kontext einer Anwendung kann ein Widget sein aktiviert oder deaktiviert Zu einem bestimmten Zeitpunkt. Ein aktiviertes Widget kann auf Ereignisse wie Tastenanschläge oder Mausaktionen reagieren. Ein Widget, das nicht auf solche Ereignisse reagieren kann, gilt als deaktiviert. Das Erscheinungsbild eines Widgets unterscheidet sich typischerweise je nachdem, ob es aktiviert oder deaktiviert ist. Wenn Sie deaktiviert sind, kann ein Widget in einer leichteren Farbe (grau ausgegraut) gezogen werden oder in irgendeiner Weise visuell verdeckt werden. Ein Beispiel finden Sie im benachbarten Bild.

Der Vorteil der Deaktivierung nicht verfügbarer Steuerelemente, anstatt sie vollständig zu verbergen die Kontrolle überhaupt.

Widgets werden manchmal als qualifiziert als virtuell Um sie von ihren physischen Kollegen zu unterscheiden, z. virtuell Tasten Das kann mit a geklickt werden Zeiger, vs. physisch Tasten Das kann mit einem Finger gedrückt werden.

Ein verwandtes (aber unterschiedliches) Konzept ist das Desktop -Widget, Eine kleine spezielle GUI -Anwendung, die einige visuelle Informationen und/oder einen einfachen Zugriff auf häufig verwendete Funktionen wie Uhren, Kalender, Nachrichtenaggregatoren, Taschenrechner und Desktop -Notizen bietet. Diese Art von Widgets wird von a gehostet Widget Engine.

Etymologie

„Widget“ trat um 1920 als generisches Begriff für jedes nützliche Gerät, insbesondere für ein zum Verkauf stehender Produkt, amerikanische Englisch ein. Bei der Verwendung von Computer wurde es als verkürzte Form von „Fenster ausgeliehen Gadget, “Und wurde zunächst auf Benutzeroberflächenelemente angewendet Projekt Athena 1988 wurde das Wort ausgewählt, weil "alle anderen gemeinsamen Begriffe mit unangemessenen Konnotationen überlastet wurden" - seit dem Projekt des Projekts Intrinsik Toolkit, das jedes Widget mit einem Fenster der zugrunde liegenden zugeordnet ist X Fenstersystem - und wegen des gemeinsamen Präfixes mit dem Wort Fenster.[3]

Liste der gängigen generischen Widgets

Siehe auch: Grafische Benutzeroberflächenelemente
  • Auswahl und Anzeige von Sammlungen
    • Taste - Kontrolle, auf die geklickt werden kann, um eine Aktion auszuführen. Ein Äquivalent zu a Druckknopf wie auf mechanischen oder elektronischen Instrumenten gefunden.
      • Radio knopf - Steuerung, auf die geklickt werden kann, um eine Option aus einer Auswahl von Optionen auszuwählen, ähnlich wie bei der Auswahl eines Radiosenders aus einer Gruppe von Schaltflächen, die der Radio -Tuning gewidmet sind. Optionsschaltflächen werden immer paarweise oder größere Gruppen angezeigt, und nur eine Option in der Gruppe kann gleichzeitig ausgewählt werden. Die Auswahl eines neuen Elements aus den Schaltflächen der Gruppe wählt auch die zuvor ausgewählte Taste aus.
      • Kontrollkästchen - Kontrolle, auf die geklickt werden kann, um eine Option zu aktivieren oder zu deaktivieren. Auch ein Zeckenbox genannt. Das Box zeigt einen "Ein" oder "Aus" -Zustand über a an Häkchen/Tick ☑ oder ein Kreuz ☒. Kann in einem Zwischenzustand (schattiert oder mit einem Armaturenbrett) gezeigt werden, um anzuzeigen, dass verschiedene Objekte in a Mehrfachauswahl haben unterschiedliche Werte für die Eigenschaft, die durch das Kontrollkästchen dargestellt wird. Im Gegensatz zu Optionsfeldern können mehrere Kontrollkästchen in einer Gruppe ausgewählt werden.
      • Kippschalter - funktional ähnlich wie ein Kontrollkästchen. Kann ein- und ausgeschaltet werden, aber im Gegensatz zu Kontrollkästchen hat dies normalerweise eine sofortige Wirkung.
      • Schaltfläche umschalten - funktional ähnlich wie ein Kontrollkästchen, funktioniert als Schalter, obwohl als Knopf erscheint. Kann ein- und ausgeschaltet werden.
      • Taste Split-Steuerung einer Taste (in der Regel auf eine Standardaktion aufrufen) und eine Dropdown-Liste mit zugehörigen sekundären Aktionen
      • Zyklusknopf - Eine Taste, die seinen Inhalt durch zwei oder mehr Werte fährt und so eine Auswahl einer aus einer Gruppe von Elementen ermöglicht.
    • Schieberegler - Kontrolle mit einem Griff, der auf einem Balken auf und ab (vertikaler Schieberegler) oder rechts und links (horizontaler Schieberegler) bewegt werden kann, um einen Wert auszuwählen (oder einen Bereich, wenn zwei Griffe vorhanden sind). Mit der Balken können Benutzer in einem Bereich der zulässigen Werte einen Wert oder einen Prozess in einem Bereich zu erfassen.
    • Listenfeld - Ein grafisches Steuerelement, mit dem der Benutzer ein oder mehrere Elemente aus einer Liste in einem statischen Textfeld mehrerer Zeilen auswählen kann.
    • Spinner - Werteingangskontrolle, die kleine Auf- und Abwärtsknöpfe aufweist, um einen Wertebereich durchzuführen
    • Dropdown-Liste - Eine Liste der Elemente, aus denen ausgewählt werden soll. In der Liste wird normalerweise nur Elemente angezeigt, wenn eine Sonderschaltfläche oder Anzeige angeklickt wird.
    • Speisekarte - Kontrolle mit mehreren Aktionen, auf die geklickt werden kann, um eine ausgewählte Auswahl zu wählen, um sie zu aktivieren
      • Kontextmenü - eine Art von Menü, deren Inhalt von der abhängt Kontext oder gültig in Kraft, wenn das Menü aufgerufen wird
      • Kuchenmenü - Ein zirkuläres Kontextmenü, in dem die Auswahl von der Richtung abhängt
    • Menüleiste - Ein grafisches Steuerelement, das Dropdown -Menüs enthält
    • Symbolleiste -Ein grafisches Steuerelement, auf dem auf Bildschirmschaltflächen, Symbole, Menüs oder andere Eingangs- oder Ausgangselemente platziert werden
      • Schleife - Eine Mischung aus Menü und Symbolleiste, in der eine große Sammlung von Befehlen in einem visuellen Layout über eine Registerkartenschnittstelle angezeigt wird.
    • Kombinationsfeld (Textfeld mit angeschlossen Speisekarte oder Listenfeld)-Eine Kombination aus einer einzelnen Leitung Textfeld und ein Dropdown-Liste oder Listenfeld, damit der Benutzer entweder einen Wert direkt in die Steuerung eingeben oder aus der Liste der vorhandenen Optionen auswählen kann.
    • Symbol - Ein schnell verständliches Symbol eines Softwaretools, einer Funktion oder einer Datendatei.
    • Baumsicht - Ein grafisches Steuerelement, das eine hierarchische Ansicht von Informationen darstellt
    • Rasteransicht oder DataGrid - a Kalkulationstabelle-wie tabellarisch Ansicht der Daten, mit denen Zahlen oder Text in Zeilen und Spalten eingegeben werden können.
  • Navigation
    • Verknüpfung - Text mit einer Art von Indikator (normalerweise unterstreicht und/oder Farbe), die darauf hinweisen, dass klicken, wenn ein Klicken auf einen anderen Bildschirm oder eine andere Seite führt.
    • Tab - Ein grafisches Steuerelement, mit dem mehrere Dokumente oder Panels in einem einzigen Fenster enthalten sein können
    • Scrollleiste - Ein grafisches Steuerelement, durch das kontinuierlicher Text, Bilder oder andere Inhalte in eine vorgegebene Richtung gescrollt werden können (nach oben, unten, links oder rechts)
  • Text/Werteingabe
    • Textfeld - (Feld bearbeiten) - Ein grafisches Steuerelement, mit dem der Benutzer Text eingibt
    • Kombinationsfeld -Ein grafisches Steuerelement, das eine Dropdown-Liste oder ein Listenfeld und eine einzeilige Bearbeitbare Textbox kombiniert
  • Ausgabe
    • Etikett - Text verwendet, um ein anderes Widget zu beschreiben
    • Tooltip - Informationsfenster, das angezeigt wird, wenn die Maus über eine andere Steuerung schwebt
    • Ballonhilfe
    • Statusleiste - Ein grafisches Steuerelement, das einen Informationsbereich darstellt, der normalerweise am Boden des Fensters gefunden wird
    • Fortschrittsanzeige - Ein grafisches Steuerelement, das zur Visualisierung des Fortschritts eines erweiterten Computerbetriebs verwendet wird, z. B. Download, Dateiübertragung oder Installation
    • Infobar -Ein grafisches Steuerelement, das von vielen Programmen verwendet wird, um nicht kritische Informationen für einen Benutzer anzuzeigen
  • Container
    • Fenster - Ein grafisches Steuerelement, das aus einem visuellen Bereich besteht, der einige der grafischen Benutzeroberflächenelemente des Programms enthält, zu dem es gehört
      • Collapsible Panel - Ein Panel, das kompakte Inhalte speichern kann, die verborgen oder durch Klicken auf die Registerkarte des Widgets aufgedeckt werden.
        • Schublade: Seitenblätter oder Oberflächen, die zusätzlichen Inhalt enthalten, der möglicherweise verankert, herausgezogen oder über die linke oder rechte Rande des Bildschirms hinausgeschoben wird.[4]
      • Akkordeon - Eine vertikal gestapelte Liste von Elementen wie Beschriftungen oder Miniaturansichten, bei denen jedes Element "erweitert" werden kann, um den zugehörigen Inhalt anzugeben
      • Modal Fenster - Ein grafisches Steuerelement, das dem Hauptfenster einer Anwendung untergeordnet ist, in dem ein Modus erstellt wird, in dem das Hauptfenster nicht verwendet werden kann.
      • Dialogbox - Ein kleines Fenster, das Informationen an den Benutzer vermittelt und eine Antwort auffordert
      • Palettenfenster - Auch als "Dienstprogramme" bezeichnet - ein grafisches Steuerelement, das über allen regulären Windows schwimmt und Bereitschafts -Zugriffs -Tools, -befehle oder Informationen für die aktuelle Anwendung bietet
        • Inspektorfenster - Eine Art Dialogfenster, in dem eine Liste der aktuellen Attribute eines ausgewählten Objekts angezeigt wird und diese Parameter in der Fliege geändert werden können
      • Rahmen - Eine Art von Box, in der eine Sammlung grafischer Steuerelemente gruppiert werden kann, um Beziehungen visuell zu zeigen
      • Leinwand - Generisches Zeichenelement zur Darstellung grafischer Informationen
      • Abdeckfluss -Ein animiertes, dreidimensionales Element, das visuell durch Schnappschüsse von Dokumenten, Website-Lesezeichen, Album-Kunstwerken oder Fotografien durchflippt.
      • Bubble Flow-Ein animiertes, zweidimensionales Element, mit dem Benutzer die gesamte Baumansicht eines Diskussionsthreads durchsuchen und interagieren können.
      • Carousel (Computing) - Ein grafisches Widget, mit dem visuelle Karten auf eine Weise angezeigt werden können, die Benutzer schnell auf Websites und auf mobilen Apps durchsuchen können

Siehe auch

Verweise

  1. ^ "Microsoft: Grafische Elemente". msdn.microsoft.com. Microsoft. Abgerufen 27. April 2015.
  2. ^ "Was ist Widget? - Definition von Whatis.com". Whatis.com. Abgerufen 2020-06-03.
  3. ^ Ralph R. Swick, Mark S. Ackerman (1988). "Das X Toolkit: Weitere Ziegel zum Erstellen von Benutzerinterfazen oder Widgets zum Mieten". Usenix Winter. S. 221–228. Archiviert von das Original am 2007-09-27. Abgerufen 2007-01-03.
  4. ^ https://material-ui.com/demos/drawers/ Schublade React Component - Material -UI

Externe Links