Практикум 2.1. Визуализация первого XML-документа, используя внутреннюю таблицу стилей

Практикум 2.1. Визуализация первого XML-документа, используя внутреннюю таблицу стилей

Из главы 2 вы узнали, что XML имеет дело со структурой данных, а не с их представлением, но именно визуальное представление данных – это то, ради чего создается большая часть современного программного обеспечения и каскадные таблицы стилей (Cascading style sheets, CSS) могут быть использованы для определения большинства характеристик вывода. Итак, визуализируем XML-документ student.xml из практикума 1 используя внутреннюю таблицу стилей. Применим серый цвет ко всему тексту, а фамилию сделаем жирным и курсивом. Фотографию пока выводить не будем.

4. Наберите следующий код в блокноте и сохраните в файле с именем pr_2_1.xml

<?xml version = '1.0' encoding = 'windows-1251'?>

<?xml-stylesheet type="text/css" href="#mystylesheet"?>

<student>

<student> <style id="mystylesheet"> style {display:none} style {display:none} student {display:block; color:gray} lastName {font-weight:bold;font-style:italic} photo {display:none} </style>

<lastName>Шилин</lastName> <firstName>Алексей</firstName> <middleName>Валерьевич</middleName> <faculty>УП-1</faculty> <grNum>1</grNum> <dateStarted>1-09-2000</dateStarted> <photo>images/jjanus.jpg</photo> </student>

 

5. Теперь откройте этот файл в IE. Если вы набрали все теги в точности, файл pr_2_1.xml будет выглядеть примерно так:

Теперь вместо привычного иерархического дерева, мы видим данные по студенту. Пусть вас не пугает внешний вид документа – это только первый пример визуализации XML-документов.

6. В примере pr_2_1.xml команда обработки выделена желтым, она сообщает анализатору XML, что в данном документе присутствует каскадная таблица стилей, которая выделена тем же цветом.

 

Практикум 2. Визуализация первого XML-документа, используя внешнюю таблицу стилей

Используя тот же пример student.xml, визуализируем его с помощью внешней таблицы стилей.

4. Наберите следующий код в блокноте и сохраните в файле с именем pr_2_2.xml

<?xml version = '1.0' encoding = 'windows-1251'?>

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

<student> <lastName>Шилин</lastName> <firstName>Алексей</firstName> <middleName>Валерьевич</middleName> <faculty>УП-1</faculty> <grNum>1</grNum> <dateStarted>1-09-2000</dateStarted> <photo>images/jjanus.jpg</photo> </student>

 

5. Наберите следующий код в блокноте и сохраните в файле с именем myslylesheet.css.

style {display:none} student {display:block; color:gray} lastName {font-weight:bold;font-style:italic} photo {display:none}

 

6. Теперь откройте файл pr_2_2.xml в IE. Если вы набрали все теги в точности, файл будет выглядеть также как и пример pr_2_1.xml

 

Практикум 3. Приоритеты между внешними и внутренними таблицами стилей

А что если в XML-документе используются несколько таблиц стилей, как же анализатор определит какие стили использовать – приоритеты. Попробуем объединить две предыдущие таблицы стилей в одном XML-документе, применив во внешней таблице красный цвет к тексту.

<?xml version = '1.0' encoding = 'windows-1251'?>

<?xml-stylesheet type="text/css" href="#mystylesheet"?> <?xml-stylesheet type="text/css" href="mystylesheet01.css"?>

<student>

<student> <style id="mystylesheet"> style {display:none} style {display:none} student {display:block; color:gray} lastName {font-weight:bold;font-style:italic} photo {display:none} </style>

<lastName>Шилин</lastName> <firstName>Алексей</firstName> <middleName>Валерьевич</middleName> <faculty>УП-1</faculty> <grNum>1</grNum> <dateStarted>1-09-2000</dateStarted> <photo>images/jjanus.jpg</photo> </student>

 

 

Практикум 3. Атрибуты

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

2. Построим иерархическое дерево нового XML-документа будет выглядеть так:

4. Теперь откройте этот файл в IE. Если вы набрали все теги в точности, файл students.xml будет выглядеть так:

Изменив элемент <student> на <student id> мы тем самым уточнили информацию о студенте, теперь каждый студент имеет свой идентификационный номер (id_student).   2. Наберите следующую информацию в Notepad и сохраните ее на жестком диске под именем students.xml

<?xml version = '1.0' encoding = 'windows-1251'?> <students> <student id="101"> <lastName>Шилин</lastName> <firstName>Алексей</firstName> <middleName>Валерьевич</middleName> <faculty>УП-1</faculty> <grNub>1</grNub> <dateStarted>1-09-2000</dateStarted> <photo>images/101.jpg</photo> </student> <student id="102"> <lastName>Петров</lastName> <firstName>Олег</firstName> <middleName>Михайлович</middleName> <faculty>УП-1</faculty> <grNub>2</grNub> <dateStarted>1-09-2000</dateStarted> <photo>images/102.jpg</photo> </student> <!-- more students, as required --> </students>

 

 

 

 

Как это работает

В данном случае во всей программе есть только один блок ASP. Он заключен в теги <% %> в строке

В этой строке содержится команда запустить функцию Time (языка VBScript) на web-сервере, возвращающую серверу текущее время. Если сервер и программа просмотра расположены на разных машинах, время на машинах может не совпадать.

Time не является уникальной функцией ASP, это функция VBScript, запускаемая на сервере.

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

 

 

Как это работает

Во-первых, в обоих примерах использовалось расширение.asp, поэтому интерпретатор сценариев обрабатывает код на стороне сервера.

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

 

Строка Response.Write Date означает, что время будет вычислено и записано в HTML-поток. Но почему же дата появится в конце страницы, а не после Today’s date is?

Причина в следующем. Когда web-сервер встречает тег <SCRIPT RUNAT=SERVER>, он обрабатывает сценарий, но результат добавляется в конец HTML-потока. Другими словами, положение тега <SCRIPT> относительно других элементов страницы не учитывается.

Если эту же команду записать внутри ASP-тегов, все встанет на свои места:

Важно следующее: не все теги имеют одинаковый приоритет – одни обрабатываются раньше других в зависимости от того, как они были определены в исходном тексте.

 

 

Как это работает

Этот файл сохранен с расширением.htm. Если бы мы сохранили его как.asp, одновременно с запросом страницы вызывался бы интерпретатор сценариев ASP. Однако на этой страницы нет ASP-кода, поэтому нам это не нужно.

В предыдущих версиях IIS сервер автоматически посылал страницу на обработку при наличии расширения.asp, что требовало дополнительного времени. IIS 5.0 более интеллектуален, поэтому он сначала проверяет наличие ASP-кода, а только потом, если код есть, отсылает страницу script host. Для этого тоже нужно время, но в этом случае все просто: если ASP-кода нет, файл сохраняется с расширением.htm или.html.

Все, что содержится на странице – текст, HTML и сценарий на стороне клиента – интерпретируется браузером. Когда этот браузер встречает тег <SCRIPT>, он знает, что нужно послать код соответствующему интерпретатору сценариев. Для ясности мы задали атрибут LANGUAGE:

 

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

 

Интерпретатор сценариев VBScript выполняет встроенную функцию Date, которая возвращает значение, содержащее текущую дату. Кроме того, объект Document получает указание использовать метод Write для отображения даты как части страницы.

В данном случае объект Document является точным представлением HTML-документа или web-страницы, которую в настоящий момент вы видите в окне браузера. Однако объект Document не имеет отношения к ASP, он создается браузером и хранится на стороне клиента. Его можно использовать в динамическом HTML для получения информации о документе, анализа и модификации элементов HTML и текста документа, а также для обработки результатов.

Что произойдет, если мы попытаемся выполнить такой сценарий с помощью браузера, который не поддерживает VBScript? Для примера возьмем Netscape Communicator 4.6

 

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

 

Порядок выполнения

Узнав, что такое сценарии на стороне сервера и на стороне клиента и познакомившись с script host и script engine, мы можем перейти к изучению порядка выполнения.

Практикум 5.1. Кнопки

Кнопка представления Submit. Щелчком по этой кнопке данные формы представляются серверу. Пример тега кнопки представления:

В данном примере кнопка Submit имеет два атрибута. Первый атрибут, TYPE, сообщает браузеру какую клавишу необходимо создать. Второй, VALUE, задает надпись на этой клавише. Чтобы кнопка начала действовать необходимо добавить элемент <FORM>, и вложить в него элемент представления кнопки. Элемент <FORM> содержит два атрибута. Первый ACTION, указывает имя файла, который необходимо открыть следующим. Второй атрибут METHOD, определяет два способа (POST или GET) в данном случае сообщает о передачи данных от браузера серверу. Следующий пример демонстрирует кнопку Submit в действии:

 

Введите этот код в блокноте и сохраните файл под именем pr_5_1.asp, результат обработки этого файла показан на рис 5.1.

 

Кнопка сброса Reset. Сброс данных формы в исходное состояние. Синтаксис кнопка сброса показан ниже:

Данная кнопка работает аналогично кнопке Submit, объединим два примера кнопок в один пример, получим:

 

Сохраните код в файле pr_5_2.asp.

Результат показан на рис. 5.2.

Рис. 5.2. Кнопки в работе

 

Практикум 5.3. Списки

Элемент список используется для предоставления пользователю списка вариантов.

Пример списка показан ниже:

Обратите внимание тег <SELECT> имеет закрывающий тег, как впрочем и тег <OPTION>. Атрибут NAME тега списка содержит имя окна. Это имя используется так же, как и окно для ввода текста. При представлении формы браузер возвращает значение атрибута VALUE выделенного элемента списка. У элемента списка имеются несколько дополнительных атрибутов:

SIZE – задает количество строк которые будут отображаться одновременно, этот атрибут указывается внутри тега SELECT следующим образом (<SELECT NAME="MonthPref" size="3">, в данном случае одновременно в области списка будут видны сразу три поля);

WIDTH – задает длину поля (<SELECT NAME="MonthPref" style="width:100">).

Добавим следующий код в новый asp файл и сохраним по именем pr_5_5.asp:

Вид окна браузера примера pr_5_5.asp продемонстрирован ниже:

 

 

Рис. 5.5. Вид окна браузера со списком

 

Практикум 6.2. Пример обработки некоторого текста

Создадим страницу, содержащую многострочное текстовое поле и две кнопки, пример страницы pr_6_2.asp:

Окно браузера имеет вид:

Рис. 6.3. Вид примера pr_6_2.asp в окне браузера

 

Создадим страницу result_6_2.asp, результатом работы которой будет, преобразование всех малых букв введенного текста в прописные (заглавные) буквы:

Преобразование букв происходит при помощи функции Ucase.

 

 

Окно примера result_6_2.asp в окне браузера:

 

Рис. 6.4. Окно браузера с многострочным текстовым полем

Практикум 2.1. Визуализация первого XML-документа, используя внутреннюю таблицу стилей

Из главы 2 вы узнали, что XML имеет дело со структурой данных, а не с их представлением, но именно визуальное представление данных – это то, ради чего создается большая часть современного программного обеспечения и каскадные таблицы стилей (Cascading style sheets, CSS) могут быть использованы для определения большинства характеристик вывода. Итак, визуализируем XML-документ student.xml из практикума 1 используя внутреннюю таблицу стилей. Применим серый цвет ко всему тексту, а фамилию сделаем жирным и курсивом. Фотографию пока выводить не будем.

4. Наберите следующий код в блокноте и сохраните в файле с именем pr_2_1.xml

<?xml version = '1.0' encoding = 'windows-1251'?>

<?xml-stylesheet type="text/css" href="#mystylesheet"?>

<student>

<student> <style id="mystylesheet"> style {display:none} style {display:none} student {display:block; color:gray} lastName {font-weight:bold;font-style:italic} photo {display:none} </style>

<lastName>Шилин</lastName> <firstName>Алексей</firstName> <middleName>Валерьевич</middleName> <faculty>УП-1</faculty> <grNum>1</grNum> <dateStarted>1-09-2000</dateStarted> <photo>images/jjanus.jpg</photo> </student>

 

5. Теперь откройте этот файл в IE. Если вы набрали все теги в точности, файл pr_2_1.xml будет выглядеть примерно так:

Теперь вместо привычного иерархического дерева, мы видим данные по студенту. Пусть вас не пугает внешний вид документа – это только первый пример визуализации XML-документов.

6. В примере pr_2_1.xml команда обработки выделена желтым, она сообщает анализатору XML, что в данном документе присутствует каскадная таблица стилей, которая выделена тем же цветом.