style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

Hola mundo en JavaFX, por pasos.. (Deprecado)

El propósito de este post es mostrar la manera de crear una especie de 'hola mundo' en la tecnología JavaFX.
Es solo una introducción, en esta liga esta todo lo que escribo aquí: http://javafx.com/learn/

0.
Cómo?:
Declarar variables y constantes:

var variable:Tipo = Valor;
def constante:Tipo = Valor;

Definir una clase:

class NombreClase{
}

Definir funciones:

function nombreDeLaFuncion(valor:TipoDeIngreso):TipoDeRetorno{
        ;
}

Imprimir una linea de texto en consola:

def a:Number = 2.0;
def b: Number = 2.3;
def r:Number = a + b;
println("La suma de {a}+{b} es {r}");
//salida en consola
La suma de 2.0+2.3 es 4.3

Pasar datos a un objeto JavaFX:
Supongamos una clase

class NombreClase {
    var a: Number;
    var b: Number;
}

y tubienramos una variable de tipo NombreClase, de esta manera:

var variable:NombreClase;

podemos asignar valores a los atributos de la siguiente manera:

var variable: NombreClase = NombreClase {a: 23.3 b: 56.65 };

o tambien:

var variable: NombreClase = NombreClase {};
variable.a = 12.3;
variable.b = 98.4;

incluso de la siguiente manera:

var variable: NombreClase = NombreClase {a:12.3};
variable.b = 98.4;
// o
var variable: NombreClase = NombreClase {b:98.4};
variable.a = 12.3;

Recuperar datos:
La forma mas simple es así, pero podriamos hacer uso de un par de herramientas, como 'on replace' y 'bind', aquí un ejemplo muy pero muy util: http://www.javamexico.org/blogs/rodrigo_salado_anaya/no_need_setters_and...

class NombreClase {

    var a: Number;
    var b: Number;
}
var variable: NombreClase = NombreClase {a:12.3};
variable.b = 98.4;

println("valor de a:{variable.a}, valor de b:{variable.b}");

Ver un Ejemplo de uso:
Con solo copiar y pegar el ejemplo es suficiente, por dudas busca en la documentación, por ejemplo run(), new, return, etc

class Saludo {

    var a: Number;
    var b: Number;

    function getSaludo(s:String): String {
        var mensaje = "{s}, La suma de {a} + {b} = {a+b}";
        }
    }

var mensaje:String = Saludo{a:20.34 b: 46.32}.getSaludo("Hola");

println(mensaje);

//salida
Hola, La suma de 20.34 + 46.32 = 66.66

Continuare mostrando paso a paso la creación de una interfaz gráfica.

1.
Stage: Es una simple ventana, es la encargada de contener lo gráficos de nuestra aplicación.

import javafx.stage.Stage;
Stage {
}

Stage, se crea de manera implícita al usarse algún elemento gráfico de JavaFX, tomando lo ancho y largo del elemento usado 'getPreWidth, getPrefHeight'.
Por ejemplo si en una aplicación nueva solo colocamos el siguiente código:

import javafx.scene.control.Label;
Label { text: "Label:"}

se crea sobre una Stage, la única diferencia es que sobre este Stage, no tenemos pleno control (=P).

También si en una aplicación nueva colocamos el código siguiente, solo se colocara el ultimo elemento definido.

import javafx.scene.control.Label;
Label { text: "Label:1:"}
Label { text: "Label:2" visible:false}//invisible para ver detrás de el.

2.
Scene: Se encarga, de contener todo tipo de elementos de tipo Node, todo lo gráfico.
Para ver/usar los dos elementos se deben de contener en un elemento Scene. Stage tiene una atributo publico definido como 'scene', este es el encargado de contener un nodo de tipo Scene. Veamos un ejemplo, recuerda puedes copiar y pegar el código.
Donde la clase Stage tiene una atributo publico de nombre 'scene' de tipo 'Scene', como Saludo{a:Numner}

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Label;

Stage {
    scene: Scene {
        content: [
            Label {text: "Hola Mundo:1" },
            Label {text: "Hola Mundo:2" }
        ]
    }
}

Podemos ver que los dos elementos se sobre ponen, pero a diferencia de lo anterior ya tenemos pleno control de ellos.

3.
Mezclar Java & JavaFX, Script: JavaFx de manera natural esta echo para trabajar con Java, veamos un pequeño ejemplo:
Si tenemos una clase en java:

public class Saludo {

    float a;
    float b;

    public String getSaludo(String s) {

        String mensaje = s + ", La suma de " + a + " + " + b + " = " + a + b;
        return mensaje;
    }
}

Podriamos escribir en 'Main.fx' algo como esto:

var mensaje:String = Saludo{a:20.34 b: 46.32}.getSaludo("Hola");

println(mensaje);

Lo cual nos producirá un error [un posible bug de compilación. en la versión 1.3, la verdad no lo se aun tengo que investigarlo :P], así que usemos esto:

var mensaje:Saludo = Saludo{};
mensaje.a = 20.34;
mensaje.b = 46.32;

println(mensaje.getSaludo("Hola"));

4.
Mezclar Java & JavaFX, Gráfico:Este seria el ejemplo gráfico usando la misma clase en Java.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;

var mensaje: Saludo = Saludo {};

mensaje.a = 20.34;
mensaje.b = 46.32;

Stage {
    scene: Scene {
        content: [Label {
                text: mensaje.getSaludo("Hola JavaMexico.org")
            }
        ]
    }
}

Otro ejemplo usando constructores:
Cambiemos la clase Saludo:

public class Saludo {

    float a;
    float b;

    Saludo(float a, float b) {
        this.a = a;
        this.b = b;
    }

    public String getSaludo(String s) {

        String mensaje = s + ", La suma de " + a + " + " + b + " = " + a + b;
        return mensaje;
    }
}

Y esto sería el codigo en JavaFX:

package pruebas;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;

var a: Number = 20.34;
var b: Number = 46.32;
var mensaje: Saludo = new Saludo(a, b);

Stage {
    scene: Scene {
        content: [Label {
                text: mensaje.getSaludo("Hola JavaMexico.org")
            }
        ]
    }
}

4.
Petición:Reconozco mi falta de experiencia para explicarme, aun así me encanta enseñar o por lo menos difundir lo poco que se de JavaFX así que si te surgen dudas o quieres que haga una esfuerzo por explicar un punto con mas profundidad, solo comentalo, me pongo a tu disposición :P nos leemos pronto.
Nota:Comenten todo lo que quieran para poder ir afinando mis habilidades en esto de postear y sí no respondo pronto, es por que me están negreando en el trabajo jajajaa ó_Ó.

AdjuntoTamaño
ejemploFX.JPG141.55 KB

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.

Me queda muy claro.

La verdad es que como desarrollador siembre me parece mucho más entendible ver pedazos de código a largas explicaciones.

Gracias por los ejemplos y los links que has publicado.

Imagen de Nopalin

algunas dudas

Oye hombre aclárame un poco el panorama, haciendo algun tipo de comparaciones para entender mejor:
* un jframe viene siendo como un stage?
* veo que el scene está dentro de un stage, puedo suponer que viene siendo como el layout?
* si quiero por ejemplo abrir un dialog u otra ventana, tengo que hacer otra instancia de stage y por lo tanto de scene?

Saludos y muy buen tutorial para principiantes

Imagen de rodrigo salado anaya

@Nopalin, ok.

Si mira, un elemento Stage es una simple ventana, pero el atributo Scene, no es en layout, un layout en JavaFx seria: http://java.sun.com/javafx/1/tutorials/ui/layout/ o http://javafx.com/docs/articles/Flowers/layoutContainers.jsp, un elemento Scene, es solo donde pones el contenido de la ventana.

Si tienes que crear otro Stage: http://java.sun.com/javafx/1.3/docs/api/javafx.stage/javafx.stage.Stage.... o mejor dicho crear otra ventana(http://rakeshmenonp.wordpress.com/2009/12/21/javafx-custom-window/) solo creas otro elemento Stage, y todo Stage tiene un scene. Checa el archivo adjunto es un pequeño ejemplo de como queda una aplicacion en javafx muy sencilla :P

Una cosa padre es que no es necesario crearlo al mismo tiempo que cree tu primera ventana, lo puedes crear después y mandarlo insertar o quitarlo, análogamente a como se hace con estos ejemplos: http://java.sun.com/javafx/1/tutorials/core/sequences/ cuando le agarras el chiste a eso es muy sencillo hacer código limpio o muy complicado como el código de este demo: http://javafx.com/samples/DisplayShelf/index.html,

Que onda!! me explique con claridad? O me echo un pequeño ejemplo, solo dime que es lo que quieres que el ejemplo que haga(algo sencillo claro).

Yo quiero un ejemplo

que tenga una tabla, una lista un combo, checkbox y textfield

Saludos :)

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">