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

Евгений Кулиш
28 марта 2008
Евгений Кулиш,
Flex разработчик OWOX, ББЦ, Translot

Введение

Одним из самых популярных типов представления данных являются таблицы. Во 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 назначаем соответствующий компонент.

Продолжение следует...
Метки: Flex, RIA

Комментарии

28 марта 2008
Антон Урясьев
Очень интересно, а когда будут остальные части?

Добавить комментарий