<ul><li>Ingeniero Civil Informático UdeC. </li></ul><ul><li>Magíster Tecnologías de Información. UTFSM. </li></ul><ul><li>...
Agenda <ul><li>¿Por qué este tema? </li></ul><ul><li>Componentes </li></ul><ul><li>Eventos </li></ul><ul><li>Caso ejemplo ...
 
<ul><li>Compartir una de las primeras diferencias enfrentadas y que es muy recurrente. </li></ul><ul><li>Existe un cambio ...
<ul><li>Experiencia de aplicaciones web </li></ul>
<ul><li>Diferencia básica entre una página y una app.flex </li></ul><ul><ul><li>En una página web, el cliente es Stateless...
 
<ul><li>Flex es considerado un framework basado en componentes (component - based framework)  </li></ul><ul><li>Cada eleme...
<ul><li>Una aplicación Flex se puede escribir en un solo archivo mxml </li></ul><ul><ul><li>Problemas de mantenimiento, ac...
 
<ul><li>Flex está hecho con una jerarquia de clases Actionscript </li></ul><ul><li>Todos los componentes visuales derivan ...
<ul><li>¿Por qué comunicar componentes? </li></ul><ul><ul><li>Necesitamos informar a otro componente que ha ocurrido algo ...
 
<ul><li>La forma común de comunicarse es por medio de EVENTOS que se gatillan durante la ejecución de una aplicación. </li...
<ul><li>Veamos un componente </li></ul>
 
 
<ul><li>En AS3 cada evento se representa mediante un objeto de evento, que es una instancia de la clase Event o de alguna ...
<ul><li>El objeto evento tiene propiedades, entre ellas quien generó el evento (target) y el nombre del evento (type), ent...
<ul><li>Para utilizar eventos necesitamos </li></ul><ul><ul><li>Una instancia de la clase evento </li></ul></ul><ul><ul><u...
<ul><li>Definir y exponer el evento en el componente </li></ul>Componente expone el evento que puede gatillar con tags de ...
<ul><li>Definir y exponer el evento en el componente (II) </li></ul>Por otro lado, el componente que  gatilla el evento Co...
<ul><li>Colocar un detector (listener) de eventos </li></ul>El objeto o componente que desee detectar debe “inscribirse” e...
<ul><li>Extender la clase evento </li></ul>Hay que crear una clase propia que extienda a la clase Event, heredar las capac...
<ul><li>Extender la clase evento (II) </li></ul>Para colocar un detector del evento nuevo, es necesario colocar un listene...
<ul><li>Comunicación en cualquier sentido </li></ul><ul><ul><li>Costoso debuggin </li></ul></ul><ul><ul><li>Costosa manten...
<ul><li>Muchos eventos transmitiendo datos </li></ul><ul><ul><li>Mismo efecto anterior, pero además </li></ul></ul><ul><ul...
<ul><li>Para mejorar, utilizar el patrón Mediador </li></ul><ul><ul><li>“ The mediator pattern is a software design patter...
 
<ul><li>Requerimientos </li></ul><ul><ul><li>Desarrollar una aplicación que  permita administrar una lista de contactos bá...
<ul><li>Diseño Layout </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categorías
<ul><li>Diseño Clases Mediador </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría de contacto...
<ul><li>Diseño Clases eventos extendidos </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría d...
<ul><li>Diseño Clases Mediador </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría de contacto...
 
<ul><li>Profiler Mediator </li></ul><ul><li>Profiler CustomEvents </li></ul><ul><li>Profiler Model </li></ul>
 
<ul><li>Un desarrollador de Flex debe tener claro </li></ul><ul><ul><li>Componentes </li></ul></ul><ul><ul><li>Eventos </l...
 
Upcoming SlideShare
Loading in …5
×

Flex Camp 2008. Ricardo Poblete

476 views

Published on

Presentación realizada en el FlexCamp Chile 2008 respecto de cómo comunicar componentes en Flex. Se muestran diferentes formas, patrones y los conceptos utilizados.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
476
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex Camp 2008. Ricardo Poblete

  1. 2. <ul><li>Ingeniero Civil Informático UdeC. </li></ul><ul><li>Magíster Tecnologías de Información. UTFSM. </li></ul><ul><li>Jefe de Proyectos de desarrollo de aplicaciones Web. Dirección de Tecnologías de Información. UdeC. </li></ul><ul><li>Flex desde 2007 </li></ul>Ricardo Poblete
  2. 3. Agenda <ul><li>¿Por qué este tema? </li></ul><ul><li>Componentes </li></ul><ul><li>Eventos </li></ul><ul><li>Caso ejemplo </li></ul><ul><ul><li>Diferentes formas de diseño </li></ul></ul><ul><ul><li>Performance </li></ul></ul><ul><li>Conclusiones </li></ul>
  3. 5. <ul><li>Compartir una de las primeras diferencias enfrentadas y que es muy recurrente. </li></ul><ul><li>Existe un cambio en la programación de interfaces de usuario: de páginas web a aplicaciones cliente web. </li></ul><ul><li>Es un tema transversal en casi toda aplicación Flex </li></ul>
  4. 6. <ul><li>Experiencia de aplicaciones web </li></ul>
  5. 7. <ul><li>Diferencia básica entre una página y una app.flex </li></ul><ul><ul><li>En una página web, el cliente es Stateless </li></ul></ul><ul><ul><ul><li>El estado de la aplicación está en el servidor </li></ul></ul></ul><ul><ul><ul><li>Cada página es independiente de otra </li></ul></ul></ul><ul><ul><li>En una app. Flex el cliente es Statefull </li></ul></ul><ul><ul><ul><li>El estado de la aplicación está en el cliente </li></ul></ul></ul><ul><ul><ul><li>Con Flex, el cliente tiene cargada la aplicación (o parte de ella &quot;on demand“ </li></ul></ul></ul><ul><li>Por esto, es necesario comunicar las diferentes partes ya instanciadas el cliente Flex. </li></ul>
  6. 9. <ul><li>Flex es considerado un framework basado en componentes (component - based framework) </li></ul><ul><li>Cada elemento visual y no visual es un componente también. </li></ul>
  7. 10. <ul><li>Una aplicación Flex se puede escribir en un solo archivo mxml </li></ul><ul><ul><li>Problemas de mantenimiento, acoplamiento, reusabilidad, etc, tampoco se puede trabajar en equipo. </li></ul></ul><ul><li>Es buena práctica dividir la aplicación en módulos o componentes que realicen tareas específicas. </li></ul><ul><ul><li>Fácil desarrollo ( Trabajo en equipo) </li></ul></ul><ul><ul><li>Mejoras en mantención </li></ul></ul><ul><ul><li>Reusabilidad </li></ul></ul><ul><li>Divide y vencerás </li></ul><ul><ul><li>Crea tus propios componentes. </li></ul></ul><ul><ul><li>Puedes escribirlos en tags mxml o con actionscript. </li></ul></ul>
  8. 12. <ul><li>Flex está hecho con una jerarquia de clases Actionscript </li></ul><ul><li>Todos los componentes visuales derivan de la clase UIComponent </li></ul>
  9. 13. <ul><li>¿Por qué comunicar componentes? </li></ul><ul><ul><li>Necesitamos informar a otro componente que ha ocurrido algo </li></ul></ul><ul><ul><ul><li>Hizo clic en un objeto de la lista y el otro componente debe mostrar el detalle </li></ul></ul></ul><ul><ul><ul><li>Se ha cancelado la operación, entonces deshacer los cambios </li></ul></ul></ul><ul><ul><ul><li>Han llegado los datos de la BD, se debe actualizar la lista </li></ul></ul></ul><ul><ul><ul><li>Etc </li></ul></ul></ul><ul><ul><li>Tienen algo en común </li></ul></ul><ul><ul><ul><li>Trabajan en conjunto para hacer sinergiao dar lógica a la app. </li></ul></ul></ul><ul><ul><ul><li>Comparten información (datos) o trabajan con un conjunto de datos relacionados </li></ul></ul></ul>
  10. 15. <ul><li>La forma común de comunicarse es por medio de EVENTOS que se gatillan durante la ejecución de una aplicación. </li></ul><ul><li>Las aplicaciones Flex están dirigidas por eventos (event-driven). </li></ul><ul><li>Los eventos pueden ser causados por la interacción de un usuario y también por respuestas asincrónicas </li></ul><ul><li>Las clases fundamentales de la arquitectura de Flex tienen definido por defecto eventos fundamentales ( updateComplete, resize, move, creationComplete, etc) </li></ul>
  11. 16. <ul><li>Veamos un componente </li></ul>
  12. 19. <ul><li>En AS3 cada evento se representa mediante un objeto de evento, que es una instancia de la clase Event o de alguna de sus subclases. </li></ul><ul><li>Por ser una clase podemos extenderla. </li></ul><ul><li>Creación de un objeto evento </li></ul><ul><ul><li>Evento:Event = new Event(); </li></ul></ul><ul><li>El objeto event trae consigo propiedades que lo describen </li></ul>
  13. 20. <ul><li>El objeto evento tiene propiedades, entre ellas quien generó el evento (target) y el nombre del evento (type), entre otras </li></ul><ul><ul><li>click </li></ul></ul><ul><ul><li>creationComplete </li></ul></ul><ul><ul><li>itemClick </li></ul></ul><ul><ul><li>Etc </li></ul></ul><ul><li>Podemos crear nuestros propios tipos eventos </li></ul><ul><ul><li>contactoAgregado </li></ul></ul><ul><ul><li>listaEliminada </li></ul></ul><ul><ul><li>etc </li></ul></ul>
  14. 21. <ul><li>Para utilizar eventos necesitamos </li></ul><ul><ul><li>Una instancia de la clase evento </li></ul></ul><ul><ul><ul><li>Eventos de tipos diferentes </li></ul></ul></ul><ul><ul><ul><li>Extender clase evento para mejorarla </li></ul></ul></ul><ul><ul><li>Algo que genere el evento (dispatch) </li></ul></ul><ul><ul><li>Algo que esté “escuchando” el evento (listener) </li></ul></ul><ul><ul><li>Indicar lo que debe suceder cuando ocurra el evento (handler function) </li></ul></ul>
  15. 22. <ul><li>Definir y exponer el evento en el componente </li></ul>Componente expone el evento que puede gatillar con tags de Metadata El contenedor del componente, al instanciarlo, define qué ejecutar cuando el componente gatille el evento
  16. 23. <ul><li>Definir y exponer el evento en el componente (II) </li></ul>Por otro lado, el componente que gatilla el evento Contenedor del evento ejecuta una función cuando detecta el evento
  17. 24. <ul><li>Colocar un detector (listener) de eventos </li></ul>El objeto o componente que desee detectar debe “inscribirse” en la lista de detectores El componente que gatilla el evento siempre lo realiza con un dispatch El componente que detecta (escucha) ejecuta la función definida
  18. 25. <ul><li>Extender la clase evento </li></ul>Hay que crear una clase propia que extienda a la clase Event, heredar las capacidades de la clase Event y sobrescribir el método clone(). UTILIZADAS PARA TRANSPORTAR INFORMACIÓN
  19. 26. <ul><li>Extender la clase evento (II) </li></ul>Para colocar un detector del evento nuevo, es necesario colocar un listener Y por supuesto la correspondiente función handler No olvidar importar la nueva clase Para disparar el evento, es necesario el dispatcher
  20. 27. <ul><li>Comunicación en cualquier sentido </li></ul><ul><ul><li>Costoso debuggin </li></ul></ul><ul><ul><li>Costosa mantención </li></ul></ul>
  21. 28. <ul><li>Muchos eventos transmitiendo datos </li></ul><ul><ul><li>Mismo efecto anterior, pero además </li></ul></ul><ul><ul><li>Mucho mas costoso en memoria </li></ul></ul>
  22. 29. <ul><li>Para mejorar, utilizar el patrón Mediador </li></ul><ul><ul><li>“ The mediator pattern is a software design pattern that provides a unified interface to a set of interfaces in a subsystem.”[wikipedia] </li></ul></ul>
  23. 31. <ul><li>Requerimientos </li></ul><ul><ul><li>Desarrollar una aplicación que permita administrar una lista de contactos básica. </li></ul></ul><ul><ul><li>Cada contacto debe contener el nombre completo, dirección, teléfono y categoría. </li></ul></ul><ul><ul><li>Las categorías deben provenir del componente de categorías establecido en la organización. </li></ul></ul>
  24. 32. <ul><li>Diseño Layout </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categorías
  25. 33. <ul><li>Diseño Clases Mediador </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría de contactos Event: EditarContacto Event: Contacto Aceptado, Cancelado
  26. 34. <ul><li>Diseño Clases eventos extendidos </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría de contactos Editar Contacto Contacto Eliminado
  27. 35. <ul><li>Diseño Clases Mediador </li></ul>Aplicación principal Lista de contactos Detalle de Contacto Categoría de contactos Event: EditarContacto Event: Contacto Aceptado, Cancelado Modelo
  28. 37. <ul><li>Profiler Mediator </li></ul><ul><li>Profiler CustomEvents </li></ul><ul><li>Profiler Model </li></ul>
  29. 39. <ul><li>Un desarrollador de Flex debe tener claro </li></ul><ul><ul><li>Componentes </li></ul></ul><ul><ul><li>Eventos </li></ul></ul><ul><li>Existen diferentes formas de comunicar componentes </li></ul><ul><li>La mejor forma dependerá del tipo de proyecto, cada una tiene pros y contras </li></ul><ul><li>El performance es muy similar en aplicaciones pequeñas </li></ul>

×