Преобразования CSS В главе 22, ведя разговор о канве и программном рисовании на ней, мы узнали о преобразованиях системы координат. С помощью особых расширений CSS мы можем проделать аналогичные действия над любым элементом Web-страницы: сместить его, повернуть, растянуть или

Преобразования из XML в XML Преобразования XML-XML иногда рассматриваются как SQL для Интернета, поскольку они позволяют оперировать запросами к базе данных в XML-документах. Ниже приведен пример. Используемый нами файл planets.xml содержит достаточно много данных о каждой

Модель преобразования Во вводной главе мы говорили, что преобразования в XSLT являются наборами шаблонных правил, каждое из которых обрабатывает определенный фрагмент входящего документа с тем, чтобы сгенерировать фрагмент выходящего

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

Выполнение преобразования Несмотря на полную свободу в порядке выполнения шаблонов, правила изменения контекста и компоновки результирующего дерева, спецификация XSLT оговаривает очень четко - это делает XSLT весьма гибким языком, программы на котором при этом

Упрощенные преобразования Многие простые преобразования состоят из единственного правила, которое обрабатывает корневой узел входящего документа. Общий вид такого рода преобразований показан в следующем листинге.Листинг 4.2. Простое

Преобразования по умолчанию Большинство операций языка Си выполняют преобразование типов для приведения своих операндов к общему типу либо для того, чтобы расширить значения коротких по размеру типов до размера, используемого в машинных операциях. Преобразования,

Преобразования типов Преобразование типов производится либо неявно, например при преобразовании по умолчанию или в процессе присваивания, либо явно, путем выполнения операции приведения типа. Преобразование типов выполняется также, когда преобразуется значение,

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

После того как вы загрузили, выполнили синтаксический разбор или каким_то другим способом получили объект Document, представляющий XML_документ, одно из самых интереснейших действий, которые можно с ним выполнить, – это преобразовать документ с помощью таблицы XSLT_стилей. Аббревиатура XSLT происходит от XSL Transformations (XSL_преобразования), а XSL – от Extensible Stylesheet Language (расширяемый язык таблиц стилей). Таблицы XSL_стилей – это XML_документы, которые могут быть загружены и разобраны, как и любые другие XML_документы. Изучение XSL далеко выходит за рамки темы этой кни_ ги, тем не менее в примере 21.8 демонстрируется таблица стилей, которая может использоваться для преобразования в HTML_таблицу XML_документа, подобно_ го представленному в примере 21.6.

Пример 21.8. Простейшая таблица XSL"стилей

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

ИмяЭлектронная почта

... __>

Когда встретится элемент , вывести его содержимое в другую ячейку __>

Правила в таблицах XSL_стилей используются для XSLT_преобразований XML_ документов. В контексте клиентского JavaScript_кода это обычно означает пре_ образование XML_документов в HTML_документы. Многие архитектуры разра_ ботки веб_приложений используют XSLT на стороне сервера, но броузеры на ба_ зе Mozilla и броузеры линейки IE поддерживают XSLT_преобразования на сторо_ не клиента, что может помочь снизить нагрузку на сервер и объем трафика, пе_ редаваемого по сети (потому что формат XML, как правило, более компактный, чем HTML).

Многие современные броузеры позволяют определять XML_стили с помощью таблиц CSS_ или XSL_стилей. Если определить таблицу стилей в исполняемой инструкции xml_stylesheet, тогда можно загрузить XML_документ непосредст_ венно в броузер, а броузер преобразует и отобразит его. Например, исполняемая инструкция могла бы выглядеть примерно так:

Обратите внимание: броузеры выполняют такого рода XSLT_преобразования ав_ томатически, когда XML_документ, содержащий соответствующую исполняе_ мую инструкцию, загружается в окно броузера. Это очень важно и очень удобно, но не это является темой данного раздела. Дальше я расскажу о том, как с помо_ щью JavaScript выполнить динамическое XSLT_преобразование.

Консорциум W3C не определяет стандартного прикладного интерфейса для XSLT_ преобразований DOM_объектов Document и Element. В броузерах на базе Mozilla прикладной интерфейс для XSLT_преобразований в JavaScript представляет объект XSLTProcessor. В IE XML_объекты Document и Element имеют метод transform_

530 Глава 21. JavaScript и XML

Node(), выполняющий преобразования. В примере 21.9 демонстрируется исполь_ зование обоих прикладных интерфейсов. В нем определяется класс XML.Trans_ former, который инкапсулирует таблицу XSL_стилей и позволяет использовать ее для преобразования более одного XML_документа. Метод transform() объекта XML.Transformer с помощью инкапсулированной таблицы стилей выполняет пре_ образование указанного XML_документа, а затем замещает содержимое заданно_ го DOM_элемента результатом преобразования.

Пример 21.9. XSLT в Mozilla и Internet Explorer

* Этот класс XML.Transformer инкапсулирует таблицу XSL_стилей.

* Если параметр stylesheet представляет собой URL_адрес, выполняется

* на соответствующий DOM_объект Document.

XML.Transformer = function(stylesheet) {

// Загрузить таблицу стилей, если это необходимо.

if (typeof stylesheet == "string") stylesheet = XML.load(stylesheet); this.stylesheet = stylesheet;

// В броузерах на базе Mozilla создать объект XSLTProcessor

// и передать ему таблицу стилей.

if (typeof XSLTProcessor != "undefined") { this.processor = new XSLTProcessor(); this.processor.importStylesheet(this.stylesheet);

* Это метод transform() класса XML.Transformer.

* Выполняет преобразование указанного xml_узла с использованием

* инкапсулированной таблицы стилей.

* Предполагается, что в результате преобразования получается HTML_код,

* которым следует заменить содержимое указанного элемента.

XML.Transformer.prototype.transform = function(node, element) { // Если элемент указан по id, отыскать его.

if (typeof element == "string") element = document.getElementById(element);

if (this.processor) {

// Если был создан объект XSLTProcessor (в броузерах на базе Mozilla),

// использовать его.

// Преобразовать узел в DOM_объект DocumentFragment.

var fragment = this.processor.transformToFragment(node, document);

// Стереть существующее содержимое элемента. element.innerHTML = "";

// И вставить преобразованные узлы. element.appendChild(fragment);

else if ("transformNode" in node) {

// Если узел имеет метод transformNode() (в IE), использовать его.

// Обратите внимание: transformNode() возвращает строку. element.innerHTML = node.transformNode(this.stylesheet);

// В противном случае удача отвернулась от нас.

throw "XSLT не поддерживается в этом броузере";

* Эта вспомогательная функция, выполняющая XSLT_преобразование,

* может быть удобна, когда таблица стилей должна использоваться всего один раз.

XML.transform = function(xmldoc, stylesheet, element) {

var transformer = new XML.Transformer(stylesheet);

transformer.transform(xmldoc, element);

К моменту написания этих строк IE и броузеры на базе Mozilla были единствен_ ными из основных броузеров, предоставляющих API для XSLT_преобразований. Если для вас важно иметь поддержку и в других броузерах, вас наверняка заин_ тересует проект AJAXSLT – свободно распространяемая JavaScript_реализация XSLT_преобразований. Разработка проекта AJAXSLT была начата компанией Google, ознакомиться с ним можно на сайте проекта по адресу http://goog" ajaxslt.sourceforge.net .

Рассмотрим типичный пример рендеринга HTML.

Дан список музыкальных композиций в виде XML-документа.

Рихард Вагнер Эдвард Григ Иоган Бах Антонио Вивальди Джузеппе Верди

Отобразим данный документ в виде HTML ul/li списка, как это показано ниже:

Для этого используем следующее XSLT-преобразование:

]>

Данное преобразование вернёт нам следующий HTML:

• Рихард Вагнер - Полёт валькирии
• Эдвард Григ - В пещере горного короля
...

XSLT-преобразование состоит из трёх шаблонов ( xsl:template). Каждый шаблон обслуживает свою сущность, что даёт нам возможность легко вносить изменения и делает код понятным.

Если нам надо поменять отображение списка (например, добавить атрибут class), то мы редактируем шаблон match="PlayList" .

Если же мы хотим изменить отображение элементов списка, то тут, совершенно очевидно, что стоить менять шаблон match="Track" .

Фактически, XSLT не только даёт нам возможность разделить данные и представление (это задача любого шаблонизатора), но и позволяет разделять представления различных сущностей.

Конечно, в более сложных случаях разделения добиться такого разделения бывает сложно. Очень легко прийти к ситуации, когда возникает «божественный шаблон», который делает всё, так же стоит бояться скатиться к «стрельбе дробью» кучей мелких шаблонов.

Отладка XSLT

Что мне очень нравится в XSLT, так это возможность отладки. Отладка помогает наглядно увидеть логику работы XSTL, структуру документа, значения переменных.

Например, отладка поможет увидеть, что за сущность обрабатывает шаблон match="/" .

В Visual Studio отладка XSLT запускается сочетанием клавиш ALT+F5 .

Добавив в окно Watch XPath выражение " . " (точка), мы увидим, что текущий элемент шаблона - это корень (Root) документа. Здесь можно разместить контейнер div , или что-то относящееся ко всему XML-документу.

Работа с сущностями XML

Можно заметить, что в приведенных примерах присутствует сущность — Мы можем ее использовать, потому что определили ее в начале XSLT-документа

]>

Таким образом, — выводится, как символ с кодом — .

Если нужно вывести строку «как есть», то стоит использовать CDATA следующим образом:

Элемент xsl:text

Хочу заострить внимание на элементе xsl:text . Он позволяет контролировать, что именно будет содержать TEXT-элемент. Значимость xsl:text очевидна на практике:

XSLT-шаблон:

Полученный HTML:

Как видно из примера выше, отсутствие элемента xsl:text привело к появлению в HTML лишних переводов строк и пробелов.

Безусловно, можно писать XSLT и без xsl:text , следующим образом:

Такой шаблон трудночитаем и есть большая вероятность, что при сопровождении в нём будут появлятся ошибки.

Нужно стараться, чтобы форматирование XSLT-шаблона не влияло на результат трансформации. Именно поэтому я считаю, что использовать xsl:text - это хорошая практика.

Ветвления

Для ветвлений в XSLT есть специальные элементы: xsl:if и xsl:choose . Но я считаю, что этими инструментами сильно злоупотребляют. Более интересен приём, позволяющий не загромождать шаблон ветвлениями.

Рассмотрим пример реализации ветвлений:

Дополним предыдущий пример возможностью выводить сообщение «Список пуст» в случае, если PlayList не содержит элементов Track .

Решение с использованием xsl:choose будет таким:

]>

Решение с использованием дополнительного шаблона будет следующим:

]>

Второе решение, на мой взгляд, выглядит красивее: новая функциональность не добавила нового кода в старые шаблоны, новый шаблон максимально изолирован.

Если понадобится добавить картинку к сообщению о пустом списке, то в первом случае скорее всего разбухнет элемент xsl:when в шаблоне match="PlayList" . А вот во втором случае изменения будут только в специализированном шаблоне.

В предыдущем примере мы разделили две абсолютно разные ветки рендеринга элемента списка. Но что если ветки различаются незначительно? Здесь использование xsl:if и xsl:choose вполне оправдано. Но мне бы хотелось показать другой подход: использование параметра mode у элемента xsl:template .

В следующем примере навесим разные стили на чётные и нечётные элементы списка.

]>

Циклы и сортировка в XSLT

Для циклов в XSLT есть элемент xsl:for-each , но схожий эффект можно получить, используя обычный xsl:apply-templates .

Выведем список композиций, отсортированный по длительности.

• Рихард Вагнер - Полёт валькирии - 280
• Антонио Вивальди - Времена года. Лето. Шторм - 203
• Иоган Бах - Токката и фуга ре-минор - 187
• Эдвард Григ - В пещере горного короля - 163
• Джузеппе Верди - Триумфальный марш (Аида) - 103

]>

]>

Как видно из кода, первый вариант короче и проще, но он нарушил принцип разделения ответственности для шаблонов. Теперь шаблон match="PlayList" стал содержать логику отображения элемента Track .

Казалось бы, ничего страшного, но представим задачу, когда в списке встречаются композиции с Id и без. Для композиции с Id нужно отрендерить ссылку, а для остальных вывести только текст.

Вариант с использованием xsl:for-each:

]>

Вариант с использованием xsl:apply-templates:

]>

В случае xsl:for-each нам потребовалось добавлять ветвление, а в случае xsl:apply-templates - новый шаблон.

Если бы шаблон match="PlayList" уже содержал ветвления и логику, то нам понадобилось некоторое время, чтобы разобраться, куда именно нам нужно вставить ветку. Вариант с xsl:apply-templates лишён этого недостатка, поскольку мы лишь декларируем новый шаблон, а не пытаемся внедриться в старые.

Использование xsl:for-each имеет ещё одну большую опасность. Если вы видите произвольный участок кода внутри шаблона match="PlayList" , то предполагаете, что текущий элемент это PlayList , однако xsl:for-each меняет контекст. Увидев следующий код код:

Вам потребуется внимательно присмотреться к контексту, чтобы понять, что select="." на самом деле выбирает текущий Track .

Шаблон mode="TrackName" match="Track" был добавлен для избежания дублирования кода, отображаюшего название. Я не сделал этого раньше, потому что в этом не было необходимости. Как только я заметил дублирование, я провёл рефакторинг и вынес общую логику отображения в новый шаблон.

xsl:for-each - это способ не плодить сущности. Вы просто добавляете логику отображения внутрь xsl:for-each и всё прекрасно работает. Проблемы начинаются потом, когда тело цикла разрастается, а проводить рефакторинг xsl:for-each намного сложнее, чем выносить дублированный код.

Заключение

XSLT - это достаточно гибкий инструмент, он даёт возможность решить вашу задачу разными путями. Однако, при написании XSLT стоит уделять особое внимание сопровождаемости шаблонов.

Надеюсь мои практические советы помогут вам писать более понятный код.