В предыдущей статье мы рассматривали библиотеку ExtJS для построения AJAX веб-приложений, а именно – интерфейсов, которые очень похожи на обычные десктопные приложения. Это сближает обычные и веб программы настолько, что зачастую вообще нельзя уже отличить, где что. Да и важно ли это на самом деле?

Но фреймворк не может быть сам по себе, разработчикам необходимо дать возможность легко расширять его функционал, использовать свои любимые среды разработки, со всеми их возможностями. Ну и, конечно, желательна интеграция с различными современными технологиями и платформами, особенно для веб-приложений, где платформ и сред достаточно много. Здесь и Adobe AIR, MS Silverlight, Volta или .NET, GWT и другие. Кстати, заметьте, что какой бы не был совершенный фреймворк, все равно важно, чтобы он мог быть использован параллельно с другими решениями. Иногда необходимо дорабатывать существующий проект, иногда только совместно с другим фреймворком можно покрыть все функциональные требования к проекту. Поэтому дальше мы рассмотрим все возможности совместной работы ExtJS и сторонних разработок.

Адаптеры к другим AJAX-библиотекам

В любом AJAX-фреймворке существует целый ряд основных функций (и функционала) – это и работа с CSS стилями, и работа с DOM-деревом и его узлами, реализация базовыхвизуальных эффектов, взаимодействие с браузером и AJAX-транспорты. Каждый раз, когда кто-то делает фреймворк, он должен реализовывать эти функции. В ExtJS проблема решена комплексно. В основе архитектуры лежит понятие адаптера (adapter), который реализует весь нужный низкоуровневый функционал. Кроме этого, адаптеры служат для обеспечения работы с другими библиотеками, например, если вы подключили адаптер jQuery, и захотите использовать в приложении сторонние компоненты, которые работают с этой библиотекой, то это не вызовет конфликтов. Тогда как если просто подключать все библиотеки (ExtJS и jQuery), это почти всегда заканчивается конфликтами и неработоспособностью приложения.

В дистрибутиве ExtJS включены следующие адаптеры:

• Ext-standalone, это встроенный адаптер самой библиотеки, в случае, если вам не требуется сторонний функционал.
• jQuery – в поставку входит два файла, непосредственно jQuery версии 1.2.3 (можно потом обновить, если выйдет новая версия) и ext-jquery-adapter, сам адаптер.
• Prototype – этот адаптер сам по себе комплексный, так как в самой основе лежит другая библиотека, Script.aculo.us, поверх которой работает Prototype, а уже над ними сверху работает адаптер для ExtJS. Кроме основных функций, он реализует базовые визуальные эффекты (для этого используется расширение Effects для Script.aculo.us).
• YUI – адаптер, использующий компоненты Yahoo! User Interface. Вероятно, самый старый адаптер, так как сам по себе ExtJS «вырос» из именно пакета YUI.

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

Честно говоря, особо различия в производительности с разными адаптерами я не ощутил, но здесь следует смотреть в каждом конкретном случае отдельно – например, jQuery в последних версиях декларирует существенный прирост быстродействия в операциях с CSS-селекторами и работе с DOM-узлами, а значит, если ваше приложение использует такие возможности, следует посмотреть в сторону использования адаптера для jQuery.

В то же время быстродействие всего приложения может даже ухудшиться, в частности, из-за подключения дополнительных файлов, что увеличивает размер библиотеки еще на 50 – 150 Кб в зависимости от типа адаптера. Поэтому в финальной версии своего приложения постарайтесь минимизировать объем подключаемых файлов, используя либо стандартный адаптер Ext-а (он самый маленький, всего 35 Кб) либо сведите все дополнительные файлы в один общий JS-скрипт, не забывая про правильную очередность.

Еще один момент про быстродействие. Как справедливо замечают, размер библиотеки достаточно большой, вместе со всеми файлами это 600 Кб или даже больше (в случае других адаптеров). Но мало кто знает про способ уменьшения этого размера, часто в несколько раз. Для этого на веб-сайте есть специальный конструктор, позволяющий собрать версию ExtJS под себя. То есть, в нее будут включены только необходимые вам компоненты, ну и базовые, которые нужны в любом случае. Так, размер можно уменьшить достаточно сильно – к примеру, если использовать ее для обычного веб-сайта, для обновления данных, вывода простых окон-предупреждений и других фоновых операций, то объем подключаемого файла может быть сокращен до 110 – 180 Кб (зависит от набора компонент, а также от версии библиотеки). Более подробно можно почитать в моем блоге. А если вручную потом просмотреть этот файл и удалить ненужное, применить сжатие, а потом и архивирование Gzip – размер можно довести до 50 – 90 Кб.

Платформы для веб-приложений

Исходя из своего назначения, ExtJS идеально подходит для разработки веб-приложений и исполнения их в средах, которые в последнее время стремительно развиваются. Под средами я имею ввиду как дополнения к браузерам, вроде Google Gears, так и, собственно, специализированные платформы вроде Adobe AIR. Сюда же можно отнести и такой проект, как Mozilla Prism, но он в данном случае он идентичен браузеру и его стоит рассматривать только как специфический подвид Firefox-а.

Ветка 2.х уже имеет встроенную поддержку среды Adobe AIR как самой прогрессивной и перспективной технологической платформы. В библиотеку включен специальный адаптер для AIR, который позволяет работать со всем функционалом среды через привычные механизмы ExtJS. Можно работать с окнами, использовать звуковую подсистему, взаимодействовать с системным контекстным меню, Drag&Drop а также работать с файловым хранилищем данных.

Интеграция с AIR имеет и еще одно преимущество – такие приложения могут распространяться в виде собранного пакета и устанавливаться на компьютере как обычные программы, в них можно включить все файлы ExtJS, таким образом, для старта приложения нет нужды по сети загружать объемные библиотеки, а только лишь пользовательские данные.

Конечно, пока интеграция не совсем полная, например, нет доступа к встроенной SQL базе данных AIR-а (только хранение данных в файле). Логично предположить, что для этого необходимо добавить новые компоненты в пакет Ext.data, который отвечает за получение и обработку данных, но пока этого еще нет и в этом направлении есть еще много работы и широкое поле для пользовательских расширений сторонних разработчиков.

Ну а первым примером интеграции с AIR, помимо демонстрационного приложения SimpleTask (планировщика задач, просмотреть и загрузить который можно здесь), стало приложение для просмотра документации по API самой библиотеки. К слову, очень удобное и функциональное, а главное, быстрое, что, собственно, и требовалось.

Интеграции с GoogleGears, наверное, основным плагином для реализации платформы веб-приложений в среде браузере, пока в стандартном пакете нет, среди примеров в официальном дистрибутиве есть приложения, которые работают с Gears, но реализуется это через пользовательские расширения. В принципе, дописать или расширить существующий класс доступа к данным (как минимум), займет у квалифицированного разработчика день-два времени. Так что, думаю, достаточно скоро появятся расширенные адаптеры, переносящие часть функциональных возможностей на сторонние среды (один из примеров такой разработки). Например, с GoogleGears пересекаются не только компоненты для доступа к данным, но и некоторые из классов утилит, использующиеся как в других компонентах, так и самостоятельно. Такие классы, как Ext.util.DelayedTask и Ext.util.TaskRunner, служащие для выполнение любых пользовательских задач в фоне или по расписанию, могут быть замещены их аналогом Worker Pool, а возможно и AJAX доступ можно переложить на компонент от Gears. Так что и в эту сторону библиотеку можно развивать еще долго.

Проектирование интерфейса приложений (GUI)

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

Лучшей такой средой, которая развивается и поддерживается, является проект ExtJS GUI Designer, расположенный по адресу http://www.projectspace.nl/ (автор Sierk Hoeksma в форуме на extjs.com раздает полный дистрибутив приложения). Он позволяет простым перетаскиванием компонент на рабочую панель проектировать все виды интерфейса – формы, окна и панели, меню и тулбары, а также редактировать доступные свойства объектов. На выходе получается готовый конфигурационный JSON-объект, который остается только передать конструктору формы в готовом скрипте – и все, приложение имеет нужный вам внешний вид. Конструктор обладает и рядом мелких, но очень удобных возможностей – показывает примерное время генерации и рендеринга созданной формы, может показать итоговый вид формы в новом окне и позволяет вручную редактировать код (для опытных разработчиков).

Внешне среда очень похожа на популярные RAD-средства, в частности, на Delphi и не должна вызвать сложностей с освоением. Конечно, далеко не все в ней можно сделать, совсем обойтись без ручной правки нельзя, но создать визуальный каркас приложения по силам любому человеку за несколько минут. Да, сам GUI Designer тоже полностью выполнен на ExtJS и может служить отличным примером ее возможностей.

Пользовательские расширения

Библиотека позволяет пользователям создавать собственные компоненты, расширяя функциональность существующих, или же реализуя полностью новые. Для этого выделено отдельное пространство имен – Ext.ux.*, для устранения конфликтов с основными классами. Уже существует достаточно много полезных и мощных компонент, которые собраны в специальном разделе веб-сайта.

Я насчитал уже 32 различные компоненты, от самых простых и тривиальных, вроде Ext.ux.MultiMonthCalendar для одновременного выбора нескольких дат в независимых календарях, до очень полезных и часто необходимых. Например, реализация различных помощников или пошаговых мастеров (Ext.ux.PowerWizard), различных криптографических алгоритмов (Ext.ux.Crypto), расширенная медиа-панель для работы с мультимедийным контентом через Flash (Ext.ux.MediaPanel[.Flash]). Для серьезных корпоративных приложений будут актуальны компоненты для взаимодействия с сервером приложений Domino, системой Lotus Notes или для авторизации в J2EE-приложениях. Как видим, компонент достаточно много, а самые лучшие или востребованные разработчики часто включают в следующие версии библиотеки.

Выводы

Как видим – ExtJS совсем не «вещь в себе», она позволяет гибко взаимодействовать с сторонними библиотеками, отлично работает на современных платформах для веб-приложений, поддерживая их расширенные возможности. Именно интеграция с Adobe AIR позволяет действительно разрабатывать веб-приложения, получая красивый интерфейс, широкие функциональные возможности и отличное быстродействие. ExtJS также чутко реагирует на потребности комьюнити, поддерживая сторонних разработчиков, желающих создавать свои компоненты. Теперь дело за вами – создавайте, разрабатывайте, творите!