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

Crea una ventana de dialogo «Acerca de…» personalizado

Crea una ventana de dialogo «Acerca de…» personalizado

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr...

Mapas interactivos con HTML5 – Parte 1

Mapas interactivos con HTML5 – Parte 1

La tecnología de HTML5 y javascript  nos permite crear gráficos interactivos livianos sin tener que recurrir a flash, el...

Agregar JComboBox a un JTable

Agregar JComboBox a un JTable

En este post, crearemos una tabla swing que implemente un control jcombobox en una columna de una tabla, llenaremos con...

Alda: Lenguaje de programación para composición musical

Alda: Lenguaje de programación para composición musical

Alda es un lenguaje de programación desarrollado por Dave Yarwood el cual esta basado en texto para composición musical,...

Cliente/Servidor en java y c#

Cliente/Servidor en java y c#

Como habíamos mencionado en un anterior post Ejemplo socket java Cliente/Servidor , el lenguaje de programación entre el...

Tomar fotos con la camara y guardar en la sdcard

Tomar fotos con la camara y guardar en la sdcard

En este post realizaremos una aplicación android que hará uso de la cámara del celular para tomar una foto y guardarla e...

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

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp