Списки и Деревья

13.6. Отладка: как заставить <listbox> и <tree> работать

Теги <listbox> и <tree> сложнее элементов форм и могут очень разочаровать, если с самого начала не взяться за дело правильно. Тег <listbox> имеет много нюансов, а это требует осторожности в обращении. Несмотря на внешнюю сложность, тег <tree> - не столь хрупкое существо. Он работает стабильно, и если в дереве не появляется данных, ищите ошибку у себя в коде. По мере того, как Mozilla "взрослеет", эти теги, без сомнения, будут все более и более надежны и дружественны к пользователю.

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

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

Множество проблем с этими виджетами - следствие простого недосмотра. Приведем примеры.

Отсутствие атрибутов flex="1". Теги, окружающие <tree> и <listbox>, сами эти теги, спецификации колонок сильно выиграют от использования данного атрибута.

Использование сокращенного синтаксиса для <tree>. Тег <tree> и его контент не имеют сокращенного синтаксиса. Все теги обязательны и должны быть полностью выписаны. Тег <listbox> может допускать некоторые сокращения.

Отсутствие идентификаторов ids. Если теги <treecol> не имеют атрибутов ids, вы ничего не сможете выбрать в дереве.

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

Недостаточная подготовка. Да, документация по AOM, XBL, DOM, и XPIDL очень разнородна, да плюс еще этот курс! Разобраться удастся не сразу. Попытайтесь исследовать теги <tree> и <listbox> с помощью DOM Inspector, а потом перечитайте данную лекцию.

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

В целом, теги <tree> и <listbox> не могут быть использованы столь же легко, как, например, тег <button>. До тех пор, пока тег <listbox> не оттестирован достаточно, постарайтесь не дать ему возможность влиять на дочерние, родительские и просто соседние теги. Пусть он будет ограничен собственной прямоугольной областью и только. В противном случае может возникнуть непредсказуемое поведение какого-либо элемента, а выяснить причину может оказаться нелегко.

13.7. Итоги

<listbox> и <tree> - мощные виджеты в "зверинце" XUL. Это теги на стероидах. <listbox> слегка неустойчив в работе, а <tree> - несколько сложен, но оба они представляют собой очень гибкие системы для серьезных, ориентированных на обработку данных, приложений.

До сих пор, однако, мы работали со статическими данными. Альтернатива в виде управления динамическим контентом с помощью сценариев, использующих DOM, весьма трудоемка и часто неуклюжа. Требуется что-то новенькое. Это шаблоны, которые мы рассмотрим в "Шаблоны" .