Опубликован: 10.12.2007 | Доступ: свободный | Студентов: 822 / 20 | Оценка: 5.00 / 5.00 | Длительность: 58:33:00
Лекция 7:

Формы и меню

7.1. Сравнение XUL- и HTML-форм

В HTML/XHTML есть тег <FORM>. Этот тег объединяет теги <BUTTON>, <SELECT>, <INPUT> и <TEXTAREA> в одну группу. У DOM-объекта, соответствующего <FORM>, есть методы, составляющие значения полей формы в HTTP-запрос GET или POST. Это автоматизация процесса постоянного сбора данных формы путем их отправки на какой-либо web-сервер. В результате web-приложения на основе HTML теперь распространены повсеместно.

В XUL нет эквивалента тегу <FORM>. Эквивалентные элементы управления форм в XUL не объединяются в группы (за исключением группы <radiogroup> ). В XUL нет аналога <INPUT TYPE="reset"> или <INPUT TYPE="submit"> и нет полуавтоматического процесса отправки данных формы. Если пользователю дан один лишь только XUL-документ, при вводе информации ничего не произойдет.

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

С другой стороны, элементы управления XUL-форм более разнообразны, чем в HTML. Теги <button>, <textbox> и <menu> более гибки, чем их HTML-аналоги. Кроме того, в XUL существует множество более функциональных тегов вроде <menubar>, <listbox> и <tree>, гораздо более сложных, чем то, что может предложить HTML. Эти дополнительные теги рассматриваются в более поздних лекциях.

В таблице 7.1 перечислены XUL-теги, наиболее похожие на HTML-теги форм и меню.

Таблица 7.1. Сравнение HTML- и XUL-тегов форм и меню
HTML-тег XUL-тег Примечания
<FORM> нет Используйте объект XMLHttpRequest
<BUTTON> <button>
<INPUT TYPE="button"> <button>
<INPUT TYPE="text"> <textbox>
<INPUT TYPE="radio"> <radio> Или <button type="radio">
<INPUT TYPE="checkbox"> <checkbox> Или <button type="checkbox">
<INPUT TYPE="password"> <textbox type="password">
<INPUT TYPE="submit"> нет Используйте <button> и скрипт
<INPUT TYPE="reset"> нет Используйте <button> и скрипт
<INPUT TYPE="file"> нет Используйте объект FilePicker
<INPUT TYPE="hidden"> нет Используйте обычную переменную JavaScript
<INPUT TYPE="image"> <button> В любом случае для отправки формы используйте скрипт
<SELECT> <menulist> или <listbox>
<OPTGROUP> нет Вместо этого используйте <menuseparator>
<OPTION> <menuitem>
<TEXTAREA> <textbox multiline="true"> Поддерживает атрибуты rows и cols
<LABEL> <label> См. обзор альтернативных возможностей доступа
<FIELDSET> <groupbox>
<LEGEND> <caption>
<INPUT TYPE="radio" NAME=> <radiogroup>

7.2. Где найти информацию о меню

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

  • в этой лекции описываются выпадающие меню как элементы управления форм. Эти элементы управления основываются на теге <menulist>, который строится из <menupopup>, <menuitem> и других тегов, также описанных здесь;
  • кнопки, похожие на меню, описываются в "Первые элементы управления и темы" , "Первые элементы управления и темы";
  • невыпадающие меню появляются в документе как обычный многострочный список. В XUL и HTML такие меню называются окнами списка. XUL-тег <listbox> описывается в "Списки и Деревья" , "Списки и деревья";
  • меню, открывающиеся на панелях меню и представленные тегом <menu>, описываются в "Навигация" , "Навигация". Но в этой лекции рассказано об использовании <menu> для создания подменю;
  • контекстные меню, создаваемые тегом <menupopup>, описываются в "Окна и панели" , "Окна и панели".

Единственное существенное различие между меню в XUL заключается в разнице между <listbox> и <menulist>. Первый из них гораздо сложнее. Все остальные упомянутые теги - вариации на тему <menulist>. Все выпадающие меню реализуются с помощью тега <menupopup>.