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

13.3.6 <treechildren>

Тег <treechildren> - одновременно тег для всех строк дерева и для каждого его поддерева. У него нет специальных атрибутов.

Тег <treechildren> может содержать только теги <treeitem> и <treeseparator>.

Его можно использовать двумя способами. Второй дочерний тег в теге <tree> обязан быть тегом <treechildren>. И дополнительный второй дочерний тег тега <treeitem> может быть только <treechildren>. Если его использовать вторым способом, <treechildren> должен иметь как минимум один тег <treeitem>. Если это не так, пиктограмма стрелочки будет вести себя непредсказуемо.

Тег <treechildren> также использует специальную систему стилей.

13.3.7 Тег <treeitem>

Тег <treeitem> описывает одну строку дерева. Строка это:

1. Единственная строка без поддерева.
2. Единственная строка с поддеревом, которое раскрыто.
3. Единственная строка с поддеревом, которое схлопнуто.

Этот тег может содержать либо тег <treerow> (случай 1), либо тег <treerow>, за которым следует тег <treechildren> (случаи 2 и 3). <treeitem> не может содержать несколько тегов <treerow> или <treechildren>.

Специальные атрибуты тега <treeitem>:

container open properties

Если container имеет значение true, значит строка содержит поддерево и должна иметь тег <treechildren> как второй тег контента. Если open имеет значение true, поддерево раскрыто (случай 2). По умолчанию никакие атрибуты не установлены. Эти теги оформляются специальной системой стилей.

Тег <treeitem> также поддерживает атрибуты шаблонов, например uri. См. "Шаблоны" , "Шаблоны".

13.3.8 Тег <treeseparator>

<treeseparator> прочерчивает горизонтальную линию через все дерево. Он может контролировать сортировку, как описано в "Шаблоны" , "Шаблоны". Эта горизонтальная линия не имеет отступов, так что <treeseparator> может заменить только строку верхнего уровня. Он имеет один специальный атрибут:

properties

Он используется в специальной системе стилей, описываемой в разделе "Возможности стилевого оформления". Подразумевается, что <treeseparator> имеет лишь визуальный смысл.

13.3.9 Тег <treerow>

Тег <treerow> содержит одну строку дерева. Он может содержать только теги <treecell>. Должно быть столько же тегов <treecell>, сколько было определено колонок. Определить меньшее их количество можно, но делать это не рекомендуется. Сделав так, вы уменьшите количество видимых ячеек в строке. <treerow> имеет единственный специальный атрибут:

properties

Это атрибут имеет тот же смысл, что и для тега <treeitem>.

13.3.10 Тег <treecell>

Тег <treecell> отвечает за содержание одной ячейки строки. В первичной колонке он не отвечает за отступы, стрелки или любые соединительные линии.

<treecell> не может иметь никакого XUL-контента, за исключением специально случая, когда колонка содержит тег <progressmeter>. В этом случае автоматически добавляется тег <progressmeter>. <treecell> не может содержать тег <label>.

Специальные атрибуты тега <treecell>:

label src value mode allowevents properties

label отвечает за содержание ячейки. Текст в ячейке не может сворачиваться змейкой, как происходит в теге <label>.

src можно использовать, чтобы поместить в ячейку изображение.

mode можно дать значение normal или undetermined, при условии, что данная колонка оформлена как type="progressmeter". Это дает доступ к атрибуту mode тега <progressmeter>.

value - значение, в процентах, при mode="normal" для тега <progressmeter>.

Если атрибут allowevents="true", событие, т.е. клик мышкой, например, который обычно высвечивает строку, будет передано глубже, к содержимому ячейки. В этом случае строка не будет выбрана.

properties используется в специальной системе стилей.

<treecell> также поддерживает атрибуты RDF, такие как resource и ref. См. "Шаблоны" , "Шаблоны".

13.3.11 Теги <treerows> и <treecolpicker>

Эти теги используются только внутри XBL кода. Они применяются автоматически при верстке содержания тега "дерево". <treerows> содержит все строки дерева. Он играет ту же роль для <tree>, что <listboxbody> играет для <listbox>. <treecolpicker> содержит пиктограмму и выпадающее меню колонки. Выпадающее меню генерируется автоматически при создании дерева. <treecolpicker> имеет порядковый атрибут, установленный по умолчанию в очень большое число. Это гарантирует, что он всегда появится справа от колонок дерева.

<treecolpicker> может быть оформлен стилями, как и любой XUL тег. Его пиктограмма имеет класс tree-columnpicker-icon.

Нет необходимости использовать эти теги прямо в XUL документе. XBL код, воплощающий <treecolpicker> - полезное руководство, если вам будет нужно спроектировать подобный динамический виджет.

13.3.12 Более не существующие теги

Когда-то тег <tree> назывался <outliner>, но не теперь. Тег <outliner> больше не существует. Когда <tree> назывался <outliner>, <listbox> назывался <tree>, но то дерево <tree> было отлично от современного тега <tree>. Остерегайтесь путаницы с этими древними названиями в старой документации, которая иногда появляется на сайте Mozilla, в группах новостей или в базах ошибок.

<treecolgroup> - старое название <treecols>. Оно еще существует в некоторых файлах chrome, но его не следует применять. Используйте вместо него <treecols>.

Тег <treecolpicker> - часть XBL кода <tree>. Он используется только во внутреннем XBL коде и его не следует упоминать в XUL документах.

Теги <treeindentation>, <treeicon>, <treehead>, <treecaption>, <treefoot> и <treebody> - не XUL теги. Все эти теги либо устарели, либо экспериментальны. Они не поддерживаются.

13.3.13 RDF и сортировка

Как и <listbox>, тег <tree> может быть подсоединен к DRF документу. В этом случае дерево получает содержание из этого документа. При таком условии данные дерева можно сортировать. См. "Шаблоны" , "Шаблоны".

13.3.14 Взаимодействие с пользователем

Деревья имеют те же возможности взаимодействия с пользователем, что и списки, и много больше.

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

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

Исследования показали, что человек плохо прослеживает в уме связи данных на множество уровней вниз. Лучше иметь широкое, мелкое дерево, чем глубокое, сильно структурированное, чьи поддеревья способны заполнить весь экран целиком каждое.

Низкоуровневое взаимодействие, которое дает нам дерево, очень похоже на то, что дает список. Деревья поддерживают навигацию с помощью клавиатуры и мыши, и облегчают доступность (accessibility). Навигационные клавиши включают Tab, Arrow, Paging, Home, End и пробел. Мышь поддерживает клики, комбинации клавиша-клик и использование колесика. Доступность обеспечивается автоматически, поскольку тег <treecell> имеет атрибут label.

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

Выбор строки дерева может осуществляться по-разному. Если множественный выбор невозможен, выбор делается точь-в-точь как в меню. Если, однако, seltype имеет значение multiple, можно выбрать несколько строк одновременно.

С помощью мыши это делается shift-кликом, чтобы выбрать непрерывную последовательность строк, или контрол-кликом, если нужно выбрать произвольную последовательность строк, не обязательно соседних. Непрерывная последовательность может быть выбрана и с клавиатуры, с помощью комбинации shift-стрелка.

Если выбран <treeitem>, содержащий поддерево, то выбрана оказывается только первая строка, даже если поддерево схлопнуто.

Определенную строку мы можем выбрать и нажимая символ клавиатуры, как в теге <listbox>. Для этого дерево уже должно иметь фокус. Нажатый единственный символ сравнивается с атрибутом label тега <treeitem> данного дерева. Если label начинается с того же символа, считается, что он подходит и строка выбирается.

Такая система позволяет выбрать одну строку. Она работает следующим образом: последовательность тегов <treeitem> рассматривается как кольцевая, наподобие фокусного кольца. Начальная точка - либо уже выбранная строка, либо первая, если выбранной строки нет. Дерево сканируется до тех пор, пока не найдется подходящая строка. Это позволяет нам циклически сканировать дерево много раз.

Если enableColumnDrag установлен, порядок колонок может быть переопределен просто перетаскиванием их мышкой. Просто кликните на заголовке колонки и тяните. Выпадающее меню не может передвигаться.

Если между колонками присутствуют теги <splitter>, их можно использовать, чтобы изменить ширину колонок мышкой. Размер выпадающего меню не может быть изменен. Выпадающее меню, если оно не было выключено, можно использовать, чтобы скрывать и вновь показывать колонки. Скрытые колонки сохраняются все время сессии, если установлен атрибут persist="hidden".

Наконец, можно осуществлять сортировку строк простым кликом мыши по заголовку колонки.