Графический виджет

Эта статья о повторно используемых компонентах для создания пользовательских интерфейсов. Информацию о небольших настольных/веб-приложениях см. в разделе Виджет «Программное обеспечение» . Чтобы узнать о других целях, см. Виджет .

gtk3-demo — программа для демонстрации виджетов GTK + версии 3.

( Графический виджет также графический элемент управления или элемент управления ) в графическом пользовательском интерфейсе — это элемент взаимодействия , такой как кнопка или полоса прокрутки . Элементы управления — это программные компоненты , с которыми пользователь компьютера взаимодействует посредством прямых манипуляций для чтения или редактирования информации о приложении. Библиотеки пользовательского интерфейса, такие как Windows Presentation Foundation , Qt , GTK и Cocoa , содержат набор элементов управления и логику для их отображения.

Каждый виджет обеспечивает определенный тип взаимодействия пользователя с компьютером и отображается как видимая часть графического пользовательского интерфейса приложения, определяемого темой и отображаемого механизмом рендеринга. Благодаря этой теме все виджеты имеют единый эстетический дизайн и создают ощущение общей сплоченности. Некоторые виджеты поддерживают взаимодействие с пользователем, например метки, кнопки и флажки . Другие действуют как контейнеры , группирующие добавленные к ним виджеты, например окна , панели и вкладки.

Структурирование пользовательского интерфейса с помощью наборов инструментов виджетов позволяет разработчикам повторно использовать код для аналогичных задач и предоставляет пользователям общий язык для взаимодействия, поддерживая согласованность во всей информационной системе.

Разработчики графического пользовательского интерфейса облегчают создание графических интерфейсов в режиме WYSIWYG, используя язык разметки пользовательского интерфейса . Они автоматически генерируют весь исходный код виджета на основе общих описаний, предоставленных разработчиком, обычно путем прямых манипуляций .

История

Дополнительная информация: История графического интерфейса пользователя.

Примерно в 1920 году слово «виджет» вошло в американский английский как общий термин для обозначения любого полезного устройства, особенно продукта, производимого для продажи; гаджет ​ .

В 1988 году термин «виджет» был засвидетельствован в контексте Project Athena и X Window System . В «Обзоре X Toolkit» и Джоэла МакКормака Пола Асенте говорится:

Набор инструментов предоставляет библиотеку компонентов пользовательского интерфейса («виджетов»), таких как текстовые метки, полосы прокрутки, командные кнопки и меню; позволяет программистам писать новые виджеты; и обеспечивает связующее звено для сборки виджетов в полноценный пользовательский интерфейс.

В том же году в руководстве X Toolkit Widgets — C Language X Interface Ральфа Р. Свика и Терри Вайсмана говорится:

В X Toolkit виджет представляет собой комбинацию X-окна или подокна и связанной с ним семантики ввода и вывода.

термин «виджет» : Наконец, еще в том же году Ральф Р. Свик и Марк С. Акерман объясняют, откуда взялся

Мы выбрали этот термин, поскольку все остальные распространенные термины были перегружены неуместными коннотациями. Однако мы предлагаем скептикам заметить, что основной реализацией виджета является связанное с ним X-окно, и общая начальная буква не является бесполезной.

Использование

Пример включенных и отключенных виджетов; рамка . внизу отключена, они выделены серым цветом

Любой виджет отображает расположение информации, которое может изменить пользователь, например окно или текстовое поле . Определяющей характеристикой виджета является предоставление единой точки взаимодействия для прямого манипулирования данными данного типа. Другими словами, виджеты — это базовые визуальные строительные блоки, которые, объединенные в приложение, содержат все данные, обрабатываемые приложением, и доступные взаимодействия с этими данными.

Виджеты графического пользовательского интерфейса — это графические элементы, используемые для создания человеко-машинного интерфейса программы. Виджеты графического пользовательского интерфейса реализованы как программные компоненты . Наборы инструментов для виджетов и программные платформы, такие как, например, GTK+ или Qt , содержат их в библиотеках программного обеспечения , чтобы программисты могли использовать их для создания графических интерфейсов для своих программ.

, было разработано семейство распространенных многоразовых виджетов для хранения общей информации Palo Alto Research Center Inc., На основе исследования посвященного пользовательскому интерфейсу Xerox Alto . Различные реализации этих универсальных виджетов часто объединяются в наборы инструментов для виджетов , которые программисты используют для создания графических пользовательских интерфейсов (GUI). Большинство операционных систем включают в себя набор готовых к адаптации виджетов, которые программист может включить в приложение, указав, как оно должно вести себя. Каждый тип виджета обычно определяется как класс объектно-ориентированным программированием ( ООП ). Таким образом, многие виджеты являются производными от наследования классов.

В контексте приложения виджет может быть включен или отключен в определенный момент времени. Включенный виджет может реагировать на такие события, как нажатия клавиш или действия мыши. Виджет, который не может реагировать на подобные события, считается отключенным. Внешний вид виджета обычно различается в зависимости от того, включен он или отключен; если этот параметр отключен, виджет может отображаться более светлым цветом (« серым цветом ») или каким-либо образом быть скрытым визуально. Пример смотрите на соседнем изображении.

Преимущество отключения недоступных элементов управления вместо их полного сокрытия заключается в том, что пользователям показывается, что элемент управления существует, но в настоящее время недоступен (подразумевается, что изменение какого-либо другого элемента управления может сделать его доступным), вместо того, чтобы, возможно, оставлять пользователя неуверенным в том, где его найти. контроль вообще. Во всплывающих диалоговых окнах кнопки могут стать серыми вскоре после появления, чтобы предотвратить случайное нажатие или непреднамеренное двойное нажатие.

Виджеты иногда называют виртуальными, чтобы отличить их от своих физических аналогов, например, виртуальных кнопок , на которые можно нажимать указателем , и физических кнопок, на которые можно нажимать пальцем (например, на компьютерной мыши ).

Родственная (но другая) концепция — это виджет рабочего стола , небольшое специализированное приложение с графическим интерфейсом, которое предоставляет некоторую визуальную информацию и/или легкий доступ к часто используемым функциям, таким как часы, календари, агрегаторы новостей, калькуляторы и заметки на рабочем столе. Эти виды виджетов размещаются в движке виджетов .

Список распространенных универсальных виджетов

Различные виджеты, показанные в Ubuntu .

Виджеты Qt отображаются в соответствии с тремя различными скинами (художественное оформление): Plastik, Keramik и Windows.

См. также: Элементы графического пользовательского интерфейса.

Выбор и показ коллекций

• Кнопка – элемент управления, на который можно нажать, чтобы выполнить действие. Эквивалент кнопки на механических или электронных инструментах.
  • Радиокнопка – элемент управления, при нажатии на который можно выбрать один вариант из множества вариантов, аналогично выбору радиостанции из группы кнопок, предназначенных для настройки радио. Переключатели всегда отображаются парами или более крупными группами, и одновременно можно выбрать только один параметр в группе; выбор нового элемента из кнопок группы также отменяет выбор ранее выбранной кнопки.
  • Флажок – элемент управления, на который можно нажать, чтобы включить или отключить опцию. Также называется флажком. Поле указывает на состояние «включено» или «выключено» с помощью галочки ☑ или крестика ☒. Может отображаться в промежуточном состоянии (затененном или с тире), чтобы указать, что различные объекты в множественном выборе имеют разные значения свойства, представленного флажком. В отличие от переключателей в группе можно выбрать несколько флажков.
  • Тумблер — функционально похож на флажок. Можно включать и выключать, но в отличие от флажков, это обычно дает немедленный эффект.
  • Кнопка переключения — функционально аналогична флажку, работает как переключатель , но выглядит как кнопка. Можно включать и выключать.
  • Кнопка разделения — элемент управления, объединяющий кнопку (обычно вызывающую какое-либо действие по умолчанию) и раскрывающийся список со связанными второстепенными действиями.
  • Кнопка цикла — кнопка, которая циклически меняет свое содержимое между двумя или более значениями, позволяя, таким образом, выбрать один из группы элементов.
• Ползунок — элемент управления с ручкой, которую можно перемещать вверх и вниз (вертикальный ползунок) или вправо и влево (горизонтальный ползунок) на панели для выбора значения (или диапазона, если присутствуют два маркера). Панель позволяет пользователям вносить изменения в значение или процесс в диапазоне допустимых значений.
• Поле списка – графический элемент управления, который позволяет пользователю выбирать один или несколько элементов из списка, содержащегося в статическом многострочном текстовом поле.
• Spinner – элемент управления вводом значений с небольшими кнопками вверх и вниз для перехода по диапазону значений.
• Раскрывающийся список – список элементов, из которых можно выбрать. Обычно в списке элементы отображаются только при нажатии специальной кнопки или индикатора.
• Меню — элемент управления с несколькими действиями, на которые можно нажать, чтобы выбрать вариант для активации.
  • Контекстное меню - тип меню, содержимое которого зависит от контекста или состояния, действующего при вызове меню.
  • Круговое меню — круглое контекстное меню, выбор которого зависит от направления.
• Строка меню – графический элемент управления, содержащий раскрывающиеся меню.
• Панель инструментов – графический элемент управления, на котором размещаются экранные кнопки, значки, меню или другие элементы ввода или вывода.
  • Лента — гибрид меню и панели инструментов, отображающий большую коллекцию команд в визуальном макете через интерфейс с вкладками.
• Поле со списком ( текстовое поле с прикрепленным меню или поле списка ) — комбинация однострочного текстового поля и раскрывающегося списка или поля списка , позволяющая пользователю либо вводить значение непосредственно в элемент управления, либо выбирать из списка. существующие варианты.
• Значок – быстро понятный символ программного инструмента, функции или файла данных.
• Древовидное представление – графический элемент управления, который представляет иерархическое представление информации.
• Представление сетки или сетка данных — электронной таблицы представление данных в виде табличное , которое позволяет вводить числа или текст в строках и столбцах.

Навигация

• Ссылка — текст с каким-либо индикатором (обычно подчеркиванием и/или цветом), который указывает, что нажатие на него приведет к переходу на другой экран или страницу.
• Вкладка – графический элемент управления, который позволяет содержать несколько документов или панелей в одном окне.
• Полоса прокрутки – графический элемент управления, с помощью которого можно прокручивать непрерывный текст, изображения или любой другой контент в заданном направлении (вверх, вниз, влево или вправо).

Ввод текста/значения

• Текстовое поле – (поле редактирования) – графический элемент управления, предназначенный для предоставления пользователю возможности ввода текста.

Выход

• Метка — текст, используемый для описания другого виджета.
• Подсказка – информационное окно, которое появляется при наведении курсора мыши на другой элемент управления.
• Помощь с воздушным шаром
• Строка состояния - графический элемент управления, который представляет собой информационную область, обычно расположенную в нижней части окна.
• Индикатор выполнения — графический элемент управления, используемый для визуализации хода расширенной операции компьютера, такой как загрузка, передача файла или установка.
• Информационная панель – графический элемент управления, используемый многими программами для отображения некритической информации пользователю.

Контейнер

• Окно – графический элемент управления, состоящий из визуальной области, содержащей некоторые элементы графического интерфейса пользователя программы, которой он принадлежит.
• Складная панель — панель, на которой можно компактно хранить контент, который скрывается или открывается при нажатии на вкладку виджета.
  • Ящик : Боковые листы или поверхности, содержащие дополнительный контент, который можно прикрепить, вытащить или выдвинуть за пределы левого или правого края экрана.
• Аккордеон - вертикально расположенный список элементов, таких как метки или миниатюры, где каждый элемент можно «расширить», чтобы показать связанное с ним содержимое.
• Модальное окно – графический элемент управления, подчиненный главному окну приложения, создающий режим, в котором основное окно невозможно использовать.
• Диалоговое окно – небольшое окно, которое передает информацию пользователю и запрашивает ответ.
• Окно палитры , также известное как «Окно утилиты», — графический элемент управления, который располагается поверх всех обычных окон и предлагает инструменты быстрого доступа, команды или информацию для текущего приложения.
  • Окно инспектора – тип диалогового окна, которое отображает список текущих атрибутов выбранного объекта и позволяет изменять эти параметры на лету.
• Рамка – тип рамки, внутри которой можно сгруппировать набор графических элементов управления, чтобы визуально показать взаимосвязи.
• Холст – общий элемент рисования для представления графической информации.
• Cover Flow – анимированный трехмерный элемент для визуального пролистывания снимков документов, закладок веб-сайтов, обложек альбомов или фотографий.
• Bubble Flow – анимированный двухмерный элемент, который позволяет пользователям просматривать и взаимодействовать со всем древовидным представлением ветки обсуждения.
• Карусель (вычисления) – графический виджет, используемый для отображения визуальных карточек таким образом, чтобы пользователи могли быстро просматривать их как на веб-сайтах, так и в мобильных приложениях.

См. также

• Элементы графического пользовательского интерфейса
• Геометрический примитив
• Механизм виджетов для в основном несвязанных, физически вдохновленных «виджетов».
• Набор инструментов для виджетов - программная библиотека, содержащая коллекцию виджетов.
• Техника взаимодействия

Внешние ссылки

• Упакованные веб-приложения (виджеты) — упаковка и конфигурация XML (второе издание) — рекомендация W3C, 27 ноября 2012 г.
• Виджеты 1.0: ландшафт виджетов (первый квартал 2008 г.). Рабочий проект W3C от 14 апреля 2008 г.
• Требования к стандартизации виджетов. Примечание рабочей группы W3C, 27 сентября 2011 г.