Ключом к успеху любого веб-приложения является про и удобный интерфейс пользователя. Поскольку приложение служит цели демонстрации возможностей технологии Ajax, его зовательский интерфейс чрезвычайно прост. Для него харак режима работы:
• Режим просмотра содержимого папок с сообщениями (1пЬш Trash).
• Режим чтения сообщения.
• Режим составления нового сообщения, в котором отоб форма, помогающая составить и отправить электронное пи
Интерфейсы всех трех режимов очень простые и все они загр~ в составе основной страницы приложения - index, php.
Содержимое файла index, php:
ODOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
С
Ajax Mail

•
:;;|fc^
Наряду с тремя файлами JavaScript (библиотека zXml - файл zxml. js, библиотека JSON - файл j son. j s и основным программным кодом при¬ложения на стороне клиента - файл AjaxMail. js), вместе с основной страницей приложения загружается таблица стилей в файле AjaxMail. ess. Внутри тела страницы находится маркированный список, содер¬жащий три ссылки: Compose Mail (Написать письмо), Inbox (Входящие) и Trash (Корзина). Рядом со ссылкой Trash находится еще одна ссылка -Empty (Очистить), предназначенная для удаления всех сообщений, со¬держащихся в корзине. Поскольку по нажатию на любую из этих ссы¬лок производится обращение к функции JavaScript, отпадает необхо¬димость оформлять их в виде тегов <а />. Вместо этого каждая ссылка оформлена как элемент с классом CSS link, который придает тексту внешний вид обычной гиперссылки. Ссылка Compose Mail вы¬водится жирным шрифтом. Полный исходный текст файла CSS (A j ax-Kail . ess) приводится ниже:
Spany$nk";
text-decoration: underline; ; color: blue;
cursor: pointer; cursor: hand;

#ulMainMenu {
position: absolute; left: Opx;
с иден ром divNotice. Этот элемент служит для отображения извеще тичных для приложения AjaxMail. Во время работы веб-пр его главная страница не перезагружается целиком и не вып переход на какую-либо другую страницу, поэтому она не соде ких-либо признаков успешного выполнении той или иной о Данная область как раз и используется для этих целей.
В приложении AjaxMail предусмотрены различные типы из уведомления общего характера и сообщения об ошибках. Пер включает в себя извещения об успешной отправке почты или о нении операции удаления письма. Второй тип - это сообщения езных ошибках, возникших во время исполнения некоторой о Уведомления общего характера имеют вид желтого прямо" с текстом и стилизованным изображением символа «i» слева, ния об ошибках оформлены как красный прямоугольник с и стилизованным изображением восклицательного знака (рис.
(Rjj Это уведомление общего характера.
J|i Это сообщение об ошибке.
В элемент divNotice записывается текст уведомления, и изменяется принадлежность к классу CSS (info или error). Стили отображения этой области определены так:
OdivNotice {
-moz-box-sizing: border-box; box-sizing: border-box; padding: 4px;
background-repeat: no-repeat; background-position: 4px 4px; padding-left: 24px; font-size: 60%;
font-family: Arial,Helvetica,Sans-Serif; .; visibility: hidden; height: 16px; position: absolute; top: 5px; left: 150px; width: 600px;
div.info {
background-color: #F7FFCD;
background-image: url(../images/icon_info.gif);
border: 1px solid ИА5А54А;

div.error {
background-color: #FFE6E6;
background-image: url(../images/icon_alert.gif);
border: 1px solid red;

С помощью свойства background-image к сообщению привязывается со¬ответствующий ярлык, благодаря чему имеется возможность полно¬стью изменять стиль отображения уведомлений простым переключе¬нием класса CSS и не беспокоиться об изменении содержимого тега . Свойство background-position задает положение ярлыка, а свой¬ство background-repeat, определенное как no-repeat, гарантирует, что будет выведен всего один ярлык.
За элементом области вывода уведомлений следуют области вы¬вода для каждого из трех режимов отображения приложения Ajax¬Mail. Первый элемент , имеющий идентификатор divFolder, вы¬водится по умолчанию и служит для отображения списка сообщений в папке. Другие два элемента, divReadMail и divComposeMail, с помощью свойства display объявлены как невидимые, поэтому после загрузки страницы они изначально будут скрыты. Наполнение каждого из эле¬ментов будет обсуждаться ниже.
Последняя часть страницы - элемент с идентификатором iLoader. Этот скрытый фрейм поможет организовать переключение между тремя режимами отображения. Запрос при этом будет в; случае проходить через скрытый фрейм, что открывает ПОЛЕ доступ к кнопкам броузера Forward (Вперед) и Back (Назад) броу