Глава 13. Создание приложений Ajax, не использующих сервер 567

ЛИСТИНГ 13.42. Метод updateViewf)

updateView: function() {

var rssItemView • new RSSItemView( this.currentFeed.items[this.itemlndex], this.feedlndex,

this.itemlndex, this.options.rssFeeds.length )j

this.getLayer(this.visibleLayer).innerHTML = rssItemView; this.fadeln( this.visibleLayer, this.bringVisibleLayerToTop.bind(this) );

Как видите, метод updateview() делегирует всю тяжелую работу классу представления, вызывая экземпляр этого класса и используя его как значение свойства innerHTML видимого слоя (в конечном счете это приводит к постепенному проявлению данного слоя). Три строчки кода. Совсем немного. Обратите внимание на то, что как только слой попадает в поле зрения, мы вызываем метод завершения работы bringVisibleLayerToTop. Этот метод обновляет стилевое свойство слоя z Index, вследствие чего данный слой становится выше другого, постепенно его затеняя. Реализация функции bringVisibleLayerToTop () выглядит следующим образом:

bringVisibleLayerToTop: function() {

this.getLayer(this.visibleLayer).style.zlndex = 10; this.getLayer((this.visibleLayer+1)%2).style.zlndex = 5;

}

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

13.7.4. Выводы

Реструктуризация заключается в таком изменении кода, чтобы мы получили MVC-представление нашего приложения для чтения RSS-лент. Мы создали класс модели RSSFeed, инкапсулирующий концепцию RSS-ленты, кроме того, создали класс RSSItem. Для инкапсуляции концепции представления элемента RSSItem в контексте родительского элемента RSSFeed был создан класс представления RSSItemView. Наконец, мы связали классы модели и представления с помощью класса контроллера RSSReader, объединяющего управление событиями и реализацию слайд-шоу с эффектами перехода.

В данной главе инфраструктура Ajax позволила получать информацию непосредственно с рабочего стола, не требуя коммерческого клиентского приложения, экономя наши деньги и позволяя настраивать решение согласно насущным потребностям. Нам удалось загрузить несколько XML-файлов и получить при этом только ту информацию, которая нас интересует. Мы разра-

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

ютали HTML-каркас приложения и применили правила CSS, что позволило сегко настраивать внешний вид программы. Используя DHTML, мы смогли >азработать богатый пользовательский интерфейс, позволяющий пользоватеим пропускать сообщения, приостанавливать их поток, а также добавлять ю мере необходимости новые ленты. Все это стало возможным благодаря инфраструктуре Ajax, разрешившей получать RSS-ленты с Web-сайтов. Измешв несколько операторов, мы можем легко настроить приложения на чтение побой XML-ленты. Кроме того, можно разрабатывать собственные форматы •CML для отображения новостей, рекламы и всего остального, что обычно разлетается на Web-сайтах. Наконец, мы провели реструктуризацию сценария ;огласно архитектуре "модель-представление-контроллер" (MVC), повысив штаемость и удобство эксплуатации кода.

Часть V

Приложения

572 Часть V. Приложения

Работать с технологией Ajax очень просто. Для выполнения всей работы вам потребуется лишь небольшой набор инструментов. Вообще, сложные приложения Ajax можно создавать, используя только Web-браузер, текстовый редактор и имея доступ к Web-серверу (который располагается либо на вашем компьютере, либо на каком-то Web-сайте, к которому вы имеет доступ). Тем не менее хороший набор инструментов очень важен для программиста, поэтому в настоящее время существует несколько таких довольно сложных наборов.

В настоящее время специализированных интегрированных сред разработки (Integrated Development Environment — IDE) Ajax не существует, хотя со временем они, скорее всего, появятся. Однако есть несколько инструментов разработки, предлагающих поддержку некоторых составляющих процесса разработки Ajax-продукта. В данном приложении представлен обзор доступных типов инструментов и рассказывается, как с их помощью разумнее и быстрее организовать свою работу.

АЛ. Правильный набор инструментов

Правильно подобранные инструменты разработки могут оказаться бесценными с точки зрения ускорения повторяющихся или сложных процессов и оказать огромнейшее влияние на производительность разработчика. "Неправильные" инструменты могут отвлекать внимание от необходимой работы, ограничивать возможности и вынуждать разработчика использовать только определенные процессы или совмещать в действительности несовместимые вещи. Различные разработчики предпочитают разные инструменты, которые, к тому же могут быть более или менее удачными для различных типов проектов. Иногда разработчику стоит потратить немного своего времени и выбрать набор инструментов, лучше всего подходящий для поставленной задачи. Пожалуй, лучше всего данную мысль сформулировал Авраам Линкольн:

"Если мне дадут шесть часов на то, чтобы срубить дерево, первые четыре из них я потрачу на затачивание топора".

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

А.1.1. Получение совместимых инструментов

В настоящее время доступно множество инструментов в виде бесплатных пакетов, проектов с открытым исходным кодом и коммерческих продуктов. Мощных специализированных инструментов, предназначенных исключительно для Ajax, пока что не существует, однако имеются средства разработки Web-приложений, многие из которых поддерживают JavaScript, HTML и CSS.

и классическое Web-приложение, правда, несколько непривычным способом. Приложение Ajax построено не как набор небольших последовательных страниц, а как несколько страниц (чаще всего одна), выполняющих в ответ на действия пользователя разнообразные программные переходы и в фоновом режиме асинхронно общающихся с сервером. Кроме того, поскольку в ходе описанного процессе генерируется довольно много JavaScript-кода, программист Ajax, скорее всего, будет опираться на структуры JavaScript (наиболее популярные из них описаны в главе 3).

Вследствие подобных отличий классического Web-приложения и приложения Ajax возникают два момента. Во-первых, инструмент может предполагать наличие основанных на страницах процессов, применение которых в Ajax-приложении нецелесообразно. Во-вторых, поддержка JavaScript может опираться на использование определенного набора функций или схем кодирования, несовместимых с выбранными пользователем структурами сторонних производителей.

Таким образом, отличия преимущественно связаны с высокоуровневой структурой приложения, а не с его деталями. Кроме того, два обозначенных момента скорее всего относятся к сложным инструментам (например, IDE), а не к более простым средствам, подобным текстовому редактору с поддержкой JavaScript.

В общем, выбирая инструменты для своего проекта Ajax, помните о том, что мы сказали. К этому вопросу мы еще вернемся, когда будем рассматривать различные инструменты, представленные на рынке.

Наконец, стоит отметить, что многие существующие инструменты характеризуются возможностью расширения с помощью различных включаемых модулей (plug-in). Сложные инструменты, например универсальные IDE и Web-браузеры, по-разному используются различными категориями пользователей. Расширения позволяют модифицировать стандартное приложение, оснащая его функциями, требуемыми конкретным пользователям, при этом стандартный набор возможностей не затрагивается, приложение просто становится более мощным, включая функциональные возможности, не реализованные первоначальной командой разработчиков. Существуют два достойных упоминания класса расширений — Eclipse IDE, который, хотя и является преимущественно инструментом Java-разработчика, поддерживает благодаря расширениям богатый диапазон функциональных возможностей Ajax, и браузер Firefox, сообщество пользователей которого разрабатывает модули (или расширения), в частности, предназначенные для Web-разработчиков.

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

574 Часть V. Приложения

А.1.2. Создание собственных инструментов

В качестве альтернативы покупному или загружаемому готовому инструменту вы всегда можете создать свой. После сказанного выше об IDE и о полномасштабных инструментах это может звучать устрашающе и нереалистично. Разумеется, мы не считаем, что проект Ajax следует начинать с написания собственной IDE!

В культуре Unix имеется давняя традиция разработки небольших инструментов, выполняющих одну небольшую работу. Инструменты подобного типа легко создать, потратив совсем немного времени, и сопровождение данных средств также не представляет особых проблем. В качестве примеров таких инструментов можно привести классы секундомера, которые мы разработали для профилирования JavaScript-кода в главе 7, а также консоль вывода информации, которую мы продемонстрируем в разделе А.3.4.

Инструменты, написанные на JavaScript, и другие технологии Ajax хороши тем, что их можно переносить на любой браузер. Однако возможности, доступные в браузере, существенно ограничены "благодаря" модели безопасности JavaScript (см. главу 6). Иногда имеет смысл создать инструмент в виде самодостаточной программы, используя .NET, Java или любой другой язык программирования. Если вы решили поступить именно так, вам помогут отладчики HTTP, описанные в разделе А.3.3.

Промежуточным подходом между созданием инструментов в браузере и написанием самодостаточной программы является разработка модуля. Многие современные большие средства Web-разработки поддерживают создание модулей, причем некоторые позволяют делать это довольно легко. Как отмечалось в предыдущем разделе, здесь выделяются IDE Eclipse и Webбраузер Firefox. Eclipse даже предлагает набор модулей, связанных со стандартным загружаемым приложением, которые облегчают написание новых модулей. Тем не менее разрабатывать модули сложнее, чем инструменты, встроенные в браузер, и, пожалуй, это оправдано только тогда, когда речь идет о фрагменте большого проекта.

При создании Ajax-приложения полезными могут оказаться множество инструментов. В настоящее время они разрознены; и процесс их активного сопровождения требует постоянного внимания. Остановимся на этом моменте подробнее, а затем рассмотрим несколько заслуживающих внимания инструментов

А.1.3. Сопровождение набора инструментов

Как уже отмечалось выше, инструменты Ajax обрывочны, что несколько непривычно для программистов Java и NET, привыкших опираться на удобный набор Eclipse, NetBeans или Visual Studio.

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

Наиболее важным инструментом любого разработчика является редактор, в котором он набирает свой код. Рассмотрим, что собой представляет несколько популярных редакторов.

А.2. Редакторы и IDE

Сложность инструментов, используемых для редактирования кода, варьируется в очень широких пределах — от простой программы Notepad (Блокнот) для сложных интегрированных сред разработки, различным образом моделирующих объекты кода. JavaScript, HTML и CSS поддерживаются не так хорошо, как промышленные языки, подобные С#, Visual Basic и Java, однако диапазон предлагаемых функциональных возможностей достаточно широк, чтобы было из чего выбирать. Давайте посмотрим, какие типы функций могут нам потребоваться, а затем изучим доступные на сегодняшний день продукты.

А.2.1. Что требуется от редактора кода

Редакторы кода могут многое, возможно, даже слишком многое. Значительная часть этих возможностей предназначена для удовлетворения индивидуальных запросов пользователей. Из-за этого одни разработчики предпочитают простой инструмент обработки текста; другие любят визуальные подсказки и ключи полномасштабной интегрированной среды разработки. Относительно поддержки кода Ajax (т.е. кода HTML, CSS и JavaScript) можно отметить, что помощь редактора может выражаться несколькими способами. Многие из них могут показаться имитацией содержимого классического Webприложения, однако поскольку код классического приложения Ajax обычно больше и имеет более четкую структуру, поддержка редактором структурирования приобретает первостепенное значение. Итак, перечислим полезные элементы, которые стоит иметь хорошему редактору кода.

Работа с несколькими файлами

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

Подсветка синтаксиса

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

Большинство редакторов поддерживает выделение синтаксиса различных языков с помощью цветов; часто файлы-определения синтаксиса можно подключать как модули. Одной из характерных особенностей программирования Ajax является использование нескольких языков. На стороне клиента задействованы HTML. CSS, XML и JavaScript (все они только выигрывают от визуального выделения синтаксиса), кроме того, применяется часть (или все) языков из следующего набора: Java, C#, VB и более сложные ASP, PHP и JSP (в которых чередуются блоки "родного" кода и HTML-разметки). Отметим, что выделение синтаксиса полного набора языков, используемых в проектах Ajax, поддерживается не во всех редакторах.

Поддержка кода высокого уровня

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

Инструменты организации проекта

Некоторые интегрированные среды разработки идут дальше моделирования определений отдельных объектов и позволяют интегрировано управлять всем кодом проекта, распознавая связи между различными компонентами и ресурсами, объединение которых и дает конечный продукт. Основным преимуществом такого подхода в интегрированной среде разработки для компилируемого языка является возможность создания всего проекта в исполняемой форме, однако это не принципиально, когда речь идет об Ajax, где все ресурсы клиентской части приложения разворачиваются в форме, удобной для восприятия человеком. Тем не менее такая возможность может быть полезна при работе с кодом серверной части приложения.

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

Управление версиями

Управление версиями является необходимостью в больших проектах и "хорошим тоном" в проектах любого размера. Сами по себе системы управления версиями обычно работают с текстовыми и бинарными файлами, не особо вникая в их высокоуровневую семантику, поэтому назвать продукт, который

Приложение А. Инструменты для профессиональной работы с Ajax

лучше других подойдет именно для приложений Ajax, весьма затруднител! но. В любом случае наличие в вашем наборе инструментов хорошего средств управления версии не помешает.

Разработка на нескольких языках: интеграция клиента и сервера

Как отмечалось ранее, многие проекты Ajax требуют помимо развертывЕ ния множества технологий Web-браузеров наличия серверного компонент? Вы можете написать серверную часть на JavaScript, но это не принято, та как обычно разработчики Ajax-приложений используют на стороне клиент и сервера различные языки. Для кодирования клиентской и серверной част приложения можно использовать два абсолютно разных набора инструмен тов, но некоторые типичные задачи взаимодействия включают быстрое пе реключение уровней, поэтому редактор, поддерживающий все используемы языки, может оказаться весьма кстати.

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

Двусторонний визуальный дизайн

Многие инструменты Web-дизайна предлагают WYSIWYG-средства визуаль ной разработки Web-страниц. Данные средства хорошо подходят для создания прототипов, но обычно они плохо реагируют на более динамический подход Ajax к переупорядочению пользовательского интерфейса путем манипуляций с DOM. Большинство визуальных редакторов также позволяет программисту переключаться на просмотр HTML-кода в текстовом виде. Если при работе над Ajax-приложением вы используете подобные средства, обратите внимание на то, чтобы они сохраняли элементы, которые не понимают. в частности, комментарии и специальные дескрипторы и атрибуты, которые могут использоваться кодом JavaScript для переупорядочения дерева DOM.

А.2.2. Существующие продукты

Технологии Ajax поддерживаются несколькими текстовыми редакторами. Наше рассмотрение начнется с редакторов для программистов, затем будут изучены более сложные интегрированные среды разработки.

Текстовые редакторы

В настоящее время существует множество текстовых редакторов с открытым исходным кодом, бесплатных или условно-бесплатных, предназначенных для различных операционных систем. В качестве бесплатно распространяемых инструментов можно назвать TextPad, Notepad2, EditPlus, ветеранов Unix Vim и Emacs, а также расширяемое межплатформенное средство jEdit, модульная система которого позволяет создавать что-то, подобное интегрированным средам разработки. Несколько распространенных текстовых редакторов с поддержкой JavaScript показано на рис. АЛ.

Рис. А.1. Текстовые редакторы, предлагающие подсветку синтаксиса JavaScript (слева направо):

TextPad, Gvim и jEdit

TextPad предлагает потрясающе разнообразную баз}' файлов с определениями синтаксиса, включающую несколько файлов для CSS, JavaScript, XML и HTML, а также наиболее популярных серверных языков. Имеется минимальная поддержка запуска в текущем файле определенных пользователем команд (например, компиляторов). TextPad работает только в операционной системе Microsoft Windows. Сходные возможности предлагают и средства NotePad2 и EditPlus.

Инструмент jEdit создан на основе Java; его можно запускать на любой платформе, поддерживающей этот язык. Данное средство позволяет визуально выделять синтаксис более 100 языков, включая все основные языки? используемые в Ajах-проектах. Использование системы модулей позволяет получать дополнительные возможности, хорошо интегрирующиеся в систему. Модули допускают автоматическую навигацию, загрузку и установку непосредственно из jEdit. Существуют полезные модули, предлагающие проверку синтаксиса, поддержку отладчиков, компиляторов и интерфейсов управления версиями, а также специальную поддержку CSS и XSLT.

Рис. А.2. Модуль JavaScript-редактора для Eclipse предлагает элементарную поддержку контурного представления объектов JavaScript, но не позволяет в полной мере обрабатывать объектно-ориентированный синтаксис

Vim и Emacs представляют собой мощные расширяемые текстовые редакторы, поддерживающие традиции операционных систем Unix (хотя для обоих инструментов существуют и Windows-версии). Оба средства включают доскональный режим поддержки JavaScript-кодирования.

Интегрированные среды разработки

Корпоративные языки программирования, подобные .NET и Java, имеют интегрированные среды разработки с долгой историей. Соответствующий рынок достаточно развит, а в последние годы на нем появилось несколько богатых бесплатных интегрированных сред разработки с открытым исходным кодом. Среды, предназначенные для серверных языков, часто достаточно расширяемы, чтобы поддерживать и разработку клиентских частей Ajaxприложений.

Основным представителем технологий Microsoft является средство Visual Studio, поддерживающее Web-разработки с помощью компонента Visual InterDev, понимающего языки JavaScript и CSS. He так давно стали бесплатно распространяться урезанные версии данного продукта (Visual Studio Express), в том числе версия, предназначенная для Web-разработчиков.

Наиболее известной IDE Java-приложений является средство Eclipse, поддерживаемое IBM, — инструмент, предназначенный преимущественно для разработки Java-приложений и снабженный сложным набором модулей, которые написаны конкретно для Java-разработчиков. Семейство данных модулей развивается довольно бурно и включает несколько относительно простых JavaScript-модулей, обеспечивающих визуальное выделение синтаксиса

иконтурное представление методов и классов (рис. А.2).

ВEclipse 3.1 (часть проекта Web Tools Platform) был разработан богатый набор модулей для Web-разработчиков; данный проект предлагает также поддержку серверных технологий J2EE, редакторы для JavaScript, XML, HTML и CSS. Кроме того, Eclipse предлагает богатые возможности управления кодом на уровне проекта и полную интеграцию с новейшим средством