Ejemplo Aplicación con JavaFX

Ejemplo Aplicación con JavaFX

En este ejemplo vamos a crear un proyecto a partir del ejemplo que viene por defecto para JavaFX en Netbeans. Para las próximas tareas pueden iniciar a partir del proyecto por defecto para utilizarlo como base. Los pasos son los siguientes:

1. Abrir Netbeans. 2. Dar click en New Project.

3. En Categories, seleccione JavaFX y en Projects, seleccione JAVAFXFXML Application.

4. Le colocamos el nombre al proyecto y marcamos que cree la clase de la aplicación.

5. En la clase principal generada Ejemplo.java tenemos lo siguiente:

Al iniciar una aplicación con JavaFX debemos heredar de la clase Application y crear el método start que recibe como argumento un objeto del tipo stage.Recordemos que stage en la analogía es el escenario, por lo tanto este será el escenario principal con el que va a trabajar la aplicación. Dentro del método start se debe establecer donde se encuentra la configuración de la interfaz para lo cual utilizamos FXMLLoader para cargar el archivo FXMLDocument.fxml que contiene los elementos o nodos. Debemos pasar estos nodos a una nueva escena utilizando new Scene(root). También debemos asociar la escena al escenario para esto utilizamos stage.setScene(scene). Por último queda solo queda mostrar el escenario para lo cual utilizamos stage.show().

6. Para ver cuáles son los elementos que va a mostrar la interfaz gráfica debemos abrir el Scene Builder. En el lado derecho damos clic derecho sobre FXMLDocument.fxml y damos clic sobre Open.

7. Esto nos abrirá el Scene Builder y en el lado inferior izquierdo podemos ver los elementos que contiene la escena. En este caso podemos ver que el ejemplo tiene un AnchorPane que es el contenedor y dentro están dos elementos un botón (Button) y una etiqueta (Label).

8. Para asociar que se ejecute un método al dar clic en el botón se debe hacer lo siguiente: Dar clic sobre el botón y en el lado derecho en el Inspector encontramos la pestaña Code. En ella vamos a encontrar OnAction y en este ejemplo ya contiene el método handleButtonAction. En otras tareas aquí es donde debe definir qué método es el que se va a ejecutar cuando la acción sobre el elemento se realice, para el caso del botón la acción es dar clic.

9. Cerramos el SceneBuilder. Dentro de los archivos del proyecto en NetBeans buscamos FXMLDocumentController y tenemos lo siguiente:

En este controlador se encuentran los métodos de la aplicación, como podemos ver aquí se encuentra el método handleButtonAction mencionado anteriormente. Este método se ejecuta al dar clic sobre el botón y recibe como argumento un evento que lo utilizaremos más adelante en otros ejemplos. Dentro del método se escribe en consola “You clicked me!” y además le cambia el texto a la etiqueta con el comando label.setText(“HelloWorld”).

10. Para ejecutar nuestro programa en la barra superior damos clic sobre el botón con la flecha verde.

11. Nos apareció una nueva ventana con el ejemplo. Si damos clic sobre el botón podemos ver que abajo nos aparece Hello World!.