Вывод данных на веб-страницу

Вывод данных на веб-страницу

1.       В текстовом редакторе добавьте в файл вторую строку, которая подключает стилевой файл europe.xsl:

<?xml-stylesheet type='text/xsl' href='europe.xsl'?>

Файлы с расширением XSL (от англ. eXtensible Stylesheet Language, расширяемый язык стилей) задают правила преобразования XML-документа в другой формат, например, в HTML. Браузер, открывая XML-файл с подключенной таблицей стилей, строит HTML-документ. Посмотрите, как выглядит теперь файл europe.xml, если открыть его в браузере.

2.       Откройте файл europe.xsl в текстовом редакторе и изучите его. Найдите две строчки, которые выбирают информацию из базы данных:

<xsl:value-of select="//Страна/Название"/>

<xsl:value-of select="//Страна/Столица"/>

Обратите внимание, что это пустые элементы (без содержания), они заканчивается знаками «/>», то есть сразу закрываются.

Здесь Название и Столица ­– это названия полей (тэгов) в XML-файле. Оба эти поля находятся внутри контейнера Страна. Запись //Страна/Название означает «значение поля Название в контейнере Страна». В XML-файле хранятся данные по многим странам, проверьте, данные какой страны появятся на экране:

Ответ:

Почему появились данные именно этой страны?

Ответ:

3.       В XSL-файле можно использовать тэги языка HTML. Например, можно заключить данные в таблицу:

<table border="1">

<tr>

  <td><xsl:value-of select="//Страна/Название"/></td>

  <td><xsl:value-of select="//Страна/Столица"/></td>

</tr>

</table>

Самостоятельно добавьте в таблицу оставшиеся данные (население  в миллионах человек и площадь страны в тысячах квадратных километров), а также заголовки столбцов (используйте тэг «th»).

4.       Откройте файл europe.xml в браузере и убедитесь, что вы видите таблицу, где указаны все данные одной страны.

Для того чтобы вывести данные по всем странам, используем цикл. Для этого в стилевой файл нужно добавить строчки, обозначающие начало и конец цикла:

  <table border="1">

  <tr>

    <th>Страна</th>

    <th>Столица</th>

    ...

  </tr>

<xsl:for-each select="//Страна">

  <tr>

    <td><xsl:value-of select="Название"/></td>

    <td><xsl:value-of select="Столица"/></td>

    ...

  </tr>

</xsl:for-each>

  </table>

В данном случае цикл выполняется по всем элементам Страна, то есть, по всем странам. Здесь двойной слэш «//» перед словом «Страна» показывает, что цикл применяется ко всем элементам с таким названием, независимо от уровня вложенности. Вместо этого можно было указать точный адрес элементов Страна так: «СтраныЕвропы/Страна» – это означает «все элементы Страна внутри элемента СтраныЕвропы».

Добавьте цикл в нужное место в XSL-файл и обновите файл в браузере. Вы должны увидеть в таблице информацию по всем странам.

Сортировка

5.       Таблицу можно отсортировать по любому столбцу. Для этого в стилевой файл го сразу после начала цикла добавим элемент

<xsl:sort order="ascending" select="Название"/>

Сортировка выполняется по полю Название в порядке возрастания (англ. ascending). Для сортировки по убыванию значение параметра order (англ. порядок) должно быть равно descending (англ. убывающий). Посмотрите, как теперь выглядит файл в браузере.

6.       Самостоятельно измените порядок сортировки: сделайте сортировку по убыванию количества жителей страны. Подумайте, почему результат отличается от ожидаемого.

Ответ:

7.       Для того чтобы правильно выполнить сортировку по числовым данным, в команду сортировки нужно добавить параметр data-type (тип данных), который должен быть равен number (англ. число):

<xsl:sort ... data-type="number"/>

Внесите это изменение и проверьте правильности сортировки.

Выборка

8.       С помощью стилевого файла можно задать условие отбора данных. Для этого применяется элемент xsl:if. Этот парный элемент (контейнер) нужно вставлять внутрь цикла после элемента сортировки:

<xsl:for-each ...>

<xsl:sort .../>

<xsl:if test="Население > 20">

...

</xsl:if>

</xsl:for-each>

В этом примере отбор идет по значению поля Население. Выбираются только те страны, у которых население более 20 млн человек. Проверьте работу этого элемента.

Можно также использовать другие операторы сравнения:

   > или &gt;         больше или равно (англ. greater than)

>= или &gt;=         больше или равно (англ. greater than)

        &lt;   меньше (англ. less than)

       &lt;=   меньше или равно

Знаки > и < в коде веб-страниц заменяют соответственно на &gt; и &lt; для того, чтобы браузер не путал их с угловыми скобками, ограничивающими тэги. Для знака < такая замена в стилевом XSL-файле обязательна.

9.       Самостоятельно сделайте выборку по тем странам, площадь которых меньше, чем 200 тысяч км², отсортируйте строки таблицы по возрастанию площади стран.

10.   Вложенные элементы xsl:if дают эффект логической операции «И» (требуют выполнения двух условий одновременно). Добавьте в условие отбора еще одно ограничение: население больше, чем 10 млн. человек. Проверьте результат в браузере.

11.   *Подумайте, как можно добиться эффекта логической операции «ИЛИ».

Условное форматирование

12.   С помощью элемента xsl:if можно cделать условное форматирование, то есть изменять свойства HTML-элементов. Например, чтобы изменить цвет для всех чётных строк таблицы, после открывающего тэга tr внутри цикла нужно добавить строки:

<xsl:if test="position() mod 2 = 0">

  <xsl:attribute name="bgcolor">#E6E6FF</xsl:attribute>

</xsl:if>

Если позиция элемента (она вычисляется функцией position) – чётное число (остаток от деления на 2 равен 0), то для всей строки (предыдущего элемента tr) устанавливается свойство bgcolor (фоновый цвет), равный #E6E6FF.

Проверьте, как выглядит страница в браузере после этих изменений.

Вы заметите, что строки раскрашены неправильно (фон не чередуется).  Это произошло потому, что функция position использует счётчик цикла, который перебирает все страны в базе, хотя фактически выводятся данные только по тем странам, который соответствуют двум вложенным условиям отбора. 

13.   Чтобы исправить ситуацию, сделаем так, чтобы цикл работал только для тех стран, которые нам нужны. Для этого уберем оба контейнера-условия xsl:if и изменим заголовок цикла, включив в него оба условия, связанные логической операцией «and» (И):

<xsl:for-each
     select="//Страна[Население > 10 and Площадь &lt;200]">

Проверьте, что после этого и отбор данных, и раскраска строк работают правильно. В сложных условиях можно использовать также логическую операцию «or» (ИЛИ).

14.   Измените условие так, чтобы отобрать страны, население которых меньше 20 млн. человек, а также все страны, площадь которых больше 100 тыс. км².

Подключение CSS-файлов

15.   Создайте новый CSS-файл europe.css и подключите его к веб-странице. Для этого нужно ставить ссылку на него внутрь контейнера head в XSL-файле. Установите с помощью CSS серый цвет для ячеек таблицы, заданных тэгом «th». Проверьте результат в браузере.

16.   Установите в CSS-файле для ячеек таблицы внутренний отступ по вертикали 2 пикселя и по горизонтали 5 пикселей.

17.   Присвойте ячейкам, в которых выводится население и площадь стран, класс number, и для него установите в CSS-файле выравнивание по правой границе. Окончательный результат должен выглядеть примерно так:

Работа с атрибутами

18.   Откройте файл europe2.xml в браузере, используя команду меню Файл – Открыть и изучите его структуру. Как видите, эта база строится иначе – свойства стран заданы не как вложенные элементы, а как атрибуты, например:

<Страна Название="Греция" Столица="Афины"

        Население="11" Площадь="132" />

Как ни странно, переход к такому формату базы данных потребует минимальных изменений в стилевом файле. Для обращения к атрибутам нужно перед названием атрибута просто поставить знак @.

19.   Скопируйте XSL-файл europe.xsl, назвав копию europe2.xsl. Перед всеми названиями атрибутов (которые раньше были названиями вложенных элементов) добавьте знак @ (так вместо «Название» нужно написать «@Название»).

20.   Подключите к файлу europe2.xml таблицу стилей europe2.xsl и проверьте, что получается тот же самый результат, что и раньше.

На этом выполнение основной части работы закончено.