Отрисовка связанного дерева с помощью XSLT - как с умом использовать XSLT и XPath

Одно из таких открытий произошло недавно в связи с отрисовкой иерархий типа "связанное дерево". Связанное дерево - это дерево, в котором узлы соединены со своими детьми и родителями линиями, как это часто изображают в файловых менеджерах или оглавлениях (см. пример на рисунке 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), заключенное в теги <b>...</b>, чтобы выводилось жирным шрифтом. После этого мы применяем подходящие шаблоны к его дочерним элементам, используя режим "line". В этом и всех остальных случаях применения шаблонов к дочерним элементам, они будут обрабатываться в порядке следования в документе. Сначала будет происходить обработка элемента, потом его дочерних элементов, и так далее, и таким образом мы получим нужное нам дерево.

Режимы (modes) позволят нам обрабатывать один и тот же элемент по-разному в зависимости от обстоятельств, что, как вы увидите, и является ключом к решению этой задачи. Режим "line" работает с отрисовкой всей линии, включая "заборчик" и отображение элемента. Другие режимы - "item" и "tree" - будут рассмотрены дальше.

Все элементы отрабатываются в режиме "line"одинаково, поэтому у нас есть только один шаблон с режимом "line", который обрабатывает для все элементы, он начинается в строке 36. Внутри этого шаблона мы полностью отрисовываем одну горизонтальную "линейку" нашего дерева. Мы заключаем вывод в <div> соответствующего класса, чтобы добиться отсутствия границ и выравнивания текста по вертикали. Внутри <div>-а находятся два блока. Первый, в строке 38, называется "graft", именно он и занимается построением "заборчика", ниже мы обсудим, как это происходит. Второй, в строке 39, снова вызывает apply-templates для текущего узла, но на этот раз в режиме "item", а не "line", как раньше. Вне <div>, конце шаблона, мы вызываем его для дочерних элементов, продолжая делать полный обход дерева.

Режим "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):

Не забудьте, что здесь описан только один из способов отрисовки связанного дерева, и существует еще множество способов подстроить это под себя, расширить, улучшить и как-то ещё "повертеть в руках". По моему собственному опыту, лучший способ разобраться в XSLT - больше экспериментировать, поэтому призываю вас "поиграть" с кодом connected_tree.xsl и book.xml и посмотреть, что получится. Многое в XSLT и XPath может поначалу показаться чересчур сложным и непонятным, но позже вы с удивлением обнаружите, что на самом деле это очень даже разумные подходы. А после этого сможете и сами поделиться интересными находками с другими.

Об авторе

Craig Berry работает главным архитектором в PortBlue Corporation (www.portblue.com), софтверной компании из Лос-Анджелеса, разрабатывающей продвинутую экспертную систему, основанную на технологии J2EE. Он работает в области проектирования и разработки ПО уже 20 лет, в самых различных областях, начиная от искусственного интеллекта и заканчивая распределенным потоковым видео.

Рисунок 1

Рисунок 2

Исходники

Листинг 1

<?xml version="1.0"?>
<book title="XML For Fun and Profit">
<chapter title="A Day at the Beach with XML">
<section title="XML Surfing">
<section title="The 'Cowabunga' entity"/>
<section title="Gremmies and XPath"/>
</section>
<section title="XML Sandcastles">
<section title="How Wet is the Sand?">
<section title="The Seashell Environment"/>
<section title="Getting Kelp"/>
</section>
<section title="The Tide and Long Term Stability Issues"/>
</section>
</chapter>
<chapter title="The XML Circus">
<section title="Lions and Tigers and Parsers!"/>
<section title="The W3C Standards Clown Car">
<section title="Loose and Strict Clown Compliance"/>
</section>
</chapter>
</book>
 

Листинг 2

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
method="html"
encoding="UTF-8"
indent="yes"
version="1.0"
omit-xml-declaration="yes"
media-type="text/html"
standalone="yes"
/>

<!-- Шаблоны для генерации текстового контента -->

<xsl:template match="/book">
<html>
<head>
<title>XML Book Outline</title>
<style type="text/css">
body { font-size: smaller }
div, img { border: 0px; margin: 0px; padding: 0px }
div.Node * { vertical-align: middle }
</style>
</head>
<body>
<b><xsl:value-of select="@title"/></b>
<xsl:apply-templates mode="line"/>
</body>
</html>
</xsl:template>

<!-- Рисуем каждую строку дерева -->

<xsl:template match="*" mode="line">
<div class="Node">
<xsl:call-template name="graft"/>
<xsl:apply-templates select="." mode="item"/>
</div>
<xsl:apply-templates mode="line"/>
</xsl:template>

<!-- Отображаем различные типы элементов -->

<xsl:template match="chapter" mode="item">
<i><xsl:value-of select="@title"/></i>
</xsl:template>

<xsl:template match="section" mode="item">
<xsl:value-of select="@title"/>
</xsl:template>

<!-- Шаблоны, используемые для генерации "заборчика" из различных соединителей -->

<xsl:template name="graft">
<!-- Отрисовываем картинки-соединители для всех предков -->
<xsl:apply-templates select="ancestor::*" mode="tree"/>

<!-- Рисуем коннектор для текущего узла -->
<xsl:choose>
<xsl:when test="following-sibling::*">
<img src="tree_tee.gif"/>
</xsl:when>
<xsl:otherwise>
<img src="tree_corner.gif"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<!-- Запрещаем отрисовку соединителя для корневого узла -->

<xsl:template match="book" mode="tree"/>

<!-- Рисуем соединители для всех остальных узлов -->

<xsl:template match="*" mode="tree">
<xsl:choose>
<xsl:when test="following-sibling::*">
<img src="tree_bar.gif"/>
</xsl:when>
<xsl:otherwise>
<img src="tree_spacer.gif"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

</xsl:stylesheet>
 

Перевод: Корнеев Михаил, Юрашку Денис
Источник: http://phpclub.ru/detail/