ITFreak :: Независимый Взгляд на Информационные Технологии :: Сообщество IT-Энтузиастов

Только что сошедшая с конвейера свежая версия Ext GWT 2.0, впитала в себя, по словам ее разработчиков, массу новых компонентов и возможностей, расширяющих функциональный набор предыдущей версии Ext GWT 1.0. Что наиболее примечательно в данном релизе, так это то, что он, наконец-то, закрыл функциональную брешь (некоторое отставание) между проектом Ext GWT и его “родным братом” Ext JS - теперь оба проекта имеют аналогичный набор возможностей! Напомним, что в отличии от Ext JS, которая является “чистой” JS-библиотекой с мощнейшим функционалом, Ext GWT, в свою очередь, является своего рода “оберткой” к Ext JS и предоставляет разработчикам возможность применить на практике всю ее мощь, однако не требует от разработчиков каких-либо знаний в области JavaScript и избавляет их от проблем кросс-браузерной совместимости соответствующего кода - в процессе разработки используется только один язык программирования - Java (тут также важен тот факт, что архитектура Ext GWT использует возможности языка Java “в лучших традициях” проектирования ПО - фрэймворк спроектирован очень качественно и его API, соответственно, позволяет использовать всю гибкость объектно-ориентированного подхода к построению ПО с использованием языка программирования Java). А это, нужно заметить (особенно учитывая то, что Java является наиболее популярным и развитым объектно-ориентированным языком программирования современности), открывает для Java-разработчиков воистину огромные перспективы в области построения AJAX-базированных RIA-приложений.

Итак, взглянем, что же нового преподнес нам данный релиз.

Новые компоненты и возможности

• Tree Panel & Tree Grid

Новые компоненты TreePanel и TreeGrid заменяют старые компоненты Tree и TreeTable. Они “привязываются” напрямую к TreeStore и, следовательно, использовавшиеся ранее “соединители” TreeBinder и TreeTableBinder более не нужны. TreeGrid является подклассом Grid, что автоматически наделяет данный компонент всеми достоинствами компонента Grid - быстрым рендерингом, поддержкой виджетов и встроенным/построчным редактированием.

Скриншот, демонстрирующий TreeGrid с использованием RowEditor:

• Live Charting

Пакет для создания Flash-базированных графиков/диаграмм предоставляет возможность визуализировать данные. Каждая диаграмма “привязывается” напрямую к ListStore, благодаря чему нет надобности заботиться об ее обновлении - все происходит автоматически. Новый класс FlashComponent, расширяющий BoxComponent, предоставляет возможность легкого создания собственных Flash-компонентов. И все это, как и полагается, конструируется и настраивается при помощи объектной Java-модели, без необходимости иметь дело с JSON или XML.

• HTML Editor - Rich Text Editor

Часто востребованный компонент, который теперь доступен для использования (примечание: в предыдущей версии Ext GWT для возможности использования WYSIWYG-редактора приходилось подключать сторонний редактор самостоятельно, мы писали об этом в одном из предыдущих материалов, посвященных Ext GWT - “Интеграция WYSIWYG-редактора TinyMCE”). HtmlEditor - это легковесный WYSIWYG-редактор, который хорошо интегрируется с другими Ext-компонентами а также легко настраивается для использования другий функций, которые могут быть востребованы разработчиками.

• RowEditor

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

• Widget Renderer

Теперь стало возможным добавление виджетов в ячейки грида (Grid). Для использования виджетов достаточно взять на вооружение GridCellRenderer и возвратить виджет вместо HTML-фрагмента.

• ButtonGroup

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

• Status

Новый компонент Status может быть использован совместно с компонентом ToolBar для дублирования строки состояния приложения.

• HBoxLayout & VBoxLayout

Две новых и чрезвычайно гибких схемы расположения компонентов (layouts) для размещения последних в виде единственной строки или колонки. Эти Box-layouts предоставляют возможность точного контроля размеров и позиции компонентов в контейнере.

Улучшенные компоненты и возможности

• Улучшения компонента Grid

Добавлены две новые возможности:

1. Группирование колонок, что разрешает использование многоколоночных заголовков с поддержкой colspan и rowspan. В дополнение к этому, в заголовках можно также разместить виджеты.

Следующий ниже код демонстрирует создание двух строк в сгруппированных колонках:

cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));
cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));
cm.addHeaderGroup(1, 0, new HeaderGroupConfig(yourWidget, 1, 2));

2. Группирование строк, что разрешает добавлять несколько объединенных строк в низ грида. Можно использовать один из нескольких предопределенных типов агрегации, таких как максимальное, минимальное, усредненное и т.п. значение, или же использовать рендереры для отображение любых данных.

Следующий ниже код демонстрирует создание единственной сгруппированной строки:

AggregationRowConfig averages = new AggregationRowConfig();
averages.setHtml("name", "Average");

// с типом и форматом суммарного значения
averages.setSummaryType("last", SummaryType.AVG);
averages.setSummaryFormat("last", NumberFormat.getCurrencyFormat());

// с рендерером
averages.setSummaryType("change", SummaryType.AVG);
averages.setRenderer("change", new AggregationRenderer() {
public Object render(Number value, int colIndex, Grid grid, ListStore store) {
// здесь можно возвратить HTML
return number.format(value.doubleValue());
}
});
cm.addAggregationRow(averages);

• Buttons

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

• Toolbar Overflow

Панели инструментов (toolbars) теперь могут создавать меню для элементов, которые не помещаются в их видимую область. Эти элементы меню реагируют на события теми же обработчиками (handlers), что и обычные элементы меню. Такое поведение панелей инструментов включено по умолчанию и может быть отключено при помощи конфигурационной опции enableOverflow.

• Menu Overflow

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

• ToolTips

Всплывающие подсказки теперь поддерживают специальную “прикрепляющую настройку”, которая разрешает обратить внимание к определенному элементу/компоненту при помощи маленькой выносной стрелки.

• Buffered GridView

Буферизированный компонент GridView улучшает быстродействие грида путем ожидания видимости строк перед их рендерингом. При прокрутке пользователем контента, который становится невидимым, BufferedGridView очищает старую DOM-разметку для минимизации DOM-структуры. Как результат минимизированной разметки, быстродействие изменения размеров (resizing) и таких манипуляционных свойств как forceFit, autoExpandColumn и т.п. в больших гридах существенно повышено.

• ImageBundle Support

Поддержка “связки изображений” (image bundle) - одна из часто запрашиваемых возможностей, которая теперь доступна для использования. Иконки могут быть заданы тремя разными способами:

1. AbstractImagePrototype (обычно из ImageBundle)
2. CSS style name (существующий метод)
3. Image path (строка)

Все компоненты, поддерживающие иконки, теперь реализовывают новый интерфейс IconSupport:

/**
* Interface for objects that support icons.
*/
public interface IconSupport {
/**
* Returns the icon.
*
* @return the icon
*/
public AbstractImagePrototype getIcon();

/**
* Sets the icon.
*
* @param icon the icon
*/
public void setIcon(AbstractImagePrototype icon);

/**
* Sets the icon style.
*
* @param icon a CSS style name
*/
public void setIconStyle(String icon);
}

В дополнение к этому, существует вспомогательный класс IconHelper, который может быть использован для создания прототипов изображений из названий CSS-стилей и путей к изображениям. Вот пример задания иконки тремя разными способами:

// из "связки"
item.setIcon(GXT.IMAGES.editor_bold());
// имя CSS-стиля
item.setIconStyle("my-icon");
// путь к изображению
item.setIcon(IconHelper.createPath("/my/url/foo.gif"));

Миграция на версию Ext GWT 2.0

Ext GWT 2.0 - это обширное обновление версии 1.0, в котором присутствует ряд “переломных” изменений, которые должны быть приняты к сведению при переходе с версии 1.х. Среди загружаемых файлов Ext GWT присутствует руководство по миграции, в котором задокументированы изменения в API, и с которым рекомендуется ознакомиться перед тем, как начать переход на версию 2.0.

Ссылки

* Страница загрузки Ext GWT 2.0
* Живая демонстрация возможностей Ext GWT 2.0 (все примеры сопровождаются исходным кодом)
* План дальнейшего развития (road map) Ext GWT