Одна из вещей, которая мне нравится в XML и связанных с ним технологиях - это то, что там всегда можно научиться чему-то новому. Я использую XML уже более трех лет, и чуть ли не каждую неделю я с удовольствием обнаруживаю что-нибудь новенькое, что можно делать с его помощью, или, даже лучше, более лёгкий способ сделать что-то, в чем, по моему мнению, я уже разбираюсь.
Одно из таких открытий произошло недавно в связи с отрисовкой иерархий типа "связанное дерево". Связанное дерево - это дерево, в котором узлы соединены со своими детьми и родителями линиями, как это часто изображают в файловых менеджерах или оглавлениях (см. пример на рисунке 1). Приложение, над которым я сейчас работаю, использует такой тип отображения для различных целей, что затрудняет реализацию его для различных типов данных. Однако, все типы иерархий доступны в виде DOM-деревьев. Это привело меня к мысли, что если я смогу реализовать отрисовку связанных деревьев только с помощью XSLT, то смогу избавиться от большого количества кода для отрисовки деревьев, заменив его одним XSLT-шаблоном, тем самым сильно упростив наш код.
В результате несколько сот строк подверженного ошибкам Java-кода (разбросанного по нескольким классам) были заменены на несколько дюжин строк XSL в единственном шаблоне, что повысило надежность, простоту поддержки и внесения изменений. В этой статье я расскажу, как мы это сделали.
Я уверен, что большинству читателей уже известно, что XSL и XSLT - это два связанных стандарта описывающих преобразование одних и тех же данных из XML в какой-либо другой требуемый формат. XSL-шаблон является своего рода инструкцией для поиска данных в исходном XML, их преобразования и вывода преобразованной версии. У этой технологии существует множество применений, но, вероятно, самым распространенным является преобразование XML в HTML, подходящий для просмотра человеком.
Еще одна спецификация, называемая XPath, широко используется в XSLT. XPath - это функциональный язык для поиска информации в дереве XML. В XSLT он играет роль фильтра по образцу для поиска в документе данных, которые надо преобразовать.
Лично для меня, XPath стал наиболее сложной для понимания частью XSLT-инструментария. Одна из сторон XPath, доставившая мне особенно много неприятностей - это использование "осей" для того, чтобы "гонять" XSLT-процессор по документу в разных "направлениях". Описанная здесь техника основана на использовании трех различных осей и я надеюсь, что она послужит полезным примером мощи осей тем кому они, как и мне, оказались не по зубам.
Дерево из четырех палочек
Если вы внимательно рассмотрите Рисунок 1, вы заметите, что для того, чтобы нарисовать дерево нам нужно только четыре фигуры. Во-первых, каждый элемент присоединяется к дереву с помощью горизонтальной линии, идущей от центра вправо. Если элемент не является последним ребёнком своего родителя, он соединяется с деревом с помощью фигуры, похожей на повернутую на 90 градусов влево букву "T". Последний ребёнок присоединяется к дереву при помощи фигуры, похожей на "L".
Если элемент расположен в дереве глубже первого уровня иерархии, то слева от описанных выше соединителей появится один из двух других, по одному на каждого предка элемента. Если предок не является последним ребёнком своего родителя, то рисуется вертикальная линия, которая вместе с другими такими же линиями соединяет элемент со следующим элементом на этом уровне. Если элемент является последним у своего родителя, отображается пустая картинка-"распорка".
Для этой статьи я нарисовал четыре картинки: tree_tee, tree_corner, tree_bar, и tree_spacer (см. Рисунок 2, их также можно скачать по адресу www.sys-con.com/xml/sourcec.cfm). Все они соответствуют этим описаниям, я только добавил точку в середину пустого разделителя, чтобы было видно, когда он используется.
Теперь, проанализировав проблему, мы можем описать примерный алгоритм отрисовки дерева:
1. Для каждого уровня от начала дерева до родителя текущего элемента рисуем пустой разделитель, если это последний элемент у своего родителя, и вертикальную линию если нет.
2. Рисуем "L"-соединитель если текущий элемент является последним у своего родителя, и "T"-коннектор если нет.
3. Отображаем название текущего элемента.
Один из моих сослуживцев красноречиво назвал последовательность картинок, составляемую на шагах 1 и 2 "заборчиком", что достаточно хорошо отражает действительность - вы как бы строите заборчик, в котором штакетинами служат наши картинки, по одной штакетине на каждый уровень, начиная от корня. Самая правая картинка всегда будет либо "T" либо "L" соединителем, а расположенные левее - либо вертикальными палочками, либо пустыми разделителями. Также мы используем термин "отображение элемента" для обозначение того, что рисуется справа от "заборчика" - в нашем случае это будет просто название элемента, отформатированное в соответствии с типом элемента. Поэтому, мы можем описать алгоритм так: "Для каждого элемента дерева рисуем "заборчик", потом отображаем элемент".
Но, как обычно, вся сложность заключается в мелочах. Поэтому давайте посмотрим, как нам реализовать XSLT.
Детали
Исходный документ, показанный на Рисунке 1, называется "book.xml" вы найдете его в Листинге 1. Это очень простой документ, содержащий в себе оглавление книги. В корневой элемент книги вложены элементы - главы, а в них, в свою очередь, вложены секции, в которые также могут быть вложены секции. У каждого элемента есть атрибут title, который используется для отображения названий в дереве. Как видите, этот документ очень прост, но принципы преобразования будут работать и для гораздо более сложных документов.
Стиль, который мы применим к XML-документу, называется "connected_tree.xsl", и он показан в Листинге 2. И снова, этот шаблон искусственно сделан простым, но с помощью идей, проиллюстрированных в нем, вы сможете делать гораздо более сложные преобразования.
Строчки 1-13 XSL-шаблона содержат стандартные заголовки, предшествующие любой трансформации в HTML.
Более интересные вещи начинаются со строки 17, в которой создается шаблон для обработки корневого элемента XML-документа. В этом шаблоне мы создаем статический HTML. Один из этих компонентов это встроенный CSS, в котором мы задаем отступы и границы для картинок, чтобы они соединялись меду собой без зазоров, а также выравниваем текст по вертикали, чтобы текст казался естественным продолжением крайней правой картинки.
В 28-й строке мы выводим название книги (значение атрибута title элемента book), заключенное в теги ..., чтобы выводилось жирным шрифтом. После этого мы применяем подходящие шаблоны к его дочерним элементам, используя режим "line". В этом и всех остальных случаях применения шаблонов к дочерним элементам, они будут обрабатываться в порядке следования в документе. Сначала будет происходить обработка элемента, потом его дочерних элементов, и так далее, и таким образом мы получим нужное нам дерево.
Режимы (modes) позволят нам обрабатывать один и тот же элемент по-разному в зависимости от обстоятельств, что, как вы увидите, и является ключом к решению этой задачи. Режим "line" работает с отрисовкой всей линии, включая "заборчик" и отображение элемента. Другие режимы - "item" и "tree" - будут рассмотрены дальше.
Все элементы отрабатываются в режиме "line"одинаково, поэтому у нас есть только один шаблон с режимом "line", который обрабатывает для все элементы, он начинается в строке 36. Внутри этого шаблона мы полностью отрисовываем одну горизонтальную "линейку" нашего дерева. Мы заключаем вывод в
соответствующего класса, чтобы добиться отсутствия границ и выравнивания текста по вертикали. Внутри
-а находятся два блока. Первый, в строке 38, называется "graft", именно он и занимается построением "заборчика", ниже мы обсудим, как это происходит. Второй, в строке 39, снова вызывает apply-templates для текущего узла, но на этот раз в режиме "item", а не "line", как раньше. Вне
, конце шаблона, мы вызываем его для дочерних элементов, продолжая делать полный обход дерева.
Режим "item" используется для упоминавшегося ранее отображения объекта. Это происходит по-разному для каждого типа элементов. В этом примере для каждого из двух типов элементов, упомянутых в этой книге (chapter и section), определен свой шаблон для режима "item" (строки 46-52). Как я уже говорил - мы попросту выводим title объектов с различным форматированием для каждого из типа.
Итак, мы наконец подошли к самому интересному. Я уже упоминал выше, что шаблон "graft" (начинающийся со сроки 57) строит "заборчик" для вызвавшего его элемента. Как он это делает? Чтобы понять это, надо начать думать в обратном направлении - справа налево. Поэтому сейчас перейдите сразу к сроке 62, на которой мы рисуем коннектор, соединяющий элемент со всем остальным деревом. Как мы отмечали выше, это будет либо "L"-соединитель, если это последний дочерний элемент у своего родителя, либо "T"-соединитель. Именно так и работает этот код, и самое главное здесь это понять, как определяется, что данный элемент является последним ребенком своего родителя.
Для того, чтобы сделать это, мы должны использовать другую XPath-ось. Обычно при работе используется ось child, которая выбирает дочерние узлы текущего узла. Однако, помимо нее существует множество других осей, позволяющих перемещаться по документу в разных "направлениях". Первая ось, которую мы обсудим - following-sibling, которая позволяет с помощью которой можно выбрать все дочерние узлы того же родителя, что и текущий элемент, располагающиеся в документе после него. Эта ось используется в условии в строке 63. Если "following-sibling::*" возвращает непустую выборку, то условие возвратит значение true и мы используем "T"-соединитель, иначе, если выборка пустая, мы используем "L"-соединитель. Ось following-sibling (и парная ей preceding-sibling) очень удобны, если вам нужно сделать что-то со всеми оставшимися элементами своего уровня.
Итак, мы нарисовали самый правый элемент нашего "заборчика". А как насчет всего остального? Если помните, мы должны отрисовать по одному графическому элементу для каждой главы или раздела, являющихся родительскими для данного, причем это будут либо вертикальная линия, либо пустая картинка в зависимости от того, следуют ли за этим родительским элементом другие элементы на том же уровне. Половина решения должна быть очевидна из самой формулировки, но как нам посетить наших родителей, чтобы принять решение?
Ответ прост: с помощью другой оси - ancestor. В строке 59 вы увидите, что мы применяем шаблоны в режиме "tree" к узлам выбранным по оси "ancestor::*". Это значит "выбрать всех предков текущего узла, от корня и ниже, за исключением самого узла" А это именно то, что нам нужно, чтобы сгенерировать оставшуюся часть дерева, что мы и делаем в двух последних шаблонах, помеченных для использования в режиме "tree".
Первый шаблон, в строке 74, просто запрещает подстановку картинки для корневого узла (в нашем случае book). Мы уже имели дело с этим элементом в шаблоне "/book" ранее, поэтому нет смысла трогать его еще раз.
Второй шаблон, использует для выбора между картинкой с вертикальной линией и пустой картинкой логику, основанную на использовании оси following-sibling, которую мы уже обсуждали раньше.
Путешествие в мир XSLT продолжается
Вот и все! Теперь, применив XSLT-шаблон к исходному XML, мы получим HTML-дерево, показанное на Рисунке 1. Есть много способов сделать это, я для таких экспериментов обычно использую Apache Xalan из командной строки. Работает это следующим образом (конечно, если вы его уже скачали, установили и внесли в CLASSPATH): java org.apache.xalan.xslt.Process -IN book.xml -XSLconnected_tree.xsl -OUT book.html
Не забудьте, что здесь описан только один из способов отрисовки связанного дерева, и существует еще множество способов подстроить это под себя, расширить, улучшить и как-то ещё "повертеть в руках". По моему собственному опыту, лучший способ разобраться в XSLT - больше экспериментировать, поэтому призываю вас "поиграть" с кодом connected_tree.xsl и book.xml и посмотреть, что получится. Многое в XSLT и XPath может поначалу показаться чересчур сложным и непонятным, но позже вы с удивлением обнаружите, что на самом деле это очень даже разумные подходы. А после этого сможете и сами поделиться интересными находками с другими.
Information
- Posted on 27.04.2013 14:22
- Просмотры: 1197