Curso Práctico Javafx
Curso Práctico Javafx
Curso Práctico Javafx
Hola amigos lectores y seguidores de Software Galaxia Blogs, el día de hoy quiero
presentarles un curso práctico sobre la tecnología JAVAFX, como muchos deben
tener conocimiento esta es una biblioteca muy potente perteneciente a JAVA,
igualmente si no conoces de esta te voy a dejar los links de la documentación oficial
donde podrás aclarar dudas sobre lo qué es JAVAFX.
La dinámica de esta serie de tutoriales prácticos que estaremos subiendo tendrá como
finalidad compartir un poco de mi experiencia trabajando con JAVAFX, en el cual
estaremos realizando ejercicios prácticos con el fin de conocer la estructura del código
a la hora de trabajar con esta tecnología, conocer los componentes y clases más
relevantes, y sobre todo que nuestro Blog sea una fuente de información sobre esta
tecnología, ya que generalmente hay mucha información sobre esta en ingles, pero
poco conocemos de esta en nuestro idioma y claro es indispensable para un
programador entender inglés técnico para poder comprender las líneas de código que
escribimos, pero bueno no esta demás tener nuestras fuentes en español, somos
conscientes que en ocasiones surgen errores al programar y bueno siempre lleva su
trabajo encontrar dicho error, la finalidad de esta serie de tutoriales será esa, poder
compartir y aprender de esos errores que nos dieron dolores de cabeza pero una vez
solucionados puedas compartir dicha experiencia, no siendo más iniciemos con esta
corta entrada que servirá de introducción para tener una idea de lo que es JAVAFX.
Introducción a JAVAFX
Explicación por VideoTutorial:
1. ¿QUÉ ES JAVAFX?.
2. ¿CÓMO FUNCIONA?
JAVAFX es una biblioteca de JAVA, por lo tanto para poder ejecutar las
aplicaciones de JAVAFX, debe tener Java Runtime Environment(JRE) y
JAVAFX Runtime instalados en su equipo, es importante resaltar que el JDK 8 trae
consigo todo lo necesario para ejecutar aplicaciones JAVAFX.
Es importante tener claro este punto ya que las aplicaciones desarrolladas con
JAVAFX dependen totalmente del JDK de java para su ejecución, en esta serie
de tutoriales que estaremos realizando desarrollaremos nuestros ejemplos con Java 8
en conjunto con NetBeans 8.2 IDE, por lo tanto no será necesario agregar una
biblioteca adicional a nuestras aplicaciones ya que el JDK trae incorporado esto,
algo muy importante, a partir de la versión 11 de JAVA, las bibliotecas o librerías de
JAVAFX se deben agregar por separado.
Acceso a la API de JAVA: JavaFX es una biblioteca de Java que consta de clases e
interfaces que están escritas en código Java. Las API están diseñadas para ser una
alternativa amigable a los lenguajes de Java Virtual Machine (Java VM), como JRuby y
Scala, con JAVAFX tendremos acceso a múltiples clases e interfaces.
WebView: Como experiencia personal esta fue una de las razones por las cuales
decidí aprender JAVAFX, en ocasiones necesitaba que mis aplicaciones tuviesen un
módulo de software en el cual pudiese incrustar una página web sin necesidad de que el
cliente tuviese que acceder al navegador y esto lo obtenemos utilizando el componente
WebView el cual me permite incorporar un módulo de página web a nuestra aplicación de
escritor.
Aplicación MVC: Las aplicaciones desarrolladas con JAVAFX, son un claro ejemplo del
desarrollo bajo el patrón de diseño modelo vista controlador, ya que estas dividen en el
código de la interfaz gráfica completamente de la parte lógica de nuestra aplicación
aquí juega un papel importante los archivos FXML, cada vez que vean esta extensión
simplemente piensen en interfaz gráfica.
4. JAVAFX VS JAVA SWING.
Una vez tratados los temas más relevantes de JAVAFX, vamos a familiarizarnos con
la tecnología, para esto vamos a crear nuestro primer proyecto, es importante resaltar
que si deseas afianzar conocimientos visites la documentación oficial de oracle,
relacionada a JAVAFX.
D- Para finalizar tenemos la clase Javafx1, la cual se genera con una interfaz gráfica
que trae por defecto la aplicación JAVAFX, la cual simplemente es una ventana que
trae consigo un botón el cual al oprimirlo imprimirá un mensaje por consola.
Código fuente JAVAFX
Código fuente JAVAFX
Quédate con nosotros y aprendamos más sobre esta gran tecnología, en la cual vamos
analizar los puntos más importantes, en una entrada anterior iniciamos este curso
práctico, si deseas saber más sobre esto te invito a que leas la entrada introductoria
donde estudiamos las características clave de JAVAFX entre otros temas; Curso
práctico JAVAFX: Introducción y características clave - Hola Mundo Con JAVAFX.
1. La Clase Application.
Esta clase posee tres métodos abstractos de suma importancia los cuales son los
referentes al ciclo de vida de una aplicación JAVAFX, la cual proporciona
los métodos init(), start(), stop(). Estos métodos los estudiaremos a profundidad en
el próximo capítulo, a continuación ilustramos la estructura inicial de una
aplicación desarrollada con JAVAFX.
import javafx.application.Application;
public class EstructuraJavaFX extends Application { //Content }
Como podemos apreciar en el código anterior creamos una clase la cual tiene por
nombre EstructuraJavaFX y heredamos de la clase Application haciendo uso de la
palabra clave extends.
Una aplicación desarrollada con JavaFX está compuesta por tres componentes
esenciales los cuales son:
1- Stage - Escenario.
2- Scene - Escena.
3- Nodes - Nodos.
El escenario o Stage principal es creada por la plataforma en si. El objeto tipo Stage
es creado y se pasa como argumento al método start () de la clase Application, para
poder visualizar dicha ventana debemos hacer uso del método show(), es importante
resaltar que una aplicación JavaFX puede tener múltiples objetos Stage, esto será
explicado a detalle en la siguiente sección.
Para poder agregar objetos a este contenedor se necesitarán otro tipo de componentes
como los Scene o los Scene Graph que explicaremos a continuación Un ejemplo de
un escenario(Stage) sería el siguiente:
4. Clase Scene.
Cuando nos referimos a una escena o Scene, estamos haciendo referencia a los o
contenidos físicos (nodos) de una aplicación JAVAFX, la clase Scene perteneciente
al paquete Javafx.scene proporciona todos los métodos para manejar un objeto de
escena. la creación de una escena al momento del desarrollo de cualquier aplicación
con esta tecnología es necesaria para visualizar los contenidos en el escenario(Stage),
al crear un objeto de tipo Scene, debemos pasar como argumento el nodo raíz el cual
contendrá todos los nodos que se visualizarán en dicha interfaz e igualmente tenemos
la posibilidad de asignar unas dimensiones(ancho y alto) a la escena.
El grupo de gráficos de escena y nodos sería el nivel más bajo del diagrama que
ilustramos en el punto 2. Un gráfico de escena es una estructura de datos la cual actúa
en forma de árbol jerárquico y estos representan el contenido de una escena, por otro
lado un nodo es un objeto visual de un gráfico de escena.
6. Ejercicio Práctico.
import javafx.application.Application;
import javafx.stage.Stage;
public class EstructuraJavaFX extends Application {
@Override
public void start(Stage primaryStage){
El siguiente paso será crear nuestro nodo raíz, creamos un objeto de la clase
StackPane y le daremos por nombre root, los objetos de tipo StackPane hacen parte
de los layouts que se manejan en JAVAFX tema que estaremos tratando en
próximas entradas.
Seguido a esto agregamos el objeto de tipo Label al nodo raíz(root), para esto
debemos llamar al método getChildren() el cual devuelve un objeto de tipo
ObservableList, que hacen referencia a los nodos agregados al nodo raíz seguido a
esto llamamos al método add() y agregamos el Label.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
C- El siguiente paso será crear un objeto de la clase Scene la cual recibe como
parámetro un objeto de tipo Parent, el cual será el nodo raíz de tipo StackPane(root),
y dos parámetros de tipo double que hacen referencia al ancho y alto de la escena.
Lo siguiente será agregar dicha escena al escenario por lo tanto llamamos objeto
primaryStage y haciendo uso del método setScene() agregamos la escena.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
D- Lo último que haremos será trabajar sobre el objeto Stage, agregamos un título a
nuestra ventana haciendo uso del método setTitle(), mostramos o hacemos visible la
venta haciendo uso del método show(), es importante llamar a este método ya que si
no lo hacemos al momento de ejecutar nuestro programa simplemente no
visualizamos nuestra interfaz gráfica.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
Quédate con nosotros y aprendamos más sobre esta gran tecnología, en una entrada
anterior estuvimos estudiando las clases Stage, Scene y Node igualmente estuvimos
estudiando la estructura de JAVAFX, te invito a que vayas y leas esta entrada la cual
te será de gran ayuda... ► CURSO PRÁCTICO JAVAFX: Estructura de una
Aplicación desarrollada con JavaFX │【STAGE - SCENE - NODE】.
Iniciamos explicando los conceptos claves del ciclo de vida de una aplicación
JAVAFX y posteriormente estaremos realizando un ejemplo práctico para afianzar
los conceptos aprendidos.
Debemos tener en cuenta que el punto de entrada de toda aplicación desarrollada con
JAVAFX es la clase Application, por lo tanto la clase principal de nuestro proyecto
siempre debe heredar de la clase clase Application, esta clase posee los métodos del
ciclo de vida que serán detallados en el siguiente punto.
Entendemos por ciclo de vida a las fases o etapas que tomará nuestra aplicación al
momento de ser ejecutada, todo software que nosotros desarrollemos
independientemente de la tecnología siempre tendrá un orden cronológico el cual
siempre tendrá un punto inicial y un punto final.
import javafx.application.Application;
public class CicloVidaJavafx extends Application { //Content }
Como podemos apreciar en el código anterior creamos una clase la cual tiene por
nombre ciclo-vida-javafx y heredamos de la clase Application haciendo uso de la
palabra clave extends.
1- Método init().
2- Método start().
3- Método stop().
Método Init: El método init () es llamado justo después de crear una instancia de la
clase Application, esto quiere decir que el método init será lanzado justo después de
ser ejecutado el método constructor y puede usarse para inicializaciones específicas
de la aplicación; sin embargo, las operaciones de la GUI o Interfaz Gráfica, como la
creación de escenarios(Stage) o escenas(Scene), no se pueden realizar desde este
método, debido a que en el momento de lanzar este método el hilo encargado de
manejar la GUI aún no está lista para ser ejecutada, Algunos ejemplos de usos del
método init puede ser para realizar validaciones con la base de datos o cargar una
configuración inicial de nuestro programa.
Método Start: Es llamado después de ser creado el hilo que gestiona la interfaz
gráfica de usuario de la aplicación, este método nos proporciona un primer escenario
(Stage) la cual hace referencia a la ventana principal, en este método se creará todo lo
referente a la interfaz gráfica tales como: escenarios(Stage), escenas(Scene) y los
nodos(Nodes). Es importante resaltar que en este método se cargaran todos los
componentes de nuestra aplicación como por ejemplo: Controladores, Lógica de
nuestra aplicación.
Método Stop: Cuando la aplicación está a punto de finalizar (por ejemplo, cuando el
usuario a oprimido el boton cerrar de la aplicación), JavaFX llama al método stop
() de la clase Application. En este, se pueden realizar las tareas de limpieza
apropiadas para la aplicación.
Paso # 1:
Lo primero que debemos hacer es crear un nuevo proyecto, para esto seleccionamos el
icono seleccionado en la imagen el cual generará un cuadro de diálogo.
Paso # 2:
Lo segundo que haremos será seleccionar la opción JavaFX > JavaFX Application
luego oprimimos el botón next(siguiente).
Seleccionamos el tipo de proyecto
Paso # 3:
Una vez creado nuestro proyecto, se genera una clase la cual inicialmente tenemos el
método start(), en el cual inicializamos nuestra interfaz gráfica de ejemplo, si
trabajas con NetBeans al momento de crear un proyecto con JAVAFX este trae
consigo esta pequeña interfaz, la cual tiene nuestra primera ventana(Stage), una
escena(Scene) y un Nodo el cual es un botón(Button) este accionará un evento
cuando sea presionado.
Creamos el método init en el cual pasamos un mensaje por consola con el fin de
ilustrar el orden en que serán mostrados dichos mensajes, igualmente creamos el
método constructor de la clase en el cual agregamos un mensaje de consola,
recordemos que primero se ejecutará el método constructor y después será ejecutado
el método init.
Con esto hemos concluido con el desarrollo del capítulo de hoy, la finalidad de esta
entrada era conocer los métodos más relevantes referentes al ciclo de vida de la clase
Application, es importante resaltar que para tener una mejor comprensión de esta
temática es recomendable leer la documentación oficial por lo tanto voy a dejarte el
link de la misma para que vayas y visites el sitio oficial Documentación JAVAFX.