JavaFX Tutorial: Guía Completa para Desarrolladores
Este tutorial exhaustivo de JavaFX te guiará a través de los fundamentos y conceptos avanzados de esta poderosa biblioteca Java. Ya seas un principiante o un desarrollador experimentado, este tutorial te proporcionará los conocimientos necesarios para crear aplicaciones de escritorio y web enriquecidas (RIA) atractivas y funcionales.
JavaFX es una biblioteca Java versátil que ofrece una amplia gama de características para desarrollar aplicaciones de alta calidad que se ejecutan en múltiples plataformas, incluyendo web, móvil y escritorio. Con JavaFX, puedes crear interfaces de usuario atractivas, animaciones fluidas, gráficos impactantes y mucho más.
Fundamentos de JavaFX
Empecemos por los conceptos básicos de JavaFX. JavaFX se basa en el concepto de un «escenario» (Stage), que es la ventana principal de la aplicación. Dentro del escenario, se encuentra la escena (Scene), que contiene todos los elementos de la interfaz de usuario, como controles, gráficos y texto.
La Clase Stage
La clase Stage representa la ventana principal de la aplicación JavaFX. Cada aplicación JavaFX tiene al menos una instancia de Stage. La clase Stage proporciona métodos para controlar las propiedades de la ventana, como el título, el tamaño, la posición y la visibilidad.
«`java
// Crear una nueva instancia de Stage
Stage primaryStage = new Stage();
// Establecer el título de la ventana
primaryStage.setTitle(«Mi aplicación JavaFX»);
// Establecer el tamaño de la ventana
primaryStage.setWidth(400);
primaryStage.setHeight(300);
// Mostrar la ventana
primaryStage.show();
«`
La Clase Scene
La clase Scene representa el contenido visual de la ventana. Contiene todos los elementos de la interfaz de usuario, como controles, gráficos y texto. La clase Scene proporciona métodos para agregar, eliminar y manipular estos elementos.
«`java
// Crear una nueva instancia de Scene
Scene scene = new Scene(root, 400, 300);
// Establecer el color de fondo de la escena
scene.setFill(Color.LIGHTBLUE);
// Establecer el título de la escena
scene.setTitle(«Mi escena JavaFX»);
// Agregar la escena a la ventana
primaryStage.setScene(scene);
«`
El Nudo Raíz (Root Node)
El nudo raíz es el nodo principal de la jerarquía de nodos de la escena. Todos los demás nodos de la escena están conectados al nudo raíz. El nudo raíz es típicamente un Pane o un Group, que actúan como contenedores para otros nodos.
«`java
// Crear un nuevo nudo raíz
Pane root = new Pane();
// Agregar el nudo raíz a la escena
Scene scene = new Scene(root, 400, 300);
«`
Formas 2D y 3D
JavaFX ofrece una amplia gama de formas 2D y 3D predefinidas que se pueden utilizar para crear interfaces de usuario atractivas. Algunas de las formas 2D más comunes incluyen rectángulos, círculos, elipses, polígonos y líneas.
Rectángulos
La clase Rectangle representa un rectángulo. Puedes crear un rectángulo especificando su posición, ancho y alto.
«`java
// Crear un nuevo rectángulo
Rectangle rect = new Rectangle(50, 50, 100, 50);
// Establecer el color de relleno
rect.setFill(Color.RED);
// Establecer el color del borde
rect.setStroke(Color.BLACK);
// Establecer el grosor del borde
rect.setStrokeWidth(2);
// Agregar el rectángulo al nudo raíz
root.getChildren().add(rect);
«`
Círculos
La clase Circle representa un círculo. Puedes crear un círculo especificando su posición y radio.
«`java
// Crear un nuevo círculo
Circle circle = new Circle(100, 100, 50);
// Establecer el color de relleno
circle.setFill(Color.GREEN);
// Establecer el color del borde
circle.setStroke(Color.BLACK);
// Establecer el grosor del borde
circle.setStrokeWidth(2);
// Agregar el círculo al nudo raíz
root.getChildren().add(circle);
«`
Elipses
La clase Ellipse representa una elipse. Puedes crear una elipse especificando su posición, radio horizontal y radio vertical.
«`java
// Crear una nueva elipse
Ellipse ellipse = new Ellipse(150, 100, 75, 50);
// Establecer el color de relleno
ellipse.setFill(Color.BLUE);
// Establecer el color del borde
ellipse.setStroke(Color.BLACK);
// Establecer el grosor del borde
ellipse.setStrokeWidth(2);
// Agregar la elipse al nudo raíz
root.getChildren().add(ellipse);
«`
Efectos
JavaFX ofrece una amplia gama de efectos que se pueden aplicar a los nodos para crear interfaces de usuario más atractivas. Algunos de los efectos más comunes incluyen el efecto de sombra, el efecto de brillo y el efecto de desenfoque.
Efecto de Sombra
La clase DropShadow representa un efecto de sombra. Puedes aplicar un efecto de sombra a un nodo especificando el color, el radio y la distancia de la sombra.
«`java
// Crear un nuevo efecto de sombra
DropShadow shadow = new DropShadow();
shadow.setColor(Color.BLACK);
shadow.setRadius(5);
shadow.setOffsetX(5);
shadow.setOffsetY(5);
// Aplicar el efecto de sombra al rectángulo
rect.setEffect(shadow);
«`
Efecto de Brillo
La clase Glow representa un efecto de brillo. Puedes aplicar un efecto de brillo a un nodo especificando el color y el radio del brillo.
«`java
// Crear un nuevo efecto de brillo
Glow glow = new Glow();
glow.setLevel(0.5);
// Aplicar el efecto de brillo al círculo
circle.setEffect(glow);
«`
Efecto de Desenfoque
La clase Blur representa un efecto de desenfoque. Puedes aplicar un efecto de desenfoque a un nodo especificando el radio del desenfoque.
«`java
// Crear un nuevo efecto de desenfoque
Blur blur = new Blur();
blur.setRadius(5);
// Aplicar el efecto de desenfoque a la elipse
ellipse.setEffect(blur);
«`
Animaciones
JavaFX permite crear animaciones fluidas y atractivas para mejorar la experiencia del usuario. Puedes animar cualquier propiedad de un nodo, como su posición, tamaño, color, rotación y opacidad.
Animación de Posición
La clase TranslateTransition se utiliza para animar la posición de un nodo. Puedes crear una animación de posición especificando la duración de la animación, el desplazamiento en el eje X y el desplazamiento en el eje Y.
«`java
// Crear una nueva animación de posición
TranslateTransition translate = new TranslateTransition(Duration.millis(1000), rect);
translate.setByX(100);
translate.setByY(50);
// Reproducir la animación
translate.play();
«`
Animación de Tamaño
La clase ScaleTransition se utiliza para animar el tamaño de un nodo. Puedes crear una animación de tamaño especificando la duración de la animación y el factor de escala.
«`java
// Crear una nueva animación de tamaño
ScaleTransition scale = new ScaleTransition(Duration.millis(1000), circle);
scale.setByX(2);
scale.setByY(2);
// Reproducir la animación
scale.play();
«`
Animación de Color
La clase FillTransition se utiliza para animar el color de relleno de un nodo. Puedes crear una animación de color especificando la duración de la animación y los colores inicial y final.
«`java
// Crear una nueva animación de color
FillTransition fill = new FillTransition(Duration.millis(1000), ellipse);
fill.setFromValue(Color.BLUE);
fill.setToValue(Color.RED);
// Reproducir la animación
fill.play();
«`
Texto
JavaFX ofrece una clase Text para mostrar texto en la pantalla. La clase Text permite personalizar el texto, como el tamaño de la fuente, el estilo de la fuente, el color y la alineación.
«`java
// Crear un nuevo objeto Text
Text text = new Text(100, 100, «Hola Mundo!»);
// Establecer el tamaño de la fuente
text.setFont(Font.font(«Arial», 20));
// Establecer el color del texto
text.setFill(Color.BLACK);
// Establecer la alineación del texto
text.setTextAlignment(TextAlignment.CENTER);
// Agregar el texto al nudo raíz
root.getChildren().add(text);
«`
Diseños
JavaFX proporciona una variedad de diseños que se pueden utilizar para organizar los elementos de la interfaz de usuario. Algunos de los diseños más comunes incluyen el diseño de flujo, el diseño de grilla y el diseño de borde.
Diseño de Flujo
El diseño de flujo (FlowPane) organiza los elementos de la interfaz de usuario en una sola fila o columna, dependiendo de la orientación.
«`java
// Crear un nuevo diseño de flujo
FlowPane flowPane = new FlowPane();
// Establecer la orientación del flujo
flowPane.setOrientation(Orientation.HORIZONTAL);
// Agregar los elementos al diseño de flujo
flowPane.getChildren().addAll(rect, circle, ellipse);
// Agregar el diseño de flujo al nudo raíz
root.getChildren().add(flowPane);
«`
Diseño de Grilla
El diseño de grilla (GridPane) organiza los elementos de la interfaz de usuario en una grilla.
«`java
// Crear un nuevo diseño de grilla
GridPane gridPane = new GridPane();
// Agregar los elementos al diseño de grilla
gridPane.add(rect, 0, 0);
gridPane.add(circle, 1, 0);
gridPane.add(ellipse, 0, 1);
// Agregar el diseño de grilla al nudo raíz
root.getChildren().add(gridPane);
«`
Diseño de Borde
El diseño de borde (BorderPane) organiza los elementos de la interfaz de usuario en cinco regiones: arriba, abajo, izquierda, derecha y centro.
«`java
// Crear un nuevo diseño de borde
BorderPane borderPane = new BorderPane();
// Agregar los elementos al diseño de borde
borderPane.setTop(rect);
borderPane.setLeft(circle);
borderPane.setRight(ellipse);
borderPane.setCenter(text);
// Agregar el diseño de borde al nudo raíz
root.getChildren().add(borderPane);
«`
Controles de Interfaz de Usuario
JavaFX proporciona una amplia gama de controles de interfaz de usuario que se pueden utilizar para crear aplicaciones interactivas. Algunos de los controles más comunes incluyen botones, campos de texto, cuadros de lista y menús.
Botones
La clase Button representa un botón. Puedes crear un botón especificando su texto y su comportamiento al hacer clic.
«`java
// Crear un nuevo botón
Button button = new Button(«Click me!»);
// Establecer el comportamiento al hacer clic
button.setOnAction(event -> System.out.println(«¡Se ha hecho clic en el botón!»));
// Agregar el botón al nudo raíz
root.getChildren().add(button);
«`
Campos de Texto
La clase TextField representa un campo de texto. Puedes crear un campo de texto especificando su texto inicial y su comportamiento al escribir.
«`java
// Crear un nuevo campo de texto
TextField textField = new TextField(«Escribe aquí»);
// Establecer el comportamiento al escribir
textField.setOnKeyTyped(event -> System.out.println(«Se ha escrito una tecla: » + event.getCharacter()));
// Agregar el campo de texto al nudo raíz
root.getChildren().add(textField);
«`
Cuadros de Lista
La clase ListView representa un cuadro de lista. Puedes crear un cuadro de lista especificando sus elementos y su comportamiento al seleccionar un elemento.
«`java
// Crear un nuevo cuadro de lista
ListView listView = new ListView();
// Agregar los elementos al cuadro de lista
listView.getItems().addAll(«Elemento 1», «Elemento 2», «Elemento 3»);
// Establecer el comportamiento al seleccionar un elemento
listView.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> System.out.println(«Se ha seleccionado el elemento: » + newValue));
// Agregar el cuadro de lista al nudo raíz
root.getChildren().add(listView);
«`
Menús
La clase Menu representa un menú. Puedes crear un menú especificando sus elementos y su comportamiento al seleccionar un elemento.
«`java
// Crear un nuevo menú
Menu menu = new Menu(«Archivo»);
// Agregar los elementos al menú
menu.getItems().addAll(new MenuItem(«Nuevo»), new MenuItem(«Abrir»), new MenuItem(«Guardar»));
// Establecer el comportamiento al seleccionar un elemento
menu.getItems().forEach(item -> item.setOnAction(event -> System.out.println(«Se ha seleccionado el elemento: » + item.getText())));
// Agregar el menú a la barra de menú
MenuBar menuBar = new MenuBar();
menuBar.getMenus().add(menu);
// Agregar la barra de menú al nudo raíz
root.getChildren().add(menuBar);
«`
Transformaciones
JavaFX proporciona una variedad de transformaciones que se pueden aplicar a los nodos para cambiar su posición, tamaño, rotación, escala y traslación.
Rotación
La clase Rotate se utiliza para rotar un nodo. Puedes crear una rotación especificando el ángulo de rotación y el punto de pivote.
«`java
// Crear una nueva rotación
Rotate rotate = new Rotate(45, rect.getX() + rect.getWidth() / 2, rect.getY() + rect.getHeight() / 2);
// Aplicar la rotación al rectángulo
rect.getTransforms().add(rotate);
«`
Escala
La clase Scale se utiliza para escalar un nodo. Puedes crear una escala especificando el factor de escala en el eje X y el factor de escala en el eje Y.
«`java
// Crear una nueva escala
Scale scale = new Scale(2, 2, circle.getX() + circle.getRadius(), circle.getY() + circle.getRadius());
// Aplicar la escala al círculo
circle.getTransforms().add(scale);
«`
Traslación
La clase Translate se utiliza para trasladar un nodo. Puedes crear una traslación especificando el desplazamiento en el eje X y el desplazamiento en el eje Y.
«`java
// Crear una nueva traslación
Translate translate = new Translate(100, 50);
// Aplicar la traslación a la elipse
ellipse.getTransforms().add(translate);
«`
Gráficos
JavaFX ofrece una API de lienzo (Canvas) que se puede utilizar para dibujar gráficos directamente en la pantalla. La API de lienzo proporciona métodos para dibujar líneas, rectángulos, círculos, elipses y texto.
Dibujar una Línea
«`java
// Obtener el contexto del lienzo
GraphicsContext gc = canvas.getGraphicsContext2D();
// Dibujar una línea
gc.strokeLine(10, 10, 100, 100);
«`
Dibujar un Rectángulo
«`java
// Obtener el contexto del lienzo
GraphicsContext gc = canvas.getGraphicsContext2D();
// Dibujar un rectángulo
gc.fillRect(10, 10, 50, 50);
«`
Dibujar un Círculo
«`java
// Obtener el contexto del lienzo
GraphicsContext gc = canvas.getGraphicsContext2D();
// Dibujar un círculo
gc.fillOval(10, 10, 50, 50);
«`
Integración con CSS
JavaFX admite la integración con CSS para el estilo de los elementos de la interfaz de usuario. Puedes crear archivos CSS separados y aplicarlos a los nodos JavaFX para personalizar su apariencia.
Crear un archivo CSS
Crea un archivo CSS llamado style.css con el siguiente contenido:
«`css
.button {
-fx-background-color: #4CAF50;
-fx-text-fill: white;
}
.text {
-fx-font-size: 20px;
-fx-text-fill: #000000;
}
«`
Aplicar el archivo CSS
java
// Cargar el archivo CSS
URL url = getClass().getResource("style.css");
Scene scene = new Scene(root, 400, 300);
scene.getStylesheets().add(url.toExternalForm());
Multimedia
JavaFX proporciona una API de multimedia que se puede utilizar para reproducir audio y video. Puedes utilizar esta API para agregar contenido multimedia a tus aplicaciones JavaFX.
Reproducir un archivo de audio
«`java
// Crear un nuevo reproductor de audio
MediaPlayer mediaPlayer = new MediaPlayer(new Media(getClass().getResource(«audio.mp3»).toExternalForm()));
// Reproducir el archivo de audio
mediaPlayer.play();
«`
Reproducir un archivo de video
«`java
// Crear un nuevo reproductor de video
MediaView mediaView = new MediaView(new Media(getClass().getResource(«video.mp4»).toExternalForm()));
// Agregar el reproductor de video al nudo raíz
root.getChildren().add(mediaView);
// Reproducir el archivo de video
MediaPlayer mediaPlayer = new MediaPlayer(mediaView.getMedia());
mediaPlayer.play();
«`
Resumen
Este tutorial ha cubierto los fundamentos y conceptos avanzados de JavaFX, proporcionándote una base sólida para crear aplicaciones de escritorio y web enriquecidas. Desde formas 2D y 3D hasta animaciones, efectos, diseños, controles de interfaz de usuario, transformaciones, gráficos, integración con CSS y multimedia, JavaFX te ofrece una amplia gama de herramientas para crear aplicaciones atractivas y funcionales.
Conclusión
JavaFX es una biblioteca Java poderosa y versátil que permite a los desarrolladores crear aplicaciones modernas y de alta calidad. Con su capacidad para crear interfaces de usuario atractivas, animaciones fluidas, gráficos impactantes y multimedia, JavaFX es una opción ideal para desarrollar aplicaciones de escritorio y web enriquecidas. Al seguir los conceptos y ejemplos de este tutorial, puedes dominar JavaFX y comenzar a crear aplicaciones innovadoras y funcionales.