JavaFX
ÍNDICE
1. INSTALACIÓN Y CONFIGURACIÓN DE JavaFX 2
1.1 Instalación del plugin de JavaFX para Eclipse 2
1.2 Instalar SceneBuilder 3
1.3 Descargar SDK JavaFX 4
1.4 Configuración de JavaFX en Eclipse 4
2. MODELO-VISTA-CONTROLADOR 5
3. COMPONENTES GRÁFICOS 9
3.1 Stage, Scene y Nodos 9
3.2. Contenedores y Layouts 10
3.3 Componentes 12
3.4 Menús 14
4. GESTIÓN DE EVENTOS 14
4.1 Tipos de eventos 15
4.2 Asignar el controlador a la vista 15
4.3 Asignar eventos a los componentes gráficos 16
5. ESTILOS CSS 18
5.1 Introducción a JavaFX CSS 19
5.2 ¿Como incluir CSS en nuestro proyecto JavaFX? 20
5.3 Ejemplo de JavaFX CSS 21
ESQUEMA RESUMEN 23
1. INSTALACIÓN Y CONFIGURACIÓN DE JavaFX
JavaFX es un conjunto de paquetes para gráficos y tecnologías de Oracle Corporation
(inicialmente Sun Microsystems), que permite a los desarrolladores diseñar, crear, probar,
depurar e implementar aplicaciones cliente que operan de manera consistente en diversas
plataformas. Con JavaFX, diseñaremos de una forma fácil e intuitiva aplicaciones de escritorio
profesionales.
Los pasos iniciales que debemos dar para empezar a programar una aplicación con
Interfaz Gráfica de Usuario usando la tecnología JavaFX son:
1 .Instalar el plugin JavaFX para Eclipse.
2 .Instalar SceneBuilder.
3 .Descargar SDK de JavaFX.
4 . Configurar Eclipse
1.1 Instalación del plugin de JavaFX para Eclipse
El primer paso que debemos completar es instalar el plugin de JavaFX para Eclipse
denominado e(fx)clipse. Os recomendamos instalar siempre la última versión del
mismo.
Para ello, iremos al menú help y escogeremos allí la opción Eclipse Marketplace. En el
cuadro de texto find, escribiremos «javafx» y pulsaremos la tecla intro. El resultado será
muy parecido al mostrado en la siguiente imagen:
A continuación, debemos seleccionar el plugin e(fx)clipse 3.6.0 y hacer clic en el botón
Install. Se iniciará el proceso de instalación y, una vez completado este, tendremos que
reiniciar Eclipse.
En resumen:
help > Eclipse Marketplace > find "javafx" > seleccionar e(fx)clipse 3.6.0 > Install
Para comprobar que la instalación se ha producido con éxito, podemos ir al menú File,
opción New -Other y, si aparece la carpeta de JavaFX con las distintas opciones, será
porque la instalación es correcta.
1.2 Instalar SceneBuilder
JavaFX SceneBuilder es una herramienta de diseño visual que permite a los usuarios
diseñar rápidamente interfaces gráficas de usuario de aplicaciones JavaFX. Los usuarios
pueden arrastrar y soltar componentes de la interfaz de usuario en un área de trabajo,
modificar sus propiedades, aplicar hojas de estilo, establecer los eventos para cada uno
de los componentes gráficos, etcétera.
SceneBuilder genera automáticamente un código FXML, un lenguaje de marcado
basado en XML que permite a los usuarios definir la interfaz de usuario de una
aplicación, independientemente de la lógica de dicha aplicación.
SceneBuilder es una herramienta de diseño visual destinada al diseño de aplicaciones
JavaFX. SceneBuilder es una aplicación WYSIWYG, acrónimo de What You See Is What You
Get, lo que significa que, en cualquier momento durante la creación de una interfaz, es
posible obtener una vista previa del aspecto que tendrá realmente la interfaz de usuario
cuando se implemente.
Scene Builder está escrito como una aplicación JavaFX y es compatible con Windows,
Mac OS X y Linux. Es el ejemplo perfecto de una aplicación de escritorio JavaFX
completa.
Nos permite aplicar la apariencia que deseemos a nuestro diseño de IGU mediante el uso
de hojas de estilo. Esto es tan fácil como seleccionar un componente IGU y señalar el
archivo CSS deseado en el Panel de propiedades. Además, el analizador de CSS nos
permite comprender cómo las reglas específicas de CSS pueden afectar a los aspectos de
un componente JavaFX.
Para instalar SceneBuilder, debemos descargar el software de la página oficial del
desarrollador, para evitar cualquier situación inesperada en nuestro ordenador. En este
caso desde la página oficial.
1.3 Descargar SDK JavaFX
El kit de desarrollo de software (SDK, Software Development Kit) de JavaFX
proporciona las herramientas y tecnologías para desarrollar contenido para aplicaciones
implementadas en navegadores, ordenadores de escritorio y dispositivos móviles.
Visita la página oficial para descargar el SDK de JavaFX.
Lo único que debemos hacer es descargar el fichero comprimido del SDK de JavaFX y
descomprimirlo en una carpeta de fácil acceso, para que, posteriormente, podamos
indicar a Eclipse la ruta en la que hemos guardado la carpeta.
1.4 Configuración de JavaFX en Eclipse
Debemos configurar dos parámetros en Eclipse:
- La ruta hasta el ejecutable de SceneBuilder
- La ruta hasta el SDK JavaFX
Para ello, haremos clic en el menu Window, opción Preferences.
A continuación, escogeremos de la lista del panel izquierdo la opción JavaFX y veremos
la ventana que se muestra en la siguiente imagen. En esta ventana, debemos indicar los
dos parámetros que queremos configurar.
2. MODELO-VISTA-CONTROLADOR
El patrón Modelo-Vista-Controlador es un patrón de diseño de software que se
utiliza en muchos entornos distintos con muchos lenguajes de programación. Su
empleo se encuentra muy extendido para diseñar tanto aplicaciones web y aplicaciones
móviles como aplicaciones de escritorio.
Si no utilizamos el patrón Modelo-Vista-Controlador, el código fuente de la IGU, así
como los eventos y los métodos con la funcionalidad de la interfaz, están incluidos en el
mismo archivo, lo que hace que este tenga un mayor número de líneas y sea muy difícil
de modificar y de ampliar.
En cambio, si separamos en un archivo el código para la IGU (vista), empleamos otro
archivo solo para controlar los eventos (controlador) y reservamos otros archivos
para el dominio de nuestra aplicación (modelo), obtenemos un código mucho más
simple, más fácil de comprender y mucho más fácil de mantener. Esta es la filosofía
principal en que se basa el patrón Modelo-Vista-Controlador (MVC).
Los componentes de la arquitectura del patrón MVC están diseñados para manejar
diferentes aspectos de una aplicación en desarrollo. El patrón de diseño MVC sirve para
separar la capa de presentación de la lógica de la aplicación y es uno de los patrones de
diseño de software más utilizados para el desarrollo web y de aplicaciones. Este patrón
de diseño separa los distintos aspectos de nuestro proyecto en 3 grupos:
- Modelo: son todas las clases relacionadas con el dominio de nuestra aplicación.
Clases que realizan la lógica del programa y clases que se utilizan para almacenar y
gestionar los datos, a menudo, conectados con una base de datos.
- Vista: Interfaz Gráfica de Usuario. La vista contiene todas las funciones que
interactúan directamente con el usuario, como hacer clic en un botón o en un evento de
entrada. Además, se encarga de mostrar los datos almacenados al usuario.
- Controlador: conecta el modelo y la vista. Cuando un usuario interactúa con la IGU,
solicita al controlador que se ejecute un evento. Este evento va a comunicar con el
modelo de la aplicación e intercambiar datos. Estos datos serán devueltos al
controlador, que los mostrará al usuario a través de la vista (IGU).
El patrón MVC permite la separación de tareas, pues divide la lógica entre los 3 grupos
de clases, de modo que cada grupo pueda actuar de forma independiente.
El modelo, la vista y el controlador no dependen el uno del otro. ¿Qué importancia
tiene esto? ¡En realidad, mucha! Conviene recordar que, generalmente, el software lo
trabajan distintos equipos: así, un equipo puede estar formado por un diseñador, un
ingeniero y un arquitecto de base de datos. La separación de tareas implica que todos
los miembros del equipo pueden trabajar en sus piezas al mismo tiempo, ya que la
lógica del trabajo se ha dividido en grupos.
La separación de tareas también es excelente para el mantenimiento: los
desarrolladores pueden corregir un error en una parte del código, sin tener que revisar
las otras partes del mismo.
Hacer modelos, controladores y vistas independientes hace que la organización del
código sea simple y fácil de entender, y facilita su mantenimiento. Gracias a eso, los
programadores pueden corregir un error en la vista sin cambiar el código del modelo.
Crear un nuevo proyecto
Para crear nuestro primer proyecto JavaFX en Eclipse, en el menú File - New, escogeremos la
opción Other. Dentro de la lista que aparece, en el apartado de JavaFX, seleccionaremos la
opción de JavaFX Project.
En resumen: File > New > Other > JavaFx Project
En la primera ventana que aparece, indicaremos el nombre del proyecto y dejaremos intactas
el resto de las opciones que se muestran por defecto en esta ventana y en la siguiente.
En la tercera ventana, debemos configurar los siguientes parámetros:
- Application type: puedes escoger si es una aplicación para dispositivo móvil
(mobile) o paraescritorio (desktop).
- Package Name: nombre del paquete donde se crearán las clases del proyecto nuevo
de nuestra aplicación.
- Language: indicaremos el lenguaje que queremos utilizar para guardar nuestras
vistas.Nuestras IGU las programaremos con FXML.
- Root-Type: tipo de layout para el panel principal. Podemos escoger AnchorPane
para nuestra primera aplicación, por su sencillez de uso.
- File Name: nombre del fichero de la vista. Eclipse añadirá automáticamente la
extensión .fxml.
- Controller Name: nombre del fichero del controlador. Eclipse añadirá
automáticamente la extensión .java.
Se aconseja separar en diferentes paquetes (new - package) las clases, dependiendo de
la funcionalidad que tengan dentro del proyecto. Puedes crear los siguientes paquetes:
- aplicación: paquete donde estará la clase principal (Main.java). Es por donde
empezará a ejecutarse nuestro programa.
- controlador: paquete donde estarán todos los controladores de cada una de las
vistas de nuestra aplicación.
- excepciones: paquete donde crearemos nuestras propias excepciones de usuario.
- modelo: clases relacionadas con el modelo de nuestra aplicación.
- utilidades: paquete reservado para clases que no pertenecen al modelo de nuestra
aplicación -por ejemplo, clases para guardar cadenas de texto, métodos de cálculos,
etcétera.
- vista: aquí guardaremos nuestros ficheros .fxml con las diferentes ventanas de
nuestro programa.
- css (dentro de vista): se recomienda crear un paquete aparte para las hojas de estilo
CSS.
- img (dentro de vista): también se recomienda tener un paquete para almacenar las
imágenes utilizadas en las ventanas de nuestra aplicación.
Cuando empieza a ejecutarse la aplicación, el primer método que se va a ejecutar es el
método start() de la clase Main.java. A continuación, se muestra un ejemplo de cómo se podría
programar el método:
3. COMPONENTES GRÁFICOS
3.1 Stage, Scene y Nodos
En una aplicación JavaFX con una IGU se diferencian tres grandes componentes:
- Stage (ventana): es la ventana principal de la aplicación y viene determinada por el
sistema operativo donde estemos ejecutando el programa. Una ventana del mismo
programa se verá de forma diferente en cada S. O. sin que el programador pueda
modificarlo.
- Scene (escena): es lo que se muestra dentro de la aplicación. La escena describe
todo lo que hay dentro de una ventana en una aplicación JavaFX. Está definida
completamente por el programador, que puede diseñarla y cambiarla a su gusto.
- Nodos: son todos aquellos componentes gráficos que conforman la escena. Estos
nodos se almacenan en el fichero FXML en forma de árbol. Puedes repasar este
concepto en el módulo de Lenguajes de marcas.
Por tanto, acabamos de ver que un stage corresponde al contenedor de nivel superior y
consta, como mínimo, de una escena, que a su vez es contenedora de otros
componentes gráficos.
En la siguiente imagen puedes observar las diferentes partes de una ventana con
JavaFX:
Si nuestro programa es una aplicación de escritorio, el stage será la ventana, con su barra de
título y sus botones de maximizar, minimizar o cerrar. En el caso de que se ejecutase en un
navegador web, nuestro stage estará embebido dentro del navegador.
Los nodos son elementos individuales que forman una escena, como, por ejemplo, botones,
cuadros de texto, layouts, etc. En Java FX, los nodos pueden tener nodos hijos, que, a su vez,
tienen otros nodos hijos, como si de las ramas de un árbol se tratase.
El conjunto de todos los nodos que forman una escena es lo que llamamos Scene Graph o
grafo de la escena.
Existe un nodo especial llamado root node -o nodo raíz/padre-, del cual se extienden todos
los demás nodos. Este es el único que no tiene un nodo padre, pues el resto de nodos sí lo tienen
y son así descendientes -ya sea directa o indirectamente- del nodo raíz.
3.2. Contenedores y Layouts
Después de construir todos los nodos necesarios en una escena, generalmente los
organizaremos en una disposición adecuada al tipo de aplicación que estemos
diseñando. Crearemos contenedores dentro del contenedor principal y le indicaremos
la disposición de los componentes dentro del contenedor (disposición del
contenedor o layout). También podemos decir que seguimos un diseño, ya que
incluye colocar todos los componentes en una posición particular dentro del
contenedor.
JavaFX proporciona varios diseños predefinidos, como HBox, VBox, Border Pane,
Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel, etc.
Cada uno de los diseños mencionados anteriormente está representado por una clase, y
todas estas clases pertenecen al paquete javafx.layout. La clase llamada Pane es la clase
base de todos los diseños en JavaFX.
Los paneles más utilizados de JavaFX son:
A continuación, se muestra una imagen de la estructura gráfica de los layouts de JavaFX para
que puedas entender mejor los conceptos explicados en la tabla anterior:
3.3 Componentes
Los componentes más utilizados en JavaFX son:
En resumen:
3.4 Menús
JavaFx nos ofrece una serie de componentes para crear una barra de menús con todas las
opciones que necesite nuestro programa. Hemos de tener en cuenta cómo incluir los distintos
elementos.
Un control MenuBar se coloca, tradicionalmente, en la parte superior de la interfaz de usuario,
y dentro de él se encuentran los menús. De forma predeterminada, para cada menú agregado a
la barra de menú, se representará como un botón con el valor del texto del menú mostrado. Cada
uno de los distintos menús de la barra contendrá distintos elementos, es decir, distintos
menultems.
MenuBar > Menu > Menultem
Podemos utilizar las siguientes clases de la API de JavaFX para crear menús en nuestra
aplicación JavaFX.
4. GESTIÓN DE EVENTOS
Hasta ahora, hemos diseñado una Interfaz Gráfica de Usuario sin funcionalidad para el usuario.
Lo que debemos añadir ahora es la funcionalidad que permite al usuario interaccionar con la
interfaz, es decir, hacer clic en un botón, escoger una opción del menú, etcétera.
En JavaFX se produce un evento cada vez que el usuario interactúa con los componentes
gráficos de la aplicación. Hay varias formas mediante las cuales el usuario puede generar el
evento. Por ejemplo, el usuario puede hacer uso del ratón, puede presionar cualquier botón del
teclado o puede minimizar o cerrar la ventana. De ahí que podamos decir que los eventos son
básicamente las notificaciones que nos indican que el usuario ha realizado alguna acción con
nuestra aplicación.
4.1 Tipos de eventos
Los principales tipos de eventos que se pueden gestionar con JavaFX son:
ActionEvent: un evento que representa algún tipo de acción. Se trata de un evento genérico
cuya utilidad concreta debe especificarse más tarde. Este tipo de evento se usa ampliamente
para representar una variedad de acciones.
InputEvent: un evento que indica una entrada de usuario, como cuándo se ha pulsado un
botón, cuándo se ha pulsado una tecla, si se ha liberado la tecla pulsada y otros usos similares.
WindowEvent: evento relacionado con acciones de mostrar/ocultar ventanas.
4.2 Asignar el controlador a la vista
Para poder manejar los eventos de usuario, lo primero que debemos hacer es asignar a la vista
un controlador.
Para ello, debemos crear una clase Java para el controlador.
El nombre del controlador debería ser el nombre de la vista sin la extensión .fxml, más la
palabra Controller. De esta forma, no tendremos ningún problema a la hora de identificar qué
controlador corresponde a cada una de las vistas.
Por ejemplo: Para la vista Ventana.fxml, crearíamos el controlador VentanaController.java.
Por otra parte, existe el método initialize(), que podemos utilizar para inicializar ciertos
componentes cuando se abre la ventana. Es como el constructor de la clase, pero se diferencia
de este en que, desde este método, sí que se puede acceder a los componentes gráficos antes
de que se abra la ventana. La estructura de la clase, provista de una ventana con un solo botón
de aceptar, quedaría de la siguiente manera:
En Ventana.fxml deberemos indicar el controlador que se va a utilizar mediante el atributo
fx:controller ubicado en el contenedor principal de la ventana.
4.3 Asignar eventos a los componentes gráficos
Opción A.- Asignar evento en la vista (.fxml)
Desde SceneBuilder configuramos lo siguiente:
- fx:id donde indicaremos el nombre del componente que utilizaremos en el
controlador.
- On Action: evento que se producirá cuando se realice cualquier interacción
con el botón.
- OnMouseClicked: es el evento específico que podemos utilizar cuando se
haga clic en el botón.
El resultado en Ventana.fxml quedará de la siguiente manera:
Además, en VentanaController.java, crearemos el método que realizará las acciones
correspondientes cuando el usuario pulse el botón ACEPTAR.
Opción B .- Asignar eventos, desde el controlador, al inicializar la vista.
En este caso no añadimos ningún atributo en la vista, Ventana.fxml.
En el controlador VentanaController.java se deben realizar dos acciones:
- En el método initialize(), asignar el evento al botón ACEPTAR.
- Crear el método aceptar(), donde se programarán las acciones que se van a realizar
cuando se pulse el botón.
5. ESTILOS CSS
Diseñar con Java una IGU nunca ha sido tan fácil como con JavaFX y sus hojas de estilo en
cascada (CSS). Cambiar de un estilo a otro o personalizar el aspecto de un solo control son tareas
que se pueden llevar a cabo a través de CSS.
Las hojas de estilo en cascada de JavaFX se basan en las reglas de W3C CSS. El objetivo de
JavaFX CSS es permitir que los desarrolladores web que ya están familiarizados con CSS para
HTML utilicen CSS para personalizar y desarrollar estilos para controles JavaFX y objetos de
gráficos de escena de forma natural. Todos los conceptos CSS son válidos para el diseño de IGU
con JavaFX.
En la medida de lo posible, JavaFX CSS sigue los estándares de W3C; sin embargo, los nombres
de propiedad de JavaFX han sido prefijados con una extensión «-fx-».
5.1 Introducción a JavaFX CSS
Los estilos CSS se aplican a los nodos de la escena JavaFX de una manera similar a la forma en
que se aplican los estilos CSS a los elementos del DOM HTML. En concreto, los estilos se aplican
primero al padre y luego a sus hijos.
Igual que ocurre con los estilos CSS que se aplican en HTML, se existen tres selectores para
modificar el estilo:
- El nombre de un componente gráfico; por ejemplo, un botón o un campo de texto.
- Una clase, cuyos componentes tendremos que marcar.
- Un identificador asociado a un único componente gráfico de nuestra escena.
Componentes
Únicamente debemos especificar las reglas CSS en la hoja de estilos. Esto tendrá efecto en
todos los botones de nuestra aplicación donde esté enlazada la hoja de estilos.
Clases
Deberemos especificar, en aquellos componentes a los que queramos aplicar el estilo, a qué
clase pertenecen mediante el atributo styleClass.
Identificadores
Deberemos especificar, en el componente al que queramos aplicar el estilo, qué identificador
tiene mediante el atributo id.
5.2 ¿Como incluir CSS en nuestro proyecto JavaFX?
Existen dos formas de asignar una hoja de estilos CSS a una escena de una aplicación JavaFX
con IGU:
Opción A
La primera opción es añadir tantas hojas de estilos como deseemos, mediante código Java, en
la creación de la escena. En nuestro caso, en la clase Main.java, en el método start(), añadimos
las líneas de código que puedes ver a continuación:
Opción B
La segunda opción es incluir la hoja de estilos desde la vista, es decir, desde el archivo.fxml
que define nuestra IGU. Se añade el atributo stylesheets al contenedor principal de la escena. En
el siguiente ejemplo se añade al AnchorPane.
Si queremos incluir más de una hoja de estilos, en lugar de añadir el atributo, añadiremos un
elemento stylesheet con tantos nodos hijos como hojas de estilos queramos agregar:
5.3 Ejemplo de JavaFX CSS
Considere la siguiente ventana simple de JavaFX: miVentana.fxml
Esta ventana contiene únicamente un botón con el texto ACEPTAR. Si no aplicamos ningún
estilo, se mostrará el botón de la siguiente manera:
ESQUEMA RESUMEN
