13.2.4. Основные компоненты и возможности
Для рассмотрения библиотеки ExtJS можно разделить ее компоненты на несколько групп.
Самый нижний слой – это низкоуровневые функции по работе с DOM-деревом, событиями, стилями и другие функции. Здесь можно использовать адаптеры для подключения нескольких библиотек. В особенности это нужно, когда необходимо смешать в одном приложении функциональность, к примеру, jQuery и ExtJS. Во последних версиях ExtJS можно использовать как родные функции, так и другие библиотеки: jQuery, Yahoo UI!, Prototype.
Core – это основные базовые модули и функционал, который необходим для работы всех остальных компонентов библиотеки и приложения. Он разбит на несколько модулей:
Ядро – это обязательный компонент, обеспечивает общий менеджер событий, работу с адаптерами и основные операции с DOM-моделью. Для построения самых простых приложений можно использовать только этот компонент, так как в него включены все необходимые функции, в том числе и UpdateManager для обновления любой части страницы по расписанию или событию от пользователя.
Для использования визуальных компонентов (виджетов) нужен модуль, который обеспечивает их работу, рендеринг и управление наборами виджетов. ExtJS поддерживает функции отложенного рендеринга (lazy render) когда все операции по отрисовке или обновлению элементов координируются самой библиотекой, а это экономит время и делает приложение быстрее.
Утилиты – добавляют функции работы с JSON, обработку CSS, работу с событиями клавиатуры и базовую поддержку шаблонов.
Поддержка кросс-браузерного Drag&Drop вынесена в отдельный модуль (нужен, если используются виджеты).
Возможность хранить состояние интерфейса в независимом хранилище, например cookie (компонент State Manager) – при повторном входе все открытые окна или вкладки в браузере будут восстановлены.
Работа с данными. Так как любое веб-приложение основано на каких-то данных, то этот слой в библиотеке не менее насыщенный различным функционалом, чем визуальные компоненты. Обмен данными с сервером может вестись в двух форматах – JSON, как самый простой для JavaScript, и XML, что позволяет реализовать более широкий функционал, но за счет увеличения ресурсоемкости всего приложения.
Вся работа с данными построена на следующей компонентной схеме:
основной компонент Store – с ним и работают другие объекты, желающие получить или отправить данные;
Reader отвечает за структуру данных и их верную интерпретацию, вне зависимости от формата;
Proxy обеспечивает прозрачный доступ к серверу через промежуточную абстракцию Connection так, что приложению не важно, да и не надо даже знать, как в реальности данные пришли от сервера;
объект (или набор объектов) Record хранит коллекцию записей из данных (согласно заданной структуре).
Исходя из нужного функционала, можно использовать компоненты, которые работают с JSON-данными или XML, или и те и другие вместе.
13.2.5. Визуальные компоненты
Помимо замещения всех стандартных для форм элементов, ExtJS предлагает и более крупные "строительные блоки" для приложения в целом.
Управление общей компоновкой обеспечивают компоненты группы Layout, которые позволяют разметить блоками всю область окна приложения и в дальнейшем работать с ними по отдельности, обеспечивая в то же время общую целостность интерфейса и его структуры (рис. 13.1). Отдельные части страницы можно сворачивать, скрывая полностью или менять их размер, передвигать границы областей – все, что привыкли делать пользователи в обычных приложениях.
Рис. 13.1. Управление общей компоновкой
Динамическая подсказка или Tooltip – позволяет для любого элемента на странице (как визуального, так и к любому DOM-объекту) прицепить подсказку, которая будет показана при наведении мыши. Сама подсказка может содержать в себе произвольный HTML-код, изображения и даже быть контекстно-зависимой – подгружаться через AJAX.
При необходимости можно подключать и использовать множество виджетов – кнопки (разного вида, с изображениями и текстом, кнопки-переключатели, кнопки с выпадающим меню и т.п.), меню (как контекстные, так и тулбары с меню, совсем как в обычных приложениях), индикаторы загрузки и прогресс-бары. Есть и такое, свойственное только Веб-приложениям решение, как Loading Mask, которое позволяет "заморозить" для пользователя все приложение на то время, пока получаются и обновляются данные с сервера. Есть и функциональные компоненты для выбора даты и цвета, есть компоненты для вывода сообщений, как модальные MessageBox, так и полноценные окна, в которые, в свою очередь, можно вставлять любые элементы управления или разделять их закладки, сворачивать и развертывать, перетаскивать по экрану и т.п.
Таб-панель – еще один мощный компонент для построения тех приложений, которые, с одной стороны, требуют, чтобы пользователю показывалось сразу много разной информации, формы, таблицы и другие объекты, в то же время нужны ограничения, и в каждый момент времени показывать только самое необходимое. Для такого структурирования широко применяют вкладочный интерфейс. Даже диалоговые окна в ExtJS имеют свойства для автоматического преобразования набора правильно оформленных DIV-слоев сразу в набор панелей.
Tree – часто используемый компонент, позволяющий группировать иерархические структуры и отображать их с любой глубиной вложенности, автоматически подгружая новые элементы, менять местами, перетаскивая мышью отдельные элементы и другие стандартные операции (рис. 13.2). В последних версиях деревья были расширенны путем добавления функций редактирования элементов прямо на месте отрисовки (Inline item editing).
Рис. 13.2. Tree
Форма является одной из основных высокоуровневых абстракций библиотеки, и использует почти все из описанных компонентов, в частности большинство визуальных виджетов, которые расширяют стандартные элементы форм. Она также использует слой доступа к данным для заполнения некоторых компонентов (например, ComboBox может получать данные от сервера). В функциональность форм входит и предварительная проверка вводимых пользователем значений, что уже стало классической функциональностью для Веб. Используя встроенные обработчики, можно проверять вводимые e-mail адреса, URL и просто строки символов, однако никто не мешает расширять встроенные наборы, создавая пользовательские валидаторы (любой виджет для ввода данных позволяет определить произвольную функцию для проверки ввода). Есть и встроенный HTML-редактор. Форма в ExtJS сама умеет передавать себя на сервер в виде XML-документа и обрабатывать ответ, в том числе и валидацию полей на сервере – для этого есть отдельный компонент, стандартно же и спользуется JSON и обычная передача через GET/POST параметры.
Таблица Grid – самый востребованный и самый мощный из компонентов, которым располагает разработчик на ExtJS (рис. 13.3). Впрочем, он одновременно является и самым сложным. В общих чертах, он также построен на модели абстракции каждого уровня: данные могут получаться из DataStore, внешнее отображение задается как специальными функциями-рендерами для каждого столбца отдельно, так и компонентом GridView, который отвечает, например, за заголовок таблицы и создание тулбара с элементами постраничного управления выводом данных. Для выделения строк и ячеек есть, соответственно, RowSelectinsModel и CellSelectionModel. Также поддерживается особый тип таблиц со встроенной функцией редактирования данные напрямую в ячейке (это позволяет расширить функционал такой таблицы почти до уровня Excel/Calc). В версии ExtJS 2.0 появилась возможность избирательно группировать строки, совмещая, таким образом, функционал ьность таблицы и дерева (Grid и Tree). Конечно, в таблице пол ностью поддерживается и Drag'n'Drop – можно визуально менять расположение столбцов, перетаскивать отдельные строки, менять их ширину, сортировать данные в колонках и другие операции.
Рис. 13.3. AJAX Таблица
Развитие библиотеки не стоит на месте. Например, вместе с выходом среды Adobe AIR библиотека пополнилась отдельным интерфейсом, позволяющим легко взаимодействовать с этой средой и встраивать ее возможности в приложение. Таким образом, совместно с AIR и ExtJS можно реально создавать приложения, которые, оставаясь веб-ориентированными, вместе с этим просто идентичны традиционным "десктопным", совмещая все преимущества и сильные стороны обоих типов программ.