Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flex Camp 2008. Ricardo Poblete

643 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
  • Be the first to comment

  • Be the first to like this

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>

×