Graphical widget

Last updated
gtk3-demo, a program to demonstrate the widgets in GTK+ version 3. Gtk3-demo 3.11.8.png
gtk3-demo, a program to demonstrate the widgets in GTK+ version 3.
Qt widgets rendered according to three different skins (artistic design): Plastik, Keramik, and Windows Qtskins.png
Qt widgets rendered according to three different skins (artistic design): Plastik, Keramik, and Windows
Various widgets shown in Ubuntu. Widgets.png
Various widgets shown in Ubuntu.
Example of enabled and disabled widgets; the frame at the bottom is disabled, they are grayed out. GUI Frame.svg
Example of enabled and disabled widgets; the frame at the bottom is disabled, they are grayed out.

A graphical widget (also graphical control element or control) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, GTK, and Cocoa, contain a collection of controls and the logic to render these. [1]

Contents

Each widget facilitates a specific type of user-computer interaction, and appears as a visible part of the application's GUI as defined by the theme and rendered by the rendering engine. The theme makes all widgets adhere to a unified aesthetic design and creates a sense of overall cohesion. Some widgets support interaction with the user, for example labels, buttons, and check boxes. Others act as containers that group the widgets added to them, for example windows, panels, and tabs.

Structuring a user interface with widget toolkits allows developers to reuse code for similar tasks, and provides users with a common language for interaction, maintaining consistency throughout the whole information system.

Graphical user interface builders facilitate the authoring of GUIs in a WYSIWYG manner employing a user interface markup language. They automatically generate all the source code for a widget from general descriptions provided by the developer, usually through direct manipulation.

History and use

Any widget displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. In other words, widgets are basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data.

GUI widgets are graphical elements used to build the human-machine-interface of a program. GUI widgets are implemented like software components. Widget toolkits and software frameworks, like e.g. GTK+ or Qt, contain them in software libraries so that programmers can use them to build GUIs for their programs.

A family of common reusable widgets has evolved for holding general information based on the Palo Alto Research Center Inc. research for the Xerox Alto User Interface. Various implementations of these generic widgets are often packaged together in widget toolkits, which programmers use to build graphical user interfaces (GUIs). Most operating systems include a set of ready-to-tailor widgets that a programmer can incorporate in an application, specifying how it is to behave. [2] Each type of widget generally is defined as a class by object-oriented programming (OOP). Therefore, many widgets are derived from class inheritance.

In the context of an application, a widget may be enabled or disabled at a given point in time. An enabled widget has the capacity to respond to events, such as keystrokes or mouse actions. A widget that cannot respond to such events is considered disabled. The appearance of a widget typically differs depending on whether it is enabled or disabled; when disabled, a widget may be drawn in a lighter color (grayed out) or be obscured visually in some way. See the adjacent image for an example.

Widgets are sometimes qualified as virtual to distinguish them from their physical counterparts, e.g. virtual buttons that can be clicked with a pointer, vs. physical buttons that can be pressed with a finger.

A related (but different) concept is the desktop widget, a small specialized GUI application that provides some visual information and/or easy access to frequently used functions such as clocks, calendars, news aggregators, calculators and desktop notes. These kinds of widgets are hosted by a widget engine.

Etymology

“Widget” entered American English around 1920, as a generic term for any useful device, particularly a product manufactured for sale. In computer use it has been borrowed as a shortened form of “window gadget,” and was first applied to user interface elements during Project Athena in 1988.[ citation needed ] The word was chosen because "all other common terms were overloaded with inappropriate connotations" – since the project's Intrinsics toolkit associated each widget with a window of the underlying X Window System – and because of the common prefix with the word window. [3]

List of common generic widgets

See also

Related Research Articles

Context menu User interface element

A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs. Usually the available choices are actions related to the selected object. From a technical point of view, such a context menu is a graphical control element.

Graphical user interface User interface allowing interaction through graphical icons and visual indicators

The graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

Windowing system

In computing, a windowing system is software that manages separately different parts of display screens. It is a type of graphical user interface (GUI) which implements the WIMP paradigm for a user interface.

In computing, a window is a graphical control element. It consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by a window decoration. It usually has a rectangular shape that can overlap with the area of other windows. It displays the output of and may allow input to one or more processes.

A widget toolkit, widget library, GUI toolkit, or UX library is a library or a collection of libraries containing a set of graphical control elements used to construct the graphical user interface (GUI) of programs.

Menu (computing) List of options or commands within a computer program

In computing and telecommunications, a menu is a list of options or commands presented to the user of a computer or communications system. A menu may either be a system's entire user interface, or only part of a more complex one.

Checkbox

A checkbox is a GUI widget that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' on a simple yes/no question.

Text-based user interface Type of interface based on outputting to or controlling a text display

In computing, text-based user interfaces (TUI), is a retronym describing a type of user interface (UI) common as an early form of human–computer interaction, before the advent of graphical user interfaces (GUIs). Like GUIs, they may use the entire screen area and accept mouse and other inputs. They may also use color and often structure the display using special graphical characters such as ┌ and ╣, referred to in Unicode as the "box drawing" set. The modern context of use is usually a terminal emulator.

Button (computing)

In computing, the term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.

X Toolkit Intrinsics

X Toolkit Intrinsics is a library that implements an API to facilitate the development of programs with a graphical user interface (GUI) for the X Window System. It can be used in the C or C++ languages.

A menu bar is a graphical control element which contains drop-down menus.

A panel is "a particular arrangement of information grouped together for presentation to users in a window or pop-up". In ISPF, a panel is "a predefined display image that you see on a display screen". In modern multiple-document interface software a panel refers to a particular arrangement of information grouped together and presented to users docked in the user interface rather than floating in a window, pop-up or dialog box.

Tk (software) GUI toolkit or framework

Tk is a free and open-source, cross-platform widget toolkit that provides a library of basic elements of GUI widgets for building a graphical user interface (GUI) in many programming languages.

ReAction GUI is the widget toolkit engine that is used in AmigaOS 3.5-4.1.

Mouse button

A mouse button is an electric switch on a computer mouse which can be pressed (“clicked”) to select or interact with an element of a graphical user interface.

A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms.

Abstract Window Toolkit

The Abstract Window Toolkit (AWT) is Java's original platform-dependent windowing, graphics, and user-interface widget toolkit, preceding Swing. The AWT is part of the Java Foundation Classes (JFC) — the standard API for providing a graphical user interface (GUI) for a Java program. AWT is also the GUI toolkit for a number of Java ME profiles. For example, Connected Device Configuration profiles require Java runtimes on mobile telephones to support the Abstract Window Toolkit.

List builder Graphical user interface element

A list builder, also known as a dual list, dual listbox, disjoint listbox, list shuttle, shuttle, swaplist, transfer list and two sided multi select is a graphical control element in which a user can select a set of text values by moving values between two list boxes, one representing selected values and the other representing unselected ones. Moving values back and forth is usually accomplished selecting values within one of the two lists and clicking buttons reading "Add" and "Remove", rather than by dragging and dropping them. Less traditionally, there may instead be an add or delete button individually next to each item. The widget can sometimes also include the ability to rearrange the selected values. There may also be buttons to add or remove all values, or a text field to filter the list.

Fyne (software) Graphical toolkit for building cross platform GUIs

Fyne is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs) across desktop and mobile platforms. It is inspired by the principles of Material Design to create applications that look and behave consistently across all platforms. It is licensed under the terms of the 3-clause BSD License, supporting the creation of free and proprietary applications. In December 2019 Fyne became the most popular GUI toolkit for Go, by GitHub star count and in early February 2020 it was trending as #1 project in GitHub trending ranks.

References

  1. "Microsoft: Graphic elements". msdn.microsoft.com. Microsoft. Retrieved 27 April 2015.
  2. "What is widget? - Definition from WhatIs.com". WhatIs.com. Retrieved 2020-06-03.
  3. Ralph R. Swick, Mark S. Ackerman (1988). "The X Toolkit: More Bricks for Building User-Interfaces, or, Widgets for Hire". USENIX Winter. pp. 221–228. Archived from the original on 2007-09-27. Retrieved 2007-01-03.
  4. https://material-ui.com/demos/drawers/ Drawer React component - Material-UI