» Навигация
- - - - - - - - - - - - - - - -
  » Наша кнопка
- - - - - - - - - - - - - - - -
  » Книги
- - - - - - - - - - - - - - - -
   » Пример XSL-преобразований
 
Автор: Алексей Голубев
Источник: frnet.narod.ru

Самое лучшее обучение какой-либо новой технологии для разработчика – это обучение на примерах. Часто бывает, что рассматриваемые в статьях примеры бывают сложны для понимания человеком, имеющим недостаточно практики в конкретной сфере. Говорить о ценности той или иной информации можно только четко поняв, насколько она помогает людям при решении конкретных задач. В данной заметке, рассматривает достаточно тривиальная задача, однако из подобных примеров и складывается полноценная картина.

Постановка задачи

Представить набор ссылок, хранящихся в 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-шаблонами и лишь демонстрирует конкретный пример. За более подробной информацией вы можете обратиться к соответствующим стандартам и материалам, имеющимся в свободном доступе в интернете в достаточном количестве, или к знакомому специалисту в данной области.

 

  » Друзья сайта
- - - - - - - - - - - - - - - -
  » Разное
- - - - - - - - - - - - - - - -
  » Счетчики
- - - - - - - - - - - - - - - -
  Дизайнер и ведущий проекта: Голубев Алексей
Copyright Alexei Golubev © 2004 — 2011
Hosted by uCoz