Constantiner's blog

Многие знают, что ячейки таких компонент, как List и DataGrid могут быть представлены не только в стандартном виде, но и в произвольном, определённом пользователем. Достигается это с помощью item renderer’ов. Но не освещение темы item renderer’ов как таковых меня интересует сейчас, а некоторые конкретные случаи работы с ними. Те же, кто хочет узнать про рендереры, могут это сделать самостоятельно.

Основная задача item renderer’а - представить произвольный визуальный способ отображения и редактирования данных. То есть если речь идет об изменении данных, то renderer это делает самостоятельно. Замечу об отличии item renderer’а от item editor’а с точки зрения редактирования данных: item editor предоставляет механизм некой сессии редактирования данных, обладающей сложным устройством и возможностью отмены редактирования. Но это тоже отступление от нашей генеральной мысли об орехах.

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

Как перехватить это событие? Сложный вопрос. В общем, есть разные варианты. Например, используя ключевые слова parent или owner. Но реально это не очень спортивный способ. Ибо сильно завязан на структуру объектов.

Я предлагаю использовать способ, базирующийся на бабблинге событий в визуальных объектах, о котором я недавно писал.

Итак, будем основываться на примере с List’ом и item renderer’е с кнопкой. Будем использовать простейший XML в качестве data provider’а:

XML:

Тогда наш простой рендерер будет выглядеть так:

XML:

При нажатии на кнопку мы генерим событие с бабблингом. Но как это использовать?

Есть два основных способа:

• Простой способ, не требующий модификации List’а.
• Более комфортный для использования, но требующий модификации List’а.

Первый способ прост. Мы ловим бабблинг снаружи обрабатываем его:

Можно посмотреть в отдельном окне (исходники доступны по правой кнопке).

Пример прост: при нажатии на кнопку в первом List’е удаляется соответствующая строка. Во втором же List’е меняется метка на кнопке (и это, теоретически, вполне можно сделать изнутри рендерера).

Как мы видим, главный класс приложения прост. Но он требует от нас двух вещей: подписываться на события с помощью addEventListener (декларативный синтаксис не работает потому что мы не указали соответствующих метаданных события в List’е) и на всякий случай вызывать stopPropagation для нашего события (чтобы где-то наверху кто-то неожиданно его не поймал). Также мы не можем послать стандартный ListEvent так как заполнение его полей требует знания о List’е, что опять же требует owner’ов/parent’ов.

Кстати, способ с бабблингом требует одного условия: имя события (тип) не должно совпадать ни с одним из имен событий нашего List’а.

Приложение, реализующее второй способ, выглядит аналогично. Также по правой кнопке доступны исходники. Рендерер мы оставили без изменений. Мы лишь добавили простой кастомный класс события и соответствующую константу для нашего события в нем. Это событие отражено в метаданных нашего расширенного List’а. Оно не перекрывается с именем события, которое «пузырит» наш рендерер.

Также в нашем List’е мы видим отключение дальнейшего бабблинга события от рендерера (чтобы оно никому уже не помешало) с использованием stopImmediatePropagation.

А также можно увидеть формирование валидного события. Все просто. И, как следствие, упростился код главного класса приложения и стал много нагляднее.

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

Примерно так. Можно задавать вопросы, делиться своими способами, критикой приведенных итд. Милости прошу в комменты.

Ну и напоследок предлагаю скачать готовый проект приведённого примера (Flex Builder 3 beta 3).

Ссылки по теме раз и два.

Bookmark this article at …