520 Часть IV. Ajax в примерах

Необходимые и дополнительные элементы канала описывают содержимое RSS-ленты, позволяя нам определять ее характеристики. Подобно составляющим канала, составляющие статей также делятся на необходимые и необязательные.

Элементы статей

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

Кроме того, существует восемь дополнительных элементов, которые могут добавляться к статье. Возвращаясь к аналогии с печатной прессой, можно сказать, что в газетной статье обычно можно выделить такие элементы; материал, фамилия автора, источник и заголовок. Точно так же каждый элемент статьи в ленте RSS может содержать свои заголовки, имена авторов, источники и т.д. Все дополнительные элементы, которые может содержать статья, показаны в табл. 13.3.

Сердцем и душой ленты RSS являются заголовок и описание. Заголовок ( t i t i l e ) позволяет понять, о чем идет речь в статье, а описание (description) может представлять собой одно из двух: краткий конспект статьи или всю статью. В настоящее время не существует стандарта, определяющего, как должен использоваться элемент description. Чтобы определить, что же с ним делать, необходимо изучить каждую ленту, а лишь затем приступать к написанию RSS-клиента. Если это конспект — его можно сравнить с аннотацией на обложке журнала, в которой сказано: "подробности см. на с. 10". Вот именно здесь нам потребуется элемент link, представляющий собой URL всей статьи на сайте автора.

Большинство RSS-лент пытается использовать максимальное число дополнительных элементов, поскольку это помогает разработчикам (например, нам) создавать максимально надежные RSS-приложения. Чем больше данных предоставлено, тем лучше можно отобразить содержимое RSS-ленты. Подробнее о спецификации RSS рассказывается на сайте http://backend.userland.com/rss.

Разобравшись с основными элементами документа RSS, можно приступать к разработке собственного RSS-клиента на основе Ajax.

13.2. Богатый пользовательский интерфейс

В данной главе мы создадим программу просмотра RSS-лент, получающую ленты XML с Web-сайта без использования серверных технологий, подобных •NET или JSP, или клиентского приложения. Ajax позволяет просматривать информацию в виде Web-страницы, записанной на рабочем столе. Данный пример показывает, что инфраструктура Ajax не обязательно требует Webсервера, использующего технологию, подобную .NET или JSP. Если компью-

тер подключен к Интернету, мы можем обращаться к RSS-лентам любых выбранных сайтов. (Если вы пользуетесь браузером Mozilla, см. раздел 13.6.1. Прежде чем вы сможете использовать код, представленный в данном проекте, вам потребуется обойти ограничения безопасности Mozilla, рассмотренные в главе 7.)

13.2.1. Чтение лент

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

Рис. 13.2. Последовательность действий программы чтения RSS-пент

Уникальность нашего приложения заключается в том, что оно не использует никакого серверного кода; мы только получаем XML-документы RSS, создаваемые другими Web-сайтами. Все приложение размещается на Webстранице, записанной в среде рабочего стола или загружаемой как часть нашего Web-сайта.

Прежде всего необходимо понять, на какие этапы разбивается разработка требуемого приложения. Мы разрабатываем программу чтения RSS-лент, которая настраивает слайд-шоу, использующее два слоя. Каждый слой будет содержать одну ленту, которая будет показываться заданный период времени, после чего будет проявляться вторая лента. Алгоритм действий данного приложения показан на рис. 13.2.

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

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

Мы также создадим в приложении кнопки "Вперед", "Назад" и "Пауза". Кроме того, можно добавить возможность вставки дополнительных потоков из предлагаемого списка. А начнем мы с создания на стороне клиента формы и слоев.

13.2.2. HTML-структура без таблиц

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

Рис. 13.3. Окончательный вид программы чтения RSS-лент

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

Листинг 13.1. Структура HTML-формы, используемой приложением

<form name="Forml">

<! — О Внешний элемент div —> <div id="divNewsHolder">

<! — © Элемент div заголовка —>

<div id="divNewsTitle"> < ! — © Счетчик лент —>

<span id="spanCount">Loading</span> < ! — О Название —>

 Ajax News Viewer </div>

<! — © Контейнер для лент новостей —> <div id="divAd">

<! — 0 Слой первой ленты новостей —> <div id="divNewsl">

Loading Content...

</div>

< ! — О Нижний колонтитул структуры —> <div id="divNews2">

Loading Content...

</div>

</div> < i — 0 — >

<div id="divControls">

<! — © Кнопки действия —>

<i n p u t t y p e = " b u t t o n " name="btnPrev"

524 Часть IV. А/ах в примерах

Рис. 13.4. Элементы HTML без стилей CSS

i d = " b t n P r e v " value="<BACK" />

<i n p u t t y p e = " b u t t o n " name="btnPause"

id = " b t n P a u s e " value="PAUSE" />

<i n p u t t y p e = " b u t t o n " name=i "btnNext"

id = " b t n N e x t " value="NEXT>" /> <hr/>

< ! — © Дополнительный элемент лент —>

<s e l e c t name="ddlRSS">

</ s e l e c t >

<i n p u t t y p e = " b u t t o n " name="btnAdd"

value="Add Feed" /> </div>

</div>

</form>

Первым элементом div является divNewsHolder О — контейнер, используемый для задания общего размера окна, в котором будет отображаться результат выполнения приложения. Следующий элемент div — divNewsTi- t l e © — вмещает заголовок нашей структуры. Внутри этого элемента div мы добавляем элемент span ©, содержащий заполнитель-счетчик лент. Следующая строка текста О — это название нашего приложения. В данной строке мы можем написать все, что угодно.

Далее идет элемент divAd ©. Это строка представляет собой заполнитель, содержащий информацию о RSS-ленте, которую мы извлечем позже. В элемент divAd мы помещаем еще два элемента div, divNewsl © и divNews2 ©, которые используются для хранения информации RSS-ленты. Позже мы изменим свойства CSS данных элементов с помощью JavaScript, чтобы создать эффект затухания.

Строка нижнего колонтитула создается с помощью элемента div divCon- t r o l s ©. Она содержит средства навигации и функции управления лентой. В данный элемент div добавляются кнопки "Вперед", "Назад" и "Пауза" ©. Чтобы пользователь мог выбирать дополнительные XML-ленты, добавляются элемент формы выбора и еще одна кнопка ©. Таким образом, мы получаем каркас приложения, показанный на рис. 13.4.

Рис. 13.4 выглядит не очень привлекательно, поскольку мы еще не отформатировали элементы HTML, но с введением правил CSS это изменится. Изучая рис. 13.3, видим, что наши элементы div (divNewsl и divNews2) должны накладываться друг на друга, чтобы мы смогли правильно реализовать эффект затухания.