Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / JavaFX / Primeros pasos con JavaFX

Primeros pasos con JavaFX

Autor jc mouse jueves, enero 14, 2016

¿Qué es javaFX?

JavaFX es una familia de productos y tecnologías de Sun Microsystems, adquirida por Oracle Corporation, para la creación de Rich Internet Applications (RIAs), esto es, aplicaciones web que tienen las características y capacidades de aplicaciones de escritorio, incluyendo aplicaciones multimedia interactivas, aplicaciones para celulares, la web, TV, consolas de videojuegos, reproductores Blu-ray, etc. Para el desarrollo de aplicaciones JavaFX se usa un lenguaje declarativo, tipado llamado JavaFX Script, además puede integrarse código Java en programas JavaFX. [Wikipedia]

Entre las novedades y diferencias con swing podemos citar:

  • Es capaz de hacer uso de hojas de estilo CSS, algo que agradecerás cuando quieras realizar GUI bastante profesionales y en poco tiempo.
  • Multimedia, algo de lo que carece swing y que nunca logro consolidar.
  • El desarrollo es mucho más rápido con Scene Builder y FXML
  • Soporta gráficos 3D
  • Proporciona una clara separación de la interfaz gráfica de usuario de la lógica de la aplicación, MVC (Modelo, Vista y Controlador)
  • Nuevos controles WebView:  Este control te permite embeber páginas HTML en las aplicaciones JavaFX.
  • También encontramos Canvas, Shapes, gráficos estadísticos y nuevos contenedores.

Para comenzar a programar en javaFX debemos preparar nuestro espacio de trabajo, para esto necesitamos de las siguientes herramientas:

Descarga e instala java y netbeans, si ya los tienes, debes actualizarlos, es preferible trabajar con las ultimas versiones. Netbeans ya viene con javaFX por lo que al instalar el IDE estarás instalando esta tecnología. Si vamos al menú Archivo → Proyecto nuevo, podremos ver que ya tenemos la categoría javaFX activada y lista para usar.

ide javafx

¿Qué es JavaFX Scene Builder?

Si bien instalando las dos herramientas más arriba citadas ya estamos en condiciones de escribir programas en javaFX nos veríamos forzados a escribir código puro para los archivos archivos *.fxml (utilizados para definir interfaces, los veremos con más detalle más adelante) . A diferencia de las aplicaciones swing que cuentan con un editor gráfico incorporado en netbeans, para archivos fxml no tiene.

Pero aquí es donde aparece JavaFX Scene Builder, esta es una herramienta visual que permite editar los archivos *.fxml siguiendo el principio del WYSIWYG (Lo que ves es lo que obtienes).

Descarga e instala este editor en tu pc.

builder netbeans

Agregar Scene Builder a Netbeans

Para terminar este post , agregaremos  el editor FX a Netbeans, esto es muy sencillo,  vamos menú HeramientasOpciones → selecciona la opción de JAVA. A continuación seleccionamos la pestaña javaFX, en la opción Scene Builder Home desplegamos el combo y presionamos la opción “browse…” buscamos la carpeta en donde instalamos el editor y seleccionamos, presionamos “Aceptar” para guardar los cambios.

config scene

HOLA MUNDO

Para probar que tenemos todo bien instalado y configurado, crearemos el clásico e infaltable “Hola mundo“.

Vamos a menú Archivo Proyecto Nuevo → seleccionamos la categoría JavaFX y el tipo de proyecto JavaFX FXML Application, presionamos en siguiente, escribimos un nombre para el proyecto “JavaFXHolaMundo” e indicamos un lugar en donde guardar el proyecto, presionamos el botón “Terminar” para crear el proyecto.

hello world

El proyecto que se crea sigue el patrón de diseño MVC (Modelo, Vista y Controlador) donde FXMLDocument.fxml es la vista y FXMLDocumentController.java el controlador.

mvc fx

Ahora que ya tenemos instalado el Scene Builder, para abrir la vista en modo diseño solo debemos hacer doble clic sobre este, o clic derecho → Open. Para agregar cualquier control, solo debemos arrastrarlo hacia la vista. Para que los cambios se vean reflejados en Netbeans, debemos guardar el archivo File → Save

El proyecto que creamos cuenta con un botón y una etiqueta, no necesitamos más en esta ocasión así que cierra el Scene Builder

editor javafx

Para ver el código generado, clic derecho sobre la vista → Edit

FXML: Este es el lenguaje basado en XML que nos permite definir las interfaces en javaFX, si ya programaste en android estarás familiarizado con esta forma de trabajar y si no, no tengas miedo que es muy fácil. También es posible crear vistas mediante código java, pero con fxml es más sencillo.

<?xml version=“1.0” encoding=“UTF-8”?><?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?><AnchorPane id=“AnchorPane” prefHeight=“200” prefWidth=“320” xmlns:fx=“http://javafx.com/fxml/1” fx:controller=“javafxholamundo.FXMLDocumentController”>
<children>
<Button layoutX=“126” layoutY=“90” text=“Click Me!” onAction=“#handleButtonAction” fx:id=“button” />
<Label layoutX=“126” layoutY=“120” minHeight=“16” minWidth=“69” fx:id=“label” />
</children>
</AnchorPane>

En primera linea vemos que el archivo sera codificado usando UTF-8, a continuación vemos los IMPORT y después las etiquetas XML

A medida que avancemos con los post nos familiarizaremos con las etiquetas, por ahora solo nos importa saber que:

  • La etiqueta Button, cuenta con un texto (text=”Click Me!”),  una evento asignado al botón (onAction=”#handleButtonAction”)  y un identificador (fx:id=”button”) el cual debe ser único para todo el archivo.
  • La etiqueta Label cuenta también con un identificador único (fx:id=”label”), estos ID son los que nos permiten reconocer los controles en el controlador (Eso no es pleonasmo? :)).

Abre el archivo FXMLDocumentController.java y busca el método handleButtonAction (Método que se ejecuta cuando se presiona el botón) ahí encontraras a la etiqueta label al cual se le asigna un texto, cámbialo por “Hola Mundo

package javafxholamundo;import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;public class FXMLDocumentController implements Initializable {@FXML
private Label label;

@FXML
private void handleButtonAction(ActionEvent event) {
System.out.println(“You clicked me!”);
label.setText(“Hola Mundo”);
}

@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}

}

Ejecuta el proyecto

hola mundo

Enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Numero a Literal en Java

Numero a Literal en Java

Cuando se realizan trabajos donde se necesita mostrar al cliente un determinado monto de dinero, tipo factura, recibo, c...

Leer archivos de texto

Leer archivos de texto

En este tutorial de android, vemos como leer un archivo de texto y mostrarlo en pantalla del celular, el texto elegido e...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Empaquetar aplicación android para su distribución

Empaquetar aplicación android para su distribución

Cuando tenemos nuestra aplicación android terminada, lo siguiente es distribuirla ya sea en el Google Play o independien...

Minimizar aplicación al SystemTray/Bandeja del Sistema

Minimizar aplicación al SystemTray/Bandeja del Sistema

El SystemTray/Bandeja del Sistema o como también se le llama “Área de Notificación” es la sección de la barr...

MVC: Modelo, Vista y Controlador en PHP

MVC: Modelo, Vista y Controlador en PHP

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien defin...

10 comentarios en “Primeros pasos con JavaFX”

  1. Piratlax dice:

    es mas facil si ponen en google JavaScene Builder 2.0 descargar, para encontrarlo, si eres usuario de MAC como en mi caso, no esta en Herramientas (tools) sino en el menu superior donde dice Netbeans y de ahi le presionas Preferences, ya ahi entras a la opcion de Java y das de alta el SceneBuilder

    saludos y excelente blog

    1. Mouse dice:

      una MAC papa 🙂 que envidia 🙂

      1. TeVaLeVeRsH dice:

        Como podes envidiar a una MAC papa hahahahahaha me defraudas JC Mouse 😛 siempre eh estado siguiendo tus tutoriales y me han sacado de un chingo de apuros, oye tu crees que este bien lo que estoy haciendo? mira estoy creando un sistema que genera folios 0000001, 0000002 pero maneja de varios departamentos es decir abría varios folios repetidos 0000001,0000001 eso ya lo solvente el chiste que le coloque un random variable entre 0 y 6 segundos el cual su funcion es hacer un Threead.sleep entre esos segundos cada que se le da guardar para que en ese momento se genere el folio y se guarde… ¿porque hice esto? para evitar si por alguna razón 2 o 3 personas le dan clic al guardar al mismo tiempo y evitar generar un mismo folio no se creo que no esta bien pero por el momento como esto lo acabo de hacer apenas pues es lo único en lo que pensé, que me sugieres?

        1. Mouse dice:

          🙂 nunca tuve una mac y en Bolivia son muy caras ademas e escuchado muchas cosas buenas de ellas, en fin 🙂 tal vez cuando las pruebe me decepcione , ya veremos.

          ahora tu pregunta, te sugiero que investigues sobre “interbloqueo de base de datos” que es lo que necesitas implementar en tu software. la solucion que le diste pues puede que funcione, pero calcula cuantas personas usaran tu software al mismo y cuales las probabilidades de que estos coincidan en transacciones al mismo tiempo con tu base de datos, si son muy altas te sugiero interbloqueo.

  2. JJT778 dice:

    Hola mouse llevo unos años con javafx
    y quisiera compartir el conocimiento adquirido en estos ultimos años
    ya que aprendi mucho con algunos codigos java standar que consegui en tu web
    bueno espero alguna respuesta..

    1. Mouse dice:

      claro 🙂 escribe a mi correo o agregame en FB para que hablemos
      saludos

  3. mavster dice:

    Hola, tengo unas cuantas dudas.

    Cual es la diferencia de Java y JavaFX?

    Para que sirve JavaFX en si?

    Para programar o desarrollar software cual es mejor JavaFx o Java?

    Gracias.

    1. Mouse dice:

      la mayor diferencia entre java y fx esta en la GUI, internamente ambos son java por lo que puedes hacer con uno lo que puedes hacer con otro, ¿cual es mejor?, eso depende del desarrollador y claro de lo que quieras desarrollar, por ejemplo un reproductor de video sera muchisimo más fácil hacerlo con FX q con java puro ya que FX te brinda mayores herramientas multimedia

  4. Hamilton dice:

    Hola nesecito hacer un software para automatizacion radial, lo quiero crear en java y estoy buscando ideas para el reproductor principal me preguntaba si me podrias ayuda con algunas de esas ideas para crear el reproductor principal, como se trata de un automatizador para radio deberia poder reproducir muchos formatos de audio me serviria mucho tu ayuda Gracias.

    1. Mouse dice:

      Pues en ese caso JavaFX es tu solución ya que cuenta con herramientas multimedia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

El proyecto “Java Decompiler” tiene como objetivo desarrollar herramientas para descompilar y analizar byte...

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

Android Bolivia

Bandera en Alto