Главная » XSLT » Использование XSLT в качестве языка стилизации

0

Задача

Вы хотите, чтобы браузер динамически стилизовал XML-документ, предста­вив его в формате HTML.

Решение

Вполне достаточно решения на XSLT 1.0. Ниже приведен пример преобразо­вания фрагмента документа в формате DocBook в HTML с использованием таб­лицы стилей XSLT. В качестве исходного документа взят кусок этой главы.

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="application/xml" href="chapter.xsl"?>

<chapter label="8"> <chapterinfo> <author>

<surname>MaHraHO</surname> <firstname>Cэл</firstname> </author> <copyright>

<year>2 002</year> <holder>0’PetoM</holder> </copyright> </chapterinfo>

<title>npe06pa30BaHMe XML в HTML</title> <epigraph>

<para^ был удивлен тем, что люди так терпеливо пишут HTML-K0fl.</para> <attribution>THM Бepнepc-Ли</attribution> </epigraph> <sect1>

<title>Иcпользовaниe XSLT в Ka4eciBe языка cтилизaции</title> <sect2>

<title>3aдaчa</title>

<para>Bы xотитe, чтобы 6pay3ep динaмичecки cтилизовaл XML-докyмeнт, пpeдcтaвив eго в фоpмaтe HTML.</para>

</sect2> <sect2>

<title>Pешение</title>

<para>Hиже приведен пример преобразования фрагмента документа в формате DocBook в HTML с использованием таблицы стилей XSLT. В качестве исходного документа взят кусок этой главы.</para> </sect2> <sect2>

<title>Oбсуждение</title>

<para>DocBook — пример документо-центрической DTD-схемы, которая позволяет создавать и сохранять документ в виде логической структуры, не зависящей от способа представления. Прелесть создания документов (особенно технических) в такой форме заключается в том, что с помощью XSLT единственное описание содержимого можно преобразовать в самые разные форматы, включая HTML, PDF, Microsoft Help и страницы руководства Unix. Хотя в этом рецепте используется схема DocBook, та же техника применима и к другим схемам документов — как общепризнанным, так и вашего изобретения. </para> </sect2> </sect1>

</chapter>

Обратите внимание, что вторая строка документа содержит команду обра­ботки xml-stylesheet. Это указание браузеру применить следующую далее таблицу стилей к XML-разметке и вывести результат преобразования, а не ис­ходный XML-код. (Напомню, что эта команда работает только в последних вер­сиях браузеров.)

<?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"/>

<xsl:template match="/"> <html> <head>

<xsl:apply-templates mode="head"/> </head>

<!– Возможно, вы предпочтете использовать таблицу CSS, а не зашивать стили в код, как сделал я. –> <body style="margin-left:100;margin-right:100;margin-top:50; margin-bottom:5 0"> <xsl:apply-templates/>

<xsl:apply-templates select="chapter/chapterinfo/*" mode="copyright"/> </body> </html>

</xsl:template> <!– Head —>

<xsl:template match="chapter" mode="head"> <xsl:apply-templates select="chapterinfo" mode="head" /> <xsl:apply-templates select="title" mode="head" /> </xsl:template>

<xsl:template match="chapter/title" mode="head">

<title><xsl:value-of select="."/></title> </xsl:template>

<xsl:template match="author" mode="head">

<meta name="author" content="{concat(firstname,’ ‘, surname)}"/> </xsl:template>

<xsl:template match="copyright" mode="head">

<meta name="copyright" content="{concat(holder,’ ‘,year)}"/> </xsl:template>

<xsl:template match="text( )" mode="head"/> <!– Body — >

<xsl:template match="chapter">

<div align="right" style="font-size : 48pt; font-family: Times serif; font- weight : bold; padding-bottom:10; color:red"><xsl:value-of select="@label"/> </div>

<xsl:apply-templates/> </xsl:template>

<xsl:template match="chapter/title">

<div align="right" style="font-size : 24pt; font-family: Times serif; padding-bottom:15 0; color:red"><xsl:value-of select="."/></div> </xsl:template>

<xsl:template match="epigraph/para">

<div align="right" style="font-size : 10pt; font-family: Times serif; font- style : italic; padding-top:4; padding-bottom:4"><xsl:value-of select="."/> </div>

</xsl:template>

<xsl:template match="epigraph/attribution">

<div align="right" style="font-size : 10pt; font-family: Times serif; padding-top:4; padding-bottom:4"><xsl:value-of select="."/></div> </xsl:template>

<xsl:template match="sect1">

<h1 style="font-size : 18pt; font-family: Times serif; font-weight : bold">

<xsl:value-of select="title"/> </h1>

<xsl:apply-templates/> </xsl:template>

<xsl:template match="sect2">

<h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">

<xsl:value-of select="title"/> </h2>

<xsl:apply-templates/> </xsl:template>

<xsl:template match="para"> <p style="font-size : 12pt; font-family: Times serif">

<xsl:value-of select="."/>

</p>

</xsl:template>

<xsl:template match="text( )"/>

<xsl:template match="copyright" mode="copyright">

<div style="font-size : 10pt; font-family: Times serif; padding-top : 100">

<xsl:text>Copyright </xsl:text> <xsl:value-of select="holder"/> <xsl:text> </xsl:text> <xsl:value-of select="year"/>

<xsl:text>. Все права зарезервированы.</xsl:text> </div> </xsl:template>

<xsl:template match="*" mode="copyright"/> </xsl:stylesheet>

В результате браузер выведет следующий HTML-код:

<html> <head>

<meta name="author" content="Csn Мангано"> <meta name="copyright" content="0,Peйли 2002"> <title>XML to HTML</title> </head>

<body style="margin-left:100;margin-right:100;margin-top:5 0 ; margin- bottom:50">

<div align="right" style="font-size : 48pt; font-family: Times serif; font-weight : bold; padding-bottom:10; color:red">8</div>

<div align="right" style="font-size : 24pt; font-family: Times serif; padding-bottom:15 0; color:red">Пpeoбpазoваниe XML в HTML</div>

<div align="right" style="font-size : 10pt; font-family: Times serif; font-style : italic; padding-top:4; padding-bottom:4"^ был удивлен тем, что люди так терпеливо пишут HTML-кoд.</div>

<div align="right" style="font-size : 10pt; font-family: Times serif; padding-top:4; padding-bottom:4">Tим Бернерс-Ли<^^>

<h1 style="font-size : 18pt; font-family: Times serif; font-weight : bold">Испoльзoваниe XSLT в качестве языка стилизации</Ы>

<h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">3адача</h2>

<p style="font-size : 12pt; font-family: Times serif">Bbi хотите, чтобы браузер динамически стилизовал XML-документ, представив его в формате HTML.</p>

<h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">PemeH^</h2>

<p style="font-size : 12pt; font-family: Times serif">HM*e приведен пример преобразования фрагмента документа в формате DocBook в HTML с использованием таблицы стилей XSLT. B качестве исходного документа взят кусок этой главы. </p>

<h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">0бсyждeниe</h2>

<p style="font-size : 12pt; font-family: Times serif">DocBook — пример документо- центрической DTD-схемы, которая позволяет создавать и сохранять документ в виде логической структуры, не зависящей от способа представления. Прелесть создания документов (особенно технических) в такой форме заключается в том, что с помощью XSLT единственное описание содержимого можно преобразовать в самые разные форматы, включая HTML, PDF, Microsoft Help и страницы руководства Unix. Хотя в этом рецепте используется схема DocBook, та же техника применима и к другим схемам документов — как общепризнанным, так и вашего изoбpeтeния.</p>

<div style="font-size : 10pt; font-family: Times serif; padding-top : 100">Copyright 0’Рейли 2002. Все права зарезервированы.<^^>

</body> </html>

Обсуждение

DocBook – пример документо-центрической DTD-схемы, которая позволяет создавать и сохранять документ в виде логической структуры, не зависящей от способа представления. Прелесть создания документов (особенно технических) в такой форме заключается в том, что с помощью XSLT единственное описание со­держимого можно преобразовать в самые разные форматы, включая HTML, PDF, Microsoft Help и страницы руководства Unix. Хотя в этом рецепте используется схема DocBook, та же техника применима и к другим схемам документов – как общепризнанным, так и вашего изобретения.

Поскольку мы использовали лишь малое подмножество DocBook DTD, то удобно оказалось создать простую монолитную таблицу стилей. Однако в реше­нии промышленного качества надо было бы разнести обработку различных эле­ментов DocBook по отдельным модулям в разных таблицах стилей и применять шаблоны в различных режимах.

Очевидный недостаток приведенного решения состоит в том, что информа­ция о стилях «зашита» непосредственно в таблицу. Поскольку почти все совре­менные браузеры поддерживают тот или иной уровень спецификации каскадных таблиц стилей (CSS), то было бы правильнее оставить XSLT только структурное преобразование, а стилизацию поручить CSS.

Базовая структура таблицы стилей сохраняется, но зашитые атрибуты style мы заменим атрибутами, определенными в файле style.css, ссылка на который добавлена в элемент head:

<?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"/>

<xsl:template match="/"> <html>

<head>

<xsl:apply-templates mode="head"/>

<link href="style.css" rel="stylesheet" type="text/css"/>

</head> <body>

<xsl:apply-templates/>

<xsl:apply-templates select="chapter/chapterinfo/*" mode="copyright"/> </body> </html>

</xsl:template> <!– Head —>

<xsl:template match="chapter" mode="head">

<xsl:apply-templates select="chapterinfo" mode="head" />

<xsl:apply-templates select="title" mode="head" /> </xsl:template>

<xsl:template match="chapter/title" mode="head">

<title><xsl:value-of select="."/></title> </xsl:template>

<xsl:template match="author" mode="head">

<meta name="author" content="{concat(firstname,’ ‘, surname)}"/> </xsl:template>

<xsl:template match="copyright" mode="head">

<meta name="copyright" content="{concat(holder,’ ‘,year)}"/> </xsl:template>

<xsl:template match="text( )" mode="head"/>

<!– Body — >

<xsl:template match="chapter"> <div class="chapter"><xsl:value-of select="@label"/></div> <xsl:apply-templates/> </xsl:template>

<xsl:template match="chapter/title">

<div class="title"><xsl:value-of select="."/></div> </xsl:template>

<xsl:template match="epigraph/para">

<div class="epigraph"><xsl:value-of select="."/></div> </xsl:template>

<xsl:template match="epigraph/attribution">

<div class="epigraph-attribution"><xsl:value-of select="."/></div> </xsl:template>

<xsl:template match="sect1"> <h1><xsl:value-of select="title"/></h1> <xsl:apply-templates/> </xsl:template>

<xsl:template match="sect2"> <h2><xsl:value-of select="title"/></h2>

<xsl:apply-templates/> </xsl:template>

<xsl:template match="para">

<p class="para"><xsl:value-of select="."/></p> </xsl:template>

<xsl:template match="text()"/>

<xsl:template match="copyright" mode="copyright"> <div class="copyright"> <xsl:text>Copyright </xsl:text> <xsl:value-of select="holder"/> <xsl:text> </xsl:text> <xsl:value-of select="year"/>

<xsl:text>. Все права зарезервированы.</xsl:text>

</div> </xsl:template>

<xsl:template match="*" mode="copyright"/> </xsl:stylesheet>

Таблица CSS-стилей – это плоский ASCII-файл (style.css), следующий про­стому набору соглашений:

body {

margin-left:100; margin-right:100; margin-top:50; margin-bottom:5 0; font-family: Times serif; font-size : 12pt; color:black;

}

div.chapter

{

text-align:right; font-size : 48pt; font-weight: bold; padding-bottom:10; color:red;

}

div.title

{

font-size : 24pt; font-family: Times serif; padding-bottom:15 0; color:red"

}

div.epigraph

{

font-style:: italic;

}

div.epigraph, div.epigraph-attribution

{

text-align: right; font-size : 10pt; padding-top: 4; padding-bottom: 4;

}

h1

{

font-size : 18pt; font-weight : bold;

}

h2 {

font-size : 14pt; font-weight : bold";

}

Если вы не знакомы с CSS, то обратитесь к превосходному учебному руководству по адресу http://www.w3schools.com/css/default.asp. Рекомендую также книгу Eric Meyer Cascading Style Sheets: The Definitive Guide, Second Edition, O’Reilly, 20041. Есть также много инструментов для создания CSS-таблиц. Лично мне нравится программа Macromedia Dreamweaver MX, но кто-то скажет, что она немного тяже­ловата, если нужен всего лишь простой редактор CSS.

См. также

Лучший источник информации о формате DocBook – сайт http://www.docbook.org/. Норманн Уолш (Norman Walsh) разработал набор общедоступных таблиц стилей для преобразования из DocBook в различные форматы публикации. Эти таблицы находятся по адресу http://docbook.sourceforge.net/projects/xsl/.

В рецепте 16.2 описывается несколько приемов создания более модульных и расширяемых таблиц стилей.

Мангано Сэл  XSLT. Сборник рецептов. – М.: ДМК Пресс, СПБ.: БХВ-Петербург, 2008. – 864 с.: ил.

По теме:

  • Комментарии