Автор: Алексей Голубев
Самое лучшее обучение какой-либо новой технологии для разработчика – это обучение на примерах. Часто бывает, что рассматриваемые в статьях примеры бывают сложны для понимания человеком, имеющим недостаточно практики в конкретной сфере. Говорить о ценности той или иной информации можно только четко поняв, насколько она помогает людям при решении конкретных задач. В данной заметке, рассматривает достаточно тривиальная задача, однако из подобных примеров и складывается полноценная картина.
Постановка задачи
Представить набор ссылок, хранящихся в XML-документе в виде понятном для пользователя, т.е. в виде web-страницы.
Исходные данные
XML-документ с именем links.xml, содержащий данные о страницах определенного раздела сайта: заголовок страницы, URL, краткое описание. Структура данного файла вполне понятна и проста. Рассмотрим вариант с описанием трех страниц:
<?xml version="1.0" encoding="utf-8"?> <ideas> <idea> <title>Заработок на международных интернет–аукционах</title> <url>http://svoedelo.spb.ru/idea.php?id=14</url> <description>Идея предоставления посреднических услуг на интернет–аукционах.</description> </idea> <idea> <title>Сервис подарков через социальные сети</title> <url>http://svoedelo.spb.ru/idea.php?id=6</url> <description>Рассматривается онлайн–магазин подарков.</description> </idea> <idea> <title>Интернет–магазин неиспользованных купонов</title> <url>http://svoedelo.spb.ru/idea.php?id=10</url> <description>Заработка на купонах скидок.</description> </idea> </ideas>
Необходимо помнить, что XML-документы принято хранить в кодировке UTF-8.
Решение
Для решения данной задачи с применением XSL-преобразований нам потребует создать шаблон оформления, который будет описывать внешний вид итоговой страницы, т.е. то, что увидит конечный пользователь.
Шаблон оформления имеет формат XML-документа, соответствующего требованиям международной организации World Wide Web Consortium, разрабатывающей открытые стандарты, применяемые при создании интернет-проектов.
В данном документе описываются правила отображения элементов выводимых данных, на основе которых в конечном итоге формируется готовый HTML-документ, предоставляемый пользователю. В нашем случае, будет достаточно описания двух правил:
- 1. Для корневого элемента исходного XML-файла (ideas).
- 2. Для элемента, содержащего данные о конкретной ссылке (idea).
Рассмотрим их по порядку.
Отображение корневого элемента
Для простоты объяснения и уменьшения кода отступим немного от четких стандартов структуры HTML, что, на мой взгляд, позволительно в рамках данного примера.
Код web-страницы имеет определенную структуру, основными элементами которой являются теги html, head, body. Помимо этих элементов в шаблоне опишем заголовки окна и страницы, а также форму вывода ссылок – маркированный список. Правило для корневого элемента примет следующий вид:
<xsl:template match="/"> <html> <head> <title>Идеи заработка</title> </head> <body> <h1>Идеи заработка</h1> <ul> <xsl:apply-templates/> </ul> </body> </html> </xsl:template>
По сути, описывая правило для корневого элемента, мы создаем каркас будущей страницы.
Отображение списка ссылок
Каждая ссылка в рассматриваемом примере будет представлять собой элемент маркированного списка, состоящего из собственно ссылки и описания страницы. Правило для отображения примет вид:
<xsl:template match="idea"> <li> <a> <xsl:attribute name="href"> <xsl:value-of select="url"/> </xsl:attribute> <xsl:value-of select="title"/> </a> <br/> <xsl:value-of select="description"/> </li> </xsl:template>
Стилевое оформление
Для того, чтобы описать полностью вид страницы, код необходимо дополнить таблицей стилей (CSS). В нашем простейшем случае опишем стиль для всей страницы (укажем используемый шрифт, его размер и высоту строки текста) и заголовка. Приведу описание стиля конечной страницы:
body
{
font-family:verdana;
line-height:18px;
font-size:12px;
}
h1
{
font-size:22px;
font-weight:normal;
}
Конечный вид XML-документов
Соберем описания шаблона, приведенные выше, в единый документ и дадим ему название style.xsl:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Идеи заработка</title>
<style>
body
{
font-family:verdana;
line-height:18px;
font-size:12px;
}
h1
{
font-size:22px;
font-weight:normal;
}
</style>
</head>
<body>
<h1>Идеи заработка</h1>
<ul>
<xsl:apply-templates/>
</ul>
</body>
</html>
</xsl:template>
<xsl:template match="idea">
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="url"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</a>
<br/>
<xsl:value-of select="description"/>
</li>
</xsl:template>
</xsl:stylesheet>
Теперь шаблон нужно подключить к исходному файлу с данными о ссылках, добавив в него соответствующее указание. В итоге получим:
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <ideas> <idea> <title>Заработок на международных интернет–аукционах</title> <url>http://svoedelo.spb.ru/idea.php?id=14</url> <description>Идея предоставления посреднических услуг на интернет–аукционах.</description> </idea> <idea> <title>Сервис подарков через социальные сети</title> <url>http://svoedelo.spb.ru/idea.php?id=6</url> <description>Рассматривается онлайн–магазин подарков.</description> </idea> <idea> <title>Интернет–магазин неиспользованных купонов</title> <url>http://svoedelo.spb.ru/idea.php?id=10</url> <description>Заработка на купонах скидок.</description> </idea> </ideas>
Оба файла должны располагаться в одном каталоге.
Результат
Результат можно просмотреть в браузере, запустив файл links.xml. Отмечу только, что в отличии от Safari, Firefox, Opera, Internet Explorer, в браузере Chrome конечная web-страница отобразиться только в том случае, если загрузить XML-документы на web-сервер и открыть файл links.xml через адресную строку. В противном случае у вас отобразиться пустая страница, так как Chrome считает небезопасным подгружать XSL-шаблон из XML-документа на локальном компьютере.
Так же вы сможете увидеть результат, пройдя по этой ссылке.
Данная заметка не претендует на полноту описания работы с XSL-шаблонами и лишь демонстрирует конкретный пример. За более подробной информацией вы можете обратиться к соответствующим стандартам и материалам, имеющимся в свободном доступе в интернете в достаточном количестве, или к знакомому специалисту в данной области.
