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

Proyecto Ascii Art (metodo de Black/white)

Proyecto Ascii Art (metodo de Black/white)

El Ascii Art o Arte Ascii, consiste en realizar dibujos con los caracteres ASCII (Código Americano Estándar de Intercamb...

Crear web multi-lenguaje con php

Crear web multi-lenguaje con php

En este tutorial realizaremos un proyecto web de un “sitio multi lenguaje” o “web multi idiomas”...

WhatsApp: Aprende a usar la nueva función ‘Estado’

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a...

Crear un plugin wordpress “Banned Word”

Crear un plugin wordpress “Banned Word”

En este post, escribiremos un sencillo plugin para wordpress el cual consistirá en reemplazar palabras en los comentario...

Matriz de Adyacencia: Representación de grafos en Java

Matriz de Adyacencia: Representación de grafos en Java

En este post conoceremos una forma de representar grafos mediante una Matriz de Adyacencia y un ejemplo básico de este e...

Consultas con parámetros en Access y Java

Consultas con parámetros en Access y Java

Tenemos un archivo de base de datos Access *.MDB y queremos realizar una consulta con parámetros de búsqueda utilizando...

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

“Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas platafor...

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

Un Tabbed Activity te permite cambiar la vista entre  fragmentos desplazando el dedo  de izquierda a derecha o de derech...

Este 12 de Mayo de 2017 se produjo un ataque masivo mundial del ransomware WannaCry  el  que afecto a más de 200000 comp...

Android Bolivia

Bandera en Alto