SlideShare una empresa de Scribd logo
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 usuario
Danae Aguilar Guzmán
 
Introducción a DJango
Introducción a DJangoIntroducción a DJango
Introducción a DJango
Luis Cruz Campos
 
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 controlador
descarga2009
 
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
Sorey 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 2021
lissette_torrealba
 
Form y container
Form y containerForm y container
Form y container
zeta2015
 
Como crear un menú ribbons
Como crear un menú ribbonsComo 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
Esteban Saavedra
 
Introducción a Knockout
Introducción a KnockoutIntroducción a Knockout
Introducción a Knockout
Oscar 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 6
Gabriela Bosetti
 
Windows 10: Novedades en XAML
Windows 10: Novedades en XAMLWindows 10: Novedades en XAML
Windows 10: Novedades en XAML
Javier Suárez Ruiz
 
Windows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAMLWindows 10: Hel10 World! - Novedades XAML
Windows 10: Hel10 World! - Novedades XAML
Javier 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-excep
xavazque2
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
Juan Reynaldo Yarleque Sosa
 
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
Pedro 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 MVC
Danae Aguilar Guzmán
 
Visual basic
Visual basicVisual basic
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
patrimoni
 
Manual marichuy
Manual marichuyManual marichuy

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 dumping
xavazque2
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlin
xavazque2
 
146817358 android
146817358 android146817358 android
146817358 android
xavazque2
 
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
xavazque2
 
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
xavazque2
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-ui
xavazque2
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-android
xavazque2
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones
xavazque2
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
xavazque2
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
xavazque2
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
xavazque2
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
xavazque2
 
7. react js-1
7. react js-17. react js-1
7. react js-1
xavazque2
 
Tp1
Tp1Tp1
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
xavazque2
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
xavazque2
 
5.layouts
5.layouts5.layouts
5.layouts
xavazque2
 
6.2. js
6.2. js6.2. js
6.2. js
xavazque2
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
xavazque2
 
4.windows dialogs
4.windows dialogs4.windows dialogs
4.windows dialogs
xavazque2
 

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

informe de diagrama de pareto actividad segundo periodo 11-2
informe de diagrama de pareto actividad segundo periodo 11-2informe de diagrama de pareto actividad segundo periodo 11-2
informe de diagrama de pareto actividad segundo periodo 11-2
SofaNava1
 
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
KukiiSanchez
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
Paola De la Torre
 
Ingeniería en Telemática y ejercicios.pdf
Ingeniería en Telemática y ejercicios.pdfIngeniería en Telemática y ejercicios.pdf
Ingeniería en Telemática y ejercicios.pdf
Camila301231
 
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdfEXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
SamuelBedoya6
 
C1B3RWALL La red de cooperación de Madrid.pptx
C1B3RWALL La red de cooperación de Madrid.pptxC1B3RWALL La red de cooperación de Madrid.pptx
C1B3RWALL La red de cooperación de Madrid.pptx
Guillermo Obispo San Román
 
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajasSlideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
AdrianaRengifo14
 
Programas relacionados con la telemática.pdf
Programas relacionados con la telemática.pdfProgramas relacionados con la telemática.pdf
Programas relacionados con la telemática.pdf
DiegoPinillo
 
Estructuras básicas_ conceptos básicos de programación (1).pdf
Estructuras básicas_ conceptos básicos de programación  (1).pdfEstructuras básicas_ conceptos básicos de programación  (1).pdf
Estructuras básicas_ conceptos básicos de programación (1).pdf
MaraJos722801
 
trabajo _20240621_132119_0000.pdf-.......
trabajo _20240621_132119_0000.pdf-.......trabajo _20240621_132119_0000.pdf-.......
trabajo _20240621_132119_0000.pdf-.......
m15918387
 
Uso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptxUso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptx
231485414
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
renzocruz180310
 
Excel Avanzado_ Diagrama de Pareto .pdf
Excel Avanzado_  Diagrama de Pareto .pdfExcel Avanzado_  Diagrama de Pareto .pdf
Excel Avanzado_ Diagrama de Pareto .pdf
IsabellaLugo3
 
Estructuras básicas_ conceptos básicos de programación (1).pdf
Estructuras básicas_ conceptos básicos de programación  (1).pdfEstructuras básicas_ conceptos básicos de programación  (1).pdf
Estructuras básicas_ conceptos básicos de programación (1).pdf
AnaSofaRosmaya
 
trabajo monografico sobre el yandex .jim
trabajo monografico sobre el yandex .jimtrabajo monografico sobre el yandex .jim
trabajo monografico sobre el yandex .jim
jhonyaicaterodriguez
 
Plantilla carrier y tecnologia de TIGO.pptx
Plantilla carrier y tecnologia de TIGO.pptxPlantilla carrier y tecnologia de TIGO.pptx
Plantilla carrier y tecnologia de TIGO.pptx
edwinedsonsuyo
 
Gobernanza con SharePoint Premium de principio a fin
Gobernanza con SharePoint Premium de principio a finGobernanza con SharePoint Premium de principio a fin
Gobernanza con SharePoint Premium de principio a fin
Juan Carlos Gonzalez
 
Diagrama de pareto.docx trabajo de tecnologia
Diagrama de pareto.docx trabajo de tecnologiaDiagrama de pareto.docx trabajo de tecnologia
Diagrama de pareto.docx trabajo de tecnologia
RazeThefox
 
Herramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientasHerramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientas
yessicacarrillo16
 
Trabajo de ten¡cnologia 11-2.......... (1).pdf
Trabajo de ten¡cnologia 11-2.......... (1).pdfTrabajo de ten¡cnologia 11-2.......... (1).pdf
Trabajo de ten¡cnologia 11-2.......... (1).pdf
ElizabethAcostaQuinc
 

Último (20)

informe de diagrama de pareto actividad segundo periodo 11-2
informe de diagrama de pareto actividad segundo periodo 11-2informe de diagrama de pareto actividad segundo periodo 11-2
informe de diagrama de pareto actividad segundo periodo 11-2
 
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
Morado y Verde Animado Patrón Abstracto Proyecto de Grupo Presentación de Edu...
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
 
Ingeniería en Telemática y ejercicios.pdf
Ingeniería en Telemática y ejercicios.pdfIngeniería en Telemática y ejercicios.pdf
Ingeniería en Telemática y ejercicios.pdf
 
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdfEXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
EXCEL AVANZADO_ DIAGRAMA DE NPARETO .pdf
 
C1B3RWALL La red de cooperación de Madrid.pptx
C1B3RWALL La red de cooperación de Madrid.pptxC1B3RWALL La red de cooperación de Madrid.pptx
C1B3RWALL La red de cooperación de Madrid.pptx
 
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajasSlideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
 
Programas relacionados con la telemática.pdf
Programas relacionados con la telemática.pdfProgramas relacionados con la telemática.pdf
Programas relacionados con la telemática.pdf
 
Estructuras básicas_ conceptos básicos de programación (1).pdf
Estructuras básicas_ conceptos básicos de programación  (1).pdfEstructuras básicas_ conceptos básicos de programación  (1).pdf
Estructuras básicas_ conceptos básicos de programación (1).pdf
 
trabajo _20240621_132119_0000.pdf-.......
trabajo _20240621_132119_0000.pdf-.......trabajo _20240621_132119_0000.pdf-.......
trabajo _20240621_132119_0000.pdf-.......
 
Uso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptxUso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptx
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
 
Excel Avanzado_ Diagrama de Pareto .pdf
Excel Avanzado_  Diagrama de Pareto .pdfExcel Avanzado_  Diagrama de Pareto .pdf
Excel Avanzado_ Diagrama de Pareto .pdf
 
Estructuras básicas_ conceptos básicos de programación (1).pdf
Estructuras básicas_ conceptos básicos de programación  (1).pdfEstructuras básicas_ conceptos básicos de programación  (1).pdf
Estructuras básicas_ conceptos básicos de programación (1).pdf
 
trabajo monografico sobre el yandex .jim
trabajo monografico sobre el yandex .jimtrabajo monografico sobre el yandex .jim
trabajo monografico sobre el yandex .jim
 
Plantilla carrier y tecnologia de TIGO.pptx
Plantilla carrier y tecnologia de TIGO.pptxPlantilla carrier y tecnologia de TIGO.pptx
Plantilla carrier y tecnologia de TIGO.pptx
 
Gobernanza con SharePoint Premium de principio a fin
Gobernanza con SharePoint Premium de principio a finGobernanza con SharePoint Premium de principio a fin
Gobernanza con SharePoint Premium de principio a fin
 
Diagrama de pareto.docx trabajo de tecnologia
Diagrama de pareto.docx trabajo de tecnologiaDiagrama de pareto.docx trabajo de tecnologia
Diagrama de pareto.docx trabajo de tecnologia
 
Herramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientasHerramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientas
 
Trabajo de ten¡cnologia 11-2.......... (1).pdf
Trabajo de ten¡cnologia 11-2.......... (1).pdfTrabajo de ten¡cnologia 11-2.......... (1).pdf
Trabajo de ten¡cnologia 11-2.......... (1).pdf
 

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") } }