XSLT и CSS для отображения XML. Основы XML

5 ответов

То, что ваше сердце говорит вам, является правильным. Хотя можно использовать CSS для XML, сам XML не имеет семантики. CSS предназначен для Интернета, для HTML и для предоставления семантических данных (хорошего) вида.

XML более общий, чем это. XSLT был изобретен для преобразования одного формата данных в другой (XSLT 1.0 только XML, XSLT 2.0 - любой формат данных Unicode), то есть XML в HTML или XML в XSL-FO или другой формат XML или текста. XSL-FO был изобретен для размещения XML на бумаге или экране и гораздо более подробный, чем CSS.

Некоторые плюсы и минусы в CSS + XML

В основном, минусы, особенно. в свете использования XML в браузере. Пропустите общий совет ниже, если вы не хотите, чтобы все мои болтовня; -)

CSS минус 1: нет CSS + XML для Интернета

Против: это сильно зависит от контекста, но если вы хотите использовать XML для отображения в Интернете, подумайте еще раз: не используйте XML, а преобразовывайте его в HTML. Затем используйте CSS + HTML для отображения ваших данных. Если вы используете XML в Интернете, никакой поисковой системы или искателя, не понимаете разницу между и , но они поймут разницу между и .

Это само по себе является достаточным основанием для использования XSLT для преобразования в HTML + CSS и исключения XML самостоятельно.

CSS cons 2: CSS означает много больше работы

Другая чрезвычайно важная причина, которую вы можете использовать: XML + CSS означает определение каждого элемента в CSS. Использование HTML + CSS означает, что пользовательские агенты уже знают свойства макета по умолчанию для всех элементов. Использование XML + XSLT означает, что вы обычно создаете HTML + CSS. Вы должны сделать это на стороне сервера, поскольку клиентская XSLT не очень надежна и совместима с кросс-браузером.

CSS cons 3: доступность

(извините, я не могу найти профи). Если XML не имеет семантики (SVG, как упоминается другим пользователем), нет смысла использовать CSS для макета. Если макет предположительно семантически понимается пользовательским агентом, XML + CSS не работает. Чтение текста в речь не имеет понятия, что делать, достоверность WAI (доступность) будет невозможна и т.д.

CSS cons 4: ремонтопригодность, понятность, сценарии, проблемы

Использование XML затрудняет выполнение любых сценариев на стороне клиента (да, DOM доступен, но как вы скажете браузеру, что такое script -tag? Но, возможно, он отреагирует на , но эй, вам нужен XSLT, чтобы получить там этот тег) и затрудняет его кроссбраузер (некоторые браузеры с трудом используют XML как таковой). Все, что HTML (например, мета, название, тело, script) не будет доступно. Невозможно добавить атрибуты заголовка или сообщить браузеру, что изображение (afaik).

Без script будет работать на вас только для XML-страницы (prototype.js? jquery.js? ajax? no no и no).

Любой, кто смотрит на ваш код, должен узнать, что означает каждый тэг. Использование XSLT для преобразования в HTML предотвращает это. Этот дополнительный шаг полезен и должен применяться каждый раз, когда вы переходите от XML к отображению браузера.

Преимущества CSS 1: для домена

Если ваш домен SVG, SMIL, OD или что-то еще, вы, вероятно, уже знаете это: CSS является неотъемлемой частью спецификации и должен использоваться. Это полностью отличается от чистого, возможно неструктурированного XML-данных.

AJAX думал

Просто для сравнения: любой асинхронный вызов AJAX (должен) возвращает XML. Но любая библиотека, работающая с ней, будет либо интерпретировать ее как HTML, либо использовать XSLT или другое средство для ее трансформации до ее ввода на существующей странице.

Основываясь на замечании от OP, мы смотрим на XML данных (а не на SVG или OpenDocument), и его нужно отображать в браузерах. Доступность и индексируемость не важны. Но это не имеет особого значения: вы не должны использовать только XML + CSS, если вы действительно не входите в какое-то приключение и не хотите узнать все недостатки XML в браузерах, хотите снова придумать каждый тег HTML и определить каждый и все, только чтобы отказаться от времени и вернуться к HTML (XML + XSLT == HTML + CSS ).

Обновление: добавлено cons 2
Обновление: добавлено cons 3 и профи 1
Обновление: добавлено cons 4, примечание AJAX и заключение

Если ваш XML-код достаточно красив для отдельных элементов макета, используйте CSS, если вам нужно больше работы по его адаптации для отображения, а затем используйте XSLT. Такие вещи, как произвольные переупорядочения содержимого или сворачивание нескольких списков значений в таблицу и т.д., Не поддаются на CSS. CSS действительно работает только хорошо, если ваша общая структура документа уже та же, которую вы хотите отобразить.

Нет ничего по своей сути неправильного использования CSS для стилей XML, это просто не очень часто (хотя я делал это в прошлом как эксперимент).

Исходный документ

Документ, к которому применяется одна или несколько таблиц стилей. Это закодировано на некотором языке, который представляет документ как дерево элементов. Каждый элемент состоит из имени, которое идентифицирует тип элемента, необязательно количество атрибутов и (возможно, пустое) содержимое. Например, исходный документ может быть экземпляром XML или SGML.

Язык документа

Язык кодирования исходного документа (например, HTML, XHTML или SVG ). CSS используется для описания представления языков документа, а CSS не изменяет основную семантику языков документа.

(Мой акцент).

Основные возможности, которые следует учитывать при принятии решения о том, следует ли использовать CSS в отличие от XSLT, выглядят следующим образом:

Имеет ли смысл преобразовать XML-документ в другую структуру (например, XHTML), чтобы лучше представить семантику документа?

Является ли семантическая структура документа достаточной для себя, так что нужно применять только презентационный стиль?

Если у вас есть довольно произвольный и бессмысленный XML - что-то вроде 1foo , тогда маршрут XSLT имеет смысл. Если, однако, у вас есть документ, который имеет свою четко определенную семантику (например, SVG файл или любое из нескольких приложений XML), и все, что вы хотите сделать, это сделать заголовки выделяющимися, а шрифт выглядит красиво, тогда CSS отлично.

В конечном счете, простейшая вещь, которая могла бы работать. CSS - по крайней мере, начиная с версии 2 и далее - был специально разработан для языковой агностики (то есть не привязан к HTML), поэтому нет оснований не использовать его, когда это имеет смысл.

Цель занятия

Знакомство с технологией XML. Изучение возможности представления документов XML в HTML. Использование скриптов JavaScript для навигации по таблице XML и организации поиска данных по условию. Рекомендуемая литература .

Краткие теоретические сведения

Технология XML (eXtensible Markup Language) была создана в конце 90-х годов прошлого столетия. Основные достоинства текста XML:

□ имеет структуру базы данных, доступен ЭВМ и человеку;

□ удобно обрабатывается средствами современных языков программирования;

□ легко переводится в HTML.

Рассмотрим следующий пример текстовой базы данных, написанной на XML:

Three men in the boat

Jerom-K-Jerom

12000

Notre Domme de Paris

V.Hugo

15000

А War and Peace

L.Tolstoy

16500

Angelika - the misstress of ghosts А and S. Gallen

9000

Это пример правильно составленного документа XML, элементами которого являются теги , , , , ,

Элементы в тексте расположены по типу дерева с головным элементом . Каждьтй элемент имеет сопряженный с ним закрывающий элемент. Область действия каждого элемента ограничена открывающим и закрывающим элементами. Не допускается пересечения области действия элементов, т. e. области либо вложены одна в другую, либо вовсе не пересекаются. Элемент , область действия которого содержит области действия всех других элементов, называется корневым. XML-документ можно рассматривать как текстовую базу данных. Значением элемента является информация, помещенная между тегами, определяющими данный элемент. Так, значением первого элемента является строка

Three men in the boat.

Наберите этот текст в любом редакторе и сохраните его как простой текстовый файл с расширением xml - например, дайте этому файлу имя textbd.xml. Можно просмотреть этот файл браузером Internet Explorer так же, как вы просматривали HTML-файлы. В случае ошибки интерпретатор XML выдаст подробную информацию о дислокации и сути ошибки.

Теперь покажем, как перевести этот вывод в табличную форму HTML, что выполняется средствами HTML. Создадим следующий файл HTML (листинг 2.12).

Листинг 2.12. HTML-документ для отображения таблицы XML

The Book Title

The author

The price

Сохраним этот HTML-файл под именем textbd.html. Теперь откроем его браузером. Результат будет таким (рис. 2.9).

Рис. 2.9. Отображение документа XML в документе HTML

Для подключения созданного ранее XML-файла и связывания его с таблицей используются теги:

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

Тег используется в качестве контейнера. Параметр DATAFLD содержит значение отображаемого элемента XML.

При работе с базами данных одним из основных вопросов является поиск требуемой информации. В этой работе осуществим такой поиск с помощью средств JavaScript. Поскольку база может быть достаточно большой, то вывод ее целиком в таблице HTML- документа очень неэффективен. Поэтому будем отображать не всю таблицу, а, скажем, только две записи. Кроме того, поставим кнопки, чтобы листать базу . Для этого изменим наш HTML-документ следующим образом (листинг 2.13).

Листинг2.13. Модифицированный HTML-документ для отображения таблицы XML

Our first lesson in xml-technology

The Book Title

The author

The price

>

<

Терм > используется для прорисовки стрелки вправо, терм &it - стрелки влево. При этом указываем, что нужно отображать только две записи в таблице:

Теперь создадим для нашего сайта функциональное наполнение. Его смысл будет заключаться в том, что будем вводить название книги целиком или какие-то его фрагменты, и по нажатию кнопки система должна выдавать другие реквизиты книги: автора и цену либо сообщать, что книга не найдена. Теперь понадобится привлечь JavaScript. Собственно потребуется всего несколько команд.

□ getElementByTagName("title").item(i).text;

Эта команда возвращает значение элемента из XML-файла, который является i-м по порядку перечисления этих элементов .

□ getElementsByTagName("title").length;

Эта команда возвращает общее число элементов из ХМ L-документа.

□ String.indexOf(stringl);

Эта команда возвращает позицию, с которой строка stringi входит в строку string либо -i, если вхождений нет.

Теперь приведем расширенный HTML-код для этой задачи (листинг 2.14).

Листинг2.14. Расширенный HTML-документ для отображения таблицы XML

function showelement()

// Подключение XML-документа:

var odoc=new ActiveXObject("Microsoft.XMLDOM");

odoc.async=false; // Приостановка программы,

// пока загрузка не завершится odoc.load("textbd.xml"); // Загрузка XML-документа в память var stringl=document.myform.mytext.value; z=odoc.getElementsByTagName("title").length;// Получение

// длины элемента // с тегом //

for(i=0;i