Первые элементы управления и темы

4.1. Что делает кнопку кнопкой?

Языки разметки вроде HTML и XUL предоставляют много возможностей визуального отображения. Иногда сложно сказать, что из виденного "настоящее", а что - сложная анимация и небольшой скрипт. Беседу о кнопках и элементах управления мы начнем с того, что посмотрим, каковы же на самом деле элементы управления Mozilla. Рассуждая об элементах управления, созданных на XML, можно немного путаться, как в следующем примере.

На рисунке 4.1 показано простое XUL-приложение, содержащее одну "настоящую" кнопку и две фальшивых. Какая из них настоящая? Хотя по рисунку видно, что самая нижняя из них нажимается, это действие можно проделать со всеми тремя.

Рис. 4.1. Фальшивые и настоящие кнопки в Mozilla

На этом рисунке настоящая кнопка самая верхняя. Две другие - просто теги <vbox>, содержащие единственный тег <description>. К тегам <vbox> применены стили, приведенные в листинге 4.1.

vbox {
  border : solid;
  border-width : 2px; 
  margin : 2px 6px;
  -moz-box-align : center; 
  border-left-color : ButtonHighlight;
  border-top-color : ButtonHighlight;
  border-right-color : ThreeDDarkShadow;
  border-bottom-color : ThreeDDarkShadow; }
vbox:active {
  border-left-color : ThreeDDarkShadow;
  border-top-color : ThreeDDarkShadow;
  border-right-color : ButtonHighlight;
  border-bottom-color : ButtonHighlight; 
}

Эти два стиля заставляют vbox при щелчке на нем вести себя как кнопка. Эти стили границ не идентичны границам, использующимся для настоящей кнопки ("Кнопка 1"). Такой блок со стилями - не настоящий элемент управления Mozilla.

С другой стороны, даже хотя информация о внешнем виде еще не составляет сам элемент управления, стиль, с точки зрения пользователя, очень важен. На рисунке 4.2 показан снимок консоли JavaScript(), в окне которой есть пара противоречивых кнопок.

Рис. 4.2. Скрытые кнопки консоли JavaScript

Кто-то может возразить, что слова "Все", "Предупреждения" и т.д. не имеют ничего общего с кнопками. Если навести указатель мыши на любой из этих элементов, появятся границы, характерные для кнопок, но ведь нет никакой подсказки, что нужно сделать именно это. Для нового пользователя это не "нормальные" кнопки, хотя с ними все в порядке. Такие кнопки довольно часто встречаются в программном обеспечении, но даже в этом случае вместо текста там должны быть картинки.

Очевидно, что есть некоторое несоответствие в том, что некоторые вещи похожи на кнопки, но не ведут себя как кнопки, а также в том, что некоторые вещи ведут себя как кнопки, хотя непохожи на них. Существует широко известный шаблон для проектирования графического интерфейса пользователя под названием MVC (Model-View-Controller, модель-вид- контроллер) - это ключ к пониманию элементов управления Mozilla. Данный шаблон широко применяется для систем с графическим интерфейсом. При его использовании элементы управления разделяются на три части: М, В и К. Внешний вид элемента управления - забота Вида. Хранение данных, нужных элементу управления, - задача Модели. Контроллер - то, что связывает внешний вид с данными, необходимыми элементу управления.

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

Элементы управления Mozilla определяются их возможностями. В Mozilla можно убрать оформление кнопки (Вид), игнорируя стиль и тривиальное содержимое. Можно также лишить ее эффекта, удалив данные (Модель), с которыми она работает. Останется только то, что кнопка могла бы делать. Все, что она могла бы сделать - и есть ее возможности (и часть Контроллера). Такие возможности и составляют сущность кнопки. Именно на них мы попытаемся сосредоточиться в этой лекции.

Например, у XUL-тега <button> есть несколько простых и несколько сложных возможностей. Простые - состояние кнопки, обработчики событий и специфичные для кнопок атрибуты XML. Более сложные включают в себя дополнительные функции для людей с ограниченными возможностями, а также возможность находиться в списке навигации, использовать кнопки из набора графических элементов ОС и поддерживать собственные темы ОС.