Event-Driven programming Mediator pattern Ricardo Poblete Jara Flex, Actionscript3 Ricardo Poblete Jara 15/04/2008 – 16/04...
Agenda <ul><li>Objetivos </li></ul><ul><li>Razones </li></ul><ul><li>Objeto “Event”. A bucear. </li></ul><ul><li>Formas de...
Razones
Razones <ul><li>¿Por qué? </li></ul><ul><ul><li>Han ocurrido problemas al vincular directamente un objeto </li></ul></ul><...
Objetivos
Objetivos <ul><li>General </li></ul><ul><ul><li>Conceptualizar y comprender eventos en AS3 para fabricar componentes de ba...
Objeto “Event”  A bucear
Objeto “Event”. El piquero <ul><li>En AS3 cada evento se representa mediante un objeto de evento, que es una instancia de ...
Eventos <ul><li>En lenguajes OO, si un objeto necesita notificar a un objeto B que algo importante ha sucedido, esto se re...
Eventos (II) Patrón Observador
Eventos (III) <ul><li>AS3 implementa este patron de diseño usando el modelo de eventos. Los objetos lanzan eventos a otros...
Eventos (IV) <ul><li>En una aplicación MXMl, solo debemos especificar el nombre del evento y la función que se ejecutara a...
Flujo del evento <ul><li>Cuando el “event listener” detecta el evento, llama a la función (handler function), esta recibe ...
Flujo del evento (II) <ul><li>Ciclo de vida del evento </li></ul><ul><ul><li>Fase captura </li></ul></ul><ul><ul><ul><li>D...
Flujo del evento (III) <ul><li>Ciclo de vida del evento </li></ul><ul><ul><li>Fase propagacion (Bubbling) </li></ul></ul><...
Flujo del evento (V)
Flujo del evento (VI) <ul><li>Ejercicio </li></ul><ul><ul><li>Comprobar fases de eventos </li></ul></ul><ul><ul><li>Revisa...
Estructura básica de un listener <ul><li>Definir el listener y luego qué hará al detectar o escuchar el evento. </li></ul>...
Estructura básica de un listener (II) <ul><li>Definir el nombre de la función por el nombre que se desee usar (es necesari...
Flujo del evento (VII) <ul><li>Ejercicio </li></ul><ul><ul><li>Comprobar fases de eventos </li></ul></ul><ul><ul><li>Revis...
Distribuir eventos (dispatch) <ul><li>El método dispatchEvent() se utiliza para distribuir (gatillar) un objeto de evento ...
UFFFF!!! <ul><li>Tanta teoría, vamos al grano ;-) </li></ul><ul><li>En resumen, se utilizaran </li></ul><ul><ul><li>Dispat...
Formas de eventos
Formas de eventos <ul><li>Definir y exponer el evento en el componente </li></ul>Componente expone el evento que puede gat...
Formas de eventos (II) <ul><li>Definir y exponer el evento en el componente (II) </li></ul>Componente gatilla el evento Ta...
Formas de eventos (III) <ul><li>Colocar un detector (listener) de eventos </li></ul>El objeto o componente que desee detec...
Formas de eventos (IV) <ul><li>Extender la clase evento </li></ul>Hay que crear una clase propia que extienda a la clase E...
Formas de eventos (V) <ul><li>Extender la clase evento (II) </li></ul>Para colocar un detector del evento nuevo, es necesa...
Práctica
Ejercicio_03
Práctica - Ejercicio_03 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>El usuario debe operar dos números, para ...
Practica - Ejercicio_03 (II) Debe verse así
Práctica - Ejercicio_03 (III) Ejercicio_03.mxml Ejercicio_03_seleccion_operador.mxml Ejercicio_03.mxml
Práctica - Ejercicio_03 (IV) <ul><ul><li>La idea es la siguiente </li></ul></ul><ul><ul><ul><li>EL componente debe ser con...
Práctica - Ejercicio_03 (V) Paso 1: ingresar valores Paso 2: seleccionar operación Paso 3: mostar resultado Componente ins...
Práctica - Ejercicio_03 (VI) <ul><ul><li>Ejercicio_03 </li></ul></ul><ul><ul><ul><li>Componente define y gatilla su propio...
Ejercicio_04
Practica - Ejercicio_04 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Es necesario llevar un registro de la can...
Practica - Ejercicio_04 (II) Debe verse así
Practica - Ejercicio_04 (III) <ul><li>Crear un nuevo componente </li></ul><ul><li>El nuevo componente debe escuchar el eve...
Practica - Ejercicio_04 (IV) <ul><ul><li>Ejercicio_04 </li></ul></ul><ul><ul><ul><li>Un nuevo componente captura que se ha...
Ejercicio_05
Practica - Ejercicio_05 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Además de llevar la cantidad de operacion...
Practica - Ejercicio_05 (II) Debe verse así
Practica - Ejercicio_05 (III) <ul><li>Para completar este ejercicio se debe: </li></ul><ul><ul><li>Crear el componente con...
Practica - Ejercicio_05 (IV) <ul><ul><li>Ejercicio_05 </li></ul></ul><ul><ul><ul><li>Un nuevo componente captura un evento...
Ejercicio_06
Practica - Ejercicio_06 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Además de llevar la cantidad de operacion...
Practica - Ejercicio_06 (II) Debe verse así
Practica - Ejercicio_06 (III) <ul><li>Para obtener el valor debemos crear una clase que sea capaz de obtener datos para in...
Practica - Ejercicio_06 (III) <ul><li>Crear el componente con el Datagrid </li></ul><ul><li>Crear la nueva clase evento ex...
Practica - Ejercicio_06 (IV) <ul><ul><li>Ejercicio_06 </li></ul></ul><ul><ul><ul><li>Un nuevo componente muestra los datos...
Patrón de diseño Mediador
Patrón Mediador <ul><li>Cuando los componentes se comunican entre si, mientras mas componentes hay, mas compleja es la coo...
Patrón Mediador  El problema a resolver 1 2 5 3 4 6 7 8
Patrón Mediador (II) <ul><li>Intención </li></ul><ul><ul><li>Definir un objeto que encapsule como interactúa un conjunto d...
Patrón Mediador (III) [Mediator] Patron de diseño. http://es.wikipedia.org/wiki/Mediator_%28patr%C3%B3n_de_dise%C3%B1o%29
Patrón Mediador (IV) <ul><li>Participantes  </li></ul><ul><ul><li>Mediator ( mediador ): define una interface para comunic...
Patrón Mediador (V) <ul><li>Consecuencias  El patrón Mediator tiene los siguientes beneficios y desventajas: </li></ul><ul...
Patrón Mediador (VI) <ul><li>Resumen </li></ul><ul><ul><li>EL patrón mediador es un patrón de diseño que provee una interf...
Ejercicio_07
Práctica - Ejercicio_07 <ul><li>Ejercicio 07 </li></ul><ul><ul><li>Diseñar y fabricar el ejercicio 6 para que se convierta...
Práctica - Ejercicio_07 <ul><li>Situación componentes </li></ul>Componente vs Eventos Listen Dispatch Ejercicio_06 realiza...
Conclusión <ul><li>Ni piense en comenzar a construir la interfaz de usuario, a menos que tengamos identificados los mediad...
FIN
Upcoming SlideShare
Loading in …5
×

Event Programing & Driven Mediator Pattern

1,706 views

Published on

Presenta conceptos sobre eventos con flex y actionscript 3, ver como es posible comunicar ordenadamente con el patron de mediador

Published in: Education, Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,706
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Event Programing & Driven Mediator Pattern

  1. 1. Event-Driven programming Mediator pattern Ricardo Poblete Jara Flex, Actionscript3 Ricardo Poblete Jara 15/04/2008 – 16/04/2008
  2. 2. Agenda <ul><li>Objetivos </li></ul><ul><li>Razones </li></ul><ul><li>Objeto “Event”. A bucear. </li></ul><ul><li>Formas de eventos </li></ul><ul><li>Práctica </li></ul><ul><li>Patrón de diseño (Mediator) </li></ul>
  3. 3. Razones
  4. 4. Razones <ul><li>¿Por qué? </li></ul><ul><ul><li>Han ocurrido problemas al vincular directamente un objeto </li></ul></ul><ul><ul><ul><li>Sobre todo cuando aún no está instanciado </li></ul></ul></ul><ul><ul><li>Necesitamos hacer componentes con bajo acoplamiento </li></ul></ul><ul><ul><ul><li>Es necesario conocer cuando un componente que me interesa hizo algo </li></ul></ul></ul><ul><ul><ul><li>No necesito invocar directamente al componente </li></ul></ul></ul><ul><li>¿Quiénes participan? </li></ul><ul><ul><li>Componentes y clase event </li></ul></ul>
  5. 5. Objetivos
  6. 6. Objetivos <ul><li>General </li></ul><ul><ul><li>Conceptualizar y comprender eventos en AS3 para fabricar componentes de bajo acoplamiento. </li></ul></ul><ul><li>Específico </li></ul><ul><ul><li>Capacidad de conceptualizar componentes independientes </li></ul></ul><ul><ul><li>Fabricar eventos personalizables </li></ul></ul><ul><ul><li>Coordinar y comunicar instancias de componentes </li></ul></ul>
  7. 7. Objeto “Event” A bucear
  8. 8. Objeto “Event”. El piquero <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>Creacion de un evento </li></ul><ul><ul><li>Evento:Event = new Event(); </li></ul></ul>
  9. 9. Eventos <ul><li>En lenguajes OO, si un objeto necesita notificar a un objeto B que algo importante ha sucedido, esto se realiza usando un patrón de diseño llamado “Observador” </li></ul><ul><ul><ul><ul><li>El patrón Observador define una dependencia del tipo uno-a-muchos entre objetos, de manera que cuando uno de los objetos cambia su estado, el observador se encarga de notificar este cambio a todos los otros dependientes. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>El objetivo de este patrón es desacoplar la clase de los objetos clientes del objeto, aumentando la modularidad del lenguaje, así como evitar bucles de actualización </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Este patrón suele observarse en los marcos de interfaces gráficas orientados a objetos, en los que la forma de capturar los eventos es suscribir 'listeners' a los objetos que pueden disparar eventos. </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Observer (patrón de diseño). http://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o) </li></ul></ul></ul></ul></ul>
  10. 10. Eventos (II) Patrón Observador
  11. 11. Eventos (III) <ul><li>AS3 implementa este patron de diseño usando el modelo de eventos. Los objetos lanzan eventos a otros objetos. </li></ul><ul><li>Los eventos de sistema son lanzados por el AVM (ActionScript Virtual Machine), mientras los otros son lanzados como resultado de las interacciones de usuario con la aplicación, como el click en un boton o el movimiento del mouse </li></ul><ul><li>Por ejemplo </li></ul><ul><ul><li>Cuando el flash player termina de crear un objeto, lanza el evento creationComplete. </li></ul></ul><ul><ul><li>Clases pueden lanzar eventos de acuerdo a la logica del negocio en la aplicación </li></ul></ul><ul><ul><li>Objetos de la aplicación pueden enviar eventos personalizados a otro objeto. </li></ul></ul>
  12. 12. Eventos (IV) <ul><li>En una aplicación MXMl, solo debemos especificar el nombre del evento y la función que se ejecutara al ocurrir el evento (handler function) como atributo del componente, sin preocuparse como se hace en código AS3. </li></ul><ul><ul><ul><ul><li><mx: button click=“agregar()” /> </li></ul></ul></ul></ul><ul><li>Pero todos los eventos en Flex son subclases de la clase flash. events.Event, y en un codigo As3 podemos registrar “listener” que escuchen o detecten los eventos ademas de especificar la funcion handler. </li></ul><ul><ul><ul><ul><li>addEventlistener(Event.ENTERFRAME, onEnteringFrame); </li></ul></ul></ul></ul>
  13. 13. Flujo del evento <ul><li>Cuando el “event listener” detecta el evento, llama a la función (handler function), esta recibe un objeto evento como parámetro, el cual contiene los atributos del evento, siendo el mas importante el event.target. </li></ul><ul><li>Todos los eventos son generados por el Flash Player son iniciados en el nivel de Stage (Escenario) y fluye hacia el componente target (capturando todos los objetos), luego alcanza el target y finalmente el evento se propaga o burbujea “Bubble” hacia los padres. </li></ul><ul><li>Entonces, cuando hacemos clic en un botón, podemos decir que el “event target” es el botón. </li></ul><ul><li>Si el botón esta dentro de un panel, el evento fluirá desde el stage al panel y luego al botón y viceversa. </li></ul>
  14. 14. Flujo del evento (II) <ul><li>Ciclo de vida del evento </li></ul><ul><ul><li>Fase captura </li></ul></ul><ul><ul><ul><li>Durante esta fase, el Flash Player hace una primera pasada chequendo todos los objetos desde la raíz hasta el componente target (destino), para ver si algún componente padre podría estar interesado en procesar el evento. Por defecto, los eventos son ignorados por los padres del target. </li></ul></ul></ul><ul><ul><li>Fase target (destino) </li></ul></ul><ul><ul><ul><li>En esta fase, se setean las propiedades del objeto event y todos los eventos registrados para este target obtendrán este evento </li></ul></ul></ul>
  15. 15. Flujo del evento (III) <ul><li>Ciclo de vida del evento </li></ul><ul><ul><li>Fase propagacion (Bubbling) </li></ul></ul><ul><ul><ul><li>Finalmente el evento fluye hacia atrás desde el target hasta la raiz. Para notificar a los interesados identificados en la fase de captura. </li></ul></ul></ul><ul><ul><ul><ul><li>No todos los eventos tienen la fase de propagacion </li></ul></ul></ul></ul><ul><li>Las tres fases descritas no aplican para los eventos definidos por el usuario porque Flash Player 9 no sabe o conoce las relaciones padre-hijo de los objetos eventos definidos por el usuario. </li></ul>
  16. 16. Flujo del evento (V)
  17. 17. Flujo del evento (VI) <ul><li>Ejercicio </li></ul><ul><ul><li>Comprobar fases de eventos </li></ul></ul><ul><ul><li>Revisar y ejecutar el archivo </li></ul></ul><ul><ul><ul><li>Ejercicio_01.mxml </li></ul></ul></ul>
  18. 18. Estructura básica de un listener <ul><li>Definir el listener y luego qué hará al detectar o escuchar el evento. </li></ul><ul><li>Detectar el evento </li></ul><ul><li>eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse); </li></ul><ul><li>Función, que es la forma de especificar las acciones que se realizarán como respuesta al evento. </li></ul><ul><ul><ul><li>function eventResponse(eventObject:EventType):void </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>// las acciones realizadas como respuesta al evento van aquí. </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  19. 19. Estructura básica de un listener (II) <ul><li>Definir el nombre de la función por el nombre que se desee usar (es necesario realizar este cambio en dos lugares, donde en el código aparece eventResponse ). </li></ul><ul><li>Seguidamente, hay que especificar el nombre de clase adecuado para el objeto de evento distribuido por el evento que se desea detectar ( EventType en el código) y hay que indicar la constante apropiada para el evento específico ( EVENT_NAME en el listado). </li></ul><ul><li>En tercer lugar, es necesario llamar al método addEventListener() en el objeto que distribuirá el evento ( eventTarget en este código). </li></ul><ul><li>Opcionalmente, se puede cambiar el nombre de la variable utilizada como parámetro de la función ( eventObject en el código). </li></ul>
  20. 20. Flujo del evento (VII) <ul><li>Ejercicio </li></ul><ul><ul><li>Comprobar fases de eventos </li></ul></ul><ul><ul><li>Revisar y ejecutar el archivo </li></ul></ul><ul><ul><ul><li>Ejercicio_02.mxml </li></ul></ul></ul>Generalmente en la fase de captura los listener de los padres del target no son llamados, pero existe una versión del método addEventListener() que puede hacer la llamada a los listener en la fase de captura (recordemos que se hace en la fase de propagación). Para activar la llamada en la fase de captura se debe agregar un tercer argumento al método: myPanel.addEventListener(MouseEvent.CLICK, panelClickHandler, true); *No hay forma de hacerlo en MXML
  21. 21. Distribuir eventos (dispatch) <ul><li>El método dispatchEvent() se utiliza para distribuir (gatillar) un objeto de evento personalizado en el flujo del evento. </li></ul><ul><ul><li>Este método sólo acepta un parámetro, consistente en una referencia a un objeto de evento, que debe ser una instancia de la clase Event o una subclase de ésta. Una vez distribuido, la propiedad target del objeto de evento se establece en el objeto en el que se llamó a dispatchEvent(). </li></ul></ul><ul><ul><li>dispatchEvent(new Event) </li></ul></ul>
  22. 22. UFFFF!!! <ul><li>Tanta teoría, vamos al grano ;-) </li></ul><ul><li>En resumen, se utilizaran </li></ul><ul><ul><li>Dispatcher: Objeto que dispara el evento. </li></ul></ul><ul><ul><li>Event object: Objeto creado de acuerdo al tipo de evento que tiene información que puede ser compartida </li></ul></ul><ul><ul><li>Listener: Objeto que escucha y ejecuta una acción cuando detecta el evento </li></ul></ul>
  23. 23. Formas de eventos
  24. 24. Formas de eventos <ul><li>Definir y exponer el evento en el componente </li></ul>Componente expone el evento que puede gatillar El contenedor del componente, al instanciarlo, define qué ejecutar cuando el componente gatille el evento Contenedor del evento ejecuta una función cuando detecta el evento
  25. 25. Formas de eventos (II) <ul><li>Definir y exponer el evento en el componente (II) </li></ul>Componente gatilla el evento También así
  26. 26. Formas de eventos (III) <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
  27. 27. Formas de eventos (IV) <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 sobreescribir el método clone().
  28. 28. Formas de eventos (V) <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 funcion handler No olvidar importar la nueva clase Para disparar el evento, es necesario el dispatcher
  29. 29. Práctica
  30. 30. Ejercicio_03
  31. 31. Práctica - Ejercicio_03 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>El usuario debe operar dos números, para ello ingresarlos, seleccionar el tipo de operación a realizar y mostrar el resultado en el campo de resultado. </li></ul></ul></ul><ul><ul><li>Fabricar una aplicación bajo las siguientes condiciones: </li></ul></ul><ul><ul><ul><li>Main: Contiene 3 campos de texto ( TextInput ) , 2 para ingresar los valores a operar y uno para el resultado </li></ul></ul></ul><ul><ul><ul><li>Componente: Contiene el operador en un combobox. </li></ul></ul></ul>
  32. 32. Practica - Ejercicio_03 (II) Debe verse así
  33. 33. Práctica - Ejercicio_03 (III) Ejercicio_03.mxml Ejercicio_03_seleccion_operador.mxml Ejercicio_03.mxml
  34. 34. Práctica - Ejercicio_03 (IV) <ul><ul><li>La idea es la siguiente </li></ul></ul><ul><ul><ul><li>EL componente debe ser contenido por la aplicación principal (main) </li></ul></ul></ul><ul><ul><ul><li>El componente debe tener un evento que llamaremos “realizarOperacion” que será expuesto para que la aplicación que lo contiene pueda escucharlo. </li></ul></ul></ul><ul><ul><ul><li>En main, al instanciar el componente debemos colocar la función que se ejecutará al detectar o escuchar el evento (handling function). </li></ul></ul></ul><ul><ul><ul><li>En el componente, cada vez que se cierre, el (evento close) el combobox debe gatillar el evento que expone, “realizarOperacion”. </li></ul></ul></ul><ul><ul><ul><li>En main, la función (handler) que escucha el evento, debe tomar el valor directamente del combobox que está en el componente, jerárquicamente hacia abajo (valor = componente.combobox.selecteditem.valor), para saber que es lo que está seleccionado, una vez conocido debe realizar la operación y colocar el resultado en el campo de resultado </li></ul></ul></ul><ul><ul><ul><li>Hay que realizar validaciones básicas como que no se realicen operaciones sobre algo que no sea número. </li></ul></ul></ul>
  35. 35. Práctica - Ejercicio_03 (V) Paso 1: ingresar valores Paso 2: seleccionar operación Paso 3: mostar resultado Componente instanciado y main está preparado para gatillar una función cuando escuche el evento Combobox a la espera de del evento close, una vez ejecutado, se gatilla una funcion propia que gatilla el evento “realizarOperacion” Main detecta el evnto gatillado por el componente y obtiene el valor del combobox, evalua la operación y realiza lo indicado
  36. 36. Práctica - Ejercicio_03 (VI) <ul><ul><li>Ejercicio_03 </li></ul></ul><ul><ul><ul><li>Componente define y gatilla su propio evento y otro lo instancia y lo escucha. </li></ul></ul></ul><ul><ul><li>Analizar ventajas y/o desventajas de esta solución. </li></ul></ul>
  37. 37. Ejercicio_04
  38. 38. Practica - Ejercicio_04 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Es necesario llevar un registro de la cantidad de operaciones que se han realizado </li></ul></ul></ul><ul><ul><li>Condiciones </li></ul></ul><ul><ul><ul><li>El elemento que cuenta las operaciones debe ser un componente que debe estar contenido en el componente que tiene las operaciones. </li></ul></ul></ul><ul><ul><ul><li>El componente debe ser un canvas con un textipunt que muestre la cuenta </li></ul></ul></ul>
  39. 39. Practica - Ejercicio_04 (II) Debe verse así
  40. 40. Practica - Ejercicio_04 (III) <ul><li>Crear un nuevo componente </li></ul><ul><li>El nuevo componente debe escuchar el evento “sumaRealizadaEvent” </li></ul><ul><li>Debe estar contenido por el componente de seleccionar operador </li></ul><ul><li>El componente que realiza la suma debe avisar (dispatch) el evento “sumaRealizadaEvent” </li></ul>
  41. 41. Practica - Ejercicio_04 (IV) <ul><ul><li>Ejercicio_04 </li></ul></ul><ul><ul><ul><li>Un nuevo componente captura que se ha realizado una nueva operación. </li></ul></ul></ul><ul><ul><li>Analizar ventajas y/o desventajas de esta solución. </li></ul></ul>
  42. 42. Ejercicio_05
  43. 43. Practica - Ejercicio_05 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Además de llevar la cantidad de operaciones realizadas, es necesario tener un elemento que nos muestre que se ha realizado una operacion </li></ul></ul></ul><ul><ul><li>Condiciones </li></ul></ul><ul><ul><ul><li>El elemento debe ser otro componente basado en canvas, que se encuentra contenido en el main y que tiene dentro un textarea. </li></ul></ul></ul><ul><ul><ul><li>Cada vez que se realice una operación (suma de la cantidad de operaciones realizadas) el texarea debe mostrar el texto “ Se ha realizado una operacion. ”, uno abajo del otro. </li></ul></ul></ul><ul><ul><ul><li>El evento debe ser una extension de la clase event. </li></ul></ul></ul>
  44. 44. Practica - Ejercicio_05 (II) Debe verse así
  45. 45. Practica - Ejercicio_05 (III) <ul><li>Para completar este ejercicio se debe: </li></ul><ul><ul><li>Crear el componente con el texarea </li></ul></ul><ul><ul><li>Crear una evento personalizado que extiende la clase event </li></ul></ul><ul><ul><li>Colocar el nuevo componente en el main </li></ul></ul><ul><ul><li>Crear un listener en el componente que tiene el texarea </li></ul></ul><ul><ul><li>Disparar el evento nuevo en el momento que se realiza la suma del total de operaciones realizadas </li></ul></ul>
  46. 46. Practica - Ejercicio_05 (IV) <ul><ul><li>Ejercicio_05 </li></ul></ul><ul><ul><ul><li>Un nuevo componente captura un evento creado por nosotros para comunicar al usuario que se ha realizado una operación. </li></ul></ul></ul><ul><ul><li>Analizar ventajas y/o desventajas de esta solución. </li></ul></ul>
  47. 47. Ejercicio_06
  48. 48. Practica - Ejercicio_06 <ul><ul><li>Funcionalidad </li></ul></ul><ul><ul><ul><li>Además de llevar la cantidad de operaciones realizadas, es necesario llevar una lista de los resultados que se han obtenido en cada operación. </li></ul></ul></ul><ul><ul><li>Condiciones </li></ul></ul><ul><ul><ul><li>Debe existir un componente con una la lista, este debe ser un Datagrid con una sola columna. </li></ul></ul></ul><ul><ul><ul><li>Cada vez que se realice una operación (suma, resta, multiplicación) se debe guardar el resultado en la pila. </li></ul></ul></ul>
  49. 49. Practica - Ejercicio_06 (II) Debe verse así
  50. 50. Practica - Ejercicio_06 (III) <ul><li>Para obtener el valor debemos crear una clase que sea capaz de obtener datos para intercambiar. </li></ul>
  51. 51. Practica - Ejercicio_06 (III) <ul><li>Crear el componente con el Datagrid </li></ul><ul><li>Crear la nueva clase evento extendida que contenga datos </li></ul><ul><li>Colocar el listener en el componente creado en el creationComplete </li></ul><ul><li>Disparar el evento desde el que tiene el resultado de la operación </li></ul>
  52. 52. Practica - Ejercicio_06 (IV) <ul><ul><li>Ejercicio_06 </li></ul></ul><ul><ul><ul><li>Un nuevo componente muestra los datos obtenidos desde un evento. </li></ul></ul></ul><ul><ul><ul><li>Los datos fueron entregados al evento en el momento de su instancia </li></ul></ul></ul><ul><ul><li>Analizar ventajas y/o desventajas de esta solución. </li></ul></ul><ul><ul><li>Y esto puede crecer y crecer.. Como diseñamos entonces para que perdamos el control? </li></ul></ul>
  53. 53. Patrón de diseño Mediador
  54. 54. Patrón Mediador <ul><li>Cuando los componentes se comunican entre si, mientras mas componentes hay, mas compleja es la coordinación entre ellos. </li></ul><ul><li>El problema de coordinación y orden entre componentes está mas que resuelto en OO. </li></ul>
  55. 55. Patrón Mediador El problema a resolver 1 2 5 3 4 6 7 8
  56. 56. Patrón Mediador (II) <ul><li>Intención </li></ul><ul><ul><li>Definir un objeto que encapsule como interactúa un conjunto de objetos. </li></ul></ul><ul><li>Motivacion </li></ul><ul><ul><li>Cuando muchos objetos interactúan con otros objetos, se puede formar una estructura muy compleja, con objetos con muchas conexiones con otros objetos. En un caso extremo cada objeto puede conocer a todos los demás objetos. Para evitar esto el patrón Mediator encapsula el comportamiento de todo un conjunto de objetos en un solo objeto. </li></ul></ul><ul><li>Aplicabilidad </li></ul><ul><ul><li>Un conjunto grande de objetos se comunica de una forma bien definida, pero compleja. </li></ul></ul><ul><ul><li>Reusar un objeto se hace difícil por que se relaciona con muchos objetos. </li></ul></ul><ul><ul><li>El comportamiento de muchos objetos que esta distribuido entre varias clases, puede resumirse en una o varias por subclasificación. </li></ul></ul>[Mediator] Patron de diseño. http://es.wikipedia.org/wiki/Mediator_%28patr%C3%B3n_de_dise%C3%B1o%29
  57. 57. Patrón Mediador (III) [Mediator] Patron de diseño. http://es.wikipedia.org/wiki/Mediator_%28patr%C3%B3n_de_dise%C3%B1o%29
  58. 58. Patrón Mediador (IV) <ul><li>Participantes </li></ul><ul><ul><li>Mediator ( mediador ): define una interface para comunicarse con los objetos colegas. </li></ul></ul><ul><ul><li>ConcreteMediator (&quot;mediador concreto&quot;): Implementa el comportamiento cooperativo entre los colegas (como se comunican entre ellos). Además los conoce y mantiene. </li></ul></ul><ul><ul><li>Colleagues (&quot;colegas&quot;): Cada colega conoce su mediador, y usa a este para comunicarse con otros colegas. </li></ul></ul><ul><li>Colaboraciones </li></ul><ul><ul><li>Los colegas envían y reciben requerimientos (requests) de un objeto mediador. El mediador implementa como se comunican los colegas </li></ul></ul>[Mediator] Patron de diseño. http://es.wikipedia.org/wiki/Mediator_%28patr%C3%B3n_de_dise%C3%B1o%29
  59. 59. Patrón Mediador (V) <ul><li>Consecuencias El patrón Mediator tiene los siguientes beneficios y desventajas: </li></ul><ul><ul><li>Desacopla a los colegas: el patrón Mediator promueve bajar el acoplamiento entre colegas. Se puede variar y rehusar colegas y mediadores independientemente </li></ul></ul><ul><ul><li>Simplifica la comunicación entre objetos: Los objetos que se comunican de la forma &quot;muchos a muchos&quot; puede ser remplazada por una forma &quot;uno a muchos&quot; que es menos compleja y más elegante. Además esta forma de comunicación es más fácil de entender. </li></ul></ul><ul><ul><li>Abstrae como los objetos cooperan: Haciendo a la mediación un concepto independiente y encapsulándolo en un objeto permite enfocar como los objetos interactúan. Esto ayuda a clarificar como los objetos se relacionan en un sistema. </li></ul></ul><ul><ul><li>Centraliza el control: El mediador es el que se encarga de comunicar a los colegas, este puede ser muy complejo, difícil de entender y modificar </li></ul></ul>[Mediator] Patron de diseño. http://es.wikipedia.org/wiki/Mediator_%28patr%C3%B3n_de_dise%C3%B1o%29
  60. 60. Patrón Mediador (VI) <ul><li>Resumen </li></ul><ul><ul><li>EL patrón mediador es un patrón de diseño que provee una interfase unificada para un set de interfaces en un subsistema. </li></ul></ul>
  61. 61. Ejercicio_07
  62. 62. Práctica - Ejercicio_07 <ul><li>Ejercicio 07 </li></ul><ul><ul><li>Diseñar y fabricar el ejercicio 6 para que se convierta el un programa diseñado con el patrón mediador. Fabricar una aplicación bajo las siguientes condiciones: </li></ul></ul>
  63. 63. Práctica - Ejercicio_07 <ul><li>Situación componentes </li></ul>Componente vs Eventos Listen Dispatch Ejercicio_06 realizarOperacion sumaRealizadaEvent ClaseEventoExtendidaConDatos Ejercicio_06_seleccion_operador realizarOperacion Ejercicio_06_total_operaciones sumaRealizadaEvent ClaseEventoExtendida Ejercicio_06_DetectorEventos ClaseEventoExtendida Ejercicio_06_ListadoResultados ClaseEventoExtendidaConDatos
  64. 64. Conclusión <ul><li>Ni piense en comenzar a construir la interfaz de usuario, a menos que tengamos identificados los mediadores, componentes reusables y TODA la comunicación, por medio de eventos, entre ellos. </li></ul>
  65. 65. FIN

×