SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
CONSTRUCCIÓN
DE INTERFACES
DE USUARIO
1er Cuatrimestre de 2019
Repaso Binding y Eventos
2
▸ Eventos
▹ Tanto la vista como el modelo producen eventos.
▹ Inversión relación de conocimiento
▹ Similar patron Observer
▸ Binding
▹ Muchos frameworks proveen mecanismos de binding
▹ Relaciona dos variables manteniendolas vinculadas
▹ Unidireccional y Bidireccional
Patrón Model-View-Controller
3
Patrón de arquitectura
Patrón Model-View-Controller
4
Patrón de diseño o modelo de abstracción utilizado
para definir y estructurar los componentes necesarios
en el desarrollo de software.
Patrón Model-View-Controller
5
▸ Vista
▹ Capa de presentación / interfaz de usuario
▹ Ventanas, botones, inputs.
Patrón Model-View-Controller
6
▸ Modelo
▹ Capa que contiene la lógica de la aplicación
▹ Contiene la lógica de negocio/reglas de negocio
▹ Modelo de objetos
▹ Ejemplo: objetos que representen:
▹ Un contacto de una agenda
▹ Un movimiento de una caja de ahorro.
Patrón Model-View-Controller
7
▸ Controlador
▹ Intermediario entre la capas Vista y Modelo.
▹ Orquestadores del modelo o decisores de la
operación
▹ Gestiona el flujo de información entre el las
capas.
▹ Adapta la vista con el modelo.
Patrón Model-View-Controller
8
▸ Modelo - Errores comunes
▹ Aparición de lógica de negocio en otras capas
▹ Modelo con elementos propios de interacción con
usuario
Patrón Model-View-ViewModel
MVVM
9
▸ Arena es un framework que utiliza este tipo de patrón
▸ Vista: Similar a MVC
▸ Modelo: Similar a MVC
▸ ViewModel: Implementación de Patrón Observer, en
Arena a través del mecanismo de Binding.
Patrón Model-View-ViewModel
10
▸ Ejemplo Arena - Login - View
class LoginWindow : MainWindow<Login>(Login()) {
override fun createContents(panel: Panel) {
Label(panel).setText("Ingrese el usuario")
TextBox(panel).bindValueToProperty<Int, ControlBuilder>("user")
Label(panel).setText("Ingrese el password")
PasswordField(panel).bindValueToProperty<Int, ControlBuilder>("password")
Button(panel)
.setCaption("Autenticar")
.onClick { modelObject.authenticate() }
val status = Label(panel)
status.bindValueToProperty<Double, ControlBuilder>("authenticated")
status.bindBackgroundToProperty<ControlBuilder, Any, Any>("authenticatedColor")
}
}
11
▸ Ejemplo Arena - Login - Modelo
@Observable
class Login {
var user: String = ""
set(value) {
resetAuth()
field = value
}
var password: String = ""
set(value) {
resetAuth()
field = value
}
var authenticated: Boolean = false
var authenticatedColor: Color = Color.ORANGE
fun authenticate() {
authenticated = (user == "polo") && (password == "polo")
authenticatedColor = if (authenticated) Color.GREEN else Color.ORANGE
}
private fun resetAuth() {
authenticated = false
authenticatedColor = Color.ORANGE
}
Patrón Model-View-ViewModel
12
▸ Ejemplo Arena - Login - ViewModel
Patrón Model-View-ViewModel
class LoginWindow : MainWindow<Login>(Login()) {
override fun createContents(panel: Panel) {
this.title = "Login del sistema"
Label(panel).setText("Ingrese el usuario")
TextBox(panel).bindValueToProperty<Int, ControlBuilder>("user")
Label(panel).setText("Ingrese el password")
PasswordField(panel).bindValueToProperty<Int, ControlBuilder>("password")
Button(panel)
.setCaption("Autenticar")
.onClick { modelObject.authenticate() }
val status = Label(panel)
status.bindValueToProperty<Double, ControlBuilder>("authenticated")
status.bindBackgroundToProperty<ControlBuilder, Any, Any>("authenticatedColor")
}
@Observable
class Login {
var user: String = ""
set(value) {
resetAuth()
field = value
}
var password: String = ""
set(value) {
resetAuth()
field = value
}
Patrón MVC o MVVC
13
▸ Beneficios
▹ Reutilización de código
▹ Separación de conceptos - Legibilidad
▹ Facilitar el desacople para el desarrollo
▹ Facilitar el mantenimiento
▹ Aparición de perfiles especializados en cada capas
▹ Desacople de tecnologías
▹ Mantenimiento - Testing
Application Model vs
Model Simple
14
Cada vista necesita un modelo pero cuando la
complejidad de interacción entre el usuario y el modelo
crece el Modelo Simple no se ajusta bien por lo que
aparece el concepto de Application Model
Consiste en crear un objeto que tenga la
representación del comportamiento global de la
aplicación. Generalmente representan un Caso de Uso
Application Model vs
Model Simple
15
Diferentes Ciclos de vida
Los objetos de dominio se crear, se persisten, se
modifican, etc.
Los objetos de aplicación se usan una sola vez.
Application Model vs
Model Simple - Ejemplo
16
class Gender{
var name : String = ""
constructor(name: String) {
this.name = name
}
override fun toString(): String {
return this.name
}
}
class Film {
var name: String = ""
override fun toString(): String {
return this.name
}
}
Application Model vs
Model Simple - Ejemplo
17
@Observable
class FilmCreateAppModel{
var film : Film = Film()
var genders : MutableList<Gender> = ArrayList<Gender>()
}
class Window : SimpleWindow<FilmCreateAppModel> {
constructor (owner: WindowOwner, model: FilmCreateAppModel) : super(owner, model)
override fun createFormPanel(mainPanel: Panel) {
Label(mainPanel).setText("Nombre de la película")
TextBox(mainPanel).bindValueToProperty<String, ControlBuilder>("film")
Label(mainPanel).setText("Genero")
List<FilmCreateAppModel>(mainPanel).bindItemsToProperty("genders")
}
}
18
¿Preguntas?

Más contenido relacionado

Similar a 3.1 mvc-mvvm-app model-binding

WPF 06 - personalizando los controles de interfaz de usuario
WPF 06 -  personalizando los controles de interfaz de usuarioWPF 06 -  personalizando los controles de interfaz de usuario
WPF 06 - personalizando los controles de interfaz de usuarioDanae Aguilar Guzmán
 
Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Sorey García
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controladordescarga2009
 
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8Sorey García
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021lissette_torrealba
 
Form y container
Form y containerForm y container
Form y containerzeta2015
 
Grails: Framework para el desarrollo de aplicaciones Web No 5
Grails: Framework para el desarrollo de aplicaciones Web No 5Grails: Framework para el desarrollo de aplicaciones Web No 5
Grails: Framework para el desarrollo de aplicaciones Web No 5Esteban Saavedra
 
Introducción a Knockout
Introducción a KnockoutIntroducción a Knockout
Introducción a KnockoutOscar Gensollen
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Gabriela Bosetti
 
Windows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAMLWindows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAMLJavier Suárez Ruiz
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excepxavazque2
 
Drupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommerceDrupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommercePedro Cambra
 
ASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVCASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVCDanae Aguilar Guzmán
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0patrimoni
 

Similar a 3.1 mvc-mvvm-app model-binding (20)

WPF 06 - personalizando los controles de interfaz de usuario
WPF 06 -  personalizando los controles de interfaz de usuarioWPF 06 -  personalizando los controles de interfaz de usuario
WPF 06 - personalizando los controles de interfaz de usuario
 
Introducción a DJango
Introducción a DJangoIntroducción a DJango
Introducción a DJango
 
Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
 
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021
 
Form y container
Form y containerForm y container
Form y container
 
Como crear un menú ribbons
Como crear un menú ribbonsComo crear un menú ribbons
Como crear un menú ribbons
 
Grails: Framework para el desarrollo de aplicaciones Web No 5
Grails: Framework para el desarrollo de aplicaciones Web No 5Grails: Framework para el desarrollo de aplicaciones Web No 5
Grails: Framework para el desarrollo de aplicaciones Web No 5
 
Introducción a Knockout
Introducción a KnockoutIntroducción a Knockout
Introducción a Knockout
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6
 
Windows 10: Novedades en XAML
Windows 10: Novedades en XAMLWindows 10: Novedades en XAML
Windows 10: Novedades en XAML
 
Windows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAMLWindows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAML
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excep
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
 
Drupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommerceDrupal 7 a través Drupal Commerce
Drupal 7 a través Drupal Commerce
 
ASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVCASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVC
 
Visual basic
Visual basicVisual basic
Visual basic
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
 
Manual marichuy
Manual marichuyManual marichuy
Manual marichuy
 

Más de xavazque2

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumpingxavazque2
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlinxavazque2
 
146817358 android
146817358 android146817358 android
146817358 androidxavazque2
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinxavazque2
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juegoxavazque2
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-uixavazque2
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-androidxavazque2
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepcionesxavazque2
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_httpxavazque2
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-androidxavazque2
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdfxavazque2
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventorxavazque2
 
7. react js-1
7. react js-17. react js-1
7. react js-1xavazque2
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdfxavazque2
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdfxavazque2
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdfxavazque2
 
4.windows dialogs
4.windows dialogs4.windows dialogs
4.windows dialogsxavazque2
 

Más de xavazque2 (20)

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumping
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlin
 
146817358 android
146817358 android146817358 android
146817358 android
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-ui
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-android
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
 
7. react js-1
7. react js-17. react js-1
7. react js-1
 
Tp1
Tp1Tp1
Tp1
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
 
5.layouts
5.layouts5.layouts
5.layouts
 
6.2. js
6.2. js6.2. js
6.2. js
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
 
4.windows dialogs
4.windows dialogs4.windows dialogs
4.windows dialogs
 

Último

infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxgustavovasquezv56
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptxdulcemonterroza
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...axelv9257
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfYanitza28
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfaxelv9257
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8antoniopalmieriluna
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORASMarc Liust
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte2024020140
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionEmanuelMuoz11
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfJosAndrRosarioVzquez
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendidaLuis Francisco Reyes Aceves
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxVICTORMANUELBEASAGUI
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfYanitza28
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaJadeVilcscordova
 

Último (16)

infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 

3.1 mvc-mvvm-app model-binding

  • 2. Repaso Binding y Eventos 2 ▸ Eventos ▹ Tanto la vista como el modelo producen eventos. ▹ Inversión relación de conocimiento ▹ Similar patron Observer ▸ Binding ▹ Muchos frameworks proveen mecanismos de binding ▹ Relaciona dos variables manteniendolas vinculadas ▹ Unidireccional y Bidireccional
  • 4. Patrón Model-View-Controller 4 Patrón de diseño o modelo de abstracción utilizado para definir y estructurar los componentes necesarios en el desarrollo de software.
  • 5. Patrón Model-View-Controller 5 ▸ Vista ▹ Capa de presentación / interfaz de usuario ▹ Ventanas, botones, inputs.
  • 6. Patrón Model-View-Controller 6 ▸ Modelo ▹ Capa que contiene la lógica de la aplicación ▹ Contiene la lógica de negocio/reglas de negocio ▹ Modelo de objetos ▹ Ejemplo: objetos que representen: ▹ Un contacto de una agenda ▹ Un movimiento de una caja de ahorro.
  • 7. Patrón Model-View-Controller 7 ▸ Controlador ▹ Intermediario entre la capas Vista y Modelo. ▹ Orquestadores del modelo o decisores de la operación ▹ Gestiona el flujo de información entre el las capas. ▹ Adapta la vista con el modelo.
  • 8. Patrón Model-View-Controller 8 ▸ Modelo - Errores comunes ▹ Aparición de lógica de negocio en otras capas ▹ Modelo con elementos propios de interacción con usuario
  • 9. Patrón Model-View-ViewModel MVVM 9 ▸ Arena es un framework que utiliza este tipo de patrón ▸ Vista: Similar a MVC ▸ Modelo: Similar a MVC ▸ ViewModel: Implementación de Patrón Observer, en Arena a través del mecanismo de Binding.
  • 10. Patrón Model-View-ViewModel 10 ▸ Ejemplo Arena - Login - View class LoginWindow : MainWindow<Login>(Login()) { override fun createContents(panel: Panel) { Label(panel).setText("Ingrese el usuario") TextBox(panel).bindValueToProperty<Int, ControlBuilder>("user") Label(panel).setText("Ingrese el password") PasswordField(panel).bindValueToProperty<Int, ControlBuilder>("password") Button(panel) .setCaption("Autenticar") .onClick { modelObject.authenticate() } val status = Label(panel) status.bindValueToProperty<Double, ControlBuilder>("authenticated") status.bindBackgroundToProperty<ControlBuilder, Any, Any>("authenticatedColor") } }
  • 11. 11 ▸ Ejemplo Arena - Login - Modelo @Observable class Login { var user: String = "" set(value) { resetAuth() field = value } var password: String = "" set(value) { resetAuth() field = value } var authenticated: Boolean = false var authenticatedColor: Color = Color.ORANGE fun authenticate() { authenticated = (user == "polo") && (password == "polo") authenticatedColor = if (authenticated) Color.GREEN else Color.ORANGE } private fun resetAuth() { authenticated = false authenticatedColor = Color.ORANGE } Patrón Model-View-ViewModel
  • 12. 12 ▸ Ejemplo Arena - Login - ViewModel Patrón Model-View-ViewModel class LoginWindow : MainWindow<Login>(Login()) { override fun createContents(panel: Panel) { this.title = "Login del sistema" Label(panel).setText("Ingrese el usuario") TextBox(panel).bindValueToProperty<Int, ControlBuilder>("user") Label(panel).setText("Ingrese el password") PasswordField(panel).bindValueToProperty<Int, ControlBuilder>("password") Button(panel) .setCaption("Autenticar") .onClick { modelObject.authenticate() } val status = Label(panel) status.bindValueToProperty<Double, ControlBuilder>("authenticated") status.bindBackgroundToProperty<ControlBuilder, Any, Any>("authenticatedColor") } @Observable class Login { var user: String = "" set(value) { resetAuth() field = value } var password: String = "" set(value) { resetAuth() field = value }
  • 13. Patrón MVC o MVVC 13 ▸ Beneficios ▹ Reutilización de código ▹ Separación de conceptos - Legibilidad ▹ Facilitar el desacople para el desarrollo ▹ Facilitar el mantenimiento ▹ Aparición de perfiles especializados en cada capas ▹ Desacople de tecnologías ▹ Mantenimiento - Testing
  • 14. Application Model vs Model Simple 14 Cada vista necesita un modelo pero cuando la complejidad de interacción entre el usuario y el modelo crece el Modelo Simple no se ajusta bien por lo que aparece el concepto de Application Model Consiste en crear un objeto que tenga la representación del comportamiento global de la aplicación. Generalmente representan un Caso de Uso
  • 15. Application Model vs Model Simple 15 Diferentes Ciclos de vida Los objetos de dominio se crear, se persisten, se modifican, etc. Los objetos de aplicación se usan una sola vez.
  • 16. Application Model vs Model Simple - Ejemplo 16 class Gender{ var name : String = "" constructor(name: String) { this.name = name } override fun toString(): String { return this.name } } class Film { var name: String = "" override fun toString(): String { return this.name } }
  • 17. Application Model vs Model Simple - Ejemplo 17 @Observable class FilmCreateAppModel{ var film : Film = Film() var genders : MutableList<Gender> = ArrayList<Gender>() } class Window : SimpleWindow<FilmCreateAppModel> { constructor (owner: WindowOwner, model: FilmCreateAppModel) : super(owner, model) override fun createFormPanel(mainPanel: Panel) { Label(mainPanel).setText("Nombre de la película") TextBox(mainPanel).bindValueToProperty<String, ControlBuilder>("film") Label(mainPanel).setText("Genero") List<FilmCreateAppModel>(mainPanel).bindItemsToProperty("genders") } }