MadeInFlex

“Componentes dentro de celdas”

Joan Garnet

jgarnet@joangarnet.com

Í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

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)

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

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.

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

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

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

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.DataGridItemRenderer

– HorizontalList: mx.controls.listClasses.TileListItemRenderer

– List: mx.controls.listClasses.ListItemRenderer

– Menu: mx.controls.menuClasses.MenuItemRenderer

– TileList: mx.controls.listClasses.TileListItemRenderer

– Tree: mx.controls.treeClasses.TreeItemRenderer

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

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.

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

Arquitectura

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

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(value:Object):void

– Útil en caso que se requiera operar con las propiedades del componente host. De lo contrario es más sencillo utilizar data binding

Item editors personalizados (DataGrid)

• Para enlazar las propiedades del control con las del data provider:– Asignar editable=true al DataGrid, asignar

editable=false 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(value:Object):void (ejemplo dg IE I)

Item renderers como item editors

• Igual que los item editors pero además se debe asignar rendererIsEditor=true (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)

Item renderers como item editors

• A tener en cuenta:– En el caso de no utilizar la propiedad

rendererIsEditor=true 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)