► CURSO PRÁCTICO JAVAFX: Estructura de una Aplicación desarrollada con JavaFX │【STAGE - SCENE - NODE】

Hola amigos lectores y seguidores de Software Galaxia Blogs, en el capítulo de hoy queremos presentarles el segundo capítulo de esta serie de tutoriales relacionados a la tecnología de JAVAFX, en el capítulo de hoy nos sumergimos más y vamos a estar estudiando la estructura de una aplicación desarrollada con JAVAFX, estaremos estudiando puntos importantes tales como: la clase Application, la estructura de una interfaz gráfica analizando sus componentes más relevantes como los son la clase Stage, Scene y Node.

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.  

Links de código fuente

Estructura JAVAFX

Explicación por VideoTutorial:

Creamos un videotutorial especialmente para ti en el cual te brindamos información detallada relacionada a la estructura de una aplicación desarrollada con JAVAFX.

Explicación por Foto-Tutorial:

Iniciaremos explicando el funcionamiento de la clase que hace posible desarrollar aplicaciones con JAVAFX y esta es la clase Application debemos tener en cuenta que esta es el punto de partida de toda aplicación desarrollada con esta tecnología, explicaremos cada componente con un ejemplo práctico.

1. La Clase Application.

La clase Application perteneciente al paquete javafx.application es el punto de partida de cualquier aplicación desarrollada en JavaFX. Por lo tanto para crear una aplicación con esta tecnología la clase principal debe heredar esta clase(Application) e implementar su método abstracto start (), este método es el que permitirá inicializar la interfaz gráfica.

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. 

2. Estructura de una Aplicación JAVAFX.

Una aplicación desarrollada con JavaFX está compuesta por tres componentes esenciales los cuales son:

1- Stage - Escenario.

2- Scene - Escena.

3- Nodes - Nodos.

A continuación ilustramos en un diagrama la estructura de estos tres componentes que juntos son la esencia de una aplicación desarrollada con JavaFX.

Estructura interfaz gráfica JavaFX

3. Clase Stage.

Esta clase nos provee de varios componentes importantes un Stage o Escenario en sí es una ventana en la cual agregaremos todos los objetos de nuestra interfaz gráfica está actuará como contenedor principal, actúa de manera similar a lo que ya conocemos en Java Swing con la clase JFrame.

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:

Contenedor principal Stage

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. 

5. Nodos - Gráficos de 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.

Recapitulando lo dicho en el párrafo anterior un nodo hace referencia a los componentes que ya conocemos los cuales pueden ser: etiquetas de texto(Labels), Botones(Buttons), Tablas(Tables), Contenedores(Containers). Un gráfico de Escena no es más que un conjunto de Nodos divididos en orden jerárquico.

6. Ejercicio Práctico.

A continuación trabajaremos un ejemplo elaborado paso a paso donde aplicaremos los conceptos vistos.

A- Como vimos en el punto # 1, nuestra clase debe heredar de la clase Application, Tenemos un método abstracto el cual es start() este me permitirá cargar todos los componentes u objetos de la interfaz gráfica, este recibe un argumento el cual será un objeto de tipo Stage.

Para finalizar en el método main tenemos el método launch() el cual de manera interna se encargará de ejecutar todo lo que tenemos en el método start().

import javafx.application.Application; import javafx.stage.Stage; public class EstructuraJavaFX extends Application { @Override public void start(Stage primaryStage){ } public static void main(String[] args) { launch(args); } }

B- Vamos a trabajar sobre el método start(),  creamos un nodo el cual es una etiqueta de texto perteneciente a la clase Label le pasamos como parámetro una cadena de texto(HOLA MUNDO).
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; public class EstructuraJavaFX extends Application { @Override public void start(Stage primaryStage){ Label label = new Label("HOLA MUNDO"); StackPane root = new StackPane(); root.getChildren().add(label); } public static void main(String[] args) { launch(args); } }

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; public class EstructuraJavaFX extends Application { @Override public void start(Stage primaryStage){ Label label = new Label("HOLA MUNDO"); StackPane root = new StackPane(); root.getChildren().add(label); Scene scene = new Scene(root,300, 250) ; primaryStage.setScene(scene); } public static void main(String[] args) { launch(args); } }

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.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class EstructuraJavaFX extends Application { @Override public void start(Stage primaryStage){ Label label = new Label("HOLA MUNDO"); StackPane root = new StackPane(); root.getChildren().add(label); Scene scene = new Scene(root,300, 250) ; primaryStage.setScene(scene); primaryStage.setTitle("JavaFX 1"); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

Con esto hemos concluido con el desarrollo del capítulo de hoy, la finalidad de esta entrada era conocer los componentes esenciales a la hora de trabajar con interfaces gráficas con JAVAFX y claro conocer la clase Application que es de suma importancia en el desarrollo de aplicaciones con esta tecnología, espero estes atento a las próximas noticias que estaremos subiendo y claro seguiremos trabajando muchas temáticas relacionadas a JAVAFX.

Suscribete 

si deseas aprender más sobre esta tecnología y Java en general oprime el botón de suscripción para estar atento a todo nuestro contenido.

¡Suscribete!

Si tienes alguna  otra forma de implementar esta ejemplo no dudes en compartirla, y así poder compartir opiniones sobre el tema.

¿Quieres aprender a realizar aún más cosas y personalizar tus programas hechos en el lenguaje de programación JAVA?, si tu respuesta es "Sí", puedes acceder a todos los tips de JAVA que hemos estado publicando en este blog, dando clic aquí.
  

Suscríbete a nuestro blog, vía Email o RSS; además puedes seguirnos a través de nuestras redes sociales como: Facebook, Twitter, YouTube y Google+. 

Si te fue de gran ayuda este material, no olvides compartirlo con tus amigos. 
Si tienes dudas o sugerencias al respecto; puedes dejarnos tus comentarios.

Bendiciones...