0
MadeInFlex “ Componentes dentro de celdas” Joan Garnet [email_address]
Índice Introducción Diferencias entre item renderers e item editors Valores por defecto Arquitectura Item renderers person...
Introducción Los “Item renderers" y los "item editors" son los  componentes que ocupan las celd...
Introducción Los componentes que derivan de  ListBase  son: mx.controls.DataGrid mx.controls.HorizontalList mx.controls.Li...
Introducción “ drop-in item renderers” y “drop-in item editors”: Son controles que ya implementan las interfaces necesaria...
Diferencias entre item renderers e item editors A nivel funcional: Un Item renderer muestra la información de la celda que...
Diferencias entre item renderers e item editors A nivel interno: Un item renderer (personalizado) sustituye por completo e...
Diferencias entre item renderers e item editors Componentes que soportan item renderers: DataGrid HorizontalList List Menu...
Valores por defecto Item renderer por defecto: Cada componente de lista tiene su item renderer por defecto para poder repr...
Valores por defecto Item editor por defecto: Todos los componente de lista (que soportan item editors) tienen como item ed...
Arquitectura Un item renderer o item editor recibe los datos del  componente de lista que le contiene mediante la propieda...
Arquitectura Si quieres crear tu propio item renderer o item editor deberás asegurarte que implementa las interfaces neces...
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 pro...
Item editors personalizados  (DataGrid) Para enlazar las propiedades del control con las del data provider: Asignar  edita...
Item renderers como item editors Igual que los item editors pero además se debe asignar  rendererIsEditor=true  (ejemplo d...
Item renderers como item editors A tener en cuenta: En el caso de no utilizar la propiedad  rendererIsEditor=true  ni las ...
Upcoming SlideShare
Loading in...5
×

Arquitectura de itemRenderers / editors en Flex2

763

Published on

Ponencia ofrecida durante el evento "MIFonline I" explicando la arquitectura de itemRenderers de Flex2.

Ejemplos descargables en: http://www.madeinflex.com/2007/01/14/item-renderers-e-item-editors-componentes-dentro-de-celdas-mif-online-i/

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
763
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Arquitectura de itemRenderers / editors en Flex2"

  1. 1. MadeInFlex “ Componentes dentro de celdas” Joan Garnet [email_address]
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Arquitectura Relación de interfaces y propiedades para item renderers, item editors y drop-in renderers y editors:
  14. 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. 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. 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. 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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×