1

Primera Aplicación con JavaFX (NetBeans + Scene Builder)

Vamos a desarrollar una aplicación muy sencilla para conocer cómo funciona JavaFX utilizando fichero FXML.

Para comenzar el desarrollo de la aplicación, abrimos NetBeans el cual será el IDE con el que desarrollaremos parte de la aplicación, ya que la interfaz será realizada con JavaFX Scene Builder.

Para ello, abrimos el NetBeans y damos clic sobre el icono para crear un nuevo proyecto de Java.

1.png

Se nos mostrara una pantalla para la creación de un nuevo proyecto, en este caso, seleccionamos la categories JavaFX y posteriormente en projects seleccionamos JavaFX FXML Application, damos clic en “Next” para continuar.

2.png

Se nos mostrara una pantalla para continuar con la creación del proyecto, en este punto le he dado un nombre al proyecto el cual es “AplicacionSaludo”, un nombre al fichero FXML el cual será VentanaSaludo y para la clase que contendrá el método main, solo he añadido al fina (.Main) para darle nombre a la clase y damos clic en Finish para finalizar de crear el proyecto.

3.png

Ya podremos ver en el explorador de proyecto toda la estructura del proyecto que hemos creado, donde podemos visualizar el paquete que incluye los ficheros que se definieron en la ventana anterior.

4.png

Esta captura muestra el código que genera por defecto el proyecto para la clase Main.

5.png

Este es el código que se genera por defecto en el fichero FXML.

6.png

Y este es el código creado por defecto para la clase controller y que nos servirá para definir los métodos y acciones de la aplicación.

7.png

Una vez visto lo anterior, debemos comprobar que nuestro NetBeans tiene configurado el Scene Builder para editar el fichero FXML.

Para ello vamos al menú Tools y en el menú desplegable, seleccionamos “Options”.

8.png

En la ventana de opciones, damos clic en la opción “Java” y posteriormente seleccionamos la pestaña de “JavaFX”.

Allí debemos buscar el directorio de instalación del Scene Builder, este paso habitualmente el NetBeans lo reconoce de forma automática, sin embargo, es bueno saber dónde se realizar esta configuración por si no se llegara a abrir el fichero FXML con Scene Builder.

9.png

Una vez comprobado lo anterior, damos doble clic sobre el fichero VentanaSaludo.fxml para abrirlo con Scene Builder y comenzar con el diseño de la interfaz solicitada.

10.png

Después de hacer doble clic sobre el fichero FXML, se nos abrirá este fichero con Scene Builder como se puede visualizar en la siguiente captura, en ella también aparece una ventana que es la que se crea por defecto cuando se creó el proyecto.

11.png

Vamos a usar un GridPane como contenedor de los diferentes controles que se añadirán a la interfaz, en este caso seleccionamos “Containers” y en la lista de los diferentes contenedores, seleccionamos el GridPane.

12.png

Lo arrastramos al centro de formulario actual y lo soltamos sobre.

13.png

Una vez realizado esto, podemos ver en el lado izquierdo, en Document, las opciones de jerarquía, por lo que vemos que ya tenemos nuestros GridPane, para ello, procedemos a quitar el resto de los controles y el AnchorPane donde se encuentra anclados los mismos.

14.png

Seleccionamos el GridPane y damos clic derecho, se nos mostrara un menú desplegable donde seleccionaremos “Fit to Parent” para ampliar el GridPane al tamaño del formulario.

15.png

En esta captura ya podemos ver que el GridPane cuenta con el tamaño inicial que quiero para el diseño de la interfaz, ya solo queda quitar los controles que tenían por defecto el fichero FXML que genero NetBeans.

16.png

Para ello, hacemos en el menú “Edit” y seleccionamos “Trin Document to Selection”

17.png

Como se puede apreciar en la captura, ya tenemos nuestro GridPane como único contenedor, por lo que ahora comenzamos a incluir los diferentes elementos que tendrá la interfaz.

18.png

A continuación, añadimos una nueva fila a la GridPane, la cual será necesaria para para la interfaz, para ello seleccionamos una fina y damos clic derecho y en el menú desplegable seleccionamos “Add Row Above”

19.png

Ya tenemos el GridPane con la cantidad de filas y columnas que se requieren para el diseño de la interfaz.

20.png

Comenzamos añadiendo las etiquetas en el GridPane, para ellos escribimos “Label” en el buscador de panel izquierdo de JavaFX Scene Builder y se nos mostrara el control que queremos, esta es una forma rápida para ubicar el control sin necesidad de ver toda la lista de controles y comenzamos a añadir las etiquetas.

21.png

Una vez tenemos las etiquetas (Label), realizamos el mismo procedimiento anterior pero esta vez para buscar el campo de texto (TextField) que queremos añadir en el GridPane.

22.png

Ya localizado, los añadimos en el GridPane como se puede apreciar en la captura.

23.png

Realizamos el mismo procedimiento para ubicar el botón (Button).

24.png

Añadimos el botón en el GridPane

25.png

Ahora, modificamos la propiedad “Text” de cada etiqueta y el botón, para ellos podemos hacer dos cosas, seleccionamos el control y vamos a lado derecho del Scene Builder y en el Inspector, seleccionamos las propiedades (Properties) y cambiamos el valor de la propiedad “text” o simplemente hacemos doble clic sobre el control y cambiamos este valor, en mi caso he realizado lo según y el resultado es el mostrado a continuación.

26.png

Continuando con las propiedades, procedo a modificar la etiqueta que contiene el mensaje “¡ Hola, mundo ¡” modificando sus propiedades hasta obtener el aspecto deseado.

27.png

Seleccionamos la columna para modificar los márgenes y que estos controles tengan la alineación deseada.

28.png

Para ello, he modificado los valores de las propiedades de Layout en Hgap, Vgap y padding, dándoles los valores que se pueden visualizar en la captura.

29.png

Para conseguir un aspecto aun más parecido, procedo a ampliar el tamaño del GridPane, para ello les doy un ancho de 400 y un alto de 220 (Este último realmente lo deje como lo tenía inicialmente que era 220), para ellos se cambiaron los valores de Pref Width y Pref Height.

30.png

Ahora hemos terminado el diseño de la interfaz, quedan realizar otros pasos para darle funcionalidad, así como un identificador para los controles y evento para aquel que lo amerite, pero eso lo realizare después de realizar los cambios de condigo.

Damos clic en el menú Preview en la opción “Show Preview in Window” o simplemente la combinación de teclado “Ctrl + P”, con esto tendremos una visualización del resultado final de la interfaz.

31.png

Como se puede ver, aun tenemos el titulo con el nombre del fichero, pero este cambio se realizará en el código, así como la etiqueta que dice Hola, que también sufrirá un cambio a nivel de código.

32.png

Ahora, ya en el NetBeans, seleccionamos la clase controladora “VentanaSaludoController.java” y eliminamos el código que se genero por defecto, solo el seleccionado en rojo.

En el caso del método initialize, este es obligatorio tenerlo, aunque no se utilice, cosa que en mi caso si le dare uso y eso se debe a que estamos implementando la interfaz Initializable, y esto nos obliga a implementar todos sus métodos.

33.png

Instanciamos la etiqueta, campo de texto y botón que utilizaremos en el formulario, para ello, escribimos @FXML seguido del objeto a utilizar y el nombre que le queremos dar, una vez realizado, importamos la clase requerida al proyecto como se puede visualizar a continuación.

34.png

Luego, en la misma clase controladora, creo un ActionEvent al cual he llamado “eventoSaludo”, este evento cambia el valor de la etiqueta “lblSaludo” pasándole a su método “setText()” el valor concatenado de la palabra “Hola seguido de un espacio y a continuación el valor que obtengo del método getText() del campo de texto txtNombre.

Otro cambio en el código del control es que en el método initialize, he puesto que a la etiqueta lblSaludo en su método setText() no tenga ningún valor, con esto al momento de cargar el formulario, la etiqueta no tendrá el valor que he dejado en diseño.

35.png

Ahora, pasamos al método main, del fichero “Main.java”, este fichero no hay que realizar ningún cambio especial, básicamente le pasaremos un valor al método setTitle del stage (Ventana) para que esta tenga el titulo que queremos.

Se puede visualizar en la captura el código aplicado.

36.png

Una vez realizado los cambios en código, ahora queda enlazar con el formulario, para ello seleccionamos el control que realizara alguna acción en el formulario y el la opción “code” del inspector, seleccionamos el nombre de control que se creo en la clase controladora en la opción “fx:id”, en el caso de la etiqueta que mostrara el saludo es “lblSaludo” y con esto ya el control tendrá un identificador.

37.png

Realizamos el mismo procedimiento para el campo de texto asignándole al “fx:id” el valor de txtNombre.

38.png

Y lo mismo para el botón, que en este caso solo nos queda “btnHola”.

39.png

En el caso del botón, solo nos queda seleccionar el evento que se programó en la clase controladora, ya que lo que queremos es que a dar clic en el botón se realice lo que se solicita que haga el programa.

40.png

Salvamos todos los cambios realizados del fichero VentanaSaludos.fxml.

41.png

Aquí dejo una captura de como se visualiza en el lenguaje de marcado FXML el resultado de todo lo realizado de manera gráfica con la aplicación JavaFX Scene Builder.

42.png

Ejecución de la Aplicación

Ahora solo queda ejecutar la aplicación y que esta realice lo que se ha programado, procedemos a su ejecución.

43.png

Aquí dejo una captura solo de la ventana de la aplicación para que se pueda apreciar mejor el resultado después de incluir mi nombre en el campo de texto y dar clic en el botón de la aplicación.

44.png

Código Main.java


package aplicacionsaludo.AplicacionSaludo;

import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.stage.Stage;/**
 *
 * @author Oscar Jaramillo
 */
public classMainextendsApplication{

    @Override
    public void start(Stage stage) throwsException {
        Parent root = FXMLLoader.load(getClass().getResource("VentanaSaludo.fxml"));

        Scene scene = newScene(root);
        stage.setTitle("Aplicación Saludo 1.0");
        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Código VentanaSaludoController.java (Controlador)


package aplicacionsaludo.AplicacionSaludo;

import java.net.URL;import java.util.ResourceBundle;import javafx.event.ActionEvent;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.Button;import javafx.scene.control.Label;import javafx.scene.control.TextField;/**
 *
 * @author Oscar Jaramillo
 */
public class VentanaSaludoController implements Initializable {

    @FXML 
    Label lblSaludo;

    @FXML
    TextField txtNombre;

    @FXML
    Button btnHola;

    @FXML
    private void eventoSaludar(ActionEvent event){
        lblSaludo.setText("Hola " + txtNombre.getText());
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        lblSaludo.setText("");
    }    

}

Código VentanaSaludo.fxml (Vista)

xmlversion="1.0"encoding="UTF-8"?>

import javafx.geometry.*?>import javafx.scene.text.*?>import java.lang.*?>import java.util.*?>import javafx.scene.*?>import javafx.scene.control.*?>import javafx.scene.layout.*?>"6.0"prefHeight="220.0"prefWidth="450.0"vgap="6.0"xmlns="http://javafx.com/javafx/8"xmlns:fx="http://javafx.com/fxml/1"fx:controller="aplicacionsaludo.AplicacionSaludo.VentanaSaludoController">"SOMETIMES"maxWidth="250.0"minWidth="10.0"prefWidth="180.0" />
    "SOMETIMES"maxWidth="135.0"minWidth="10.0"prefWidth="110.0" />
  columnConstraints>

    "10.0"prefHeight="30.0"vgrow="SOMETIMES" />
    "10.0"prefHeight="30.0"vgrow="SOMETIMES" />
      "10.0"prefHeight="30.0"vgrow="SOMETIMES" />
    "10.0"prefHeight="30.0"vgrow="SOMETIMES" />
  rowConstraints>

      "¡ Hola, mundo !">

            "24.0" />
         font>
      Label>
      "¿Cómo te llamas?"GridPane.rowIndex="1"GridPane.valignment="BOTTOM">

         GridPane.margin>
      Label>
      "lblSaludo"text="Hola"GridPane.rowIndex="3" />
      "txtNombre"GridPane.rowIndex="2" />
      "btnHola"mnemonicParsing="false"onAction="#eventoSaludar"text="Di, Hola"GridPane.columnIndex="1"GridPane.rowIndex="2" />
   children>

      "8.0"left="25.0"right="8.0"top="8.0" />
   padding>
GridPane>

Escribe tu comentario
+ 2