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.

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, Qt, 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

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 and the X Window System. In An Overview of the X Toolkit by Joel McCormack and Paul Asente, it says: [2]

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: [3]

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: [4]

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

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.

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. [5] 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. On pop-up dialogues, buttons might appear greyed out shortly after appearance to prevent accidental clicking or inadvertent double-tapping.

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 (such as those on a computer mouse).

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.

List of common generic widgets

Various widgets shown in Ubuntu. Widgets.png
Various widgets shown in Ubuntu.
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

Selection and display of collections

Text/value input

Output

Container

See also

Related Research Articles

<span class="mw-page-title-main">Context menu</span> 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.

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on 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.

Cut, copy, and paste are essential commands of modern human–computer interaction and user interface design. They offer an interprocess communication technique for transferring data through a computer's user interface. The cut command removes the selected data from its original position, and the copy command creates a duplicate; in both cases the selected data is kept in temporary storage called the clipboard. Clipboard data is later inserted wherever a paste command is issued. The data remains available to any application supporting the feature, thus allowing easy data transfer between applications.

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.

<span class="mw-page-title-main">Checkbox</span> Element of graphical user interfaces

A checkbox is a graphical widget that allows 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.

<span class="mw-page-title-main">Text-based user interface</span> 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 bitmapped displays and modern conventional graphical user interfaces (GUIs). Like modern GUIs, they can use the entire screen area and may accept mouse and other inputs. They may also use color and often structure the display using box-drawing characters such as ┌ and ╣. The modern context of use is usually a terminal emulator.

<span class="mw-page-title-main">Window manager</span> Type of system software

A window manager is system software that controls the placement and appearance of windows within a windowing system in a graphical user interface. Most window managers are designed to help provide a desktop environment. They work in conjunction with the underlying graphical system that provides required functionality—support for graphics hardware, pointing devices, and a keyboard—and are often written and created using a widget toolkit.

<span class="mw-page-title-main">Button (computing)</span> Graphical user interface element

In computing, a button is a 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.

<span class="mw-page-title-main">Fox toolkit</span>

The FOX toolkit is an open-source, cross-platform widget toolkit, i.e. a library of basic elements for building a graphical user interface (GUI). FOX stands for Free Objects for X.

<span class="mw-page-title-main">X Toolkit Intrinsics</span>

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 language. Design took place late 1980s to early 1990s.

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

A PIGUI package is a software library that a programmer uses to produce GUI code for multiple computer platforms. The package presents subroutines and/or objects which are independent of the GUIs that the programmer is targeting. For software to qualify as PIGUI it must support several GUIs under at least two different operating systems. The package does not necessarily provide any additional portability features. Native look and feel is a desirable feature, but is not essential for PIGUIs.

<span class="mw-page-title-main">Workbench (AmigaOS)</span> Graphical user interface for the Amiga computer

Workbench is the desktop environment and graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers. Workbench provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor for representing file system organisation.

<span class="mw-page-title-main">Tk (software)</span> GUI toolkit or framework

Tk is a 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. It is free and open-source software released under a BSD-style software license.

ReAction GUI is the widget toolkit engine that is used in AmigaOS 3.2–4.1.

<span class="mw-page-title-main">Mouse button</span> Electric switch on a computer mouse

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. Mouse buttons are most commonly implemented as miniature snap-action switches.

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

<span class="mw-page-title-main">Abstract Window Toolkit</span> Java-based GUI 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.

References

  1. "Microsoft: Graphic elements". msdn.microsoft.com. Microsoft. Retrieved 27 April 2015.
  2. McCormack, Joel; Asente, Paul (1988). "An overview of the X toolkit". Proceedings of the 1st annual ACM SIGGRAPH symposium on User Interface Software. pp. 46–55. doi:10.1145/62402.62407. ISBN   0897912837. S2CID   12924752.
  3. Swick, Ralph R.; Weissman, Terry (1988). X Toolkit Widgets - C Language X Interface. p.  1.
  4. 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. Retrieved 2022-11-20.
  5. "What is widget? - Definition from WhatIs.com". WhatIs.com. Retrieved 2020-06-03.
  6. https://material-ui.com/demos/drawers/ Drawer React component - Material-UI