SlideShare una empresa de Scribd logo
Model-View-Controller
 La UI de una aplicación está sujeta a muchos cambios:
 Cambio de UI para diferentes usuarios
 Los cambios en la UI deben ser fáciles aún en runtime
 Diferentes “look and feel ” no deben afectar el núcleo
funcional
 La misma información puede mostrarse en ventanas
diferentes
 Los cambios en los datos subyacentes, deben
reflejarse
inmediatamente en todas las vistas
 Conviene separar: procesamiento, entradas y salidas
Model-View-Controller (MVC)
 MVC divide una aplicación UI en:
 Modelo: Contiene el núcleo funcional y datos
 Vista: Muestra información al usuario
 Controlador: Maneja las entradas del usuario
 Vistas+Controladores = UI
 Mecanismo de “Change-Propagation” : Único link
entre
Modelo e UI.
La “tríada” de objetos MVC
Controller
View
Model
Output
Input
UI
Dinámica del MVC
C
V
M
1. Una entrada del
usuario
es enviada por el SO
al controlador
apropiado
2. El controlador puede
requerir a la Vista que
“tenga” el foco del
evento.
Dinámica del MVC
C
V
M
3. Controlador requiere
métodos del Modelo
para cambiar su
estado
4. Modelo cambia su
estado interno
Dinámica del MVC
C
V
M
5. Modelo notifica a todas
las Vistas dependientes
que hay datos que se
modificaron
6. Vistas requieren del
Modelo los valores de
los
datos actuales.
Dinámica del MVC
C
V
M
7. Modelo notifica a
todos
los Controladores
dependientes que hay
datos que cambiaron.
8. Controlador requiere
del
Modelo los valores
actuales de los datos.
Dinámica del MVC
C
V
M
9. Controlador informa a
las Vistas si se
deshabilitan algunos
elementos.
10. Vistas requieren
redibujado
Patrón Observer
 MVC es un patrón que puede ser expresado como una
combinación de otros patrones.
 La interacción Modelo-Vista es generalmente descripta
usando el patrón Observer:
 Define una dependencia uno a muchos entre objetos,
de forma tal que cuando uno de ellos (sujeto
Observable) cambia su estado, todos los que
dependen
de éste (Observers) son notificados y actualizados
automáticamente.
Patrón Observer
Observers
Un sujeto puede tener cualquier cantidad de observadores
dependientes. Todos los observadores son notificados cuando
el sujeto experimenta un cambio en su estado. En respuesta a
ello cada observador interroga al sujeto para sincronizar su
estado con el de éste.
Java: Observer/Observable
 java.util.Observable (Subject): Cualquier clase que desee
ser observada debe extender esta clase
 métodos para add/delete Observers
 métodos para notify todos los Observers de un
cambio
(para indicar que hubo un cambio:setchanged)
Use Vector para almacenar las referencias a los
Observers
 java.util.Observer (interface) debe ser implementada
por
cualquier clase que quiera actuar como Observer.
 update() en respuesta a notifyObserver()
 Modelo de delegación de eventos: la fuente de eventos
Ejemplo
// Un sujeto a observar !
public class ConcreteSubject extends Observable {
private String name;
private float price;
public ConcreteSubject(String n, float p) {
name = n;
price = p;
System.out.println("ConcreteSubject creado: " + name + " a
"+ price);}
public setPrice(float p){price=p;//idem para setName
setChanged();//flag para indicar el cambio en Observable
notifyObservers(new Float(price));
} }
Ejemplo
// An observer of price changes. (Idem para observar nombre)
public class PriceObserver implements Observer {
private float price;
public PriceObserver() {price = 0;
System.out.println("PriceObserver creado: Precio es " + price);}
public void update(Observable obj, Object arg) {
if (arg instanceof Float) {price = ((Float)arg).floatValue();
System.out.println("PriceObserver: Precio cambia a " +
price);}}
Ejemplo
//Test
public class TestObservers {
public static void main(String args[]) {
// Create the Subject and Observers.
ConcreteSubject s = new ConcreteSubject("Corn Pops", 1.29f);
PriceObserver priceObs = new PriceObserver();
s.addObserver(priceObs);//registro del observer con Observable
s.setPrice(4.57f);
}}
Ejemplo
Salida del programa Test
ConcreteSubject creado: Corn Pops a 1.29
PriceObserver creado: Precio es 0.0
PriceObserver: Precio cambia a 4.57
MVC y Swing
 Swing usa una arquitectura similar a MVC, llamada
Model-Delegate, muy difícil crear un controlador
genérico
que no conozca los datos específico de una vista.
 Colapsan Vista y Controlador (UI) en un único objeto
(UI delegate, puesto que la UI se delega a este objeto).
 Se pueden usar múltiples vistas de un mismo modelo.
 Componentes pueden compartir un mismo modelo.
(JScrollBar, JSlider, ProgressBar comparten el
BoundedRangeModel), permitiendo la conectividad
automática entre componentes.
MVC y Swing
Component UI-delegate
View
Model
Controller
MVC y Swing
MVC y Swing
Modelos en Swing
 En Swing muchos de los modelos son interfaces
 Ej.: ButtonModel, ListModel, TableModel
 Usualmente existe un modelo “por defecto” que se
asocia
automáticamente con un componente
 DefaultButtonModel implementa ButtonModel
 Muchas aplicaciones no necesitan preocuparse por
ellos
Modelos en Swing
 Casi todos los componentes proveen el API del
modelo
directamente. El componente puede ser manipulado
sin
interactuar con el modelo para nada.
//Ejemplo de la clase JSlider
public int getValue() {
return getModel().getValue();
}
//Podemos usar lo siguiente y evitar el modelo
JSlider slider = new JSlider();
int value = slider.getValue();
Views & Controllers - Swing
 En Swing la expresión “look and feel” (L&F) es común
 Look (apariencia) es la Vista
 Feel (comportamiento) es el Controlador
 Combinar la Vista y el Controlador permite que
que el L&F de un componente sea tratado como una
unidad y por tanto facilita los cambios en la UI.
 Conocido como pluggable look & feel (PLAF), se
puede cambiar la representación visual en tiempo de
ejecución
PLAF
PLAF
 Para cambiar el L&F al de la plataforma nativa del
usuario:
try {
UIManager.setLookAndFeel (
UIManager.getCrossPlatformLookAndFeelClassName());
} catch (java.lang.ClassNotFoundException e) {
// No puede cambiar el L&F
}
 Para cambiar a Metal L&F (Java-native L&F)
try {
UIManager.setLookAndFeel (
"javax.swing.plaf.metal.MetalLookAndFeel");
} catch (java.lang.ClassNotFoundException e) {

Más contenido relacionado

DOCX
Modelo vista controlador vas Programacion por n capas
PPTX
MODELO VISTA CONTROLADOR
PPTX
MVC - (Spanish)
PPTX
Modelo vista controlador
PPTX
Modelo vistacontrolador
PPTX
Modelo vistacontrolador
PPTX
S01-s1-MVC.pptx
Modelo vista controlador vas Programacion por n capas
MODELO VISTA CONTROLADOR
MVC - (Spanish)
Modelo vista controlador
Modelo vistacontrolador
Modelo vistacontrolador
S01-s1-MVC.pptx

Similar a Patron MVC en el desarrollo de aplicaciones.ppt (20)

PDF
Modelo, vista, controlador
PDF
Calculadora Gráfica Java implementando el Patrón MVC
ODP
Arquitectura Mvc
PDF
patrón MVC.pdf
PDF
Modelo vista controlador #ihcpfgigs_Diseñoweb
PPTX
Patrones de diseño
PPTX
S6-PD2-Modelo Vista Controlador
PDF
PPT Crear tablas y utilizar marquesinas.pdf
PPTX
SESION 8(1).pptxytrjrjyrjyrjyrtj4ryhbrbrjnhryj
PPTX
Patron de Desarrollo Modelo Vista Controlador
PDF
modelo vista controlador
PPTX
modelo MVC.pptx
PPTX
2-Unidad 1: Arquitectura de Diseño-1.1 MVC-Desarrollo
PPTX
Model View Controller (MVC)
DOCX
Patron sw observer
PPTX
Observer design pattern
PPTX
Observer design pattern
PDF
Modelo Vista Controlador.pdf
Modelo, vista, controlador
Calculadora Gráfica Java implementando el Patrón MVC
Arquitectura Mvc
patrón MVC.pdf
Modelo vista controlador #ihcpfgigs_Diseñoweb
Patrones de diseño
S6-PD2-Modelo Vista Controlador
PPT Crear tablas y utilizar marquesinas.pdf
SESION 8(1).pptxytrjrjyrjyrjyrtj4ryhbrbrjnhryj
Patron de Desarrollo Modelo Vista Controlador
modelo vista controlador
modelo MVC.pptx
2-Unidad 1: Arquitectura de Diseño-1.1 MVC-Desarrollo
Model View Controller (MVC)
Patron sw observer
Observer design pattern
Observer design pattern
Modelo Vista Controlador.pdf
Publicidad

Último (20)

PPT
introduccion a las_web en el 2025_mejoras.ppt
PDF
TRABAJO DE TECNOLOGIA.pdf...........................
PPTX
Sesion 1 de microsoft power point - Clase 1
PDF
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
PDF
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
PPTX
Curso de generación de energía mediante sistemas solares
PDF
Documental Beyond the Code (Dossier Presentación - 2.0)
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
PPTX
Presentación de Redes de Datos modelo osi
PPT
El-Gobierno-Electrónico-En-El-Estado-Bolivia
PDF
Diapositiva proyecto de vida, materia catedra
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PDF
Ronmy José Cañas Zambrano - Potenciando la tecnología en Venezuela.pdf
PDF
Tips de Seguridad para evitar clonar sus claves del portal bancario.pdf
PDF
Maste clas de estructura metálica y arquitectura
PPTX
Historia Inteligencia Artificial Ana Romero.pptx
PPTX
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
PPTX
modulo seguimiento 1 para iniciantes del
PDF
MANUAL de recursos humanos para ODOO.pdf
PDF
Influencia-del-uso-de-redes-sociales.pdf
introduccion a las_web en el 2025_mejoras.ppt
TRABAJO DE TECNOLOGIA.pdf...........................
Sesion 1 de microsoft power point - Clase 1
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
Curso de generación de energía mediante sistemas solares
Documental Beyond the Code (Dossier Presentación - 2.0)
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
Presentación de Redes de Datos modelo osi
El-Gobierno-Electrónico-En-El-Estado-Bolivia
Diapositiva proyecto de vida, materia catedra
historia_web de la creacion de un navegador_presentacion.pptx
Ronmy José Cañas Zambrano - Potenciando la tecnología en Venezuela.pdf
Tips de Seguridad para evitar clonar sus claves del portal bancario.pdf
Maste clas de estructura metálica y arquitectura
Historia Inteligencia Artificial Ana Romero.pptx
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
modulo seguimiento 1 para iniciantes del
MANUAL de recursos humanos para ODOO.pdf
Influencia-del-uso-de-redes-sociales.pdf
Publicidad

Patron MVC en el desarrollo de aplicaciones.ppt

  • 1. Model-View-Controller  La UI de una aplicación está sujeta a muchos cambios:  Cambio de UI para diferentes usuarios  Los cambios en la UI deben ser fáciles aún en runtime  Diferentes “look and feel ” no deben afectar el núcleo funcional  La misma información puede mostrarse en ventanas diferentes  Los cambios en los datos subyacentes, deben reflejarse inmediatamente en todas las vistas  Conviene separar: procesamiento, entradas y salidas
  • 2. Model-View-Controller (MVC)  MVC divide una aplicación UI en:  Modelo: Contiene el núcleo funcional y datos  Vista: Muestra información al usuario  Controlador: Maneja las entradas del usuario  Vistas+Controladores = UI  Mecanismo de “Change-Propagation” : Único link entre Modelo e UI.
  • 3. La “tríada” de objetos MVC Controller View Model Output Input UI
  • 4. Dinámica del MVC C V M 1. Una entrada del usuario es enviada por el SO al controlador apropiado 2. El controlador puede requerir a la Vista que “tenga” el foco del evento.
  • 5. Dinámica del MVC C V M 3. Controlador requiere métodos del Modelo para cambiar su estado 4. Modelo cambia su estado interno
  • 6. Dinámica del MVC C V M 5. Modelo notifica a todas las Vistas dependientes que hay datos que se modificaron 6. Vistas requieren del Modelo los valores de los datos actuales.
  • 7. Dinámica del MVC C V M 7. Modelo notifica a todos los Controladores dependientes que hay datos que cambiaron. 8. Controlador requiere del Modelo los valores actuales de los datos.
  • 8. Dinámica del MVC C V M 9. Controlador informa a las Vistas si se deshabilitan algunos elementos. 10. Vistas requieren redibujado
  • 9. Patrón Observer  MVC es un patrón que puede ser expresado como una combinación de otros patrones.  La interacción Modelo-Vista es generalmente descripta usando el patrón Observer:  Define una dependencia uno a muchos entre objetos, de forma tal que cuando uno de ellos (sujeto Observable) cambia su estado, todos los que dependen de éste (Observers) son notificados y actualizados automáticamente.
  • 11. Observers Un sujeto puede tener cualquier cantidad de observadores dependientes. Todos los observadores son notificados cuando el sujeto experimenta un cambio en su estado. En respuesta a ello cada observador interroga al sujeto para sincronizar su estado con el de éste.
  • 12. Java: Observer/Observable  java.util.Observable (Subject): Cualquier clase que desee ser observada debe extender esta clase  métodos para add/delete Observers  métodos para notify todos los Observers de un cambio (para indicar que hubo un cambio:setchanged) Use Vector para almacenar las referencias a los Observers  java.util.Observer (interface) debe ser implementada por cualquier clase que quiera actuar como Observer.  update() en respuesta a notifyObserver()  Modelo de delegación de eventos: la fuente de eventos
  • 13. Ejemplo // Un sujeto a observar ! public class ConcreteSubject extends Observable { private String name; private float price; public ConcreteSubject(String n, float p) { name = n; price = p; System.out.println("ConcreteSubject creado: " + name + " a "+ price);} public setPrice(float p){price=p;//idem para setName setChanged();//flag para indicar el cambio en Observable notifyObservers(new Float(price)); } }
  • 14. Ejemplo // An observer of price changes. (Idem para observar nombre) public class PriceObserver implements Observer { private float price; public PriceObserver() {price = 0; System.out.println("PriceObserver creado: Precio es " + price);} public void update(Observable obj, Object arg) { if (arg instanceof Float) {price = ((Float)arg).floatValue(); System.out.println("PriceObserver: Precio cambia a " + price);}}
  • 15. Ejemplo //Test public class TestObservers { public static void main(String args[]) { // Create the Subject and Observers. ConcreteSubject s = new ConcreteSubject("Corn Pops", 1.29f); PriceObserver priceObs = new PriceObserver(); s.addObserver(priceObs);//registro del observer con Observable s.setPrice(4.57f); }}
  • 16. Ejemplo Salida del programa Test ConcreteSubject creado: Corn Pops a 1.29 PriceObserver creado: Precio es 0.0 PriceObserver: Precio cambia a 4.57
  • 17. MVC y Swing  Swing usa una arquitectura similar a MVC, llamada Model-Delegate, muy difícil crear un controlador genérico que no conozca los datos específico de una vista.  Colapsan Vista y Controlador (UI) en un único objeto (UI delegate, puesto que la UI se delega a este objeto).  Se pueden usar múltiples vistas de un mismo modelo.  Componentes pueden compartir un mismo modelo. (JScrollBar, JSlider, ProgressBar comparten el BoundedRangeModel), permitiendo la conectividad automática entre componentes.
  • 18. MVC y Swing Component UI-delegate View Model Controller
  • 21. Modelos en Swing  En Swing muchos de los modelos son interfaces  Ej.: ButtonModel, ListModel, TableModel  Usualmente existe un modelo “por defecto” que se asocia automáticamente con un componente  DefaultButtonModel implementa ButtonModel  Muchas aplicaciones no necesitan preocuparse por ellos
  • 22. Modelos en Swing  Casi todos los componentes proveen el API del modelo directamente. El componente puede ser manipulado sin interactuar con el modelo para nada. //Ejemplo de la clase JSlider public int getValue() { return getModel().getValue(); } //Podemos usar lo siguiente y evitar el modelo JSlider slider = new JSlider(); int value = slider.getValue();
  • 23. Views & Controllers - Swing  En Swing la expresión “look and feel” (L&F) es común  Look (apariencia) es la Vista  Feel (comportamiento) es el Controlador  Combinar la Vista y el Controlador permite que que el L&F de un componente sea tratado como una unidad y por tanto facilita los cambios en la UI.  Conocido como pluggable look & feel (PLAF), se puede cambiar la representación visual en tiempo de ejecución
  • 24. PLAF
  • 25. PLAF  Para cambiar el L&F al de la plataforma nativa del usuario: try { UIManager.setLookAndFeel ( UIManager.getCrossPlatformLookAndFeelClassName()); } catch (java.lang.ClassNotFoundException e) { // No puede cambiar el L&F }  Para cambiar a Metal L&F (Java-native L&F) try { UIManager.setLookAndFeel ( "javax.swing.plaf.metal.MetalLookAndFeel"); } catch (java.lang.ClassNotFoundException e) {