HOME

TheInfoList



OR:

A graphical widget (also graphical control element or control) in a
graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), 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, inst ...
is an element of interaction, such as a
button A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood, o ...
or a
scroll bar A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the c ...
. Controls are
software component Component-based software engineering (CBSE), also called component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns with respect to the wide-ranging functionality available throughout a give ...
s that a computer user interacts with through
direct manipulation In computer science, human–computer interaction, and interaction design, direct manipulation is an approach to interfaces which involves continuous representation of objects of interest together with rapid, reversible, and incremental action ...
to read or edit information about an application. User interface libraries such as
Windows Presentation Foundation Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem (similar to WinForms) originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initia ...
, Qt,
GTK GTK (formerly GIMP ToolKit and GTK+) is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs). It is licensed under the terms of the GNU Lesser General Public License, allowing both free and propriet ...
, and Cocoa, contain a collection of controls and the logic to render these. 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 A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood ...
, and check boxes. Others act as containers that group the widgets added to them, for example
windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ser ...
, panels, and tabs. Structuring a user interface with
widget toolkit 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 (called ''widgets'') used to construct the graphical user interface (GUI) of programs. Most widge ...
s 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 builder A graphical user interface builder (or GUI builder), also known as GUI designer or sometimes RAD IDE, is a software development tool that simplifies the creation of GUIs by allowing the designer to arrange graphical control elements (often calle ...
s facilitate the authoring of GUIs in a
WYSIWYG In computing, WYSIWYG ( ), an acronym for What You See Is What You Get, is a system in which editing software allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed d ...
manner employing a user interface markup language. They automatically generate all the
source code In computing, source code, or simply code, is any collection of code, with or without comments, written using a human-readable programming language, usually as plain text. The source code of a program is specially designed to facilitate the w ...
for a widget from general descriptions provided by the developer, usually through
direct manipulation In computer science, human–computer interaction, and interaction design, direct manipulation is an approach to interfaces which involves continuous representation of objects of interest together with rapid, reversible, and incremental action ...
.


History

Around 1920, ''widget'' entered American English, as a generic term for any useful device, particularly a product manufactured for sale; a gadget. In 1988, the term ''widget'' is attested in the context of
Project Athena Project Athena was a joint project of MIT, Digital Equipment Corporation, and IBM to produce a campus-wide distributed computing environment for educational use. It was launched in 1983, and research and development ran until June 30, 1991. , A ...
and the
X Window System The X Window System (X11, or simply X) is a windowing system for bitmap displays, common on Unix-like operating systems. X provides the basic framework for a GUI environment: drawing and moving windows on the display device and interacting wi ...
. In ''An Overview of the X Toolkit'' by
Joel McCormack Joel McCormack is the designer of the NCR Corporation version of the p-code machine, which is a kind of stack machine popular in the 1970s as the preferred way to implement new computing architectures and languages such as Pascal and BCPL. The NCR ...
and Paul Asente, it says:
The toolkit provides a library of user-interface components ("widgets") like text labels, scroll bars, command buttons, and menus; enables programmers to write new widgets; and provides the glue to assemble widgets into a complete user interface.
The same year, in the manual ''X Toolkit Widgets - C Language X Interface'' by Ralph R. Swick and Terry Weissman, it says:
In the X Toolkit, a widget is the combination of an X window or sub window and its associated input and output semantics.
Finally, still in the same year, Ralph R. Swick and Mark S. Ackerman explain where the term ''widget'' came from:
We chose this term since all other common terms were overloaded with inappropriate connotations. We offer the observation to the skeptical, however, that the principal realization of a widget is its associated X window and the common initial letter is not un-useful.


Usage

Any widget displays an information arrangement changeable by the user, such as a
window A window is an opening in a wall, door, roof, or vehicle that allows the exchange of light and may also allow the passage of sound and sometimes air. Modern windows are usually glazed or covered in some other transparent or translucent mat ...
or a text box. The defining characteristic of a widget is to provide a single interaction point for the
direct manipulation In computer science, human–computer interaction, and interaction design, direct manipulation is an approach to interfaces which involves continuous representation of objects of interest together with rapid, reversible, and incremental action ...
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 component Component-based software engineering (CBSE), also called component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns with respect to the wide-ranging functionality available throughout a give ...
s. 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 The Xerox Alto is a computer designed from its inception to support an operating system based on a graphical user interface (GUI), later using the desktop metaphor. The first machines were introduced on 1 March 1973, a decade before mass-market ...
User Interface. Various implementations of these generic widgets are often packaged together in
widget toolkit 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 (called ''widgets'') used to construct the graphical user interface (GUI) of programs. Most widge ...
s, 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. 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. The benefit of disabling unavailable controls rather than hiding them entirely is that users are shown that the control exists but is currently unavailable (with the implication that changing some other control may make it available), instead of possibly leaving the user uncertain about where to find the control at all. 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 A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood ...
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 A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms. A desk accessory or applet is an example of a simple, stand-alone user interface, in contrast with a ...
.


List of common generic widgets

* Selection and display of collections **
Button A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood, o ...
– control which can be clicked upon to perform an action. An equivalent to a push-button as found on mechanical or electronic instruments. *** Radio button – control which can be clicked upon to select one option from a selection of options, similar to selecting a radio station from a group of buttons dedicated to radio tuning. Radio buttons always appear in pairs or larger groups, and only one option in the group can be selected at a time; selecting a new item from the group's buttons also de-selects the previously selected button. ***
Check box A checkbox (check box, tickbox, tick box) is a graphical widget that permits the user (computing), 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 ...
– control which can be clicked upon to enable or disable an option. Also called a tick box. The box indicates an "on" or "off" state via a
check mark A check or check mark (American English), checkmark (Philippine English), tickmark (Indian English) or tick ( Australian, New Zealand English, and British English) is a mark (✓, ✔, etc.) used, primarily in the English-speaking world, to in ...
/tick ☑ or a cross ☒. Can be shown in an intermediate state (shaded or with a dash) to indicate that various objects in a multiple selection have different values for the property represented by the check box. Multiple check boxes in a group may be selected, in contrast with radio buttons. ***
Toggle switch In electrical engineering, a switch is an electrical component that can disconnect or connect the conducting path in an electrical circuit, interrupting the electric current or diverting it from one conductor to another. The most common type of ...
- Functionally similar to a check box. Can be toggled on and off, but unlike check boxes, this typically has an immediate effect. *** Toggle Button - Functionally similar to a check box, works as a
switch In electrical engineering, a switch is an electrical component that can disconnect or connect the conducting path in an electrical circuit, interrupting the electric current or diverting it from one conductor to another. The most common type of ...
, though appears as a button. Can be toggled on and off. *** Split button – control combining a button (typically invoking some default action) and a drop-down list with related, secondary actions ***
Cycle button A cycle button or toggle button is a graphical control element that allows the user to choose one from a predefined set of options. It is used as a button, the content of which changes with each click and cycles between two or more values; the c ...
- a button that cycles its content through two or more values, thus enabling selection of one from a group of items. **
Slider Slider or Sliders may refer to: Arts * K.K. Slider, a fictional character within the ''Animal Crossing'' franchise * '' The Slider'', a 1972 album by T. Rex * ''Sliders'' (TV series), an American science fiction and fantasy television series * ...
– control with a handle that can be moved up and down (vertical slider) or right and left (horizontal slider) on a bar to select a value (or a range if two handles are present). The bar allows users to make adjustments to a value or process throughout a range of allowed values. **
List box A list box is a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. The user clicks inside the box on an item to select it, sometimes in combination with the ...
– a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. ** Spinner – value input control which has small up and down buttons to step through a range of values **
Drop-down list A drop-down list (abbreviated drop-down, or DDL; also known as a drop-down menu, drop menu, pull-down list, picklist) is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-dow ...
– A list of items from which to select. The list normally only displays items when a special button or indicator is clicked. ** Menu – control with multiple actions which can be clicked upon to choose a selection to activate ***
Context menu A context menu (also called contextual, shortcut, and pop up or pop-up 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 choic ...
– a type of menu whose contents depend on the ''context'' or state in effect when the menu is invoked ***
Pie menu In user interface design, a pie menu or radial menu is a circular context menu where selection depends on direction. It is a graphical control element. A pie menu is made of several "pie slices" around an inactive center and works best with stylus ...
– a circular context menu where selection depends on direction ** Menu bar – a graphical control element which contains drop down menus **
Toolbar The toolbar, also called a bar or standard toolbar (originally known as ribbon) is a graphical control element on which on-screen icons can be used. A toolbar often allows for quick access to functions that are commonly used in the program. Some ...
– a graphical control element on which on-screen buttons, icons, menus, or other input or output elements are placed *** Ribbon – a hybrid of menu and toolbar, displaying a large collection of commands in a visual layout through a tabbed interface. **
Combo box A combo box is a commonly used graphical user interface widget (or control). Traditionally, it is a combination of a drop-down list or list box and a single-line editable textbox, allowing the user to either type a value directly or select a v ...
( text box with attached menu or
List box A list box is a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. The user clicks inside the box on an item to select it, sometimes in combination with the ...
) – A combination of a single-line text box and a
drop-down list A drop-down list (abbreviated drop-down, or DDL; also known as a drop-down menu, drop menu, pull-down list, picklist) is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-dow ...
or
list box A list box is a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. The user clicks inside the box on an item to select it, sometimes in combination with the ...
, allowing the user to either type a value directly into the control or choose from the list of existing options. **
Icon An icon () is a religious work of art, most commonly a painting, in the cultures of the Eastern Orthodox, Oriental Orthodox, and Catholic churches. They are not simply artworks; "an icon is a sacred image used in religious devotion". The most ...
– a quickly comprehensible symbol of a software tool, function, or a data file. **
Tree view In botany, a tree is a perennial plant with an elongated stem, or trunk, usually supporting branches and leaves. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are u ...
– a graphical control element that presents a hierarchical view of information **
Grid view A grid view or a datagrid is a graphical control element that presents a tabular view of data. A typical grid view also supports some or all of the following: * Clicking a ''column header'' to change the sort order of the grid * Dragging co ...
or datagrid – a
spreadsheet A spreadsheet is a computer application for computation, organization, analysis and storage of data in tabular form. Spreadsheets were developed as computerized analogs of paper accounting worksheets. The program operates on data entered in c ...
-like tabular view of data that allows numbers or text to be entered in rows and columns. * Navigation ** Link – Text with some kind of indicator (usually underlining and/or color) that indicates that clicking it will take one to another screen or page. ** Tab – a graphical control element that allows multiple documents or panels to be contained within a single window ** Scrollbar – a graphical control element by which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) * Text/value input ** Text box – (edit field) - a graphical control element intended to enable the user to input text **
Combo box A combo box is a commonly used graphical user interface widget (or control). Traditionally, it is a combination of a drop-down list or list box and a single-line editable textbox, allowing the user to either type a value directly or select a v ...
– a graphical control element combining a drop-down list or list box and a single-line editable textbox * Output **
Label A label (as distinct from signage) is a piece of paper, plastic film, cloth, metal, or other material affixed to a container or product, on which is written or printed information or symbols about the product or item. Information printed ...
– text used to describe another widget **
Tooltip The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's f ...
– informational window which appears when the mouse hovers over another control ** Balloon help **
Status bar A status bar is a graphical control element which poses an information area typically found at the window's bottom. It can be divided into sections to group information. Its job is primarily to display information about the current state of its ...
– a graphical control element which poses an information area typically found at the window's bottom **
Progress bar ...
– a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation ** Infobar – a graphical control element used by many programs to display non-critical information to a user * Container **
Window A window is an opening in a wall, door, roof, or vehicle that allows the exchange of light and may also allow the passage of sound and sometimes air. Modern windows are usually glazed or covered in some other transparent or translucent mat ...
– a graphical control element consisting of a visual area containing some of the graphical user interface elements of the program it belongs to *** Collapsible panel – a panel that can compactly store content which is hidden or revealed by clicking the tab of the widget. **** Drawer: Side sheets or surfaces containing supplementary content that may be anchored to, pulled out from, or pushed away beyond the left or right edge of the screen.https://material-ui.com/demos/drawers/ Drawer React component - Material-UI *** Accordion – a vertically stacked list of items, such as labels or thumbnails where each item can be "expanded" to reveal the associated content *** Modal window – a graphical control element subordinate to an application's main window which creates a mode where the main window can't be used. *** Dialog box – a small window that communicates information to the user and prompts for a response *** Palette window – also known as "Utility window" - a graphical control element which floats on top of all regular windows and offers ready access tools, commands or information for the current application **** Inspector window – a type of dialog window that shows a list of the current attributes of a selected object and allows these parameters to be changed on the fly *** Frame – a type of box within which a collection of graphical control elements can be grouped as a way to show relationships visually *** Canvas – generic drawing element for representing graphical information *** Cover Flow – an animated, three-dimensional element to visually flipping through snapshots of documents, website bookmarks, album artwork, or photographs. *** Bubble Flow – an animated, two-dimensional element that allows users to browse and interact the entire tree view of a discussion thread. ***
Carousel (computing) A carousel or carrousel (mainly North American English), merry-go-round (List of sovereign states, international), roundabout (British English), or hurdy-gurdy (an old term in Australian English, in South Australia, SA) is a type of amusement ...
– a graphical widget used to display visual cards in a way that’s quick for users to browse, both on websites and on mobile apps


See also

* Graphical user interface elements *
Geometric primitive In vector computer graphics, CAD systems, and geographic information systems, geometric primitive (or prim) is the simplest (i.e. 'atomic' or irreducible) geometric shape that the system can handle (draw, store). Sometimes the subroutines that d ...
*
Widget engine A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms. A desk accessory or applet is an example of a simple, stand-alone user interface, in contrast with a ...
for mostly unrelated, physically inspired "widgets" *
Widget toolkit 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 (called ''widgets'') used to construct the graphical user interface (GUI) of programs. Most widge ...
– a software library which contains a collection of widgets * Interaction technique


References


External links


Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition) - W3C Recommendation 27 November 2012

Widgets 1.0: The Widget Landscape (Q1 2008). W3C Working Draft 14 April 2008

Requirement For Standardizing Widgets. W3C Working Group Note 27 September 2011
{{Graphical control elements Graphical user interface elements Graphical user interfaces