Diapositiva 1

1
MadeInFlex Componentes dentro de celdas Joan
Garnet jgarnet_at_joangarnet.com
2
Índice

• Introducción
• Diferencias entre item renderers e item editors
• Valores por defecto
• Arquitectura
• Item renderers personalizados
• Item editors personalizados
• Utilizando Item renderers como Item editors

3
Introducción

• Los Item renderers" y los "item editors" son los
  componentes que ocupan las celdas de los
  componente de lista (que derivan de
  mx.controls.listClasses.ListBase)

4
Introducción

• Los componentes que derivan de ListBase son
• mx.controls.DataGrid
• mx.controls.HorizontalList
• mx.controls.List
• mx.controls.Menu
• mx.controls.TileList
• mx.controls.Tree

5
Introducción

• drop-in item renderers y drop-in item
  editors
• Son controles que ya implementan las interfaces
  necesarias para poder funcionar como item
  renderers o item editors directamente.
• En el framework de Flex tenemos los siguientes
  Button, CheckBox, DateField, Image, Label,
  NumericStepper, Text, TextArea y TextInput.

6
Diferencias entre item renderers e item editors

• A nivel funcional
• Un Item renderer muestra la información de la
  celda que le contiene mediante un control
  determinado
• Un Item Editor permite editar el valor de la
  celda que le contiene mediante un control
  determinado

7
Diferencias entre item renderers e item editors

• A nivel interno
• Un item renderer (personalizado) sustituye por
  completo el item renderer por defecto del
  componente lista en cuestión
• Un item editor solo lo sustituye en cuanto el
  usuario selecciona la celda que desea editar

8
Diferencias entre item renderers e item editors

• Componentes que soportan item renderers
• DataGrid
• HorizontalList
• List
• Menu
• TileList
• Tree
• Componentes que soportan item editors
• DataGrid
• List
• Tree

9
Valores por defecto

• Item renderer por defecto
• Cada componente de lista tiene su item renderer
  por defecto para poder representar los datos del
  data provider en sus celdas
• DataGrid mx.controls.dataGridClasses.DataGridItem
  Renderer
• HorizontalList mx.controls.listClasses.TileListIt
  emRenderer
• List mx.controls.listClasses.ListItemRenderer
• Menu mx.controls.menuClasses.MenuItemRenderer
• TileList mx.controls.listClasses.TileListItemRend
  erer
• Tree mx.controls.treeClasses.TreeItemRenderer

10
Valores por defecto

• Item editor por defecto
• Todos los componente de lista (que soportan item
  editors) tienen como item editor por defecto un
  mx.controls.TextInput

11
Arquitectura

• Un item renderer o item editor recibe los datos
  del componente de lista que le contiene mediante
  la propiedad data.
• Un item renderer debe implementar
  mx.core.IDataRenderer.IdataRenderer para poder
  acceder a la propiedad data.

12
Arquitectura

• Si quieres crear tu propio item renderer o item
  editor deberás asegurarte que implementa las
  interfaces necesarias para poder comunicarse con
  el componente que lo contendrá
• Existen varias interfaces que se implementarán
  según la utilizadad que se le quiera dar al
  componente
• IDataRenderer
• IDropInListItemRenderer
• IListItemRenderer

13
Arquitectura

• Relación de interfaces y propiedades para item
  renderers, item editors y drop-in renderers y
  editors

14
Item renderers personalizados (DataGrid)

• A tener en cuenta
• Para enlazar las propiedades del control con las
  del data provider se puede proceder de varias
  formas
• data binding ( ejemplo dg IR I )
• No requiere código extra.
• Muy fácil de implementar
• Sin data binding ( ejemplo dg IR II )
• Se debe sobreescribir el setter data para que la
  sincronización entre el control y el data
  provider sea correcta override public function
  set data(valueObject)void
• Útil en caso que se requiera operar con las
  propiedades del componente host. De lo contrario
  es más sencillo utilizar data binding

15
Item editors personalizados (DataGrid)

• Para enlazar las propiedades del control con las
  del data provider
• Asignar editabletrue al DataGrid, asignar
  editablefalse a todas las columnas que no
  queramos hacer editables, asignar editorDataField
  a la columna para determinar la propiedad que se
  utiliza en el item editor para sincronizar el
  valor del data provider al realizar una
  modificación. Y en el item editor sobreescribir
  el setter data para que se sincronize con el
  valor de data provider override public function
  set data(valueObject)void (ejemplo dg IE I)

16
Item renderers como item editors

• Igual que los item editors pero además se debe
  asignar rendererIsEditortrue (ejemplo dg IR as
  IE II)
• Esta combinación nos permite tener el item editor
  visible en todo momento
• Interfaces más ricas visualmente
• Acceso directo a toda la inforamación de manera
  más rápida e intuitiva
• Hay una pequeña penalización en lo que a proceso
  y memoria se refiere (quizas es despreciable)

17
Item renderers como item editors

• A tener en cuenta
• En el caso de no utilizar la propiedad
  rendererIsEditortrue ni las demás descritas para
  item editors se debe lanzar un evento que suba
  (bubble up) hasta el contenedor del DataGrid para
  así poder sincronizar el valor del data provider
  con el del valor actualizado de la celda (ejemplo
  dg IR as IE I)