 |
Использование каскадных стилевых таблиц
|
|
|
|
Использование каскадной стилевой таблицы предусматривает создание специального текстового файла с расширением css. Этот файл должен содержать набор правил для отображения содержания тегов. Затем в пролог XML документа нужно добавить директиву присоединения этого файла.
Формат директивы:
<?xml-stylesheet type="text/css" href="uri"?>.
Здесь uri путь к CSS файлу. Если он находится в одной папке с XML документом достаточно указать его имя.
Файл каскадной стилевой таблицы состоит из правил отображения содержания тега документа. Правила называют селекторами, и они имеют в общем виде структуру:
Тег|Теги {параметр1: значение;
параметр2: значение;
....
}
Здесь параметрi – определенный стилевой параметр, которому нужно задать значение, значение должно быть закрыто символом;.
Правила применяются к тегам или списку тегов разделенных запятыми. Если правила назначено головному (родительскому) тегу иерархии, то оно распространяется на дочерние теги. Имена параметров и их значений регистрозависимые.
Пример. Рассмотрим ранее созданный XML документ с двумя сообщениями и выведем его в следующем виде:
Hello World!
Привет МИР!
Текст выводится жирным шрифтом, русский текст курсивом. Английский текст синим цветом, русский текст красным.
Для решения этой задачи нужно составить таблицу стилей и поместить ее в файл hello.css, а затем подключить к xml файлу и загрузить документ в браузер.
В CSS файл нужно поместить правила:
NODE {font-weight:bold;
}
RU,ENG{display:block;
}
ENG{color:#0000FF;
}
RU{
color:#FF0000;
font-style:italic;
}
Здесь:
параметр font-weight отвечает за яркость символов (жирность) значение bold означает задать стандартную яркость. Его действие распространяется на дочерние теги RU и ENG тега NODE.
|
|
|
Параметр display определяет, будет ли содержание, тегов RU и ENG выводится отдельным блоком. При значении block содержание тегов выводятся как строки.
Параметр color задает цвет содержанию тегов ENG и RU.
Параметр font-style определяет начертание шрифта для содержания тега RU. Значение italic означает вывод текста курсивом.
В приложении №1 приводится описание базового набора стилевых параметров и их значений.
Если требуется выводить графические изображения при выводе содержания XML документа, то для их размещения в составе разметки определяют специальный тег с пустым содержанием. В CSS файле нужно создать правило для этого тега со следующими особенностями:
· Нужно загрузить графический файл в элемент-тег.
· Запретить его тиражирование по полю содержания тега.
· Задать размеры области вывода.
· Задать тип обтекания текстом.
На рисунке 2.8 показан вид окна браузера с загруженным документом, для которого создана стилевая таблица, обеспечивающая загрузка изображения формата BMP с разрешением 100 на 67 пикселов и форматирование текста.
Документ XML содержит разметку:
<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet type="text/css" href="picture.css"?>
<doc>
<picture/>
<s>Выставочная галерея</s>
<s>АО Крокус</s>
<s>Часы работы с 10.00 до 20.00</s>
<s>В субботу и воскресение с 10.00 до 18.00</s>
<s>Без перерыва на обед</s>
</doc>
Стилевая таблица, хранящаяся в файле picture.css имеет структуру:
s{display:block;
font-size:18px;
}
picture{background-image:url(739000.bmp);
background-repeat:no-repeat;
width:100px;
height:67px;
float:left;
}
Рис.2.8. Вывод графического изображения
Создавая разметку можно обращаться к пространству имен HTML тегов:
<html:T
xmlns:html="http://www.w3c.org/TR/REC-html40/">
содержание
</html:T>
Здесь T требуемый тег.
Например, вывод разделительной линии при просмотре содержания XML документа можно выполнить тегом
<html:hr
xmlns:html="http://www.w3c.org/TR/REC-html40/">
|
|
|
</html:hr>
2.4.2. XSL таблица стилей
Таблица стилей XSL (eXtensible Stylesheet Language) – корректный документ XML, который определяет способы трансформации исходного документа, с помощью специальных инструкций-тегов расширяемого языка стилевой разметки. Инструкции XSL служат для извлечения информации и передаче ее специальному процессору XSLT. Процессоры, входящие в состав браузера преобразуют исходный XML документ в HTML страницу, которая отображается браузером. В составе XSL документа могут находится теги XHTML (расширяемого HTML). Написание тегов должно отвечать требованиям корректного XML документа.
Примеры XHTML тегов:
<b>содержание</b>
<br/>
Для использования XSL тегов необходимо объявить пространство имен
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--теги XSL и XHTML-->
</xsl:stylesheet>
Просмотр информации требует задания корня документа с помощью тега:
<xsl:template match="/">
</xsl:template>
Тег должен содержать инструкции для вывода информации и теги XHTML. Извлечение информационного содержания элементов выполняется с помощью тега:
<xsl:value-of select="path"/>
Здесь path путь к требуемому элементу-тегу XML документа, сформированный с учетом иерархии тегов. В качестве разделителя тегов иерархии служит символ /.
Таблица XSL должна подсоединятся к XML документу с помощью инструкции:
<?xml-stylesheet type="text/xsl" href="table.xsl"?>
Пример. Рассмотрим XML документ, в котором зафиксирована информация о служащих: личном номере, наименовании отдела служащего, фамилии с инициалами и ставке в условных единицах.
<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet type="text/xsl" href="table.xsl"?>
<firma>
<worker>
<id dept="бухгалтерия">100</id>
<name>Иванова А.И.</name>
<pay>600</pay>
</worker>
<worker>
<id dept="бухгалтерия">500</id>
<name>Козырева А.П.</name>
<pay>1000</pay>
</worker>
<worker>
<id dept="склад">300</id>
<name>Свиридова С.А</name>
<pay>1500</pay>
</worker>
</firma>
К документу присоединен XSL файл table.xsl. В этом файле хранятся инструкции трансформации документа.
<?xml version="1.0" encoding="windows-1251"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Список сотрудников </h2>
|
|
|
<xsl:value-of select="firma/worker/id"/><br/>
<xsl:value-of select="firma/worker/name"/><br/>
<xsl:value-of select="firma/worker/pay"/><br/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Результат преобразования документа показан на рисунке 2.9.
Рис.2.9. Трансформация документа
Как видно из рисунка сформирован HTML документ, который содержит информацию из первого блока данных отмеченных тегом worker. Из рисунка видно так же, что нет сведений об отделе, отсутствуют комментарии к извлеченной информации.
Просмотреть содержание всех узлов документа можно с помощью тега:
<xsl:for-each select="path">
</xsl:for-each>
Где path – путь к узлу, содержимое которого нужно вывести для всего документа. Внутри располагаются теги для извлечения информации из дочерних узлов. Данный тег представляет собой цикл перебора содержания узла, к которому указан путь.
Что бы извлечь значение атрибуты тега нужно указать к нему путь и снабдить специальным символом @ (ссылкой на атрибут).
Новый вариант XSL документа примет вид:
<?xml version="1.0" encoding="windows-1251"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Список сотрудников </h2>
<xsl:for-each select="firma/worker">
Отдел:
<xsl:value-of select="id/@dept"/><br/>
Личный номер:
<xsl:value-of select="id"/><br/>
Фамилия:
<xsl:value-of select="name"/><br/>
Зарпплата у.е:
<xsl:value-of select="pay"/><br/>
<hr/>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Результат преобразования показан на рисунке 2.10. Из рисунка видно, что из документа извлечена вся информация, которая в нем содержится.
Технология использования трансформации документов позволяет выполнить ряд специальных действий над содержанием XML документа. К ним относятся:
· Отбор информации по условию.
· Множественный выбор информации.
· Сортировка.
· Использование шаблонов.
Отбор информации по условию выполняется с помощью тега:
<xsl:if test="условие отбора">
содержание
</xsl:if>
Рис.2.10. Вывод информации о служащих
Содержание тега обрабатывается, если выполнено условие. Например, набор тегов:
|
|
|
<xsl:if test="id/@dept='бухгалтерия'">
Отдел:
<xsl:value-of select="id/@dept"/><br/>
Личный номер:
<xsl:value-of select="id"/><br/>
Фамилия:
<xsl:value-of select="name"/><br/>
Зарпплата у.е:
<xsl:value-of select="pay"/><br/>
<hr/>
</xsl:if>
Выводит информацию о служащих отдела бухгалтерия.
Для селекторного отбора информации используют теги:
<xsl:choose></xsl:choose>
<xsl:when test="условие"> </xsl:when>
Во второй тег вкладывается в первый. Дополнительно может быть использован тег <xsl:otherwise></xsl:otherwise> его содержание выполняется только в том случае если не найдено соответствий в селекторах
Пример. Отбор сотрудников с личными номерами 100 и 500.
<xsl:choose>
<xsl:when test="id='100'">
Фамилия:
<xsl:value-of select="name"/><br/>
<hr/>
</xsl:when>
<xsl:when test="id='500'">
Фамилия:
<xsl:value-of select="name"/><br/>
<hr/>
</xsl:when>
<xsl:otherwise>
<p></p><hr/>
</xsl:otherwise>
Если служащий не обнаружен, выводится пустая строка и разделительная линия.
Отбор по условию и селективный выбор должны производится внутри тега xsl:for-each.
При выводе содержания XML его можно отсортировать-упорядочить с помощью тега xsl:sort. Тег должен отвечать следующему формату:
<xsl:sort select="тег" order="type"/>
Здесь тег – наименование тега по содержанию, которого выполняется сортировка. Значение type определяет тип сортировки:
· ascending – по возрастанию, используется по умолчанию;
· descending – по убыванию.
Этот тег должен быть первым внутри тега xsl:for-each.
Пример. Сортировка содержания по убыванию личного номера сотрудника.
<xsl:for-each select="firma/worker">
<xsl:sort select="id" order="descending"/>
Личный номер:
<xsl:value-of select="id"/><br/>
Фамилия:
<xsl:value-of select="name"/><br/>
<hr/>
</xsl:for-each>
При использовании сортировки можно использовать дополнительный параметр case-order для учета регистра символов при сортировке:
· lower-first: сортировка по строчным буквам имеет больший приоритет;
· upper-first: сортировка по прописным буквам имеет больший приоритет.
Например сортировка фамилий с учетом регистра:
<xsl:sort select="name" case-order="upper-first"/>
Числовые данные сортируются по умолчанию не как числа, а как строки символов с кодами символов цифр. С помощью параметра
data-type="number" можно указать, что строки с числами должны сортироваться как числа:
<xsl:sort select="id" data-type="number"/>
В результате будет выполненная сортировка по числовому значению личного номера сотрудника.
Шаблон задается один раз и может быть использован при разработке XSL документа. Задается шаблон тегами:
<xsl:template match="имя">
|
|
|
содержание
</xsl:template>
Обращение к шаблону выполняется с помощью тега:
<xsl:apply-templates select="path"/>
Здесь имя это наименование тега документа XML откуда будет произведено извлечение информации. Значение path задает путь в документе к тегу указанному в имя.
Пример. Создадим шаблон для извлечения информации из тега worker и используем его в XSL таблице.
<xsl:template match="worker">
Отдел:
<xsl:value-of select="id/@dept"/><br/>
Личный номер:
<xsl:value-of select="id"/><br/>
Фамилия:
<xsl:value-of select="name"/><br/>
Оплата у.е:
<xsl:value-of select="pay"/><br/>
<hr/>
</xsl:template>
<xsl:template match="/">
<html>
<body>
<h2>Список сотрудников </h2>
<xsl:apply-templates select="firma/worker"/>
</body>
</html>
</xsl:template>
Результат вывода будет таким же, как при использовании тега
xsl:for-each. Шаблоны многократно применяются при выводе информации из документа XML.
Контрольные вопросы
1. Перечислите основные части XML документа.
2. Дайте характеристику корректному XML документу.
3. Перечислите ссылки на символы, используемые в XML.
4. Что понимается под валидностью XML документа?
5. Как устроен шаблон DTD документа?
6. Как задаются элементы в шаблоне DTD документа?
7. Как определить и использовать сущность XML?
8. Что значит определить атрибут в шаблоне документа DTD?
9. Как выполнить преобразование содержания XML документа?
10. Как устроена каскадная стилевая таблица?
11. Как используется каскадная стилевая таблица для отображения содержания документа?
12. Что такое XSL документ и XSL тег?
13. Как строится и используется XSL документ?
14. Дайте классификацию XSL тегов и укажите их особенности.
15. Как используются шаблоны XSL?
|
|
|
