Patrons de disseny
En parlarem dels patrons bàsics en els quals es basa el disseny d'interfícies.
Vista d'arbre
La vista d'arbre és un patró en el qual es basen moltes eines. La idea essencial és que hi ha una estructura en forma d'arbre de vistes (també nodes o elements). Cada vista pot contenir altres vistes (contenidors de vistes). Normalment, si una vista no es mostra tampoc ho fan les vistes contingudes.
- Sortida: les vistes són responsables de la seva visualització, i quan es muten es tornen a redibuixar.
- Entrada: les vistes tenen gestors d'entrades en funció de la interacció del teclat o del ratolí.
- Maquetació: l'arbre és responsable de la disposició de les vistes, generant el seu bounding box, que permet la seva maquetació en funció d'algorismes.
Listeners
Els listeners, també anomenats gestors d'esdeveniments, subscriptors o observadors, gestionen els esdeveniments d'entrada. Permeten assignar un gestor quan un esdeveniment concret passa.
Model-View
La separació d'interessos (Separation of Concerns: SoC) ens diu que és millor que àrees de diferents funcionalitats tinguin poc solapament. La primera separació amb sentit seria que la sortida la gestionin les vistes i l'entrada els listeners. Però encara ens faltaria afegir l'aplicació en sí.
Per a interpretar els patrons a continuació utilitzarem tres tipus d'interaccions:
- Comandes: són peticions per a realitzar canvis. No esperen cap resposta.
- Consultes (queries): són peticions per a obtenir valors de l'estat. No realitzen cap canvi.
- Notificacions: són notificacions d'esdeveniments que han passat.
En relació a comandes i consultes, és important comentar el concepte de Command-Query Separation. El que afirma és que cada mètode hauria de ser una ordre que realitzi una acció o una consulta que retorni dades al client, però no totes dues.
El criteris generals que segueixen tots els patrons són:
- El Model no coneix (no depèn de) cap altre component del patró.
- La View és l'únic component que fa referència a aspectes visuals.
MVC
El primer patró que es va utilitzar és MVC (Model-View-Controller).
Aquest patró utilitza Model, View i Controller.
- View: rep notificacions de canvis al Model i notifica el Controller d'esdeveniments de la UI.
- Controller: rep notificacions d'esdeveniments a la View i envia comandes al Model i la View.
- Model: notifica la View i rep consultes seves. També rep comandes i consultes del Controller.
El flux és:
- View (esdeveniment)
- Controller (comanda a Model)
- Model (esdeveniment)
- La View s'actualitza
MVP
Per tal de fer més testable per unitats cada part, apareix el patró MVP, on el Controller es substitueix pel Presenter. Aquest patró fa que totes les interaccions passin pel Presenter, i la View i el Model mai es comuniquen.
El flux és:
- View (esdeveniment)
- Presenter (comanda a Model)
- Model (esdeveniment)
- Presenter (comanda a View)
- La View s'actualitza
MVVM
Aquest patró és similar al MVP, però substitueix el Presenter pel ViewModel. Utilitza la idea de data binding, on els canvis de les dades es transmeten fins a la View a partir del Model mitjançant el ViewModel.
El flux és:
- View (commanda a ViewModel)
- ViewModel (comanda a Model)
- Model (esdeveniment)
- ViewModel (esdeveniment)
- La View s'actualitza
Construcció de la vista
A l'hora de construir l'arbre de vistes tenim dos paradigmes:
- Procedural: el codi indica, pas a pas, com arribar a l'estat desitjat de l'arbre de vistes.
- Declaratiu: el codi representa directament l'arbre de vistes en funció de l'estat actual.
El paradigma procedural consisteix en escriure la seqüència de passos necessària per a convertir l'arbre de vistes anterior al nou, reflectint el nou estat de l'aplicació.
En canvi, el paradigma declaratiu necessita un codi que directament reprodueixi l'arbre de vistes a partir de l'estat. Algunes eines permeten identificar quin subconjunt de l'arbre de vistes cal tornar a generar, sempre que puguem identificar quines vistes s'han vist afectades per la mutació de l'estat.