Каждый виджет обеспечивает определенный тип взаимодействия пользователя с компьютером и отображается как видимая часть графического интерфейса пользователя приложения, как определено темой и визуализировано движком рендеринга. Тема заставляет все виджеты придерживаться единого эстетического дизайна и создает ощущение общей сплоченности. Некоторые виджеты поддерживают взаимодействие с пользователем, например, метки, кнопки и флажки . Другие действуют как контейнеры , которые группируют добавленные к ним виджеты, например, окна , панели и вкладки.
Структурирование пользовательского интерфейса с помощью наборов инструментов виджетов позволяет разработчикам повторно использовать код для аналогичных задач и предоставляет пользователям общий язык для взаимодействия, поддерживая согласованность во всей информационной системе.
Около 1920 года слово widget вошло в американский английский как общее название любого полезного устройства, в частности продукта, произведенного для продажи; гаджет .
Набор инструментов предоставляет библиотеку компонентов пользовательского интерфейса («виджетов»), таких как текстовые метки, полосы прокрутки, кнопки команд и меню; позволяет программистам писать новые виджеты; и предоставляет связующее звено для сборки виджетов в полноценный пользовательский интерфейс.
В том же году в руководстве X Toolkit Widgets - C Language X Interface Ральфа Р. Свика и Терри Вайсмана говорится: [3]
В X Toolkit виджет представляет собой комбинацию окна X или подокна и связанной с ним семантики ввода и вывода.
Наконец, в том же году Ральф Р. Суик и Марк С. Акерман объясняют, откуда появился термин «виджет» : [4]
Мы выбрали этот термин, поскольку все другие общие термины были перегружены неподходящими коннотациями. Однако мы предлагаем скептикам наблюдение, что основная реализация виджета — это его связанное окно X, и общая начальная буква не бесполезна.
Использование
Любой виджет отображает информационную структуру, которую может изменять пользователь, например, окно или текстовое поле . Определяющей характеристикой виджета является предоставление единой точки взаимодействия для прямого манипулирования данным типом данных. Другими словами, виджеты — это базовые визуальные строительные блоки, которые, объединенные в приложении, содержат все данные, обрабатываемые приложением, и доступные взаимодействия с этими данными.
Виджеты GUI — это графические элементы, используемые для построения человеко-машинного интерфейса программы. Виджеты GUI реализуются как программные компоненты . Наборы инструментов для виджетов и программные фреймворки, такие как, например, GTK+ или Qt , содержат их в программных библиотеках , чтобы программисты могли использовать их для построения графических интерфейсов для своих программ.
Семейство общих повторно используемых виджетов было разработано для хранения общей информации на основе исследований Palo Alto Research Center Inc. для Xerox Alto User Interface. Различные реализации этих общих виджетов часто упаковываются вместе в наборы инструментов для виджетов , которые программисты используют для создания графических пользовательских интерфейсов (GUI). Большинство операционных систем включают набор готовых к настройке виджетов, которые программист может включить в приложение, указав, как оно должно себя вести. [5] Каждый тип виджета обычно определяется как класс в объектно-ориентированном программировании ( ООП ). Поэтому многие виджеты являются производными от наследования классов.
В контексте приложения виджет может быть включен или выключен в определенный момент времени. Включенный виджет имеет возможность реагировать на события, такие как нажатия клавиш или действия мыши. Виджет, который не может реагировать на такие события, считается отключенным. Внешний вид виджета обычно отличается в зависимости от того, включен он или отключен; в отключенном состоянии виджет может быть нарисован более светлым цветом (« серым ») или быть каким-либо образом визуально скрыт. См. соседнее изображение для примера.
Преимущество отключения недоступных элементов управления вместо их полного скрытия заключается в том, что пользователи видят, что элемент управления существует, но в данный момент недоступен (подразумевая, что изменение какого-либо другого элемента управления может сделать его доступным), вместо того, чтобы оставлять пользователя в неведении относительно того, где вообще найти элемент управления. Во всплывающих диалоговых окнах кнопки могут отображаться серыми вскоре после появления, чтобы предотвратить случайное нажатие или непреднамеренное двойное нажатие.
Иногда виджеты квалифицируются как виртуальные, чтобы отличить их от их физических аналогов, например, виртуальных кнопок , которые можно нажимать указателем , и физических кнопок, которые можно нажимать пальцем (например, на компьютерной мыши ).
Связанная (но другая) концепция — это виджет рабочего стола , небольшое специализированное приложение с графическим интерфейсом, которое предоставляет некоторую визуальную информацию и/или легкий доступ к часто используемым функциям, таким как часы, календари, агрегаторы новостей, калькуляторы и заметки рабочего стола. Эти виды виджетов размещаются на движке виджетов .
Список общих виджетов
Отбор и экспозиция коллекций
Кнопка – элемент управления, на который можно нажать для выполнения действия. Эквивалент кнопки , которая есть на механических или электронных приборах.
Радиокнопка – элемент управления, на который можно нажать, чтобы выбрать один вариант из набора вариантов, аналогично выбору радиостанции из группы кнопок, предназначенных для настройки радио. Радиокнопки всегда отображаются парами или большими группами, и только один вариант в группе может быть выбран за раз; выбор нового элемента из кнопок группы также отменяет выбор ранее выбранной кнопки.
Флажок — элемент управления, на который можно нажать, чтобы включить или отключить опцию. Также называется флажком. Флажок указывает состояние «вкл» или «выкл» с помощью галочки /галочки ☑ или крестика ☒. Может отображаться в промежуточном состоянии (затененным или с черточкой), чтобы указать, что различные объекты в множественном выборе имеют разные значения для свойства, представленного флажком. Можно выбрать несколько флажков в группе, в отличие от радиокнопок.
Переключатель — функционально похож на флажок. Может быть включен и выключен, но в отличие от флажков, обычно имеет немедленный эффект.
Кнопка переключения — функционально похожа на флажок, работает как переключатель , хотя выглядит как кнопка. Может быть включена и выключена.
Разделенная кнопка — элемент управления, объединяющий кнопку (обычно вызывающую какое-либо действие по умолчанию) и раскрывающийся список со связанными, второстепенными действиями.
Кнопка «Цикл» — кнопка, которая циклически переключает свое содержимое по двум или более значениям, позволяя тем самым выбрать один из группы элементов.
Ползунок – элемент управления с ручкой, которую можно перемещать вверх и вниз (вертикальный ползунок) или вправо и влево (горизонтальный ползунок) на панели для выбора значения (или диапазона, если присутствуют два ползунка). Панель позволяет пользователям вносить изменения в значение или процесс в диапазоне допустимых значений.
Список — графический элемент управления, позволяющий пользователю выбрать один или несколько элементов из списка, содержащегося в статическом многострочном текстовом поле.
Spinner – элемент управления вводом значений, который имеет небольшие кнопки вверх и вниз для перехода по диапазону значений.
Раскрывающийся список – список элементов, из которых можно выбрать. Обычно список отображает элементы только при нажатии специальной кнопки или индикатора.
Меню – элемент управления с несколькими действиями, на которые можно нажать, чтобы выбрать нужный вариант для активации.
Контекстное меню — тип меню, содержимое которого зависит от контекста или состояния, действующего при вызове меню.
Круговое меню – круговое контекстное меню, в котором выбор зависит от направления
Строка меню – графический элемент управления, содержащий раскрывающиеся меню.
Панель инструментов — графический элемент управления, на котором размещаются экранные кнопки, значки, меню или другие элементы ввода или вывода.
Лента — гибрид меню и панели инструментов, отображающий большой набор команд в визуальной компоновке посредством интерфейса с вкладками.
Ссылка — текст с каким-либо индикатором (обычно подчеркиванием и/или цветом), указывающим, что нажатие на него перенесет на другой экран или страницу.
Вкладка — графический элемент управления, позволяющий размещать несколько документов или панелей в одном окне.
Полоса прокрутки — графический элемент управления, с помощью которого можно прокручивать непрерывный текст, изображения или любой другой контент в заданном направлении (вверх, вниз, влево или вправо).
Ввод текста/значения
Текстовое поле (поле редактирования) — графический элемент управления, позволяющий пользователю вводить текст.
Выход
Метка – текст, используемый для описания другого виджета.
Подсказка – информационное окно, которое появляется при наведении мыши на другой элемент управления.
Строка состояния – графический элемент управления, представляющий собой информационную область, обычно находящуюся в нижней части окна.
Индикатор выполнения — графический элемент управления, используемый для визуализации хода выполнения расширенной компьютерной операции, такой как загрузка, передача файла или установка.
Информационная панель — графический элемент управления, используемый многими программами для отображения некритической информации пользователю.
Контейнер
Окно — графический элемент управления, состоящий из визуальной области, содержащей некоторые элементы графического интерфейса пользователя программы, к которой он принадлежит.
Сворачиваемая панель — панель, на которой можно компактно хранить контент, который можно скрыть или открыть, нажав на вкладку виджета.
Ящик : Боковые листы или поверхности, содержащие дополнительное содержимое, которое можно прикрепить, вытащить или отодвинуть за левый или правый край экрана. [6]
Аккордеон — вертикально расположенный список элементов, таких как метки или миниатюры, где каждый элемент можно «развернуть», чтобы отобразить связанный с ним контент.
Модальное окно — графический элемент управления, подчиненный главному окну приложения, создающий режим, в котором главное окно не может быть использовано.
Диалоговое окно – небольшое окно, которое передает информацию пользователю и запрашивает ответ.
Окно палитры (также известное как «окно утилит») — графический элемент управления, который располагается поверх всех обычных окон и предлагает инструменты, команды или информацию для быстрого доступа к текущему приложению.
Окно инспектора — тип диалогового окна, которое показывает список текущих атрибутов выбранного объекта и позволяет изменять эти параметры «на лету».
Рамка — тип рамки, внутри которой может быть сгруппирована коллекция графических элементов управления для визуального отображения взаимосвязей.
Холст – универсальный элемент рисования для представления графической информации.
Cover Flow — анимированный трехмерный элемент для визуального перелистывания снимков документов, закладок веб-сайтов, обложек альбомов или фотографий.
Bubble Flow — анимированный двухмерный элемент, позволяющий пользователям просматривать и взаимодействовать со всем древовидным представлением ветки обсуждения.
Карусель (вычислительная техника) – графический виджет, используемый для отображения визуальных карточек таким образом, чтобы пользователи могли быстро просматривать их как на веб-сайтах, так и в мобильных приложениях.
^ "Microsoft: Графические элементы". msdn.microsoft.com . Microsoft . Получено 27 апреля 2015 г. .
^ МакКормак, Джоэл; Асенте, Пол (1988). «Обзор инструментария X». Труды 1-го ежегодного симпозиума ACM SIGGRAPH по программному обеспечению пользовательского интерфейса . стр. 46–55. doi :10.1145/62402.62407. ISBN0897912837. S2CID 12924752.
^ Суик, Ральф Р.; Вайсман, Терри (1988). Виджеты X Toolkit — Интерфейс языка C X. стр. 1.
^ Ральф Р. Суик, Марк С. Акерман (1988). «X Toolkit: больше кирпичиков для создания пользовательских интерфейсов –или– виджетов для найма». USENIX Winter . стр. 221–228 . Получено 20 ноября 2022 г.
^ "Что такое виджет? - Определение с WhatIs.com". WhatIs.com . Получено 2020-06-03 .