3.1 mvc-mvvm-app model-binding

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

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
▸ Vista
▹ Capa de presentación / interfaz de usuario
▹ Ventanas, botones, inputs.

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
▸ 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
▸ 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.

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
}

12
▸ Ejemplo Arena - Login - 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

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.

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

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

3.1 mvc-mvvm-app model-binding

Más contenido relacionado

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

Más de xavazque2 (20)

Último (20)

3.1 mvc-mvvm-app model-binding