Нестандартное использование ItemRenderer. Часть первая

Введение

Одним из самых популярных типов представления данных являются таблицы. Во Flex для этих целей служит компонент DataGrid, обеспечивающий базовые возможности просмотра и редактирования. Сложности возникают тогда, когда мы хотим либо отображать, либо изменять данные нестандартным способом, например, в виде CheckBox, ComboBox компонентов. В данной статье я опишу один из способов (возможно, не самый изящный, но работающий :) решения этой проблемы, но прежде введем еще несколько условий работы итоговой таблицы:

1. По умолчанию строка не переводится в режим редактирования по клику на ней.
2. Перевод в режим редактирования будем осуществлять, например, по кнопке F2.
3. По нажатию Enter данные должны сохраниться, а строка вернуться в режим просмотра.
4. По нажатию на Esc данные не должны сохраниться, а строка возвращается в режим просмотра.
5. Представление данных в ячейке может отличаться от редактируемого (например: цена отображается в виде "200 грн.", но при переходе в режим редактирования ячейки пользователь видит "200.00").

DataProvider и ItemRenderer

Все компоненты Flex, которые являются наследниками ListBase (в том числе и DataGrid), для хранения данных используют так называемый Data Provider, который является обычной коллекцией объектов. По сути, Data Provider – это некий уровень абстракции между компонентом Flex и данными, которые мы хотим с помощью них отобразить. Если провести аналогии с парадигмой MVC, то Data Provider – это модель, а компонент – ее представление. Каждый компонент реализует свой механизм контроля отображения данных и позволяет переопределять его, для чего создаются специфические рендереры (item renderer). Рендерер – это визуальный компонент, который получает данные из Data Provider и отображает в соответствующей ячейке (если речь идет о DataGrid). По умолчанию для таблицы используется DataGridItemRenderer, который выводит данные как текст и позволяет их редактировать через обычное текстовое поле.

Алгоритм решения задачи

Для описания колонок таблицы служит класс DataGridColumn. Среди прочих, у него есть свойства, которые описывают, какие рендереры будут использоваться для просмотра и редактирования. Так, свойство itemRenderer задает рендерер для просмотра, а itemEditor – для редактирования (используется только в том случае, если свойство editable и у колонки, и у таблицы установлено в true). К сожалению, поведение таблицы в стандартном режиме редактирования не удовлетворяет первому условию: ячейку можно изменять сразу же, после клика на ней или выбора ее с помощью навигации с клавиатуры, и изменить поведение не представляется возможным (Примечание: быть может, и есть какие-либо вменяемые варианты решения проблемы, но я таковых не нашел ). Поэтому, вариант использования отдельных ренедеров для редактирования и просмотра не подходит. Исходя из этого, я пришел к следующему алгоритму решения задачи:

1. Данные для Data Provider описываются объектом, со свойствами label (текст для отображения) и value (значение для редактирования).
2. Создается базовый рендерер, обладающий следующими особенностями:
   Содержит в себе объект labelObject типа Label (для отображения) и некий editObject типа Object, который мы будем использовать для задания необходимого типа компонента редактирования из класса наследника;
   Умеет реагировать на три состояния View, Edit, Cancel (изменение, просмотр и отмена соответственно);
   Работает независимо от названия колонки, без необходимости задания свойства колонки dataField;
   
3. Базовый рендерер служит предком для создания тех типов рендереров, которые нам необходимы (с функциональностью ComboBox, CheckBox и т.д.);
4. При создании таблицы, в зависимости от типа данных в колонке, свойству itemRender назначаем соответствующий компонент.