Глава 13 Создание приложений Ajax, не использующих сервер 541
имя и щелкаем на кнопке Add Feed ("Добавить ленту"). Большинство необходимых функциональных возможностей было реализовано в разделе 13.3; все, что от нас требуется сейчас (листинг 13.14), — запустить объект ContentLoader, который и добавит ленту, выбранную в элементе select.
Листинг 13.14. Функция JavaScript, загружающая дополнительные ленты RSS function LoadNews(){
var sel = document.Forml.ddlRSS; if(sel,options[sel.selectedlndex].className!="added"){
var url = sel.options[sel.selectedlndex].value;
|
sel.options[sel.selectedlndex].className="added"; |
|
var loaderl = new net.ContentLoader(url, |
|
BuildXMLResults); |
|
} |
_ ! |
- |
В приведенном листинге показана функция LoadNews (), которая запускается щелчком на кнопке btnAdd. Поскольку указатели URL дополнительных лент RSS мы получаем из элемента select, нам необходимо обращаться к значениям элемента ddlRSS.
Если мы собираемся добавлять RSS-ленты из элемента select, необходимо учесть возможность того, что эта лента уже добавлена. Одним из возможных решений здесь является добавление к опции класса CSS. Таким образом, в приложение необходимо включить проверку, гарантирующую, что лента RSS не была добавлена ранее. Если лента действительно является новой, мы берем значение выбранной опции и изменяем значение className на added.
При выполнении объекта ContentLoader мы передаем ему в качестве аргументов URL ленты и функцию BuildXMLResults (). Если в процессе произойдет какой-либо сбой, мы можем использовать принятое по умолчанию сообщение об ошибке объекта ContentLoader. Таким образом, сейчас мы можем загружать документ из списка, но, кроме того, нам требуется предусмотреть введение в этот список новых RSS-лент и связать с кнопкой обработчик
событий, приведенный в листинге 13.15. |
|
<select name="ddlRSS"> |
|
<option |
|
value="http://radio.javaranch.com/frank/rss.xml"> |
|
Frank</option> |
|
<option |
|
value="http://radio.javaranch.com/gthought/rss.xml"> |
|
Gregg</option> |
|
</select> |
|
<mput type="button" name="btnAdd" |
|
value="Add Feed" onclick="LoadNews()" /> |
« |
Глава 13. Создание приложений Ajax, не использующих сервер S43
него дойдет очередь. Функция паузы позволяет приостановить работу приложения, чтобы мы могли не торопясь прочесть заинтересовавшее нас сообщение. Поскольку для представления таймеров, паузы и счетчика currentMessage используются глобальные переменные, мы очень просто можем влиять на текущее состояние приложения. В листинге 13 16 показан код, позволяющий пользователю быстро проходить по лентам.
Листинг 13.16. Функция JavaScript, отвечающая за остановку и пропуск лент
/ / О Создать функцию MoveFeed() function MoveFeed {xOption){
//@ Определить, требуется ли приостановка или возобновление работы if(xOption == 0){
//© Приостановить работу
if(IbPaused){ bPaused • true; if(timerSwitch)
clearTimeout(timerSwitch) ; document.getElementById{"btnPause").value = "RESUME";
}
// // О Возобновить работу else(
bPaused = false; setTimeout("ChangeView()",300);
document.getElementById("btnPause").value • "PAUSE";
}
}
// 0 Изменить текущее сообщение else{
if(timerSwitch)
clearTimeout(timerSwitch); if(xOption "™ -1)currentMessage += -2; if(currentMessage < 0)
currentMessage = arrayMessage.length + currentMessage;
ChangeView();
}
_ > |
• |
|
|
|
|
Создав функцию MoveFeed () О и позволив ей принимать в качестве аргумента единственный параметр, мы сможем обрабатывать три ситуации: паузу, перемотку вперед и перемотку назад. Чтобы различать действия мы можем использовать целочисленное значение. Чтобы приостановить работу приложения, мы будем передавать функции MoveFeed () значение 0, чтобы перейти на следующее сообщение — значение 1, а чтобы перейти не предыдущее сообщение — значение —1.
В приведенном коде мы вначале проверяем условие паузы — равенство нулю аргумента функции © Кнопка паузы отвечает за два действия — приостановку работы приложения (прекращение выполнения переходов) и возобновление работы (продолжение слайд-шоу с переходами между сообщениями).
Если в текущий момент лента не приостановлена ©, тогда значение переменной bPaused необходимо установить равным true и проверить, запущен ли
544 Часть IV Ajax в примерах
таймер timerSwitch. Если да, то мы должны его сбросить, используя метод clearTimeout. Далее текст кнопки изменяется на "RESUME". Если на кнопке щелкают для того, чтобы возобновить работу, мы должны выполнить противоположные действия О. Значение переменной bPaused устанавливается равным false; мы вызываем функцию ChangeView() с небольшой задержкой во времени и изменяем текст кнопки на "PAUSE".
Все Работу с паузой мы завершили.
Теперь необходимо создать функции пропуска сообщений и возврата к предыдущим сообщениям ©. Поскольку при этом мы будем изменять отображаемые статьи, необходимо убрать таймер, чтобы избежать проблем с пропуском нескольких сообщений. После этого требуется проверить, не равен ли параметр действия — 1 . Если мц возвращаемся к предыдущим сообщениям, из значения переменной currentMessage необходимо вычесть 2. Это происходит из-за того, что переменная currentMessage в действительности содержит номер следующего сообщения, поскольку ее значение уже было увеличено на 1 Вычитая 1 из значения переменной, мы получаем то же самое сообщение. Следовательно, поскольку в переменной currentMessage уже хранится номер следующего сообщения, при реализации кнопки перемотки вперед нам ничего не нужно делать.
Затем нам необходимо убедиться, что значение переменной не меньше нуля. Если оно меньше нуля, значение переменной нужно установить согласно последнему сообщению в массиве. Изменив значение currentMessage, мы можем вызвать функцию ChangeView{) для загрузки сообщения. Все, что от нас требуется, — добавить обработчики событий к кнопкам (листинг 13.17), чтобы мы могли выполнить функцию MoveFeed ().
Листинг 13.17. Обработчики событий onclick для действий с кнопками
v a l u e = " |
<ВАСК |
" |
onclick="MoveFeed{ - 1)"> |
|
v a l u e = " |
PAUSE |
" |
onclick="MoveFeed(0)"> |
|
value="NEXT>" |
onclick="MoveFeed(1)"> |
— |
||
Для инициализации функции мы добавляем к кнопкам обработчики событий onclick. Эти обработчики вызывают функцию MoveFeed(), которая принимает в качестве аргументов такие значения: -1 — вернуться к предыдущему сообщению; 0 — приостановить работу, 1 — перейти на следующее сообщение. Чтобы проверить работу функций, мы сохраняем документ и открываем данную страницу в браузере.
Теперь, когда мы можем пропускать сообщения, можно легко перейти к сообщениям в середине списка RSS-ленты. На рис. 13.11 показано, как выглядит приложение при нажатой паузе: на кнопке btnAdd отображается надпись RESUME ("Возобновить"). Таким образом, используя описанные в разделе дополнительные функции, мы получаем приложение, позволяющее читать RSS-ленты на рабочем столе, не посещая Web-сайты, поставляющие эти ленты.