Introducción a JavaFX
Leonardo Bermón Angarita
Programación II
Departamento de Informática y Computación
Introducción
JavaFX también es visto como el sucesor de Swing en el
campo de la tecnología de desarrollo de interfaz gráfica
de usuario (GUI) en la plataforma Java.
Permite crear y desplegar aplicaciones enriquecidas con
contenidos avanzados, audio y video.
GUI
Una interfaz gráfica de usuario (GUI) hace que el
sistema sea amigable y fácil de usar.
La creación de una GUI requiere creatividad y
conocimiento de cómo funcionan los componentes de
la GUI.
Dado que los componentes de la GUI en Java son muy
flexibles y versátiles, puede crear una amplia variedad
de interfaces de usuario útiles.
Características
Acceso a la API de Java
FXML y Scene Builder
WebView
Interoperabilidad del swing
Controles de UI incorporados y CSS
Aplicaciones MVC
Escenarios (I)
Las aplicaciones JavaFX están conformadas por elementos
denominados escenarios que incluyen escenas donde se
incorporan los diferentes componentes gráficos.
Se debe importar el paquete javafx.
Las ventanas principales son instancias de la clase Application.
Para iniciar una aplicación se debe invocar al método launch()
desde el método main.
Al iniciarse, la aplicación llamará al método start(). Por lo
general, el método start() crea y muestra una ventana de algún
tipo.
Se deben definir los métodos init() y stop().
El método init() es automáticamente invocado por la aplicación para
inicializar objetos antes que la aplicación inicie.
Cuando la aplicación termina, la aplicación llamará inmediatamente al
método stop() para cerrar archivos, liberar recursos, etc.
Escenarios (II)
Escenarios (III)
El método start() cuenta con un único parámetro de tipo
stage, el cual es un objeto que representa un escenario
(un tipo especial de ventana).
Para hacer algo visible, se debe crear un objeto Scene, que
define una escena (la apariencia de la aplicación).
El objeto Scene contiene componentes gráficos
denominados nodos y agrupados en contenedores que
pertenecen a la clase Pane.
Eventos (I)
Un evento es algo que sucede en el programa en función
de algún tipo de entrada que, generalmente, es causada
por la interacción del usuario, como presionar una tecla
en el teclado o hacer clic con el ratón.
El origen de un evento es el componente para el que
se generó el evento, es decir, cuando se gestionan clics de
un botón, el componente botón es el origen.
Un controlador de eventos es un procedimiento que
contiene el código que se ejecutará cuando ocurra un
tipo específico de evento en el programa
Eventos (II)
Estos eventos se generan cuando el usuario interactúa
con la GUI de la siguiente manera:
1. El usuario provoca un evento haciendo clic en un botón,
presionando una tecla, seleccionando un elemento de la lista,
etc.
2. Se generan eventos.
3. Se llama al controlador de eventos apropiado.
4. El código de manejo de eventos cambia el modelo
(estados de los objetos) de alguna manera.
5. La interfaz de usuario se actualiza para reflejar estos
cambios en el modelo.
Ejemplo – Hola Mundo
Componentes gráficos (I)
Componentes gráficos (II)
Componentes gráficos (III)
Componentes gráficos (IV)
Label
La clase Label define etiquetas.
ButtonBase and Button
Un botón es un control que desencadena un evento de
acción cuando se hace clic en él. JavaFX proporciona
botones normales, botones de alternar, botones de casilla
de verificación y botones de radio.
Ejemplo
CheckBox
Se utiliza una casilla de verificación para que el usuario realice
una selección. Hereda todas las propiedades, como onAction,
text, graphic, alignment, graphicTextGap, textFill,
contentDisplay de ButtonBase y Labeled.
Ejemplo
RadioButton
Los botones de radio permiten elegir un solo elemento
de un grupo de opciones.
Ejemplo
TextField
El TextField se puede usar para ingresar o mostrar una
cadena. TextField es una subclase de TextInputControl.
Ejemplo
TextArea
Un TextArea permite al usuario ingresar varias líneas de
texto.
Ejemplo
ComboBox
Un ComboBox, también conocido como lista de opciones
o lista desplegable, contiene una lista de elementos entre
los que el usuario puede elegir.
Ejemplo
ListView
Una ListView es un componente que realiza básicamente
la misma función que un ComboBox, pero permite al
usuario elegir un valor único o varios valores.
Ejemplo
ScrollBar
Una ScrollBar es un control que permite al usuario
desplazarse en contenidos superiores al un control
determinado. La barra de desplazamiento aparece en dos
estilos: horizontal y vertical.
Ejemplo
Ejemplo - Contactos
Se requiere desarrollar un programa que permita (en una
ventana) ingresar los datos de un contacto en una agenda
personal. Los datos de un contacto son:
Nombres y apellidos: se ingresan en objetos TextField
independientes.
Fecha de nacimiento: se debe desplegar un calendario
utilizando la clase DatePicker.
Dirección, teléfono, correo electrónico: se ingresan en un
TextField cada uno.
Una vez se ingresan los datos, se debe oprimir un botón
denominado “Agregar” que permite que el contacto se
añada a una lista (clase ListView) ubicada en la parte
inferior de la ventana.
Diagrama de clases
Ejercicio - Banderas
Se requiere desarrollar un programa que muestre en una
ventana y en una primera columna el texto de cinco
países.
En otra columna habrá imágenes de cinco banderas
identificadas con un número.
El usuario debe ingresar en un campo de texto al lado
del país, el número de la bandera que corresponde.
El programa debe calcular, en la parte inferior de la
ventana, la cantidad de aciertos que obtuvo el usuario.
