MadeInFlex “Componentes dentro de celdas” Joan Garnet jgarnet@joangarnet

1. MadeInFlex “Componentes dentro de celdas” Joan Garnet jgarnet@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 yTextInput.

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

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(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

15. 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)

16. 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)

17. 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)