ExtJS — поддержка сторонних библиотек и платформ

ExtJS logoВ предыдущей статье мы рассматривали библиотеку 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 самой библиотеки. К слову, очень удобное и функциональное, а главное, быстрое, что, собственно, и требовалось.

Simple Task

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

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

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

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

Ext builder

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

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

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

User extensions

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

Выводы

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

LinkedIn

17 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

сортировка и пагинация, фильтры — там все есть с коробки на клиенте, смотрите примеры.

Это я понимаю... (сам работаю с таким выродком как zkoss.org), но нужно написать простенькое отображение без редактирования... и очень хочется без обработки на сервере... очень жаль если прийдётся отказаться от ExtJS и создавать велосипед сначала... на простом HTML: — (Ну по сути... с таблички брать данные умеет (где то в демке такое есть...) можно кэтому прикрутить «Sorts/Paging/Filtrs»? или что из этого можно прикрутить... да так что бы оно не обращалось на сервер... ЗЫ я шарю в java, но на JS ни разу не программил... Помогите плиз!

KRED — веб-приложения и поисковики вещи малосвовместимы технологически и не совместимы идеологически.на остальное — да, все так можно сделать.

Привет всем, есть задачка вывода некоторых данных в виде списка/таблички. Например список mp3 песен.так как в одну «колекцию» будет входить до 100−200 песенок то интересует возможность организация Сортировки/СТРАНИЦ/Фильтров с помощу библеотеки ExtJS. Так как с программирование знаком подозриваю что такое возможно... НО есть ещо одно желание зделать все эти данные доступными для поисковиков и потому интересует возможность чтения данных из простой HTML-таблички.О том что в ExtJS-Grid данные можно конвертнуть из обычной таблички... то же есть пример на сабжевом сайте, но интересует мнение профисионалов или возможно такое все в куче...1 в HTML-табличке выкинуть на страничку все нужные данные.2 в броузере ExtJS сконвертирует эти данные в ExtJS-Grid и сделает возможность Сортировки/СТРАНИЦ/Фильтров без обращения на сервер! ЗЫ, а можно строчку в ExtJS-Grid форматировать как душе угодно?

вам мало этого списка? или например вот

Совершенно уродские интерфейсы. Плюс вырубают все хоткеи в браузере (убивать-убивать-убивать).

Не знаю как все это в куче, еще не попробывал (Ext имеетя ввилу) сам то юзаю jQueryНо, что я заметил, jquery-1.2.3.pack.js совместно с FireFox 2.0.0.16 глючит (с 15 версией не глючила), лишь отдельные элементы работают нормально, тестил в Opera 9.20 & IE 7 = работает все ок, не знаю, что накрутили в FF, но там не корректно работает некоторые вещи. Пишеться код прямо. Так что, примите к сведению и к Вашему посту про совестную работу фреймворков.

Frenzy, вот такие как ты только и могут писать всякую муть! Ты хоть когда-нибудь на программировал? Уверен, что ты только и знаешь как по шаблону на JS поставить в HTML свой Flash.Flash — это отстой!!! Это настолько уёбищный продукт, что от него можно не только жёсткий диск, но и процессор угробить.Это не от балды взято, это факт. А всё почему? Да потому что флашер — это не программист, это дизайнер, не более! Достали уже все со своим флешем! Сувал бы ты своё мнение об этом на своём Flash-форуме, а здесь люди обсуждают продвинутые технологии! Вот для тебя также полезная ссылка: http://www.rambler.ru/dict/ruen/00/82/97.shtmlФлешер + человек, который не знает русского языка — это уже что-то особенное! aleks_raiden, не обращай внимания! Хорошая статья! Эта библиотека самая лучшая, которую я видел.Ещё есть чем-то похожие библиотеки: http://developer.yahoo.com/yui/http://www.dhtmlx.comНо по сравнению с этой они слабоватые.Странно что ExtJS вырос на YUI, а YUI медленнее.Щетинин Сергей, это он типО, типО, типО «новый русский»; -)

KDV, количество, запятых, впечатляет.

Интересно, а до идеи о том, что Obdolbe AIR — это, будто бы, круто, автор сам дошел, или адобберы занесли, с лишней двадцаткой?

Frenzy — за деньги и я все напишу сам:) Пока же не было показано ничего даже близко аналогичных интерфейсов. Не надо расписывать возможности флекса — их знают кому надо. И веб-сервисы далеко не езде и не всегда нужны. И всегда найдётся то, что можно лучше/легче написать на флеше. IDE на эклипсе я и под ExtJS имею. Но повторю — никто пока не показал (или ок, я не видел) даже близкие примеры интерфейса во флексе, идентичные ексту. который есть уже и тут, а не мифически «напишу за ваши деньги».

Frenzy — со всем согласен, но вот видите ли, Flex-у к ExtJS в области интерфейсов стандартных (не уникальных мультимедийных красивостей) — очень и очень далеко. На спор повторите идентично или максимально близко примеры с сайта екста? например, SimpleTask?

Владимир Агафонкин — это для параноиков, которым важно поспорить про чистоту лицензии, а не сделать реальный продукт. Приведённые там альтернативы даже рядом не лежали, а некоторые достаточно далекие от интерфейсов (Dojo, сложно считать заменой ексту). Просто примите, что на рынке нет замены в плане построения качественных и мощных интерфейсов для профессиональных веб-приложений.

В принципе, ничего особо секретного — все это и так есть на сайте... Но собирание всего материала в одну статью радует.

По поводу Ext еще рекомендую почитать следующее: http://pablotron.org/? cid=1556

"...в самой основе лежит другая библиотека, Script.aculo.us, поверх которой работает Prototype..."Скорее наоборот — scritp.aculo.us работает поверх prototype.js.

Спасибо. Хорошая статья.

Подписаться на комментарии