[TE6] Patrones de Comportamiento

name: title
class: center, middle
background-image: url(images/rawpixel/jigsaw.jpg)
background-size: cover

# .fancy[[TE6] Patrones de Comportamiento]

### &#183; Observer pattern

Carlos Granell&#183; Universitat Jaume I

EI1039 - Diseño de Software &#183; Sep 2023

???

Jigsaw teamwork concept macro shot
Image credits: [Rawpixel.com](https://www.rawpixel.com/image/678830)

---
class: inverse, center, middle
background-image: url(images/newspaper-carriers.jpg)
background-size: contain

???
Nos suscribrimos para que nos avisen cuando hay algo nuevo, y no estar pendientes de las novedades.

A tribute to daily newspaper carriers
Image credits: [DeseretNews](https://www.deseret.com/opinion/2021/1/10/22213897/tribute-to-daily-newspaper-carriers-paper-boy-route)

---
class: inverse, center, middle

# Observer Pattern

.large[Propósito]

.large[Problema]

.large[Solución]

.large[Estructura]

.large[Aplicabilidad]

---
name: purpose
class: center, middle

# Observer: Propósito

## define un .coldinline[mecanismo de suscripción] para notificar a varios objetos (.coldinline[observadores]) sobre cualquier evento que sucede al objeto que están observando (.coldinline[sujeto])

---
name: problem
# Observer: Problema

### Algunos objetos pueden depender del estado de un objeto "importante"

### No queremos que cada objeto compruebe reiteradamente el estado de ese objeto "importante"

### No queremos que el objeto "importante" notifique a *todos* los objetos *clientes*, estén o no interesados en su estado

---
name: solution
# Observer: Solución

### Un _observer_ define una relación 1:N entre un __Sujeto__ (notificador) y muchos __Observadores__ (suscriptores). Cuando el sujeto cambia, se notifica a los suscriptores

### Un _observer_ separa lo que no cambia (en el Sujeto) de lo variable (Observadores)

### Un _observer_ añade un mecanismo de suscripción al Sujeto

.pull-left[
.large[Sujeto <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M48 128c-17.7 0-32 14.3-32 32s14.3 32 32 32H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H48zm0 192c-17.7 0-32 14.3-32 32s14.3 32 32 32H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H48z"/></svg> notificador o publicador]
]

.pull-right[
.large[Observador <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M48 128c-17.7 0-32 14.3-32 32s14.3 32 32 32H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H48zm0 192c-17.7 0-32 14.3-32 32s14.3 32 32 32H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H48z"/></svg> subscriptor]
]

---
background-image: url(images/DivingDesingPatterns14.png)
background-size: contain

# Observer: Suscripción

???

Image credits: [refactoring.guru](https://refactoring.guru/es/design-patterns/observer)

---
background-image: url(images/DivingDesingPatterns15.png)
background-size: contain

# Observer: Suscripción

???

Image credits: [refactoring.guru](https://refactoring.guru/es/design-patterns/observer)

---
name: structure
class: left, bottom
background-image: url(images/DivingDesingPatterns13.png)
background-size: contain

# Observer: 
# Estructura

???

Image credits: [refactoring.guru](https://refactoring.guru/es/design-patterns/observer)

---
class: left, bottom
background-image: url(images/HeadFirstDesingPatterns04.png)
background-size: contain

???

Una estructura alternativa para el Sujeto es declarar una interfaz y luego implementar un Sujeto Concreto. La relación de composición ocurre entre el Sujeto y el Observador Concreto.

---
name: aplicability
# Observer: Aplicabilidad

---
name: summary

# Resumen

### El patrón Observer...

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> permite que varios objetos (observadores) se _suscriban_ a un objeto (observado)]
 
.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> permite que el objeto observado notifique a los observadores cuando cambia su estado]