Java FX
Aldo Malaver Ciudad
Unidad 1
Aldo Malaver
Vamos a conocernos un poco
• Nombres
• Rol actual
• ¿Has trabajado antes con Java o Java FX?
• ¿Cuál es tu objetivo?
Programación orientada a Objetos
• La POO es un paradigma que ha ganado popularidad en los últimos años
debido a su capacidad para crear aplicaciones más robustas, flexibles y
fáciles de mantener.
• Esta metodología de desarrollo se basa en la idea de que los programas se
puedan organizar como una colección de objetos interconectados, cada uno
con su propio conjunto de datos y funcionalidades.
Programación orientada a Objetos
• Es un paradigma de programación, es decir, un modelo o un estilo de
programación que nos da unas guías sobre cómo trabajar con él. Se
basa en el concepto de clases y objetos.
• Se busca dejar de centrarse en la lógica pura de los programas, para
empezar a pensar en objetos, dejar de pensar en funciones, y pensar en
las relaciones o interacciones de los componentes del sistema.
Pilares de programación orientada a objetos
• La programación orientada a objetos está compuesta de 4 pilares o
principios los cuales son los siguientes:
❑ Encapsulación
❑ Herencia
❑ Polimorfismo
❑ Abstracción
Encapsulación
• La encapsulación contiene toda la información importante de un
objeto dentro del mismo y solo expone información seleccionada.
• La única forma en la que se puede modificar la información de un
objeto es mediante los propios métodos del objeto (get y set).
• Ejemplo: Una Laptop tiene información pública como pantalla o
entradas e información privada como placa madre o memoria.
Encapsulación
public class Persona {
public String nombres;
public String apellidos;
public String getNombres() {
return nombres;}
public void setNombres(String nombres) {
this.nombres = nombres;
}
public String getApellidos() {
return apellidos;
}
public void setApellidos(String apellidos) {
this.apellidos = apellidos;
}}
Herencia
• Define relaciones jerárquicas entre clases, de forma que atributos y
métodos comunes puedan ser reutilizados.
• Las clases Padres extienden atributos y comportamientos a las
clases hijas.
• Se utiliza las palabras claves extends y super.
Herencia
public class Main extends Persona {
public Main(){ Palabra clave extends
super();
}
}
Palabra clave super
Polimorfismo
• Consiste en diseñar objetos para compartir comportamientos, lo
que nos permite procesar objetos de diferentes maneras.
• El polimorfismo permite que el mismo método ejecute diferentes
comportamientos secundarios específicos de dos formas: anulación
de métodos y sobrecarga de método.
• Existe la sobrecarga de método y constructores.
Polimorfismo
public class PersonaNatural extends Persona implements IPersona{
public String nombres() {
return "Aldo";
}
public String apellidos() {
return "Malaver";
}
public static void main(String[] args) {
PersonaNatural personaNatural = new PersonaNatural();
personaNatural.nombres();
Persona persona = personaNatural;
IPersona ipersona = personaNatural;
}
}
Abstracción
• Es cuando el usuario interactúa solo con los atributos y métodos
seleccionados de un objeto, utilizando herramientas simplificadas de alto
nivel para acceder a un objeto complejo.
• En la POO, los programas suelen ser muy grandes y los objetos se
comunican mucho entre sí. La abstracción facilita el mantenimiento de un
código de gran tamaño, donde a lo largo del tiempo pueden surgir
diferentes cambios.
Qué es una clase
• Una clase es una abstracción de la realidad o plantilla compuesta
por campos o atributos, constructores y métodos.
Nombre del paquete
package com.java;
Palabra clave class
Modificador
public class Main { Nombre de la
de acceso
clase
public static void main(String[] args) {
Cuerpo de
la clase
}
}
Qué es una clase
Elemento Ejemplo ¿Requerido? ¿Dónde va?
Declaración de Paquete package abc; No Primera línea en el archivo
Enunciado import import java.util.*; No Inmediatamente después del
paquete
Declaración de clase public class C Si Inmediatamente después del
import
Declaración de campos int value; No En cualquier lugar dentro de una
clase
Declaración de métodos void metodo() No En cualquier lugar dentro de un
a clase
Qué es una interfaz
• Es una colección de métodos abstractos y propiedades constantes.
• En la versión java 8 se pueden definir métodos estáticos y default.
Modificador de Palabra clave interface
acceso
public interface IAlumno { Nombre de la
interface
static final Double PI = 3.14; Constante
String getNombre(); Método abstracto
}
Qué es un Enum
• Es una agrupación de constantes para tener mayor control.
Modificador de Palabra clave enum
acceso
public enum EstadoEnum { Nombre del
enum
ACTIVO,
Constantes
BLOQUEADO, definidas
INACTIVO;
}
Instalación de herramientas
• Netbeans (https://netbeans.apache.org/)
• JDK 11
• Java FX
Ejercicio 1: POO
• Realizar un proyecto para poner en práctica los 4
principios de la programación orientada a objetos
Java FX
• Java FX es una librería con un conjunto de API
interoperable escrita en Java para el propósito de crear
aplicaciones de interfaz de usuario.
• Construido con archivos Java, XML y CSS.
Java FX
• Antes de Java FX, se trabajaba con AWT y Swing.
• AWT (1995)
• Swing (1997)
• JavaFX (2008)
• En 2014 se liberó Java FX 8.0 con JDK 8 (gráficos 3D y rich text)
Proyecto en Java FX
• Abrir Netbeans
• Crear un proyecto en Java FX
• Tipo Simple JavaFX Maven
Archetype
Unidad 2
Aldo Malaver
Layouts Principales
HBox • Es una fácil opción de poner nodos
• JavaFX tiene muchas layouts por defecto
• Hbox, Vboox
• FlowPane
• BorderPane
• GridPane
VBox FlowPanel
Uso de Layouts
• El Layout BorderPane provee 5 regiones en el cual se
puede alojar nodos: top, bottom, left, right y center.
Uso de Layouts
• El panel HBox provee una fácil forma para arreglar una
serie de nodos en una sola fila.
• La propiedad de padding puede ser configura para
administrar la distancia entre los nodos y bordes del
panel HBox.
Uso de Layouts
• El panel VBox es similar al HBox, excepto que los nodos
son arreglados en una sola columna.
• La propiedad de padding puede ser configura
para administrar la distancia entre los nodos y
bordes del panel VBox.
Uso de Layouts
• El panel StackPane coloca todos los nodos dentro de
una sola pila con cada nuevo nodo agregado encima del
nodo anterior.
• Este modelo de diseño proporciona una manera fácil de
superponer texto en una forma o imagen o de
superponer formas comunes para crear una forma
compleja.
Uso de Layouts
• FlowPane se disponen
consecutivamente y se envuelven en
el límite establecido para el panel.
• Los nodos pueden fluir verticalmente
(en columnas) u horizontalmente (en
filas). Un panel de flujo vertical se
envuelve en el límite de altura del
panel.
Uso de Layouts
• TilePane es similar a un FlowPane. TilePane coloca todos los
nodos en una cuadrícula en la que cada celda o mosaico
tiene el mismo tamaño. Los nodos se pueden distribuir
horizontalmente (en filas) o verticalmente (en columnas).
• El mosaico horizontal envuelve los mosaicos en el límite de
ancho del panel de mosaico y el mosaico vertical los
envuelve en el límite de altura. Utilice las propiedades
prefColumns y prefRows para establecer el tamaño
preferido del panel de mosaico.
Uso de Layouts
• AnchorPane permite anclar nodos
en la parte superior, inferior,
izquierda, derecha o centro del
panel. A medida que se cambia el
tamaño de la ventana, los nodos
mantienen su posición relativa a su
punto de anclaje.
Crea un GUI
En este punto vamos a crear una GUI usando los principales
Layouts, el uso de Stage y Scene
Manejo del GridPanel
• El GridPanel permite crear una cuadrícula flexible de
filas y columnas en la que se puede colocar los nodos.
• Los nodos se pueden colocar en cualquier celda de la
cuadrícula y pueden abarcar celdas según sea necesario.
Patrón MVC
• El patrón MVC consiste en la separación de
un software en tres componentes: modelo,
vista y controlador, y describe como se
relacionarán entre ellos para mantener una
estructura organizada, limpia y con un
acoplamiento mínimo entre las distintas
capas.
Patrón MVC
• En la capa Modelo encontraremos la representación de los datos del
dominio, aquellas entidades que sirven para almacenar información.
• En la capa Vista está la responsabilidad de generar la interfaz de nuestro
software componer las pantallas, páginas.
• La capa Controlador actúa como intermediarios entre el usuario y el
software. Es capaz de capturar las acciones de la vista y actuar en función de
ellas.
FXML
• Es un Lenguaje de etiqueta basado en XML para definir las
interfaces de usuario de una aplicación Java FX.
<HBox>
HBox box = new HBox();
<children>
box.getChildren().addAll(new Label(“User Name”),
<Label text=“ User Name” />
new TextField(),
<TextField />
new Button(“Connect”));
<Button text=“Connect” />
</HBox>
HBox box = FXMLLoader.<HBox>load(this.getClass()
.getResource(“simpleui.fxml));
FXML
Recurso FXML Clase FXMLLoader Controller
El archivo XML con Clase utilitaria para cargar un Una clase responsable para
declaraciones para UI archivo FXML los comportamientos
Controller
Contiene referencia a Máximo un controlador por
Inicializado por FXML Loader
elementos UI FXML
Event Handlers por elementos Puede tener métodos de Constructor por defecto debe
UI inicialización ser público
Beneficios de FXML
Leible No recompilable Localización
Estructura jerárquica de XML FXML no es un lenguaje
estrechamente paralelos Java compilable, solo reejecuta la Internacionalización es muy
FX Scene GRaph app después de cambios simple y automática
Scene Builder
Scene Builder está escrito como una aplicación JavaFX, compatible con Windows, Mac
OS X y Linux. Es el ejemplo perfecto de una aplicación de escritorio JavaFX completa.
Scene Builder está empaquetado como una aplicación independiente, lo que significa
que viene con su propia copia privada de JRE.
• UI Layout Tool
• Drag & Drop UI
• FXML Visual Editor
• Cross Platform
• Integrtated with IDEs
• CSS Support
Scene Builder
WebView
• JavaFX WebView es un mini navegador que se denomina navegador integrado en la
aplicación JavaFX. Este navegador se basa en WebKit, que es un motor de
navegador de código fuente abierto compatible con CSS, JavaScript, DOM y HTML5.
JavaFX WebView le permite realizar las siguientes tareas en sus aplicaciones JavaFX:
• Procesar contenido HTML desde URL locales y remotas
• Obtener historial web Ejecutar comandos JavaScript Realizar llamadas ascendentes de
JavaScript a JavaFX Administrar ventanas emergentes web Aplicar efectos al navegador
integrado
Control UI y CSS
La interfaz gráfica de usuario de cada aplicación de escritorio considera
principalmente los elementos, diseños y comportamiento de la interfaz de
usuario. Los elementos de la interfaz de usuario son los que realmente se
muestran al usuario para la interacción o el intercambio de información.
El diseño define la organización de los elementos de la interfaz de usuario
en la pantalla. El comportamiento es la reacción del elemento de la interfaz
de usuario cuando se produce algún evento en él.
Control UI y CSS
SN Control Description
1 Label La etiqueta es un componente que se utiliza para definir un texto simple en la
pantalla. Por lo general, se coloca una etiqueta con el nodo que describe.
2 Button El botón es un componente que controla la función de la aplicación. La clase de
botón se utiliza para crear un botón etiquetado.
3 RadioButton El botón de radio se utiliza para proporcionar varias opciones al usuario. El
usuario sólo puede elegir una opción entre todas. Un botón de radio está
seleccionado o deseleccionado.
4 CheckBox El Checkbox se utiliza para obtener el tipo de información del usuario que
contiene varias opciones. El usuario marcó la casilla de verificación activada
(verdadero) o desactivada (falso).
5 TextField El campo de texto se usa básicamente para obtener la entrada del usuario en
forma de texto. javafx.scene.control.TextField representa TextField
Control UI y CSS
6 PasswordField PasswordField se utiliza para obtener la contraseña del usuario. Cualquier cosa
que se escriba en el campo de contraseña no se muestra en la pantalla a
nadie.
7 HyperLink Los hipervínculos se utilizan para referir cualquier página web a través de su
aplicación. Está representado por la clase javafx.scene.control.HyperLink
8 Slider El control deslizante se utiliza para proporcionar un panel de opciones al
usuario en forma gráfica donde el usuario necesita mover un control
deslizante sobre el rango de valores para seleccionar uno de ellos.
9 ProgressBar La barra de progreso se utiliza para mostrar el progreso del trabajo al usuario.
Está representado por la clase javafx.scene.control.ProgressBar.
Control UI y CSS
10 ProgressIndicator En lugar de mostrar el progreso analógico al usuario, muestra el progreso
digital para que el usuario pueda saber la cantidad de trabajo realizado en
porcentaje.
11 ScrollBar La barra de desplazamiento JavaFX se utiliza para proporcionar una barra de
desplazamiento al usuario para que pueda desplazarse hacia abajo en las
páginas de la aplicación.
12 Menu JavaFX proporciona una clase de menú para implementar menús. El menú es
el componente principal de cualquier aplicación.
13 ToolTip JavaFX ToolTip se utiliza para proporcionar pistas al usuario sobre cualquier
componente. Se utiliza principalmente para proporcionar sugerencias sobre
los campos de texto o los campos de contraseña que se utilizan en la
aplicación.
CSS
JavaFX brinda la posibilidad de usar CSS para mejorar la apariencia de la aplicación. El paquete
javafx.css contiene las clases que se utilizan para aplicar CSS para aplicaciones JavaFX. Un CSS se
compone de reglas de estilo que son interpretadas por el navegador y luego aplicadas a los
elementos correspondientes en su documento.
Una regla de estilo consta de tres partes, que son:
• Selector: Es una etiqueta HTML en la que se aplicará un estilo. Podría ser un <h1> o <table>, etc.
• Propiedad: En términos más simples, los atributos HTML se convierten en propiedades CSS.
• Valor: Se asignan a las propiedades. Ejemplo, una propiedad de color puede tener el valor rojo
o #F1F1F1, etc.
Properties
• Un data observable, el cual permite automáticamente ser
notificado hacia un cambio de datos envueltos dentro
Mantiene el valor actual Provee soporte al cambio Soporte invalidación
Capacidades Bingind Propiedades de solo lectura
Properties
• Se cuenta con diversos ejemplos de Properties:
• SimpleBooleanProperty
• SimpleIntegerProperty
• ReadOnlyBooleanWrapper
• ReadOnlyIntegerWrapper
Binding
• Una property puede ser mapeada a un objetivo.
• Crea un enlace entre propiedades.
• Sincroniza dos propiedades.
• Unidireccional o Bidireccional.
• La API de alto nivel es la forma más rápida y sencilla de comenzar a utilizar enlaces en sus propias
aplicaciones. Consta de dos partes: la API Fluent y la clase Bindings. La API Fluent expone métodos en
los diversos objetos de dependencia, mientras que la clase Bindings proporciona métodos de fábrica
estáticos en su lugar. Para comenzar a usar la API de Fluent, considere un caso de uso simple en el
que se unen dos números enteros para que sus valores siempre se sumen.
Binding
package bindingdemo;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.binding.NumberBinding;
public class Main {
public static void main(String[] args) {
IntegerProperty num1 = new SimpleIntegerProperty(1);
IntegerProperty num2 = new SimpleIntegerProperty(2);
NumberBinding sum = num1.add(num2);
System.out.println(sum.getValue());
num1.set(2);
System.out.println(sum.getValue());
}
}
Colecciones y Concurrencia
• Detectan cambia a una colección
• Agregando ítems
• Removiendo Items
• FXCollections es una clase utilitario
• Clases / Interfaces
• ObservableList
• ObservableSet
• ObservableIntegerArray
Colecciones y Concurrencia
Clases / Interfaces Change Listeners
ObservableList ListChangeListener
ObservableMap/ObservableHashMap MapChangeListener
ObservableSet SetChangeListener
ObservableIntegerArray ArrayChangeListener
ObservableFloatArray ArrayChangerListener
ObservableArray ArrayChangerListener
TableView
JavaFX TableView le permite mostrar vistas de tabla dentro de sus aplicaciones
JavaFX. El TableView de JavaFX está representado por la clase
javafx.scene.control.TableView. Aquí hay una captura de pantalla de un JavaFX
TableView:
Alerts
• Alert es parte de JavaFX y es una subclase de la clase Dialog. Las alertas son
algunos cuadros de diálogo predefinidos que se utilizan para mostrar cierta
información al usuario. Las alertas son básicamente de tipos de alerta
específicos:
• Alerta de CONFIRMACIÓN: el tipo de alerta de CONFIRMACIÓN configura el cuadro de diálogo
Alerta para que aparezca de una manera que sugiera que el contenido del cuadro de diálogo
está buscando la confirmación del usuario.
Alerts
• Alerta de ADVERTENCIA: el tipo de alerta de ADVERTENCIA configura el cuadro de diálogo Alerta
para que aparezca de manera que sugiera que el contenido del cuadro de diálogo advierte al
usuario sobre algún hecho o acción.
• Alerta NINGUNA: el tipo de alerta NINGUNA tiene el efecto de no establecer ninguna propiedad
predeterminada en la Alerta.
• Alerta de INFORMACIÓN: el tipo de alerta de INFORMACIÓN configura el cuadro de diálogo Alerta
para que aparezca de una manera que sugiera que el contenido del cuadro de diálogo informa al
usuario de una información.
• Alerta de ERROR: el tipo de alerta de ERROR configura el cuadro de diálogo Alerta para que
aparezca de una manera que sugiera que algo salió mal.
Alerts
Listeners
• Muy a menudo en JavaFX tenemos que reaccionar a los eventos del
usuario: el usuario hace clic en un botón, presiona una tecla, mueve
el mouse, etc.
Listeners
• Button Events
• CheckBox Events
• ComboBox Events
• Hyperlink Events
• Slider Events
• Change Listener
Ejercicio 2: JavaFX Controles
• Realizar un proyecto para poner en práctica lo visto
actualmente. – Layout, FXML, Listeners, etc.
Unidad 3
Aldo Malaver
Inserción de imágenes y animación
Image img = new Image(getClass().getResourceAsStream("/images/abc.png"));
public void start(Stage stage) {
// Panel principal que contendrá los elementos de la pantalla
Pane paneRoot = new Pane(); var scene = new Scene(paneRoot, 640, 480);
stage.setScene(scene); stage.show();
// Cargar la imagen crear objeto ImageView
Image img = new Image(getClass().getResourceAsStream("/images/abc.png"));
ImageView imgView = new ImageView(img);
// Añadir el ImageView al panel principal de la pantalla
paneRoot.getChildren().add(imgView);
}
Inserción de imágenes y animación
En general, animar un objeto implica crear la ilusión de su movimiento mediante una
visualización rápida. En JavaFX, un nodo se puede animar cambiando su propiedad con el tiempo.
JavaFX proporciona un paquete llamado javafx.animation. Este paquete contiene clases que se
utilizan para animar los nodos. La animación es la clase base de todas estas clases.
Con JavaFX, puede aplicar animaciones (transiciones) como Fade Transition, Fill Transition,
Rotate Transition, Scale Transition, Stroke Transition, Translate Transition, Path Transition,
Sequential Transition, Pause Transition, Parallel Transition, etc.
Inserción de imágenes y animación
Todas estas transiciones están representadas por clases individuales en el paquete
javafx.animation.
Para aplicar una animación particular a un nodo, debe seguir los pasos que se detallan a
continuación:
• Cree un nodo requerido usando la clase respectiva.
• Crea una instancia de la respectiva clase de transición (animación) que se va a aplicar
• Establecer las propiedades de la transición y
• Finalmente reproduzca la transición usando el método play() de la clase Animation.
Ejercicio 3: Animaciones del reloj
• Animaciones de Reloj
• Efectos y transiciones
• Iconos personalizados y finalización del reloj
Unidad 4
Aldo Malaver
Construir animaciones intermedias
• Creación de reloj analógico
Unidad 5
Aldo Malaver
Ejercicio 4: Construir un Selector de colores
• Interfaz gráfica de la aplicación Mini Cooper.
• Apagar y encender luces del Mini Cooper.
• Paleta de colores
Ejercicio 4: Construir un Selector de colores
• Eventos de mouse
• Estilo cascada css para la aplicación del MiniCooper
• Empaquetado de la app MiniCooper
SQL Lite
• SQLite es un motor de base de datos escrito en el lenguaje de programación C.
No es una aplicación independiente; más bien, es una biblioteca que los
desarrolladores de software integran en sus aplicaciones. Como tal, pertenece a la
familia de las bases de datos integradas. Es el motor de base de datos más
implementado, ya que lo utilizan varios de los principales navegadores web,
sistemas operativos, teléfonos móviles y otros sistemas integrados
Manejo de Base de datos
• Las Base de datos es un conjunto de datos pertenecientes a un mismo contexto y
almacenados sistemáticamente para su posterior uso.
• Existen dos tipos de base de datos:
o SQL: también llamada relacional, se refiere a que existen
relaciones entre distintas entidades o tablas de la base.
o NoSQL: No tiene una estructura definida y permiten manejar
adecuadamente la escalabilidad y rendimiento
Manejo de Base de datos
• Los motores de base de datos SQL manejan tipos de consultas para definir y
modificar datos.
• Existen las consultas transact-SQL comunes para todos los motores de base de
datos SQL.
• Existen dos tipos de consultas DDL y DML
Manejo de Connection
• Maneja la conexión (sesión) con una base de datos especifica.
• Las consultas SQL son ejecutadas y los resultados devueltos dentro del contexto de la
conexión.
public Connection connection() {
try {
Class.forName("nombre_del_driver");
DriverManager.getConnection("url", "user", "password");
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
}
Manejo de Statement
• La interfaz Statement provee métodos para ejecutar consultas con la base de datos.
try {
Statement stmt = conn.createStatement();
stmt.execute("sql");
} catch (SQLException e) {
e.printStackTrace();
}
Manejo de PreparedStatement
• Es la interfaz que maneja objetos que representan un SQL statement precompilado.
• Este objeto puede ser usado para ejecutar eficientemente statements múltiples
veces.
try {
PreparedStatement stmt = conn.prepareStatement("sql");
stmt.setInt(1, 1);
stmt.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
Manejo de CallableStatement
• La interfaz CallableStatement se utiliza para ejecutar procedimiento almacenados.
try {
CallableStatement cstmt = conn.prepareCall("{call proc(?,
?)}");
cstmt.setString(1, "parameter");
cstmt.registerOutParameter("inOutParam", Types.INTEGER);
} catch (SQLException e) {
e.printStackTrace();
}
Manejo de ResultSet
• La interfaz ResultSet representa el resultado de una tabla la cual generalmente es
devuelta después de una consulta.
final ResultSet rs = cStmt.getResultSet();
while (rs.next()) {
System.out.println(“resultado="+rs.getString("inputParam"));
}
Ejercicio 6: Java
JDBC
Retrofit
• Retrofit es un cliente REST para Java y Android que permite recuperar y cargar JSON
(u otros datos estructurados) a través de un sistema basado en REST. Puede
configurar qué convertidores se utilizan para la serialización de datos, por ejemplo,
GSON para JSON.
Ejercicio 7: Retrofit
