Web-програмування та web-дизайн (стр. 8 )

<xsl:template match="BOOK [BINDING='trade paperback']">.

Якщо у фільтр включено тільки ім'я елемента, то відповідний елемент повинен мати дочірній елемент із вказаним ім'ям. Наприклад, наступний зразок відповідає будь-якому елементу ITEM, що має дочірній елемент з ім'ям CD, незалежно від вмісту елемента CD:

match="ITEM[CD]".

Наступний зразок відповідає будь-якому елементу SHIRT, що має дочірній елемент COLOR, який містить текст "red":

match="SHIRT[COLOR='red']".

А наступний зразок, навпаки, відповідає будь-якому елементу SHIRT, що має дочірній елемент COLOR, який не містить текст "red":

select="SHIRT[COLOR='red']".

Примітка. Якщо елемент має більше, ніж один дочірній елемент з ім'ям, вказаним в умові фільтрації, оператор порівняння застосовується тільки до першого дочірнього елемента. Наприклад, якщо елемент SHIRT має два дочірні елементи COLOR, зразок "SHIRT[COLOR='red']" відповідатиме елементу, тільки якщо перший елемент COLOR містить слово "red".

Сортування

Ви вже ознайомилися з двома елементами, які можна використовувати для обробки елементів, що повторюються: for-each і apply-templates. Можна використовувати атрибут order-by для цих елементів, щоб управляти порядком, в якому браузер обробляє елементи, тим самим здійснюючи сортування даних XML.

Ви можете призначати атрибуту order-by один або декілька зразків, розділяючи їх крапкою з комою. Браузер сортуватиме елементи з використанням зразків у тому порядку, в якому вони перелічені. Для зазначення напряму сортування (за зростанням або за спаданням) слід перед зразком поставити префікс + або – .

Наприклад, атрибут order-by, встановлений для наступного елемента for-each, наказує браузеру сортувати елементи BOOK за прізвищами авторів у порядку зростання, а також здійснювати сортування для однакових прізвищ за іменами також за зростанням:

<xsl:for-each select="INVENTORY/BOOK"

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME">

В іншому прикладі наступна установка order-by здійснює сортування елементів BOOK за назвами книг за спаданням:

<xsl:apply-templates select="INVENTORY/BOOK" order-by="-TITLE">.

Оператор шляху, який ви привласнюєте атрибуту order-by, діє на зразок, що призначений атрибуту select. Так, у даному прикладі установка order-by="-TITLE" вказує на елемент TITLE всередині елемента BOOK, вкладеного в елемент INVENTORY.

Приклад таблиці стилів, що здійснює фільтрацію і сортування

Наведемо два приклади XSL-таблиць стилів. Кожен із них здійснює фільтрацію і сортування елементів BOOK, що підлягають відображенню. Розглянемо приклад example_18.xsl.

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www. w3.org/TR/WD-xsl">

<xsl:template match="/">

<H2>Book Inventory</H2>

<xsl:for-each

select="INVENTORY/BOOK[BINDING='trade paperback']"

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME">

<SPAN STYLE="font-style:italic">Author: </SPAN>

<xsl:value-of select="AUTHOR"/><BR />

<SPAN STYLE="font-style:italic">Title: </SPAN>

<xsl:value-of select="TITLE"/><BR />

<SPAN STYLE="font-style:italic">Binding type: </SPAN>

<xsl:value-of select="BINDING"/><BR />

<SPAN STYLE="font-style:italic">Number of pages: </SPAN>

<xsl:value-of select="PAGES"/><BR />

<SPAN STYLE="font-style:italic">Price: </SPAN>

<xsl:value-of select="PRICE"/><P />

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

Розглянемо також приклад еxample_09.xsl:

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www. w3.org/TR/WD-xsl">

<xsl:template match="/">

<H2>Book Inventory</H2>

<xsl:apply-templates select="INVENTORY/BOOK"

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME"/>

</xsl:template>

<xsl:template match="BOOK[BINDING='trade paperback']">

<SPAN STYLE="font-style:italic">Author: </SPAN>

<xsl:value-of select="AUTHOR"/><BR />

<SPAN STYLE="font-style:italic">Title: </SPAN>

<xsl:value-of select="TITLE"/><BR />

<SPAN STYLE="font-style:italic">Binding type: </SPAN>

<xsl:value-of select="BINDING"/><BR />

<SPAN STYLE="font-style:italic">Number of pages: </SPAN>

<xsl:value-of select="PAGES"/><BR />

<SPAN STYLE="font-style:italic">Price: </SPAN>

<xsl:value-of select="PRICE"/><P />

</xsl:template>

</xsl:stylesheet>

Обидві таблиці стилів розроблено для пов'язування з XML-документом. У них використаний такий фільтр який приписує браузеру відображувати тільки книги, що мають прошиту паперову палітурку (trade paperback):

[BINDING='trade paperback'].

В обох прикладах використовується така установка order-by, яка задає сортування елементів BOOK за зростанням за прізвищами авторів, а потім за іменами авторів:

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME".

Таблиця стилів використовує елемент for-each для відображення багатьох елементів BOOK. У приведеній нижче таблиці стилів для елемента for-each встановлені і фільтр, і атрибут order-by:

<xsl:for-each

select="INVENTORY/BOOK[BINDING='trade paperback']"

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME">

</xsl:for-each>.

Таблиця стилів використовує для відображення багатьох елементів BOOK елемент apply-templates разом з окремими шаблонами, що відповідають елементам "BOOK". У цій таблиці стилів фільтр доданий до шаблону відповідного елементам BOOK:

<xsl:template match="BOOK[BINDING='trade paperback']">.

Додавання фільтра до елемента apply-templates матиме той же ефект.

Атрибут order-by може бути доданий до елемента apply-templates таким чином:

<xsl:apply-templates select="INVENTORY/BOOK"

order-by="+AUTHOR/LASTNAME; +AUTHOR/FIRSTNAME"/>

Атрибут order-by слід додати до елемента apply-templates, оскільки елемент template не розпізнає цей атрибут. (Ви можете використовувати атрибут order-by тільки для елемента, який указує браузеру здійснити перегляд серед множини елементів, – а саме, for-each і apply-templates.)

ДОСТУП ДО АТРИБУТІВ XML

XSL трактує атрибут, що належить елементу в XML-документі, як дочірній елемент. Проте для посилання на атрибут у зразку XSL ви повинні перед іменем атрибута вставляти символ @, що вказує на те, що ім'я відноситься до атрибута, а не до елемента.

Наприклад, фільтр у наступному початковому тегу виділяє всі елементи BOOK з атрибутом InStock, що має значення "yes". Іншими словами, він вибирає тільки книги, які є в наявності:

<xsl:for-each select="INVENTORY/BOOK[@InStock='yes']">.

Ви можете використовувати XSL-елемент value-of для витягування значень атрибута точно так, як і ви це робите для витягування текстового вмісту елемента. Наприклад, такий елемент value-of отримує значення атрибута Born, що належить елементу AUTHOR:

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

Таблиця стилів, подана нижче, демонструє техніку доступу до атрибутів, належних елементів у XML-документі. Ця таблиця стилів відображує книги, що є в наявності, з каталогу.

Кожен елемент BOOK в XML-документі містить атрибут InStock, що має значення "yes" або "no", що вказує на наявність або відсутність книги в сховищі. Кожен елемент AUTHOR має атрибут Born, що містить рік народження автора.

Замість відображення значення атрибута InStock таблиця стилів використовує атрибут в умові фільтрації з метою уникнути відображення елементів BOOK для книг, яких немає в наявності:

<xsl:for-each select="INVENTORY/BOOK[@InStock='yes']">

</xsl:for-each>.

Таблиця стилів відображує кожен елемент BOOK у вигляді HTML-таблиці, а не через список елементів SPAN, як в попередніх прикладах. Вона відображує значення атрибута Born після значення елемента AUTHOR, використовуючи XSL-елемент value-of. Наступні елементи створюють елемент таблиці для відображення цих значень:

<TD>

<xsl:value-of select="AUTHOR"/> <BR/>

(born <xsl:value-of select="AUTHOR/@Born"/>)

</TD>.

Рисунок 16 – Відображення значень атрибутів

ВИКОРИСТАННЯ КАСКАДНИХ ТАБЛИЦЬ СТИЛІВ

Оскільки в XML ви створюєте свої власні елементи, браузер не має вбудованих засобів, що дозволяють визначити, як їх правильно відображувати. Створення каскадних таблиць стилів і зв’язування їх з вашим XML-документом – це один із способів повідомити браузеру, як відображувати кожен з елементів документа. XML-документ із зв'язаною таблицею каскадних стилів може бути відкритий безпосередньо в браузері. Вам немає необхідності використовувати HTML-сторінку для доступу і відображення даних (як це має місце в інших методах відображення XML).

Зберігання інструкцій щодо відображення в таблиці стилів окремо від самого XML-документа підвищує гнучкість XML-документа і полегшує роботу з ним. Ви можете, наприклад, швидко адаптувати один XML-документ до різних умов відображення (різним браузерам, додаткам, контекстним ситуаціям, периферійним пристроям і так далі) простим приєднанням відповідної таблиці стилів, без необхідності реструктурувати сам документ. Ви також можете швидко відновити формат для групи схожих XML-документів за допомогою внесення змін у приєднаній до цих документів таблиці стилів, не відкриваючи і не редагуючи кожен з документів.

Використання таблиці стилів напевно є найпростішим методом відображення XML-документа. Сучасні Web-браузери забезпечують високий рівень підтримки каскадних таблиць стилів, тоді як інші методи відображення XML все ще знаходяться у стадії розвитку, і браузери тільки починають їх підтримувати.

Так, у порівнянні з іншими методами відображення XML, каскадні таблиці стилів мають ряд обмежень. Хоча таблиця каскадних стилів надає достатньо високий рівень керованості способами, якими браузер форматує вміст елементів в XML-документах, вона не дає можливості модифікувати або реорганізовувати його вміст. Вона також не дозволяє вам здійснювати доступ до атрибутів, примітивів, інструкцій з обробки і іншим компонентам XML – а також не дає можливості обробляти інформацію, яку ці компоненти містять.

Далі ви познайомитеся зі складнішими, але і гнучкішими способами відображення XML-документів.

Основні етапи при використанні каскадних таблиць стилів

Наведемо два основні етапи при використанні таблиці каскадних стилів для відображення XML-документа:

1. Створення файлу таблиці стилів.

2. Пов'язання таблиці стилів з XML-документом.

Крок перший: створення файлу таблиці стилів

Таблиця каскадних стилів є текстовим файлом, як правило, з розширенням *.css, який містить набір правил, що повідомляють браузеру, яким чином форматувати і відображувати елементи в певному XML-документі. Як і XML-документ, ви можете створювати таблицю стилів за допомогою текстового редактора.

Розглянемо приклад простої таблиці каскадних стилів example_19.css.

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

TITLE

{font-style:italic}

AUTHOR

{font-weight:bold}

Ця таблиця стилів призначена для приєднання до XML-документа.

Таблиця стилів складається з одного або декількох правил (інколи їх називають набором правил). Правило містить інформацію про відображення певного типу елемента в XML-документі.

Селектором є ім'я типу елемента, до якого відноситься інформація про відображення.

За селектором іде блок оголошень, який обмежується фігурними дужками ({) і містить одне або декілька оголошень, що розділяються крапкою з комою.

Кожне оголошення задає установку певної властивості, такої як розмір шрифту, який буде використаний для відображення елемента. Оголошення складається з властивості, вслід за якою йде двокрапка, після якої йде значення для даної властивості. Наприклад, наступне оголошення встановлює для властивості font-size (розмір шрифту) значення 10pt (10 пунктів).

Таблиця стилів може також містити коментарі. Коментарі в таблиці стилів починаються з символів косої межі і зірочки (/*) і закінчуються символами зірочки і косої межі (*/). Між цими парами символів-обмежувачів ви можете помістити будь-який текст за вашим бажанням. Коли браузер зчитує таблицю стилів для форматування документа, він ігнорує цей текст. Ви можете використовувати коментар для пояснень, вказівки призначення і дії таблиці стилів.

Ви також можете використовувати коментарі в процесі розроблення таблиці стилів, щоб тимчасово відключити правило або його частку. Наприклад, якщо ви хочете подивитися, який вигляд будуть мати елементи BOOK без верхнього відбиття, то можете тимчасово додати символи коментарів у таке правило:

BOOK

{display:block;

/* margin-top:12pt; */

font-size:10pt}.

Примітка. Порожні символи (пропуски, табуляція, пропуск рядка) відділяють різні компоненти CSS такі як індивідуальні оголошення в блоці оголошень. Спосіб використання пропусків у даному курсі є лише одна з можливостей. Ви можете використовувати пропуски будь-яким способом, щоб краще організувати вміст і додати велику ясність вашим власним таблицям стилів. Наприклад, ви можете помістити всі оголошення, що відносяться до правила, в один рядок, замість того, щоб розміщувати кожне з них на окремому рядку, як це зроблено в прикладах.

Даний приклад таблиці стилів містить такі оголошення:

· display:block. Вміщує порожній рядок перед і після тексту елемента;

· margin-top:12pt. Додає верхнє поле висотою в 12 пт до тексту елемента;

· font-size:10pt. Встановлює розмір шрифту, що використовується для відображення тексту елемента, в 10 пунктів;

· font-style:italic. Відображує текст елемента курсивом;

· font-weight:bold. Відображує текст елемента напівжирним шрифтом.

На рисунку 9 показано як браузер відображує XML-документ, який використовує дану таблицю стилів відповідно до інструкцій, що містяться в цих оголошеннях.

Р

Рисунок 17 – Відображення xml-даних за допомогою каскадних таблиць стилів

Набір властивостей, що використовувався в таблицях каскадних стилів, схожий на набір властивостей, які ви можете застосовувати в текстовому процесорі.

Спадкоємність установок властивостей

Набір властивостей, які ви привласнили певному елементу (наприклад, BOOK), діє на всі дочірні елементи, прямо або побічно вкладені в нього, якщо тільки вони не встановлюються знову згодом для певного дочірнього елемента.

Проте наступні властивості є виключеннями і не наслідуються дочірніми елементами:

· властивість display;

· властивості, що відносяться до фону (background-color, background-image, background-repeat і background-position );

· властивість vertical-align;

· властивості розміщення тексту.

Кожен елемент BOOK має п'ять дочірніх елементів. Оскільки властивість font-size є успадкованою, всі дочірні елементи усередині елемента BOOK відображуються з розміром шрифту в 10 пунктів. Проте дочірні елементи не успадковують установку властивостей display і margin-top (властивість margin-top відноситься до групи властивостей розміщення тексту).

Для неуспадкованих властивостей, якщо ви не задали значення властивості для конкретного елемента, браузер використовує значення властивості за замовчанням. Наприклад, значенням за замовчанням для властивості display буде inline .

Оскільки більшість значень властивостей є наслідуваними, при розробленні таблиці стилів вам краще почати з елементів верхнього рівня, а потім опускатися до більш глибоко вкладених елементів. При цьому вам доведеться вносити мінімальну кількість змін і уточнень до установки властивостей (так, вам немає необхідності встановлювати властивості дочірніх елементів, якщо успадковані ними значення властивостей вас влаштовують).

Використання множинних елементів і множинних правил

Ви можете застосувати одне правило до декількох елементів, включивши всі імена елементів у селектор і відокремивши імена комами. Наприклад, наступне правило застосовується до типів елементів POEM, TITLE, AUTHOR, DATE і STANZA :

POEM, TITLE, AUTHOR, DATE, STANZA

{display:block;

margin-bottom:12pt}.

Якщо для групи елементів встановлюється загальний набір властивостей, ви можете зробити вашу таблицю стилів коротшою і полегшити її сприйняття, включивши всі ці елементи до одного правила, замість того, щоб дублювати установки в окремих правилах.

Ви також можете включити до певного типу елемента більше, ніж одне правило усередині тієї самої таблиці стилів. Наприклад, обидва правила включають елемент DATE :

POEM, TITLE, AUTHOR, DATE, STANZA

{display:block;

margin-bottom:12pt}

DATE

{font-style:italic}.

Перше правило містить оголошення, яке елемент DATE розділяє з іншими елементами в списку, тоді як друге правило здійснює додаткове налаштування для елемента DATE, а саме задає установку властивості, яка застосовується тільки до цього елемента.

Використання контекстуальних селекторів

У селекторі ви можете передувати імені елемента іменами одного або декількох елементів-предків (батьківський, батьківський плюс батьківський батька і так далі), і правило буде застосоване тільки до елементів з цим ім'ям, які є вкладеними так само. Селектор, який включає один або декілька елементів-предків, називається контекстуальним (contextual) селектором. Селектор, який не включає імен елементів-предків (подібно до тих, з якими ви мали справу в попередньому розділі), називається родовим (generic) селектором.

Якщо певна властивість для одного і того самого елемента має одну установку в правилі з контекстуальним селектором, і іншу установку в правилі з родовим селектором, установка в правилі з контекстуальним селектором домінує, оскільки є більш конкретизованою.

Припустимо, що наступний елемент є кореневим елементом XML-документа:

<MAPS>

<CITY>