Совет: Использование CSS2 для отображения XML-документов

Менее "дорогостоящая" альтернатива XSLT

Как известно, чтение XML-данных без использования специальных программ редактирования и просмотра довольно затруднено. Простым способом просмотра XML является применение ко XML-документам каскадной таблицы стилей (CSS2) и использование для просмотра Web-броузера. В данной статье мы рассмотрим еще один, альтернативный способ.

David Mertz, Исследователь, Gnosis Software, Inc.

Author photoДля написания статьи о структурированных форматах документов David Mertz использовал полностью неструктурированный мозг. Связаться с автором можно по адресу mertz@gnosis.cx. Его жизнь рассматривается на сайте http://gnosis.cx/dW/.



01.12.2001

Чтение человеком XML-документов затруднено. XML-документы являются текстовыми, однако визуальное расположение частей не всегда соответствует концептуальным связям между ними. Кроме того, поиск контента среди тегов усложняет просмотр. Конечно же, XML как формат редко предназначен для просмотра человеком напрямую. Обычно, перед тем как стать пригодным для чтения, исходник XML преобразовывается во что-то другое. Для конечных документов обычно используется HTML-страница или PDF-файл (путем форматирования тегов Formatting Object [FO]), или, возможно, страницы выводятся на печать. Для выполнения преобразований в читабельный формат часто используется XSLT. Для XML-документов с данными, целью обычно является формат данных DBMS или представление в памяти приложением, считывающим XML-файлы.

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

По сравнению с другими форматами, XML-документами можно управлять в чистом виде. В отличие от данных, хранимых в бинарном формате, XML-документ можно просто открыть в текстовом редакторе или программе для просмотра. Между тем, бывает довольно сложно визуально разобрать теги, особенно если автор XML не отформатировал для удобства чтения вертикальные и горизонтальные пробелы. Если вашей основной работой является чтение исходных XML-документов, вам следует воспользоваться одним из XML-редакторов (См. Ресурсы по теме). Однако, для человека, лишь изредка просматривающего XML-файлы использование XML-редакторов часто является излишними затратами (дело не только в затратах на стоимость лицензии, но и во временных затратах на изучение тонкостей программы).

Использование Web-броузера

Почти у всех разработчиков имеются уже инсталлированные программы для просмотра XML. Свежие версии Internet Explorer и Mozilla/Netscape позволяют отразить XML-документы в HTML-виде. Другие броузеры, такие как Opera и Konquorer также реализуют CSS2 – Opera 5+ отлично справляется с работой, Konqueror 2.2 – достаточно хорошо. В целом Mozilla и Netscape 6 прекрасно справляются с отображением XML-документа со стилями, определенными в CSS2. Internet Explorer (по крайней мере версии 6) отображает XML удовлетворительно, похоже, что он игнорирует атрибут display: inline. Это делает IE6 наименее подходящим для отображения XML-документов, ориентированных на просмотр, однако он по-прежнему хорошо справляется с документами, в которых хранятся данные. Не смотря на все это, IE6 хорошо подходит для просмотра XML-документов, у которых нет стиля CSS2, в иерархическом дереве, так как он позволяет отображать свернутые поддеревья.

Обычно я либо использую XMetal (с некоторыми "правилами" Xmetal, предоставленными моим коллегой Benoît Marchal из developerWorks). Иногда я пишу исходник, в котором я вызываю "smart ASCII" и преобразую его в XML, используя написанную мною утилиту txt2dw.py, преобразующую текст в формат рукописи developerWorks. В данном совете в качестве примера я решил использовать только текстовый редактор (плюс Mozilla 0.9.5). Данный пример помог мне досконально понять подход Web-броузер + CSS2.


Построение таблицы стилей

Напишем несколько слов с соответствующей XML-структурой (используя в качестве примера предыдущий совет). Затем создадим для работы пустой CSS2-файл dW.css и запишем следующую строку в XML-документ для объявления таблицы стилей:

<?xml-stylesheet href="dW.css" type="text/css"?>

Разумеется, простое объявление таблицы стилей не поможет Mozilla увидеть структуру документа. Следующим шагом будет построение таблицы стилей CSS2 для украшения XML-документа. Самым простым способом будет начать с самого начала XML-документа и постепенно дойти до конца. К примеру, первое, что встречается в DTD-документе developerWorks article.dtd это тег <seriestitle>, в котором хранится названия статьи. Создадим для него такой стиль, чтобы текст был большим с полужирным начертанием, выровненный по центру. На самом деле, существует несколько стилей, заданных всегда по умолчанию. Мы можем переопределить их для отдельных контекстов по нашему усмотрению. В Листинге 1 представлены несколько строк из нашего CSS2-файла.

Листинг 1. Начальное содержимое таблицы стилей
$DOCUMENT{
  "Times New Roman";
  font-size: 12pt;
  margin-top: 5px;
  margin-left: 10px;
}
* {
  display: block;
  background-color: white;
  padding: 2px;
}
seriestitle {
  font-weight: bold;
  font-size: 18pt;
  text-align: center;
}

Теперь перейдем к следующему элементу (в нашем случае <papertitle>) и так далее. После нескольких добавлений блочных элементов, я решил, что было бы желательно убедиться, что все линейные элементы появляются таким способом. Быстрый просмотр DTD помог мне вспомнить про значимые элементы, поэтому я добавил несколько строк, как показано в Листинге 2.

Листинг 2. Обработка линейных элементов
/* Линейные типографские элементы */
a, i, b, sub, sup, p>code { display: inline; background-color: inherit; } a { color: blue; text-decoration: underline; } i { font-style: italic; } b { font-weight: bold; } b[class="red"] { color: red; } b[class="blue"] { color: blue; } b[class="green"]{ color: green; } sub { vertical-align: sub } sup { vertical-align: super } sub,sup { font-size: small }

Добавим еще несколько блочных элементов, и у нас получится довольно хорошее представление XML-документа. Более того, этот небольшой объем проделанной работы будет полезен всякий раз, когда понадобится просмотреть документ с тем же XML-контекстом. При условии, что вы будете использовать свежие версии Web-броузера, вы сможете увидеть то же самое представление без необходимости вначале преобразования исходного XML в HTML или формат PDF.


Конечный вид

Процедура разработки таблицы стилей CSS2 для соответствия контексту XML-документа является простой. Конечно же, вы найдете разные специфические теги, которые могут вызвать вопросы. А для документов, более ориентированных на данные, вы почти наверняка захотите использовать в определении атрибуты вроде display: table. Небольшая работа по написанию таблицы стилей CSS2 делает просмотр XML-документов значительно проще.

Результат проделанной нами работы будет выглядеть примерно так, как показано на Рисунке 1. Исходники по данной теме можно найти в разделе Ресурсы по теме, однако, как вы уже догадались, разные версии броузеров на разных платформах будут отображать результат немного по-разному. Если ваш броузер не отображает информацию правильно, рекомендуем его обновить.

Рисунок 1. Вид данного документа в броузере Mozilla с применением таблицы стилей CSS2
Вид данного документа в броузере Mozilla с применением таблицы стилей CSS2

Ресурсы

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=96376
ArticleTitle=Совет: Использование CSS2 для отображения XML-документов
publish-date=12012001