Skip to content

1 Introducción a Java FX

Introducción

Hoy en día las interfaces de los programas son cada vez más sofisticadas y atractivas para el usuario. Son intuitivas y cada vez más fáciles de usar, como las pantallas táctiles, etc.

Sin embargo, no siempre ha sido así. No hace muchos años, antes de que surgieran y se popularizaran las interfaces gráficas para que el usuario interactuara con el sistema operativo con sistemas como Windows, etc., se trabajaba en modo consola, o modo carácter, es decir, se le daban las ordenes al ordenador con comandos por teclado, de hecho, por entonces no existía el ratón. Es lo que se conoce como interfaces de línea de comandos (CLI).

Así que, con el tiempo, con la idea de simplificar el uso de los ordenadores para extender el uso a un cada vez mayor espectro de gente, de usuarios de todo tipo, y no sólo para los expertos, se ha convertido en una práctica habitual utilizar interfaces gráficas de usuario (IGU ó GUI en inglés), para que el usuario interactúe y establezca un contacto más fácil e intuitivo con el ordenador.

En ocasiones verás otras definiciones de interfaz, como la que define una interfaz como un dispositivo que permite comunicar dos sistemas que no hablan el mismo lenguaje. También se emplea el término interfaz para definir el juego de conexiones y dispositivos que hacen posible la comunicación entre dos sistemas.

Ahora, cuando hablamos de interfaz nos referimos a la cara visible de los programas tal y como se presenta a los usuarios para que interactúen con la máquina. La interfaz gráfica implica la presencia de un monitor de ordenador, en el que veremos la interfaz constituida por una serie de menús e iconos que representan las opciones que el usuario puede tomar dentro del sistema.

JavaFX es por tanto el kit de herramientas GUI de última generación para la plataforma Java. Estaba completamente integrado con versiones como la 8 de de Java SE Runtime Environment (JRE) y el Java Development Kit (JDK), pero en marzo de 2018 Oracle anunció que sacaría JavaFX del JDK debido a que está evolucionando más rápidamente el lenguaje en sí, que JavaFX, que va más lento en su evolución.

En una aplicación de internet enriquecida (RIA), la presentación gráfica se gestiona en el lado del cliente y la manipulación de datos se lleva a cabo en el lado del servidor.

Arquitectura Java FX

Al principio, el primer sistema de Java para mostrar interfaces de usuario basadas en ventanas en Java. De ahí surgió Swing, que triunfó rápidamente y a partir de Java SE 7 Update 6, Oracle JavaFX es la tecnología indicada para desarrollar aplicaciones. Desde entonces, JavaFX formó parte del JDK para facilitar el desarrollo de aplicaciones de interfaz de usuario y proporciona un rico conjunto de API para desarrollo de gráficos y contenidos multimedia. Oracle anunció que JavaFX sustituiría a Swing. Aunque Swing todavía era compatible con Java 8 y será compatible con un futuro cercano, Swing estará obsoleto en poco tiempo.

Arquitectura JavaFx

Figura 1 - Arquitectura JavaFx

En el esquema podemos ver la arquitectura de JavaFX. Los elementos principales son:

  • Prism. Debajo de las API públicas de JavaFX se encuentra el motor que ejecuta el código JavaFX, es un motor gráfico de alto rendimiento para gráficos 2D y 3D.
  • Glass windowing toolkit, es el nuevo sistema de ventanas, que constituye una capa que conecta JavaFX al sistema operativo nativo. Proporciona servicios nativos del sistema operativo, como la administración de ventanas, eventos, temporizadores, etc.
  • Media engine, proporciona herramientas para crear aplicaciones multimedia que permiten la reproducción de medios en la ventana del escritorio o dentro de una página web en plataformas compatibles.
  • Web engine, es un motor de navegador web que admite HTML5, CSS, JavaScript, DOM y SVG.

Las aplicaciones usan la API pública de JavaFX para construir el grafo de escena (Scene Graph), que es la representación jerárquica de la interfaz. Por debajo hay una serie de componentes, que hemos visto en el esquema anterior, no accesibles sobre los que se apoya JavaFX.

Estructura de una App

Figura 2 - Estructura de una App

Normalmente, una aplicación JavaFX consta de un escenario (Stage) y una escena (Scene):

  • Stage es un contenedor de alto nivel, la ventana principal de la aplicación, representa la ventana del sistema operativo. En el caso de aplicaciones embebidas en un navegador web, sería el área rectangular principal. En el caso de aplicaciones de escritorio, el stage será la ventana, con su barra de título, y botones de maximizar, minimizar o cerrar.
  • Scene es el contenedor donde se aloja el grafo de escena.

Frecuentemente, se suele poner como ejemplo para entender estos conceptos, el hecho de ver el stage como un escenario o teatro en el que se desarrollan escenas. Así, el stage es un espacio, y una escena define qué sucede en ese espacio. Un stage es el contenedor de nivel superior, que como mínimo consta de una escena, que a su vez contiene otros elementos.

Grafo de escena

El grafo de escena constituye una estructura jerárquica que contiene la descripción de los elementos que forman la interfaz gráfica. Está formado por nodos dispuestos en un orden jerárquico. Este árbol jerárquico de nodos representa todos los elementos visuales del interfaz de usuario de la aplicación JavaFX.

Node

Figura 3 - Node

Este árbol jerárquico de nodos representa todos los elementos visuales del interfaz de usuario de la aplicación JavaFX.

Cada elemento de un grafo de escena es un nodo. Salvo el nodo raíz (root node) que es el primer nodo del árbol y no tiene padres, tenemos dos tipos de nodos:

  • Nodo contenedor, de tipo Parent, que contienen otros nodos hijos.
  • Nodo hoja, que no contienen otros nodos y pueden ser formas gráficas o texto, o bien controles de interfaz de usuario. Las formas geométricas y el texto heredan de la clase Shape o bien de la clase Shape3D. Los controles de interfaz de usuario así como los paneles de layouts heredan de la clase Parent.

Podemos manipular la escena modificando propiedades de un nodo. De esta forma, podemos animar nodos, aplicar efectos, hacer transformaciones o cambiar su opacidad, etc.

Los nodos son elementos individuales que forman una escena, como por ejemplo botones, cuadros de texto, layouts, etc. Si seguimos con el símil de un teatro, los nodos serían los actores y el atrezo.

Cualquier nodo de un grafo de escena hereda de la clase base Node, y existen otras clases que heredan directa o indirectamente de Node, como Parent, Group, Region o Control.

Instalación del SDK

Para instalar el SDK de JavaFX, podemos hacerlo de forma manual, descargando el fichero desde aquí. Luego, se deberá añadir la librería JavaFx como librería de nuestro proyecto.

También se puede realizar a través de maven o gradle:

<project xmlns="http://maven.apache.org/POM/4.0.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>javafx-app</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
        <javafx.version>19</javafx.version> <!-- Asegúrate de usar la versión correcta de JavaFX -->
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>${javafx.version}</version>
        </dependency>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-fxml</artifactId>
            <version>${javafx.version}</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>11</source>
                    <target>11</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.8</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>compile</goal>
                            <goal>process-classes</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <mainClass>com.example.App</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

plugins {
    id 'application'
    id 'org.openjfx.javafxplugin' version '0.0.13'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.openjfx:javafx-controls:19'
    implementation 'org.openjfx:javafx-fxml:19'
}

application {
    mainClass = 'App'
}

javafx {
    version = "19"
    modules = [ 'javafx.controls', 'javafx.fxml' ]
}