Librerías Interfaz Gráfica

Introducción a JavaFX

Bibliotecas de GUI en Java

Bibliotecas de Interfaz Gráfica de Usuario (GUI) en Java son conjuntos de APIs (Interfaces de Programación de Aplicaciones) que proporcionan los elementos necesarios para crear interfaces gráficas de usuario en aplicaciones Java. Estas bibliotecas incluyen ventanas, botones, menús, cuadros de texto, y otros, que permiten a las desarrolladoras diseñar y construir aplicaciones interactivas y visualmente atractivas.

Línea temporal de aparición de las bibliotecas de GUI

• 1995: Lanzamiento de Java AWT
• 1997: Introducción de Java Swing
• 2008: Introducción de JavaFX
• Evolución Continua: Mejora y mantenimiento de JavaFX en versiones posteriores de Java

Bibliotecas de GUI en Java

Java AWT

• Introducido en 1995
• Primera generación de librerías de diseño GUI en JAVA
• Carece de controles avanzadados
• Utiliza componentes nativos del SO

Librerías para el diseño de Interfaces Gráficas de Usuario(GUI)

Java Swing

• Segunda generación de librerías JAVA
• Proporciona componentes ligeros, altamente personalizables y una apariencia consistente en todas las plataformas.
• Su objetivo era superar las limitaciones de AWT, pero en sus inicios resultó ser muy inestable y lenta.

Librerías para el diseño de Interfaces Gráficas de Usuario(GUI)

Java FX

• Ultima generación de librerías JAVA
• Desarrollada por Java/Oracle
• Multiplataforma
• No utiliza componentes nativos
• Permite el uso de CSS para el estilizado, incrustación de HTML, y ofrece soporte para gráficos avanzados, animaciones y multimedia
• Actualmente es desarrollado y mantenido por OpenJFX: https://openjfx.io/

Librerías para el diseño de Interfaces Gráficas de Usuario(GUI)

JAVA FX

JAVA SWT

JAVA AWT

Primer proyecto en Java FX

A continuación crearemos nuestro primer proyecto en Java FX. Para trabajar con JavaFX, necesitaremos un JDK que incluya o sea compatible con JavaFX. JDK (Java Development Kit) es un paquete de software necesario para desarrollar aplicaciones en Java. Incluye el compilador de Java (javac), el entorno de ejecución de Java (JRE - Java Runtime Environment), bibliotecas estándar de Java y diversas herramientas de desarrollo, como depuradores y herramientas de monitoreo. A partir de JDK 11, Oracle dejó de incluir JavaFX en el JDK estándar. Sin embargo, podemos descargar el JDK de Oracle y luego añadir el SDK de JavaFX por separado. Descarga JDK de la página de Oracle: https://www.oracle.com/java/technologies/downloads/#jdk21-windows Descarga Java FX: https://openjfx.io/openjfx-docs/

Primer proyecto en Java FX

Añadiremos las librerías en el IntelliJ Ve a File -> Project Structure -> Libraries. Haz clic en + y añade la carpeta lib del SDK de JavaFX descargado. Crea un proyecto de tipo Java FX y ejecuta el código que trae por defecto.

Primer proyecto en Java FX

Estructura de proyectos en Java FX

El punto de entrada a una aplicación JAVA FX es la clase que extiende Application. En ella deberemos completar el método start(), que es abstracto en la clase Application. La estructura de una aplicación en JavaFX se basa en una metáfora con una obra de teatro: Escenario (Stage) En una obra de teatro, el escenario es donde se presenta la acción. En JavaFX, el Stage es la ventana principal de la aplicación. En nuestro método start() siempre haremos stage.show() al final del mismo.

Primer proyecto en Java FX

Escena (Scene): Una escena es una parte de la acción que se desarrolla en el escenario. En JavaFX, una Scene es un contenedor que puede contener varios nodos, como botones, etiquetas, y paneles. Es el contenido que se muestra en el Stage.

Primer proyecto en Java FX

Reparto (Nodes):En una obra de teatro, los actores son los elementos que realizan acciones en el escenario. En JavaFX, los Nodes son los componentes visuales que componen la interfaz de usuario, como botones, etiquetas, cuadros de texto, etc. Existe un nodo principal o raíz que contiene a los demás. Este nodo pertenece a la clase Parent y se diferencia de otros nodos como Button, Label, ChoiceBox, etc en que puede contener a otros nodos actuando de contenedor.

Primer proyecto en Java FX

Guión (FXML):El guión de una obra de teatro contiene los diálogos y las instrucciones para los actores. En JavaFX, los archivos FXML actúan como el guión, definiendo la estructura de la interfaz de usuario en formato XML.

Primer proyecto en Java FX

Director/a (Controller):La directora de una obra de teatro es responsable de dirigir a los actores y coordinar la acción. En JavaFX, el Controller es la clase que maneja la lógica de la aplicación y las interacciones del usuario. Define cómo los Nodes responden a eventos como clics de ratón.

Primer proyecto en Java FX

UI Controls

Los principales controles en Java FX se encuentran detallados en : https://fxdocs.github.io/docs/html5/#_ui_controls https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm A continuación realizaremos un ejemplo de cada uno https://github.com/jjenkov/javafx-examples#javafx-basic-examples

Patrón MVC

Crear controles dentro de la clase Application no es buena práctica. En realidad, JavaFX fue diseñado con el patrón MVC, o Model-View-Controller, en mente. Este patrón mantiene el código que gestiona los datos de la aplicación separado del código de compone la interfaz de usuario. A continuación se describe cómo se implementa el patrón MVC en una aplicación JavaFX: 1. Modelo (Model) El Modelo representa los datos de la aplicación y la lógica de negocio. No tiene conocimiento de la interfaz de usuario. En JavaFX, el Modelo generalmente se implementa con clases que contienen propiedades y métodos para manipular los datos.

Patrón MVC

Vista (View) La Vista es la interfaz de usuario de la aplicación. En JavaFX, la Vista se define utilizando archivos FXML. La Vista no debe contener lógica de negocio.

Patrón MVC

3. Controlador (Controller)El Controlador actúa como intermediario entre el Modelo y la Vista. Maneja la lógica de eventos y actualiza el Modelo y la Vista según sea necesario.

Patrón MVC

Flujo de trabajo en MVC con JavaFX

• Modelo: Define y maneja los datos de la aplicación.

• Vista: Define la interfaz de usuario en FXML y muestra los datos del Modelo.

• Controlador: Captura eventos de la Vista, actualiza el Modelo, y, si es necesario, actualiza la Vista.

El uso del patrón MVC en JavaFX ayuda a mantener una clara separación de responsabilidades, lo que facilita la evolución de la aplicación y la reutilización del código. En la próxima clase detallaremos qué es FXML y cómo empezar a crear elementos de la vista separadamente.