GUI widget

This article is about reusable components for building user interfaces. For small desktop/web applications, see widget engine. For other uses, see widget (disambiguation).

Various widgets.

Example of enabled and disabled widgets; the frame at the bottom is disabled.

In computer programming, a widget (or control) is an element of a graphical user interface (GUI) that 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.

History and use

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. Different 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. Each type of widgets 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 disabled widget is typically different from an enabled widget; the disabled widget may be drawn in a lighter color, or may be visually obscured in some way. See the image to the right 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. It was first applied to user interface elements during Project Athena in 1988. 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.

List of common generic widgets

See also: Graphical user interface elements

• Selection and display of collections
  • ==Button – control which can be clicked upon to perform an action==

A typical button is a rectangle or rounded rectangle, wider than it is tall, with a descriptive caption in its center.[2] The most common method of pressing a button is clicking it with a pointer controlled by a mouse, but other input such as keystrokes can be used to execute the command of a button. A button is not however always restricted to a rectangular shape. The sole requirement of button interaction is that the user can execute a command by a click action. Thus pictures and background areas can be programmed as buttons. When pressed, in addition to performing a predetermined task, buttons often undergo a graphical change to mimic a mechanical button being depressed.

Depending on the circumstance, buttons may be designated to be pushed only once and execute a command, while others may be used to receive instant feed back and may require the user to click more than once to receive the desired result. Other buttons are designed to toggle behavior on and off like a check box.[3] These buttons will show a graphical clue (such as staying depressed after the mouse is released) to indicate the state of the option.

Most of the buttons are capable to show a tool tip when mouse hovers over them for the longer time. A tool tip is part of the built-in documentation, explaining briefly the purpose of the button.

Some very common incarnations of the button widget are: an OK button for confirming actions and closing the window; a Cancel button for canceling actions and closing the window; an Apply button for confirming actions without closing the window; a Close button for closing windows after changes have already been applied

• • • ==Check box ==

control which can be clicked upon to select or deselect an option. Multiple check boxes in a group may be selected

This article is about the computer interface element. For the concept in US tax law, see Check-the-box.

Sample checkboxes.

In computing, a checkbox (check box, tickbox, or tick box) is a graphical user interface element (widget) that permits the user to make multiple selections from a number of options (contrary to a radio button where only one choice is possible) or to have the user answer yes (checked) or no (not checked) on a simple yes/no question.

Normally, checkboxes are shown on the screen as a square box that can contain white space (for false) or a tick mark or X (for true), as pictured. A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. Inverting the state of a checkbox is done by clicking the mouse on the box, or the caption, or by using a keyboard shortcut, such as the space bar.

• • • == Radio button==

control which can be clicked upon to select an option from a selection of options from which only one can be selected at a time. Thus radio buttons always appear in pairs or larger groups

A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options.

Radio buttons; the choice 'Cat' is selected.

Radio buttons are arranged in groups of two or more and displayed on screen as, for example, a list of circular holes that can contain white space (for unselected) or a dot (for selected). Adjacent to each radio button is normally shown a caption describing the choice that this radio button represents. When the user selects a radio button, any previously selected radio button in the same group becomes deselected. Selecting a radio button is done by clicking the mouse on the button, or the caption, or by using a keyboard shortcut.

It is possible that initially none of the radio buttons in a group are selected. This state cannot be restored by interacting with the radio button widget (but it may be possible through other user interface elements). When used in an HTML form, if no button in a group is checked, then no name-value pair is passed when the form is submitted. For example, for a radio button group named Gender with the options Male and Female, the variable Gender would not be passed, even with a blank value.

• • • ==Split button==

control combining a button (typically invoking some default action) and a drop-down list with related, secondary actions

• • Slider – control with a handle that can be moved up and down (vertical slider) or right and left (horizontal slider) to select a value (or a range if two handles are present)
  • ==List box ==

list box is a GUI widget 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 Shift key or Control key[1] in order to make multiple selections.

A list box is called select or select1 in the XForms standard. Select is used for allowing the user to select many items from a list whereas select1 only allows the user to select a single item from a list.

• • Spinner – value input control which has small up and down buttons to step through a range of values
  • Drop-down list
  • Menu – control with multiple actions which can be clicked upon to choose a selection to activate
    • Context menu – a type of menu whose contents depend on the context or state in effect when the menu is invoked
    • Pie menu
    • Ribbon
  • Menu bar
  • Toolbar
  • Combo box (text box with attached menu or List box)
  • Icon
  • Tree view
  • Grid view

• Navigation
  • Link
  • Tab
  • Scrollbar

• Text/value input
  • Text box (edit field)
  • Combo box (text box with attached menu)

• Output
  • Label – text used to describe another widget
  • Tooltip – informational window which appears when the mouse hovers over another control
  • Balloon help
  • Status bar
  • Progress bar
  • Infobar

• Containers
  • Window
    • Collapsible panel
    • Accordion (GUI)
    • Modal window
    • Dialog box
    • Palette window, also known as "Utility window"
      • Inspector window
    • Frame

See also

• Graphical user interface elements
• Metawidgets are widgets for controlling the operation of other widgets within a GUI.
• Widget engine for mostly unrelated, physically inspired "widgets"
• Widget toolkit for the implementations of widget programming interfaces