SlideShare una empresa de Scribd logo
CONSTRUCCIÓN
DE INTERFACES
DE USUARIO
1er Cuatrimestre de 2019
Interfaces Desktop
Multiplataforma
2
JVM JVM JVM
Windows Linux Mac
SWT
Arena
AWT
Swing
Interfaces Desktop
Arena
▸ Framework para facilitar la construcción de interfaces
Desktop desarrollado por Uqbar con fines educativos.
▸ Basado en SWT (Standard Widget Toolkit): conjunto de
componentes para construir interfaces gráficas en Java,
(widgets) desarrollados por el proyecto Eclipse.
▸ Link a Arena: http://arena.uqbar-project.org/index.html
3
Arena - Maven
<repositories>
<repository>
<id>uqbar</id>
<name>Uqbar</name>
<url>http://maven.uqbar.org/releases/</url>
</repository>
</repositories>
<parent>
<groupId>org.uqbar-project</groupId>
<artifactId>arena-xtend-parent</artifactId>
<version>3.6.3</version>
</parent>
4
Interfaces Desktop
Componentes
▸ TextBox - Input de texto
▸ Label - Etiqueta de texto
▸ Button
▸ Panels - Contenedor de componentes
▸ Windows y Dialogs
▸ Error Panel
Ver documentación Arena:
http://arena.uqbar-project.org/documentation/c
omponents.html
5
▸ Window: es la clase abstracta para todas las
ventanas
▸ MainWindow: es un tipo especial de ventana que se
usa para aplicaciones simples o de una sola ventana
▸ SimpleWindow: ventana común que agrega el
panel de errores
▸ Dialog: es una ventana final que depende de alguna
de las anteriores y que debe generar una acción y
cerrarse
Ventanas y Diálogos
6
Ejemplo - MainWindow
7
class LoginWindow : MainWindow<Login>(Login()) {
override fun createContents(panel: Panel) {
this.title = "Login del sistema"
Label(panel).setText("Ingrese el usuario")
TextBox(panel)
Label(panel).setText("Ingrese el password")
PasswordField(panel)
Button(panel).setCaption("Autenticar")
}
}
fun main() {
LoginWindow().startApplication()
}
Windows - Dialogs
8
▸ Pero las ventanas Window no pueden ser
inicializadas desde un main()como sí sucede con
MainWindow
▸ Es necesario otra estrategia de inicialización
▹ Hay que usar la clase Application
▹ Que se encarga de inicializar la aplicación y
llamar a la Window que indiquemos como
“inicial”
▹ Luego vamos a poder interactuar entre
Windows y Dialogs libremente
Application + SimpleWindows
9
class Main : Application() {
override fun createMainWindow(): MainWindow {
return MainWindow(this, User())
}
}
fun main() { Main().start() }
class MainWindow : SimpleWindow<User>{
constructor (owner: WindowOwner, model: User ) : super(owner, model)
override fun addActions(actionsPanel : Panel) { /* Actions Panel */ }
override fun createFormPanel(mainPanel : Panel) {
Label(mainPanel).setText("Prueba SimpleWindow")
}
}
Application + Dialog
10
class FormWindow : SimpleWindow<User> {
constructor (owner: WindowOwner, model: User) : super(owner, model)
override fun createFormPanel(mainPanel: Panel) {
Button(mainPanel).onClick(Action {
AddNameDialog(this, this.modelObject).open()
})
}
}
class AddNameDialog : Dialog<User> {
constructor(owner: WindowOwner, model: User ) : super(owner, model)
override fun createFormPanel(panel : Panel ) {
Label(panel).setText("Dialog Example: ")
Button(panel).setCaption("Aceptar").onClick(Action { this.close() })
}
}
Conceptos necesarios
Eventos
▸ Cualquier suceso en el sistema
▸ Comunicación entre dos componentes
▸ Inversión de la relación de conocimiento
▸ Tanto la vista como el modelo, pueden producir
eventos
11
Conceptos necesarios
Binding
▸ Vincular o enlazar propiedades del modelo con la
UI.
▸ Relaciona dos propiedades manteniendolas
sincronizadas
▸ El binding puede ser direccional o bidireccional
▸ Muchos framework proveen mecanismos de
binding.
12
En la UI podemos “bindear” una propiedad con el modelo de la
siguiente forma:
Label(panel).bindValueToPropertie<String, ControlBuilder>("user")
En el modelo con el annotation
@Observable
class Login {
var user: String = ""
}
Binding - Arena
13
14
@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
}
Modelo + Binding
Windows + Binding
15
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")
}
}
fun main() {
LoginWindow().startApplication()
}
16
¿Preguntas?
¿Hacemos una Demo?

Más contenido relacionado

La actualidad más candente

Introducción a Swing
Introducción a SwingIntroducción a Swing
Introducción a Swing
mrojas_unitec
 
Decorator
DecoratorDecorator
Decorator
Mario Rodriguez
 
Swing1
Swing1Swing1
Java
JavaJava
Java
jbersosa
 
Java - Tutorial Ventanas
Java - Tutorial VentanasJava - Tutorial Ventanas
Java - Tutorial Ventanas
elsemieni
 
Guis en java-1pp_2012_
Guis en java-1pp_2012_Guis en java-1pp_2012_
Guis en java-1pp_2012_
Robert Wolf
 
Interfaz gráfica de usuario y eventos (introducción)
Interfaz gráfica de usuario y eventos (introducción)Interfaz gráfica de usuario y eventos (introducción)
Interfaz gráfica de usuario y eventos (introducción)
Omar B.
 
Java GUI La librería Swing
Java GUI La librería Swing Java GUI La librería Swing
Java GUI La librería Swing
Laura
 
Java swing
Java swingJava swing
Clase swing
Clase swingClase swing
Clase swing
Saan Genninson
 
Elementos Swing
Elementos SwingElementos Swing
Elementos Swing
Manuel Rivas Coronel
 
Diseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando NetbeansDiseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando Netbeans
Emerson Garay
 
Trabajo teórico exposcición
Trabajo teórico exposciciónTrabajo teórico exposcición
Trabajo teórico exposcición
Andy Bsc
 
Guia practica funciones en java con NetBeans
Guia practica funciones en java con NetBeansGuia practica funciones en java con NetBeans
Guia practica funciones en java con NetBeans
Emerson Garay
 
Guis en java-1pp_2011_
Guis en java-1pp_2011_Guis en java-1pp_2011_
Guis en java-1pp_2011_
Ricardo Garcia
 
Clase swing
Clase swingClase swing
Clase swing
jhoffry dekentai
 
Interfaces de usuario con awt
Interfaces de usuario con awtInterfaces de usuario con awt
Interfaces de usuario con awt
Flashnet S.A
 
MobileCONGalicia Introducción a Android
MobileCONGalicia Introducción a AndroidMobileCONGalicia Introducción a Android
MobileCONGalicia Introducción a Android
Alberto Ruibal
 
interfaz grafica
interfaz graficainterfaz grafica
interfaz grafica
carlos midero
 

La actualidad más candente (19)

Introducción a Swing
Introducción a SwingIntroducción a Swing
Introducción a Swing
 
Decorator
DecoratorDecorator
Decorator
 
Swing1
Swing1Swing1
Swing1
 
Java
JavaJava
Java
 
Java - Tutorial Ventanas
Java - Tutorial VentanasJava - Tutorial Ventanas
Java - Tutorial Ventanas
 
Guis en java-1pp_2012_
Guis en java-1pp_2012_Guis en java-1pp_2012_
Guis en java-1pp_2012_
 
Interfaz gráfica de usuario y eventos (introducción)
Interfaz gráfica de usuario y eventos (introducción)Interfaz gráfica de usuario y eventos (introducción)
Interfaz gráfica de usuario y eventos (introducción)
 
Java GUI La librería Swing
Java GUI La librería Swing Java GUI La librería Swing
Java GUI La librería Swing
 
Java swing
Java swingJava swing
Java swing
 
Clase swing
Clase swingClase swing
Clase swing
 
Elementos Swing
Elementos SwingElementos Swing
Elementos Swing
 
Diseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando NetbeansDiseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando Netbeans
 
Trabajo teórico exposcición
Trabajo teórico exposciciónTrabajo teórico exposcición
Trabajo teórico exposcición
 
Guia practica funciones en java con NetBeans
Guia practica funciones en java con NetBeansGuia practica funciones en java con NetBeans
Guia practica funciones en java con NetBeans
 
Guis en java-1pp_2011_
Guis en java-1pp_2011_Guis en java-1pp_2011_
Guis en java-1pp_2011_
 
Clase swing
Clase swingClase swing
Clase swing
 
Interfaces de usuario con awt
Interfaces de usuario con awtInterfaces de usuario con awt
Interfaces de usuario con awt
 
MobileCONGalicia Introducción a Android
MobileCONGalicia Introducción a AndroidMobileCONGalicia Introducción a Android
MobileCONGalicia Introducción a Android
 
interfaz grafica
interfaz graficainterfaz grafica
interfaz grafica
 

Similar a 2.1. arena-y-binding

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
 
Interfaces Usuario 3
Interfaces Usuario 3Interfaces Usuario 3
Interfaces Usuario 3
Milaly
 
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
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
xavazque2
 
Novedades en XAML
Novedades en XAMLNovedades en XAML
Novedades en XAML
Javier Suárez Ruiz
 
PowerShell para administradores
PowerShell para administradoresPowerShell para administradores
PowerShell para administradores
Pablo Campos
 
Android bootcamp 101 v2.0
Android bootcamp 101 v2.0Android bootcamp 101 v2.0
Android bootcamp 101 v2.0
Juan Manuel Baiutti
 
Windows 10: Novedades en XAML
Windows 10: Novedades en XAMLWindows 10: Novedades en XAML
Windows 10: Novedades en XAML
Javier Suárez Ruiz
 
1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx
ATM_SSI
 
Gwt III - Avanzado
Gwt III - AvanzadoGwt III - Avanzado
Gwt III - Avanzado
Manuel Carrasco Moñino
 
Gwt II - trabajando con gwt
Gwt II - trabajando con gwtGwt II - trabajando con gwt
Gwt II - trabajando con gwt
Manuel Carrasco Moñino
 
Construccion a través de compontes
Construccion a través de compontesConstruccion a través de compontes
Construccion a través de compontes
jalzate
 
Laboratorio WEB GXEv3
Laboratorio WEB GXEv3Laboratorio WEB GXEv3
Laboratorio WEB GXEv3
GeneXus
 
Laboratorio WEB GXEv3
Laboratorio WEB GXEv3Laboratorio WEB GXEv3
Laboratorio WEB GXEv3
GeneXus
 
Desarrollo De Web Parts En Share Point2007
Desarrollo De Web Parts En Share Point2007Desarrollo De Web Parts En Share Point2007
Desarrollo De Web Parts En Share Point2007
Luis Du Solier
 
JAVA Interfaz gráfica (GUI)
JAVA Interfaz gráfica (GUI)JAVA Interfaz gráfica (GUI)
JAVA Interfaz gráfica (GUI)
Universidad Santo Tomás
 
Prueba De Aplicaciones Web con Selenium 2 y WebDriver
Prueba De Aplicaciones Web con Selenium 2 y WebDriverPrueba De Aplicaciones Web con Selenium 2 y WebDriver
Prueba De Aplicaciones Web con Selenium 2 y WebDriver
David Gómez García
 
Mootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JSMootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JS
Ian Monge Pérez
 
Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
Laboratorio desarrollo de aplicaciones WEB con GeneXus TiloLaboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
GeneXus
 
Plataforma moviles ernesto horna
Plataforma moviles ernesto hornaPlataforma moviles ernesto horna
Plataforma moviles ernesto horna
Luis Rengifo Torres
 

Similar a 2.1. arena-y-binding (20)

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
 
Interfaces Usuario 3
Interfaces Usuario 3Interfaces Usuario 3
Interfaces Usuario 3
 
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
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
 
Novedades en XAML
Novedades en XAMLNovedades en XAML
Novedades en XAML
 
PowerShell para administradores
PowerShell para administradoresPowerShell para administradores
PowerShell para administradores
 
Android bootcamp 101 v2.0
Android bootcamp 101 v2.0Android bootcamp 101 v2.0
Android bootcamp 101 v2.0
 
Windows 10: Novedades en XAML
Windows 10: Novedades en XAMLWindows 10: Novedades en XAML
Windows 10: Novedades en XAML
 
1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx
 
Gwt III - Avanzado
Gwt III - AvanzadoGwt III - Avanzado
Gwt III - Avanzado
 
Gwt II - trabajando con gwt
Gwt II - trabajando con gwtGwt II - trabajando con gwt
Gwt II - trabajando con gwt
 
Construccion a través de compontes
Construccion a través de compontesConstruccion a través de compontes
Construccion a través de compontes
 
Laboratorio WEB GXEv3
Laboratorio WEB GXEv3Laboratorio WEB GXEv3
Laboratorio WEB GXEv3
 
Laboratorio WEB GXEv3
Laboratorio WEB GXEv3Laboratorio WEB GXEv3
Laboratorio WEB GXEv3
 
Desarrollo De Web Parts En Share Point2007
Desarrollo De Web Parts En Share Point2007Desarrollo De Web Parts En Share Point2007
Desarrollo De Web Parts En Share Point2007
 
JAVA Interfaz gráfica (GUI)
JAVA Interfaz gráfica (GUI)JAVA Interfaz gráfica (GUI)
JAVA Interfaz gráfica (GUI)
 
Prueba De Aplicaciones Web con Selenium 2 y WebDriver
Prueba De Aplicaciones Web con Selenium 2 y WebDriverPrueba De Aplicaciones Web con Selenium 2 y WebDriver
Prueba De Aplicaciones Web con Selenium 2 y WebDriver
 
Mootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JSMootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JS
 
Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
Laboratorio desarrollo de aplicaciones WEB con GeneXus TiloLaboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
 
Plataforma moviles ernesto horna
Plataforma moviles ernesto hornaPlataforma moviles ernesto horna
Plataforma moviles ernesto horna
 

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
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excep
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
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excep
 

Último

Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
larapalaciosmonzon28
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
NajwaNimri1
 
SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
tamarita881
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
evelinglilibethpeafi
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
AMADO SALVADOR
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
gisellearanguren1
 
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdfInformació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Festibity
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
julio05042006
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
NicandroMartinez2
 
Manual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computoManual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computo
mantenimientocarbra6
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
YaniEscobar2
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
KukiiSanchez
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
doctorsoluciones34
 
HERRAMIENTAS WEB--------------------.pptx
HERRAMIENTAS WEB--------------------.pptxHERRAMIENTAS WEB--------------------.pptx
HERRAMIENTAS WEB--------------------.pptx
maralache30
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
cbtechchihuahua
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
sofiahuarancabellido
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
Miguel Rebollo
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
LilibethEstupian
 

Último (20)

Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
 
SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
 
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdfInformació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
 
Manual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computoManual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computo
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
 
HERRAMIENTAS WEB--------------------.pptx
HERRAMIENTAS WEB--------------------.pptxHERRAMIENTAS WEB--------------------.pptx
HERRAMIENTAS WEB--------------------.pptx
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
 

2.1. arena-y-binding

  • 2. Interfaces Desktop Multiplataforma 2 JVM JVM JVM Windows Linux Mac SWT Arena AWT Swing
  • 3. Interfaces Desktop Arena ▸ Framework para facilitar la construcción de interfaces Desktop desarrollado por Uqbar con fines educativos. ▸ Basado en SWT (Standard Widget Toolkit): conjunto de componentes para construir interfaces gráficas en Java, (widgets) desarrollados por el proyecto Eclipse. ▸ Link a Arena: http://arena.uqbar-project.org/index.html 3
  • 5. Interfaces Desktop Componentes ▸ TextBox - Input de texto ▸ Label - Etiqueta de texto ▸ Button ▸ Panels - Contenedor de componentes ▸ Windows y Dialogs ▸ Error Panel Ver documentación Arena: http://arena.uqbar-project.org/documentation/c omponents.html 5
  • 6. ▸ Window: es la clase abstracta para todas las ventanas ▸ MainWindow: es un tipo especial de ventana que se usa para aplicaciones simples o de una sola ventana ▸ SimpleWindow: ventana común que agrega el panel de errores ▸ Dialog: es una ventana final que depende de alguna de las anteriores y que debe generar una acción y cerrarse Ventanas y Diálogos 6
  • 7. Ejemplo - MainWindow 7 class LoginWindow : MainWindow<Login>(Login()) { override fun createContents(panel: Panel) { this.title = "Login del sistema" Label(panel).setText("Ingrese el usuario") TextBox(panel) Label(panel).setText("Ingrese el password") PasswordField(panel) Button(panel).setCaption("Autenticar") } } fun main() { LoginWindow().startApplication() }
  • 8. Windows - Dialogs 8 ▸ Pero las ventanas Window no pueden ser inicializadas desde un main()como sí sucede con MainWindow ▸ Es necesario otra estrategia de inicialización ▹ Hay que usar la clase Application ▹ Que se encarga de inicializar la aplicación y llamar a la Window que indiquemos como “inicial” ▹ Luego vamos a poder interactuar entre Windows y Dialogs libremente
  • 9. Application + SimpleWindows 9 class Main : Application() { override fun createMainWindow(): MainWindow { return MainWindow(this, User()) } } fun main() { Main().start() } class MainWindow : SimpleWindow<User>{ constructor (owner: WindowOwner, model: User ) : super(owner, model) override fun addActions(actionsPanel : Panel) { /* Actions Panel */ } override fun createFormPanel(mainPanel : Panel) { Label(mainPanel).setText("Prueba SimpleWindow") } }
  • 10. Application + Dialog 10 class FormWindow : SimpleWindow<User> { constructor (owner: WindowOwner, model: User) : super(owner, model) override fun createFormPanel(mainPanel: Panel) { Button(mainPanel).onClick(Action { AddNameDialog(this, this.modelObject).open() }) } } class AddNameDialog : Dialog<User> { constructor(owner: WindowOwner, model: User ) : super(owner, model) override fun createFormPanel(panel : Panel ) { Label(panel).setText("Dialog Example: ") Button(panel).setCaption("Aceptar").onClick(Action { this.close() }) } }
  • 11. Conceptos necesarios Eventos ▸ Cualquier suceso en el sistema ▸ Comunicación entre dos componentes ▸ Inversión de la relación de conocimiento ▸ Tanto la vista como el modelo, pueden producir eventos 11
  • 12. Conceptos necesarios Binding ▸ Vincular o enlazar propiedades del modelo con la UI. ▸ Relaciona dos propiedades manteniendolas sincronizadas ▸ El binding puede ser direccional o bidireccional ▸ Muchos framework proveen mecanismos de binding. 12
  • 13. En la UI podemos “bindear” una propiedad con el modelo de la siguiente forma: Label(panel).bindValueToPropertie<String, ControlBuilder>("user") En el modelo con el annotation @Observable class Login { var user: String = "" } Binding - Arena 13
  • 14. 14 @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 } Modelo + Binding
  • 15. Windows + Binding 15 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") } } fun main() { LoginWindow().startApplication() }