Опубликован: 10.12.2007 | Уровень: специалист | Доступ: платный
Лекция 7:

Формы и меню

7.7. Отладка: события в формах

Формы и события не так уж интересны, если только вы не составляете собственные элементы управления. Некоторые стандартные методики могут упростить задачу.

7.7.1. Неоткрывающиеся меню

Тег <menupopup> появляется, только когда вы нажимаете на связанную с ним кнопку. Это может быть неудобно, если просто требуется проверить, корректно ли составленное содержимое. Вы можете поместить меню в нормальный поток XUL-документа, изменив его стиль отображения так:

menupopup { display: -moz-box ! important }

После этого меню больше не будет интерактивным, но можно будет, по крайней мере, без труда просматривать его содержимое. На рисунке 7.6 показан тот же документ, что и на рисунке 7.3, только с использованием указанного выше стиля.

Пример встраивания содержимого <menupopup> в документ

Рис. 7.6. Пример встраивания содержимого <menupopup> в документ

Вообще это не лучшая стратегия реализации или даже тестирования; просто такой способ работает и иногда бывает наиболее удобным.

7.7.2. Разбор сложных элементов управления

Для освоения сложных элементов управления вроде <menulist> могут потребоваться некоторые усилия, особенно если вам не нравится содержимое, внешний вид или поведение по умолчанию. Простейшая стратегия - анализировать данный тег с помощью Инспектора DOM. Этот инструмент раскроет содержимое, идентификаторы и классы стилей данного тега, вам нужно будет только нажать на кнопку. Это так просто, почему бы не поэкспериментировать?

Другая используемая в этой лекции и некоторых других стратегия - применение специальных таблиц стилей. Некоторые из примеров в этой книге дополнены простыми стилями, которые создают визуальные подсказки. В листинге 7.7 показаны примеры таких вспомогательных стилей.

label { 
  border: dashed thin; 
  padding: 2px; 
  margin: 2px;
} 
image { 
  border: solid thin; 
  padding: 2px; 
  margin: 2px; 
} 
.radio-check { 
  width:20px; 
  height:20px;
} 
.checkbox-check { 
  width:20px; 
  height:20px;
} 
vbox, hbox, box, deck { 
  border: solid; 
  padding: 2px; 
  margin: 2px; 
  border-color: grey;
} 
* { 
font-family:Arial; 
font-weight: bold;
}
Листинг 7.7. Пример вспомогательных стилей

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

7.7.3. Поиск свойств для форм и меню

В этой лекции описывается XUL-интерфейс для форм и меню Mozilla, но не JavaScript-интерфейсы для соответствующих DOM-объектов этих тегов. Есть несколько способов поиска AOM- и DOM-свойств и методов этих объектов.

  • Догадка. Многие из свойств XUL-интерфейсов точно копируют свойства элементов HTML-форм. SelectedIndex, focus() и blur() - все они работают ожидаемым образом. Они также задокументированы в стандарте DOM 1 Core, в разделе, посвященном HTML.
  • Пользуйтесь Инспектором DOM. Выберите тег в левой панели, а из меню инструментов вверху правой панели выберите JavaScript Object. Откроются имена всех свойств и методов. Чтобы найти значения свойств объекта, обратитесь к данной книге или стандартам CSS 2 и CSS 3.
  • Прочитайте XBL-определения. XBL-связки для каждого элемента формы или меню находятся в архиве chrome toolkit.jar. После прочтения "XBL-связки" , "XBL-связки", эти определения воспринимаются как некоторая подсказка. XBL-определения содержат имена параметров для каждого метода, чего пока еще нет в Инспекторе DOM.

7.8. Итоги

Формы и меню - первая жизненно важная точка доступа для пользователей, которые хотят взаимодействовать с приложениями на основе Mozilla. XUL поддерживает простые элементы управления формы (или просто элементы формы), с которыми пользователи браузеров уже знакомы. Однако поддержка в XUL такими простыми элементами форм и меню не ограничивается. Эта поддержка идет гораздо дальше и не связана жестко с действиями пользователя, как в случае HTML-форм.

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

И формы, и меню достаточно интересны, но если увлечься ими слишком сильно, пользователь не сможет отправиться куда-то еще или исследовать другие части сложного приложения. Поддержка возможностей навигации - тема "Навигация" .

Дмитрий Гуменюк
Дмитрий Гуменюк
Россия, Звенигород
Konstantin Grishko
Konstantin Grishko
Россия, Москва, Московский финансово-промышленный университет "Синергия", Москва