Introducción a JavaFX

logoFX

Las tecnologías web llegaron para revolucionar a la Ingeniería de Software, ya hace un tiempo las webapps al ser cada vez mas complejas tendieron a dividir la complejidad en 3 partes:

  1. lógica de la aplicación(JavaScript y lenguajes del lado del servidor p.e. php,python, ruby, perl, asp, etc…)
  2. El contenido de la aplicación (El marcado HTML)
  3. El diseño (CSS).

JavaFX es una implementación de esto, diviendo los elementos en:

  1. lógica de la aplicación(Java)
  2. El contenido de la aplicación (El marcado FXML)
  3. El diseño (CSS).

En otras palabras javaFX es un conjunto de librerías que utiliza Java para el manejo de la lógica de la aplicación, FXML para el marcado de contenido(botones, etiquetas, textos de entrada, etc..) y CSS para darle estilo o diseño a estos elementos de contenidos, la siguiente imagen ilustra como se comporta las tecnologías JavaFX en un patrón MVC.

Vista:

La parte de la vista son escenas las cuales el contenido están descritas por archivos con extensión .FXML estos son modificados desde la aplicación JavaFX Scene Builder por otra parte el diseño de la ventana(escena) se realiza mediante archivos de descripción de estilo .CSS

Controlador:

La vista previamente tiene la capacidad de definir un controlador el cual hace referencia a una clase en Java que se va a encargar de controlar la lógica de la ventana.

Modelo:

El modelo es el responsable de la recuperación de datos convirtiéndolos en conceptos significativos para la aplicación, así como su procesamiento, validación, asociación y cualquier otra tarea relativa a la manipulación de dichos datos.

En los siguiente contenido de esta categoría javaFX se va a vamos a explicar mas el funcionamiento de las vistas.

Le recomiendo descargar y revisar el código de la calculadora con JavaFX para que se vaya contextualizando con esta forma de crear aplicaciones.

Anuncios

Calculadora con JavaFX

Vamos a crear la siguiente calculadora:

calculadora_estructura

Ejemplo del funcionamiento

calculadora

Estructura:

Vamos a crear una calculadora, la cual tiene la siguiente estructura:

  • Calculadora.java
  • Controller.java
  • Evaluar.java
  • Vista.fxml
  • Style.css

Vista

La vista de la aplicación es el archivo Vista.fxml el cual describe una ventana divida en dos partes la parte superior contiene el texto de entrada y la parte inferior es una rejilla(GridPane) de 4×4 que contiene los botones (4 renglones de 4 columnas), como se puede ver a continuación.

calculadora_estructura_detalle

Controlador:

El archivo Controller se encarga de “controlar la lógica de la vista”, el cual contiene los métodos:

  • Evaluar: es ejecutada cuando se presiona el Enter en la “#entrada” o el botón con símbolo “=”
  • Borrar: Es ejecutada cuando se presiona el botón con símbolo “c”(clear)
  • OtroBoton: Es ejecutada cuando se presiona cualquier otro botón(0-9*/+-) y simplemente concatena el símbolo contenido en el botón a #entrada..

Evaluar.java se encarga de realizar las operaciones detectando errores de aritmética como la división entre cero.

Código:

Dejo el enlace del código fuente:

https://github.com/fitorec/calculadora_javaFX