XSLT - 3

XML to HTML -
преобразования
http://ProductivityBlog.com.ua

О чем пойдет речь
▪Простые преобразования
▪Циклы, форматирование, таблицы и
оформление
▪Фильтры и условия
▪Визуальное XML to HTML преобразование
co StyleVision

Файлы и инструменты
Файлы практических работ в файле
XSLT_3.zip в папке Practice
XMLSpy, StyleVision из пакета
ALTOVA MissionKit

Простые преобразования
▪ <xsl:stylesheet>
▪ <xsl:output>
▪ Практика
▪ <xsl:template>
▪ <html>
▪ <xsl:value-of>

<xsl:stylesheet>
▪ Кое-что будет повторяться, но это даже хорошо
▪ XSLT-файлы – это XML-файлы
▪ Тег верхнего уровня
<xsl:stylesheet version=“1.0”
xmlns:xsl=“http://www.w3.org/1999/XSL/Transform”>
</xsl:stylesheet>

<xsl:output>
▪ Непосредственно вложен в корневой элемент
▪ Задает формат для выходного файла
▪ method – тип файла
▪ xml, html, text
▪ encoding – кодировка
▪ indent – отступы тегов для лучшей читабельности
<xsl:output method=“xml” version=“1.0” encoding=“UTF-8”
indent=“yes”/>

Практика –
создание XSLT-файла
▪Создать новый файл в XMLSpy
▪выбрать XSLT 1.0
▪выбрать Generic XSL/XSLT Transformation
▪ В теге xsl:output поменять атрибут method на
html
▪Сохранить файл под именем xml2html1.xslt
Готовый файл можно найти в папке Chapter3transformations

<xsl:template>
▪ Определяет какие данные войдут в
результирующий файл
▪ Чтобы взять все данные из исходного файла:
<xsl:template match=“/”>
</xsl:template>

<html>
▪ Внутри xsl:template настраивают содержимое выходного файла
▪ Для HTML файла:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
▪ XMLSpy добавит head, title и body автоматически при добавлении
html

<xsl:value-of>
▪ Помещает в результирующий файл данные из
исходного
▪XPath-выражение в атрибуте select
▪названия – из ИСХОДНОГО файла
<xsl:value-of select=“//product[color=‘Yellow’]/name”/>

редактирование XSLT-файла
▪ Добавить ссылку на
furniture.xml
▪ Добавить теги xsl:template и
html
▪ Добавить заголовок страницы
– Yellow furniture
▪ Добавить xsl:value-of в тело
документа
▪ Сохранить файл под именем
xml2html1.xslt
▪ Запустить трансформацию
▪ Сохранить результат под
именем Output1.html
▪ Просмотреть результат в
браузере

редактирование XSLT-файла
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>Yellow Furniture</title>
</head>
<body>
<xsl:value-of select="//product[color='Yellow']/name"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Циклы, форматирование, таблицы
и оформление
▪<xsl:for-each>
▪<h1>,<font>,<br/>
▪<table>

Практика – подготовка данных
▪ Открыть файл furniture.xml
▪ Переключиться в режим таблицы и просмотреть
содержимое файла

<xsl:for-each>
▪ Отбирает набор элементов и позволяет перебрать
и обработать их один за другим
▪ Пример:
<xsl:for-each select=“//product[product_line=‘Boston’]”>
<xsl:value-of select=“name”/>
</xsl:for-each>

<xsl:for-each>
▪ То же самое, но чуть по-другому:
<xsl:for-each select=
“//product[product_line=‘Boston’]/name”>
<xsl:value-of select=“.”/>
</xsl:for-each>

<h1>, <font>, <br/>
▪ Форматирование данных
<h1>A Quick</h1>
<h2>Brown Fox</h2>
<h3>Jumped<br/>Over</h3>
<font style=“font: 16pt Times”>
The Lazy<br/>Dogs</fonts>

Практика – циклы
▪ Добавить тег xsl:for-each в тело файла
xml2html1.xslt
▪ Поменять заголовок на Boston Products
▪ Cохранить как xml2html2.xslt
▪ Сохранить результат как Output2.html

Практика – циклы
<head>
<title>Boston Products</title>
</head>
<body>
<h1>Furniture Warehouse Product List</h1>
<h2>Boston Product Line</h2><br/>
<xsl:for-each select="//product[product_line='Boston']">
<font face="Courier" color="#F00000">
<xsl:value-of select="name"/>
</font>
$ <xsl:value-of select="retail_price"/><br/>
</xsl:for-each>
</body>

<table>
▪ Просто добавляем тег <table> - структура таблицы будет
добавлена автоматически
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
▪ Кроме tbody есть еще thead и tfoot
▪ Кроме tr и td есть еще th

<table>
<table>
<thead>
<tr bgcolor="#B893F4">
<th>Name</th>
<th>Price</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<xsl:for-each select="//product">
<tr>
<td bgcolor="#D9D2FF"><xsl:value-of select="name"/></td>
<td bgcolor="#F9DFFF">$ <xsl:value-of select="retail_price"/></td>
<td><xsl:value-of select="color"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>

Практика – таблицы
▪ В файл xml2html2.xslt добавить тег <table>, как
показано на предыдущем слайде

Вложенные циклы, условия,
поиск элементов
▪ Чтобы просмотреть все комнаты для каждого
продукта нужны вложенные циклы
<xsl:for-each select=“//product”>
<xsl:for-each select=“room”>
</xsl:for-each>
</xsl:for-each>

Вложенные циклы, условия,
поиск элементов
▪ Добавляем запятые между комнатами для каждого
продукта нужны вложенные циклы
<xsl:for-each select=“room”>
<xsl:if test=“position()!=last()”/>,</xsl:if>
</xsl:for-each>
<br/>
</xsl:for-each>

Практика – таблицы
▪ В файл xml2html3.xslt добавить вложенные
циклы, как показано на предыдущем слайде

Практика – использование
таблицы стилей
▪ Добавить CSS-стили в тег <head>
▪ Использовать добавленные классы для
стилизации таблицы

Практика – использование
таблицы стилей
<style type="text/css">
body {
font-family : Arial ;
font-size : 13px ; }
table {
border-collapse : collapse ; }
table, th, td {
border : 1px ;
border-color : #666 ;
border-style : solid ; }
td {
padding : 5px ; }
.Title {
color : #FFF ; }
</style>
<thead class="Title">
…
<tfoot class="Title">
<tr style="background-color:#B893F4">
<th>===</th>
<th>===</th>
<th>===</th>
</tr>
</tfoot>

Фильтры и условия
▪<xsl:if>
▪<xsl:sort>
▪<xsl:choose>
▪<xsl:attribute>

<xsl:if>
▪ Изменение результирующих значений в
зависимости от истинности условия
▪по сути, упрощенный условный оператор
▪ нет ветви else
▪test – условие (TRUE или FALSE)

<xsl:if> - пример
<xsl:if test=“product_line!=‘Boston’
and product_line!=‘Albany’”>
</xsl:if>

<xsl:sort>
▪ Сортировка набора элементов. часто – внутри
цикла <xsl:for-each>
▪select – по какому ключу сортировать
▪ может быть несколько
▪order – порядок сортировки
▪data-type – название говорит за себя
▪ number или text (по умолчанию)

<xsl:sort> - пример
<xsl:sort select=“retail_price” data-type=“number”/>
</xsl:for-each>

▪ Добавить в файл xml2html5.xslt теги xsl:if для удаления двух
продуктовых линий как показано на одном из предыдущих слайдов
▪ Изменить заголовок файла на All Products except Boston and Albany
Product Lines
▪ Запустить преобразование
▪ Внутрь цикла добавить сортировку по полю retail_price
▪ Запустить преобразование
▪ Сохранить файл как xml2html6.xslt
Практика – фильтрация
и сортировка данных

<xsl:choose>
▪ Проверка нескольких условий – аналог
оператора варіанта
▪xsl:when с атрибутом test
▪xsl:otherwise
▪ необязательно, но это хорошая практика

<xsl:choose> - пример
<xsl:choose>
<xsl:when test=“retail_price < 200”>Budget</xsl:when>
<xsl:when test=“retail_price < 600”>Standard</xsl:when>
<xsl:otherwise>Luxury</xsl:otherwise>
<xsl:choose>

▪ Добавить в тег xsl:choose как показано на
предыдущем слайде
▪ Изменить заголовок файла на All Products
except Boston and Albany Product Lines
добавление категорий

<xsl:attribute>
<font style=“color:Red”>Budget</font>
<font>
<xsl:attribute name=“style”>
color:Red
</xsl:attribute>
</font>

▪ Добавить атрибут style, чтобы раскрасить цены
в зависимости от категории
▪ Добавить еще одну таблицу – «легенду» для
раскраски
добавление цветов и подписей

добавление цветов и подписей

Визуальное XML to HTML
преобразование co StyleVision
▪Воссоздание страницы из файла
Output8.html
▪Создание страницы с
изображениями и ссылками

Цель работы
▪ Получить такой же
результат, как в предыдущих
примерах, но визуально
▪ Использовать StyleVision

▪ Открыть в StyleVision файл
furniture.xml, создать free-flow-
документ
▪ Удалить контент, добавить
заголовки первого и второго
уровней
▪ Добавить таблицу (Dynamic
Table)
▪ Выбрать столбцы name,
retail_price и room для
создания заголовков
▪ Расположить столбцы в
указанном выше порядке
▪ В ячейки футера добавить ===
▪ Раскрасить ячейки хедера и
футера (белый на #B893F4)
▪ В свойствах документа указать
шрифт 12pt Arial
▪ Просмотреть результат
добавление таблиц и подписей

▪ Вернуться в режим дизайна
▪ В контекстном меню тега product выбрать Edit Xpath
Filter, попробовать варианты (с просмотром
результата):
▪ product_line=“Boston”
▪ product_line!="Boston" and product_line!="Albany“
▪ Отсортировать по полю retail_price
фильтрация и сортировка

▪ C помощью окна Style
настроить цвета фона для
tcell в каждом столбце
▪ Добавить запятую перед
закрывающим тегом в
столбце Room
▪ Выделить запятую и в
контекстном меню
выбрать Enclose with >
Condition
▪ Записать выражение
position()!=last()
▪ Добавить $ перед
контентом столбца Price
форматирование тела таблицы

▪ Выделить содержимое ячейки столбца Price
▪ В окне Style с CTRL кликнуть на text и content
▪ Кликнуть на свойстве color
▪ Нажать кнопку Xpath
▪ Ввести выражение
if (.<200) then "green" else if (.>600) then "red" else
"black“
добавление категорий

▪ Добавить * после Price в заголовке второго столбца
▪ После таблицы вставить две пустых строки
▪ Вставить таблицу (статическая, без футера, без whole available
width) c двумя столбцами и тремя строками
▪ заголовки: Color, Category
▪ содержимое по строкам: Green|Budget, Black|Standard,
Red|Luxury
▪ задать цвета фона и текста для таблицы
добавление легенды

▪ Сохранить результат как xml2html9.sps
▪ Cохранить результат как Output9.html
▪ Cгенерировать и сохранить также RTF и PDF -
файлы
сохранение результата

Цель работы
▪ Мы хотим воссоздать список книг (reading_list.xml) из
предыдущего модуля, но в более красивой форме
▪ Добавим изображение обложки и ссылку
на описание книги в Википедии
▪ Хорошая идея – просмотреть файл
в XMLSpy, в меню File выбрать XSLT
и затем Produce HTML, RTF or PDF
▪ В StyleVision добавить reading_list.xml

▪ Добавить заголовок
▪ Добавить перед заголовком картинку
book_spine.png, изменить ее размер
▪ Перетащить элемент book из окна Shema Tree
и выбрать Create Table
▪ Переименовать заголовки столбцов
Практика – добавление
подписей, картинок и таблиц

▪ Кликнуть на теге title и в контекстном меню
выбрать Enclose with > Hyperlink
▪ Выбрать вариант Static and Dynamic
▪статическая часть: http://en.wikipedia.org/wiki/
▪динамическая: /wiki/book
▪ Просмотреть результат, попробовать перейти по
гиперссылкам
добавление гиперссылок

▪ Удалить все содержимое ячейки wiki
▪ Вставить в нее картинку
▪динамическая ссылка
▪ wiki/picture
▪ В окне Style изменить ширину и высоту на 1.5in
добавление картинок

▪ Сохранить результат (Save Design) как
xml2html10.sps
▪ Cохранить результат как Output10.html
▪ Cгенерировать и сохранить также RTF и PDF -
файлы
сохранение результата

Подводим итоги
▪ Мы узнали как выполнить
XML to HTML-преобразование
▪ Познакомились с StyleVision
▪ Изучили возможности по
формированию документа
▪ Научились генерировать также
RTF и PDF-файлы

Вопросы
и ответы

XSLT - 3

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to XSLT - 3

Similar to XSLT - 3 (20)

More from Alexander Babich

More from Alexander Babich (20)

XSLT - 3

Editor's Notes