Para agregar este componente deberan tener como minimo netbeans 6.8 y javafx 1.6. Luego abren el netbeans y van a tools->plugins y buscan javafx composer

Pueden encontrar mucha mas info en la wiki de netbeans.

Realmente me gustaria mucho seguir con los tutos de javafx pero me estoy concentrando en aprender bien a usar KumbiaPHP Framework…..

Me gustaria saber si alguien podra seguir los tutos de JavaFX que yo deje? La verdad son muy solicitados y ademas me gustaria que hubiera alguien mas que escriba en el blog :tux:

Antes de ver eso primero vamos a ver como facilitarnos un poco la vida usando una clase para nuestra conexion. Esto nos servira para poder olvidarnos un poco del codigo y hacer una clase reutilizable. Y de paso ven un poco de como usar clases y funciones en javafx

Lo primero sera crear un nuevo proyecto en nuestro NetBeans, yo le he llamado tablesjavafx, dentro de “Source Package” veran un paquete llamado igual que el nombre del proyecto, le hacemos click derecho->New->JavaFX Class y nos aparecera una ventana para crear la nueva clase, yo la he llamado “Database” y click en Finalizar. Al final les deberia quedar algo asi:

Veran que en las Libraries tambien esta el driver del MySQL, si leyeron el capitulo 6 de este tuto entonces eso ya saben como importarla. Y tambien estamos usando la misma base de datos del capitulo 6.

Lo que va dentro de la clase Database.fx se los dejo en este zip ya que wordpress no me deja pegarlo aqui

Como veran es una clase super sencilla pero que nos sera muy util. Tiene 4 funciones:

• connect: necesito explicar lo que hace?
• shutdown: cierra las conexiones.
• ejecutar: es para ejecutar consultas que modifiquen la base de datos(insercion, actualizacion, etc). Como ven nos devuelve un tipo Number con la cantidad de filas afectadas.
• consultar: es para hacer consultas de seleccion. Nos devolvera un ResultSet con el resultado de nuestra consulta.

Ahora veamos un ejemplo de como usar esta clase. Nos volvemos a Main, lo primero sera declarar algunas variables e inicializamos la clase que ya habiamos creado:

var db  : Database  = null;
var rs  : ResultSet = null;
var rows: Number;
db = Database{driverName: 'com.mysql.jdbc.Connection'
 jdbcUrl   : 'jdbc:mysql://localhost/clientes'
 user      : 'root'
 password  : 'songoku'};

Y aqui algunos ejemplos de como usar las funciones que definimos en la clase Database (obviamente todo va dentro de un try-catch):

//nos conectamos
 db.connect();
 //hacemos una insercion
 rows=db.ejecutar("consulta de insercion, modificacion, etc");
 System.out.println("Insertadas {rows} filas");

 //probamos una consulta
 rs=db.consultar("consulta de seleccion");
 while(rs.next()) {
 System.out.println("id: {rs.getInt('id')} task: {rs.getString('task')}");
 }

 //cerramos la conexion
 db.shutdown();

No voy a explicar mucho porque son cosas que ya vimos, pero lo que hace es:

1. conectarse a la base de datos
2. una consulta de insercion o modificacion
3. una consulta de seleccion
4. cerrar las conexiones

Todo lo que hace es usar las funciones de la clase de la forma db.connect() donde db es el nombre con el cual inicializamos la clase mas arriba.

La idea de este post fue que aprendan a hacer una clase reutilizable para sus proyectos, en este caso fue la de conexion entre mysql y javafx pero puede ser de cualquier otra cosa. Y ahora si, prometo que en el proximo vemos como hacer todo pero con interfaz grafica

PD: nadie me dice ni siquiera “perro que buenos esta el tuto” o ni lo contrario

Voy a explicar algunas cosas y luego vemos el codigo. Lo primero es que para el ejemplo usare una tabla sencilla llamada “Todos” en una base de datos llamada “clientes”. La tabla solo tiene 2 campos:

id es campo clave y autoincremental y task un varchar cualquiera.

En este primer ejemplo haremos algo muy sencillo y poco util ya que nuestro ejemplo lo unico que hara es conectarse a la base de datos, insertar algun valor y luego mostrar todos los registros de la tabla…pero en la consola por eso decia que es poco util.

En la proxima entrega les mostrare como hacer lo mismo pero ya con una interface grafica mas decente. Y antes de empezar les vuelvo a repetir que es mejor que vean el post de como conectar java con mysql porque sino no van a entender este.

Veamos el codigo:

import javafx.stage.Stage;
import javafx.scene.Scene;
import java.lang.String;
import java.sql.*;
import java.lang.*;
import java.lang.System;
import java.sql.DriverManager;

/**
 * @author sefsinalas
 */
var nombre= "clientes";
var user= "root";
var password= "su_password";
var jdbcUrl="jdbc:mysql://localhost/{nombre}";
var driverClassName = "com.mysql.jdbc.Connection";

// Database objects
var driver:Driver     = null;
var conn  :Connection = null;
var stmt  :Statement  = null;
var rs    :ResultSet  = null;

var rows  :Number;

try {
    // Load driver
    Class.forName(driverClassName);
    try {
        // Conectar a la base de datos
        conn = DriverManager.getConnection(jdbcUrl, user, password);
        stmt = conn.createStatement();

        // Insertar registro
        rows = stmt.executeUpdate("reemplazar por la sentencia de Insercion");
        System.out.println("Insertadas {rows} filas");

        // Select and print tasks
        rs = stmt.executeQuery("reemplazar por la consulta");
        while(rs.next()) {
            System.out.println("id: {rs.getInt('id')} task: {rs.getString('task')}");
        }
    } catch(e:SQLException) {
        e.printStackTrace();
    } finally {
        if(null != rs){rs.close();}
        if(null != stmt) {stmt.close();}
        if(null != conn){conn.close();}
     }// finally
} catch(e:Exception) {
    e.printStackTrace();
}
Stage {
    title: "JavaFx y MySQL"
    width: 250
    height: 80
    scene: Scene {
        content: [
        ]
    }
}

Si se fijan en la ultima parte (Stage y Scene) no hay nada, pues como ya dije solo mostraremos los datos en modo consola.

Bueno como veran la primera parte son solo imports que si usan Netbeans se colocan automaticamente. La segunda parte son solo los datos de acceso a la base de datos, la direccion con la que jdbc se conectara a la base de datos y el tipo de driver que usaremos para conectarnos, en nuestro caso es el de MySQL, que repito, para importar esa libreria deben leer el post como conectar java y mysql.

Luego de eso inicializamos unas cuantas variables a null, estas variables son las usadas para manejarnos con la base de datos. Connection y Driver seran para conectarnos, Statement sera para ejecutar sentencias y ResultSet para hacer consultas.

Veran que he remarcado en verde las mismas sentencias que usamos en el post de como conectar java y mysql, son las que usamos para hacer la conexion a la base de datos.

Para insertar datos primero creamos el objeto que nos servira a tal proposito (linea 32) y luego ejecutamos las sentencias que deseemos, por ejemplo la de la linea 35.

Para hacer una consulta hacemos un executeQuery como el de la linea 39 y para recorrer todos los registros que nos da el resultado de ese Query hacemos un while como el de la linea 40.

Y si se preguntan porque esto todo dentro de un try-catch…eso ya lo explique en el otro post: java nos obliga a hacerlo asi, para evitar que hagamos las cosas mal. Como veran en la linea 45 esta el finaly donde cierro todas las conexiones en el orden debido.

Entonces ahora solo ejecuten y cada vez que lo hagan se insertara un registro y luego en la consola se mostraran todos los registros de la tabla.

En la proxima entrega haremos que esto sea mas util, crearemos una clase para faciltiranos la vida y crearemos una interfaz grafica sencilla. Saludos y espero que les sirva

JavaFX

Si quieren leer las releases notes estan aqui. Entre las novedades podemos encontrar

• Permite trabajar al IDE con los paquetes de JavaFX SDK 1.2
• Una gran cantidad de bugs han sido corregidos con esta actualizacion

Los que vallan a actualizar desde la 6.5 tambien se encontraran con:

• Posibilidad de conectarse al proyeto Kenai
• En cuanto a PHP se incluye soporte para Selenium y autocompletado de codigo SQL.
• Web API Gateway, un plugin que nos facilita muchimo la tarea de consumir servicios webs tales como Amazon,Yahoo, Twitter, etc con solo 2 lineas de codigo
• Y otras

Para instalarlo es solo un simple paso, obviamente yo voy a explicar como intalarlo en Linux, especificamente yo uso Ubuntu pero pueden instalarlo de la misma manera en cualquier distro.

Bajamos la ultima version haciendo click aqui, es un solo archivo con extension .sh y luego con la consola nos movemos a donde hayamos descargado el archivo y escribimos:

sudo sh netbeans-6.7.1-ml-linux.sh

Y luego son solo unas cuantas ventanas que nos pediran unos pocos datos y listo.

Ahora, lo que tal vez quieran saber es como desintalar las versiones anteriores, pues tambien es sencillo, abrimos una consola :console: y a continuacion escribimos:

cd /usr/local

hagan un ls en la misma consola y veran que tienen una o mas carpetas que comienzan con netbeans-xxx donde xxx es la version. Por ejemplo, yo tenia instalada la version 6.5.1 y la 6.7 entonces veia 2 carpetas, una llamada netbeans-6.5.1 y otra llamada netbeans-6.7, ahora con la misma consola nos movemos dentro de una de esas carpetas, por ej:

cd netbeans-6.7

Y dentro de esa carpeta esta el archivo para desinstalar la version anterior, entonces hacemos:

sudo ./uninstall.sh

Y con eso comenzara el proceso de desinstalacion de esa version de netbeans, luego repetimos el proceso para cada una de las versiones que tengamos instalada.

Obviamente es mejor primero desinstalar las versiones antiguas y recien instalar la nueva

Saludos y espero que la noticia les caiga tan bien como a mi.

Recordaran que en la parte 4 del tuto vimos el tema de los eventos, y en las anteriores partes del tutorial veiamos como crear GUIs (Interfaces Graficas) a base de formas basicas e incluso como crear nuestras propias formas. Hoy lo que vamos a ver son 2 cosas bastante sencillas:

1. Usar componentes de Swing
2. Acomodar los componentes usando VBox y HBox

Los que ya saben java seguramente encontrar muy aburrida este parte del tutorial, pero muchos otros recien estamos aprendiendo Obviamente vamos a hacer que el programa “haga algo”, es un algo muy inutil pero sirve para aprender. Esta sera la GUI que crearemos:

GUI con Swing en JavaFX

Lo que hara nuestro programita supongo que ya lo deben estar adivinando. Como veran consta de 1 TextField, 1 Button, 1 Label, 2 RadioButtons y 1 Circle. Al hacer click en el Button el Label cambiara el texto mostrado por lo que sea que hayamos escrito en el TextField. Y los RadioButtons cambiaran el color del Circle dependiendo de cual este seleccionado.

Empecemos…

Lo primero es aprender que es un Layout, un Layout es un contenedor invisible que nos sirve para organizar los elementos dentro de la Scene. Recuerdo que en Java habia muchos tipos de Layouts y al final nunca aprendi a usar ninguno. En JavaFX solo veremos 2 tipos de Layouts: VBox y HBox, tan solo con su nombre podemos imaginar como usarlos. Ambos se comportan como rejillas o cajas.

El VBox serian muchas cajas apiladas una dentro de otra y dentro de cada caja podemos colocar un componente. El HBox es lo mismo solo que en vez de imaginar cajas apiladas imaginen cajas una al lado de la otra. Teniendo en cuenta tambien que una HBox puede contener un VBox y viceversa, seria como decir que una caja puede tener otras cajas adentro

Tal vez con este grafico entiendan mejor:

VBox y Hbox en JavaFX

Ahora ven como hice la GUI? en primer lugar use un VBox que tiene 4 cajas o 4 filas y en segundo lugar use un HBox que esta dentro de la ultima fila del VBox, este HBox tiene 3 cajas o 3 columnas. No es muy dificil de entender verdad?

Veamos como lo hicimos:

Stage {
title: “Application title”
width: 250
height: 230
scene: Scene {
content: [
VBox{
spacing:25
translateX:15
translateY:10
content:[
//aqui sera donde coloquemos lo controles
]
}
]
}
}

Ese es el inicio, solo tenemos colocado el VBox, veran que todos los controles se colocan dentro del content y el orden en que se coloquen sera el orden en que aparezcan. El atributo spacing se usa para determinar el espacio entre componentes, translateY y translateX los coloque para darle un margen a VBox, ya que si no se usan queda pegado a la ventana y queda feo. Ahora colocamos los componentes:

scene: Scene {
var miLabel:SwingLabel
var miTxt:SwingTextField
content: [
VBox{
...
content:[
miTxt=SwingTextField {
columns: 10
text: "Escribe algo..."
editable: true
}
SwingButton {
text: "Click aqui!"
action: function() { miLabel.text=miTxt.text }
}
miLabel=SwingLabel {
text: "Esto cambiara"
}
HBox{
spacing:20
content:[
//aqui iran los componentes del HBox
]
}
]
}
]
}

Como veran no tiene nada de raro a lo que ya habiamos visto, los componentes simplemente los arrastre desde la barra lateral del NetBeans. Solo habra que tener en cuenta como introduje el TextField y el Label como variables, de esta manera puedo trabajar comodamente con sus atributos y el la accion del boton solo tengo que hacer miLabel.text=miTxt.text

Ahora en el HBox coloque lo siguiente:

scene: Scene {
…
var miCirculo:Circle
var group = SwingToggleGroup{}
content: [
VBox{
...
content:[
...
HBox{
spacing:20
content:[
SwingRadioButton {
toggleGroup: group
text: "Rojo"
onMousePressed: function( e: MouseEvent ):Void {
miCirculo.fill=Color.RED
}
}
SwingRadioButton {
toggleGroup: group
text: "Verde"
onMousePressed: function( e: MouseEvent ):Void {
miCirculo.fill=Color.GREEN
}
}
miCirculo=Circle {
centerX: 10, centerY: 10
radius: 5
stroke:Color.BLACK
fill: Color.YELLOW
}
]
}
]
}
]
}

Aqui lo que hay que tener en cuenta son 3 cosas:

1. Tambien he trabajado el circulo como una variable, declarandolo a nivel de Scene, esto como ya dije es para trabajar mas comodamente con sus propiedades.
2. Para cambiar el color del Circle lo que hice fue agregarle un evento MousePressed a cada RadioButton y simplemente modificar la propiedad fill del Circle (lo que esta en verde). Seguramente hay una manera mas correcta de hacer esto, por ejemplo una que utilice la propiedad selected de los RadioButtons, pero por ahora esta es la que yo se. Si alguien sabe otra manera por favor digalo en los comentarios.
3. He definido una variable group del tipo SwingToggleGroup y esta la he usado como valor de la propiedad ToggleGroup de ambos RadioButtons. Que hace esto? Pues de manera logica a los RadioButtons, de manera que solo uno del grupo pueda estar seleccionado. Si no lo usaran uno podria tener ambos seleccionados a la vez.

Bueno eso fue todo por ahora. No vimos nada demasiado novedoso pero creo que es importante saberlo.

Para la proxima prometo buscar un plugin para ver mejor el codigo en el blog…y tambien prometo que no hare la otra parte del tutorial hasta que en esta entrada haya 10 comentarios por lo menos!!!!!

Y les dejo como siempre el video para que vean que si anda todo y que no les miento

Actions en NetBeans

Todos los objetos que conforman la GUI que vimos hasta ahora tienen los eventos correspondientes al mouse y el teclado.

Vamos a ver un par de ejemplos.

onMouseEntered y onMouseExited

Primero que nada creamos una variable llamada “miFigura” antes del contendo(content) del escenario(Scene). Nos quedaria asi:

scene: Scene {
var miFigura:Rectangle = Rectangle {
x: 20, y: 10
width: 150, height: 70
arcWidth: 50, arcHeight: 50
fill: Color.LIGHTBLUE
stroke: Color.ROYALBLUE
strokeWidth: 3
}
content: [ ]
}

Como veran es una objeto literal comun como el que ya hemos usado muchas veces. Pero veamos un par de cosas que tendremos que tener en cuenta:

• Por que lo asignamos a una variable? Para poder operar con sus atributos de manera mas sencilla.
• Por que lo creamos fuera de “content”? Porque no pueden declararse variables dentro del content, solo usarse.
• Que es arcWidth y arcHeight? Es para darle bordes redondeados al rectangulo.

Ahora le agregaremos las acciones de onMouseEntered y onMouseExited desde el panel lateral derecho. Esto lo hacemos dentro de la variable miFigura, el codigo nos quedara asi:

scene: Scene {
var miFigura:Rectangle = Rectangle {
x: 20, y: 10
width: 150, height: 70
arcWidth: 50, arcHeight: 50
fill: Color.LIGHTBLUE
stroke: Color.ROYALBLUE
strokeWidth: 3
onMouseEntered: function( e: MouseEvent ):Void {
miFigura.fill = Color.LIGHTGREEN;
}
onMouseExited: function( e: MouseEvent ):Void {
miFigura.fill = Color.LIGHTBLUE;
}
}

content: [
miFigura
]
}

Lo que agregamos es lo que esta en rojo. En los eventos veran que lo que hacemos es cambiar la propiedad fill (relleno) de el rectangulo, que se llama miFigura. El evento onMouseEntered se lanza cuando el puntero del mouse entra en la figura, y onMouseExited cuando la deja. El ultimo cambio que pueden ver con rojo es cargar dentro de content la variable que contiene nuestro rectangulo, sino colocan nada dentro de content solo les aparecera una ventana vacia.

Este mismo concepto vale para todas las acciones o eventos que podemos ver en el panel lateral del NetBeans, no vale la pena verlas todas ahora ya que con solo leer el nombre nos damos una idea de para que sirve cada accion. Ademas en las subsiguientes partes de este tutorial seguramente las usaremos todas.

Transformaciones

Este es otro tema que no es de gran importancia si queremos hacer aplicaciones llamativas y vistosas y con lindos efectos. Las transformaciones nos permiten transformar de una u otra manera nuestros objetos visibles. Vamos a ver 3 tipos de transformacionesm que, obviamente, el NetBeans nos la provee en su barrita listas para arrastrarlas a nuestro codigo. Al final del esta parte del tutorial les dejare un video para que vean las transformaciones en accion. Para todos los ejemplos usaremos el mismo codigo del primer ejemplo (onMouseEntered y onMouseExited)

Rotate

Esta tranformacion nos permite rotar un objeto visible sobre un pivote. Nosotros podremos espedificar la ubicacion de dicho pivote y el angulo de inclinacion. Su uso basico es el siguiente:

transforms: Rotate {
angle: 30 // angulo de inclinacion
pivotX: 10 //punto pivote X
pivotY: 10 //punto pivote Y
}

Pero eso es muy sencillo, nosotros lo daremos un mejor uso con nuestro anterior codigo asi:

scene: Scene {
var miFigura:Rectangle = Rectangle {
…
var angulo = 0
transforms: Rotate {
angle: bind angulo
pivotX: 10
pivotY: 10
}
onMouseEntered: function( e: MouseEvent ):Void {
angulo = 10
}
onMouseExited: function( e: MouseEvent ):Void {
angulo = 0
}
}

content: [
miFigura
]
}

Como podran observar en rojo lo que hacemos es solo cambiar el valor del angulo segun si el puntero del mouse esta dentro o fuera de la figura. Pueden ver el ejemplo en accion en el video del final.

Traslate

Lo que hace esta transformacion es super sencillo, simplemente traslada nuestro objeto a otra posicion, como parametros requiere una posicion X y una posicion Y. Su uso basico es como sigue:

transforms: Translate {
x: 50 //posicion X
y: 40 //posicion Y
}

Por supuesto nosotros haremos algo mas lindo agregando esto a nuestro primer ejemplo. El codigo queda como sigue:

var miFigura:Rectangle = Rectangle {
…
var PosX = 20
var PosY=10
transforms: Translate {
x: bind PosX
y: bind PosY
}
onMouseEntered: function( e: MouseEvent ):Void {
PosX = 20; PosY=50
}
onMouseExited: function( e: MouseEvent ):Void {
PosX = 20; PosY=10
}
}

Nada que explicar, esta muy sencillo.

Scale

Hace falta decir que hace este? Bueno lo digo, esta tranformacion lo que hace es cambiar la escala de un objeto. Su uso basico es:

transforms: Scale {
x : 2 //escala en ancho
y : 3 //escala en largo
}

El numero que se le asigna a cada atributo representa porcentaje. Colocar 2 en “x” significa que se duplicara el ancho del objeto, 3 en “y” significa que se triplicara el lardo del objeto.

En nuestro ejemplo:

var miFigura:Rectangle = Rectangle {
…
var tamX=1
var tamY=1
transforms: Scale {
x : bind tamX
y : bind tamY
}
onMouseEntered: function( e: MouseEvent ):Void {
tamX = 1; tamY=2
}
onMouseExited: function( e: MouseEvent ):Void {
tamX = 1; tamY=1
}
}

Cambiamos solo el valor de la escala en Y para que aumente o disminuya el largo del objeto. El video al final.

Bind

Como veran en los ejemplos hice uso de la palabra clave “bind”, esta es muy importante para en el desarrollo de GUIs con JavaFX. Basicamente lo que hace es enlazar u obligar a las variables a tomar valores que cambian a lo largo de la aplicacion. No voy a dar muchas vueltas con esto porque creo que con los ejemplos dados esta mas que claro su usp.

El video

Espero que les sea util esta cuarta parte del tutorial, como les dije al principio el tutorial continuara pero despues que rinda los examenes en la facu

Saludos

Formas Basicas de JavaFX

Pero tambien nos permite crear nuestras propias formas y darle efectos. Eso es lo que tratare de explicar en esta parte del tutorial.

Crear nuestras propias formas es sencillo con JavaFX. Basicamente tenemos 2 maneras de hacer una nueva figura o forma:

• Combinar formas basicas existentes
• Crear formas totalmente nuevas desde 0

Lo primero es sencillo, lo segundo no lo es tanto pero no lo vamos a ver porque al menos por ahora no lo vamos a necesitar, eso lo veremos mucho mas adelante cuando hagamos nuestro primer juego con JavaFX. Asi que ahora vamos a ver como crear una nueva forma combinando otras existentes.

Supongamos que nuestro programa tiene un cuadrado y un rectangulo, simplemente colocados sin hacerles ningun cambio, quedarian asi:

El codigo para eso seria el siguiente:

Stage {
title: “Graficos”
width: 200
height: 200
scene: Scene {
content: [
Rectangle {
x: 10, y: 10
width: 140, height: 90
fill: Color.BLUE
}
Circle {
centerX: 100, centerY: 100
radius: 40
fill: Color.RED
}
]
}
}

Ahora vamos a ver como combinarlos para crear formas nuevas usando ShapeIntersect y ShapeSubtract.

ShapeIntersect

Esto nos permitira dibujar en pantalla todo aquello que forme parte parte de ambas formas basicas, es decir que dibujara su interseccion.

Nos quedaria algo asi:

El codigo:

scene: Scene {
content: [
ShapeIntersect {
fill: Color.LIGHTGREEN
stroke: Color.GREEN //esto es el color del borde
strokeWidth: 3 //esto determina el ancho de la linea
a:Rectangle {
x: 10, y: 10
width: 140, height: 90
fill: Color.BLACK
}
b:Circle {
centerX: 100, centerY: 100
radius: 40
fill: Color.BLACK
}
}
]
}

Veran que he agregado algunos detalles como un borde para que vayamos viendo de a poco todas las opciones que tenemos en JavaFX.

ShapeSubtract

Esto nos permitira hacer lo contrario, en vez de dibujar la insterseccion de ambos objetos nos dibujara aquellas partes de la primer forma y que no pertenezcan a la segunda. Con lo que nos quedaria algo asi:

Se entiende verdad? Bueno el codigo es el mismo que el anterior nada mas que en vez de usar ShapeIntersect se usa ShapeSubtract

Imagenes

Tambien podemos de manera super sencilla tener un control que muestre una imagen. Pueden usarlo para mostrar imagenes que esten en su disco duro asi:

ImageView {
image: Image {
url: “file:///home/usuario/fotos/rayo.jpg”
}
}

O pueden usarlo para mostrar fotos que esten en internet asi:

ImageView {
image: Image {
url: “http://paginaweb.com.xx/avatar.gif”
}
}

Ahora empecemos a ver algo que seguramente usaran mucho, los efectos.

Sombra (DropShadow)

Lo que hace es obvio y lo veremos mejor con un ejemplo:

Rectangle {
x: 10, y: 10
width: 140, height: 90
fill: Color.BLACK
effect: DropShadow {
offsetX: 10 //pixeles en la direccion X
offsetY: 20 //pixeles en la direccion Y
color: Color.RED //Color de sombra
radius: 30.0 //Radio del difuminado
}
}

Sombra JavaFX

Otros efectos

Supongamos que tenemos la siguiente figura:

Imagen Original

Estos son algunos efectos que podremos usar con esa imagen:

effect: SepiaTone { level: 0.5 }

Sepia

effect: Glow { level: 0.7 }

Glow

effect: GaussianBlur {
input: SepiaTone {
level: 0.5 }
radius: 10.0
}

Blur

effect: Reflection {
fraction: 0.7 }

Reflection

Como veran todo se vuelve facil en JavaFX, estas cosas no tengo ni idea como hacerlas con otro lenguaje sin usar librerias especializadas. Vimos desde como crear nuestras propias formas hasta como darle efectos, pero como se podran dar cuenta hasta ahora nuestros programas no hacen nada, solo dibujar en pantalla, en la proxima parte de este tutorial veremos como hacer que nuestros programas empiecen a hacer algo y que permitan la interaccion con el usuario Saludos

Antes de empezar han de recordar esto: “El orden en que declaran los elementos en el codigo coincide con el orden en que apareceran en la aplicacion”

Paso a Paso para crear una Interfaz Sencilla

Lo que haremos sera crear algo sencillo, como lo siguiente:

GUI basica con JavaFX

Pasos:

1. Crear la ventana
2. Incluir un escenario
3. Insertar un rectangulo
4. Insertar un circulo

Existe un paso previo que seria colocar los “imports” necesarios, pero si estan usando NetBeans para desarrollar eso no tiene mucha importancia ya que lo hace solo.

Crear la ventana

La ventana sera obviamente un objeto literal(si no saben lo que es revisen la parte 1 del tutorial) llamado Stage. Esta ventana o Stage en general es inicializado con ciertos parametros, como el titulo de la ventana y el tamaño. Hacemos asi:

Stage {
title: “Graficos”
width: 200
height: 200

}

Con eso hemos creado una ventana con el titulo “Graficos” y de tamaño igual a 200×200 pixeles.

Incluir un Escenario

Dentro de un Stage se debe incluir un Scene que nos servira para contener los objetos nodos como el circulo y el rectangulo. Este Escenario o Scene es una area maestra donde seran colocados otro objetos graficos. Todos los objetos que contendra estaran dentro de la variable content. Entenderan mejor con un ejemplo:

Stage {
…
scene: Scene {
content: [ //aqui estaran los otro objetos graficos]
}
}

Insertar un rectangulo

Se puede incluir un rectangulo de manera super sencilla arrastrandolo desde la barra Palette->Basic Shapes que esta a la derecha. Esto es un objeto con algunos parametros que nosotros modificaremos a gusto. En mi caso quedo asi:

Stage {
…
scene: Scene {
content: [
Rectangle {
x: 10, y: 10
width: 120, height: 120
fill: Color.GREEN
}
]
}
}

Un rectangulo cuya esquina superior  izquierda esta a 10 pixeles del borde superior y del borde izquierdo de la ventana (Stage), que tiene un tamaño de 120×120 pixeles y que esta relleno con color verde. Sencillo verdad?

Insertar un circulo

Se puede hacer arrastrando desde la paleta de Formas Basicas (Basics Shapes) igual que el rectangulo o escribiendo:

Stage {
…
scene: Scene {
content: [
Rectangle {
x: 10, y: 10
width: 120, height: 120
fill: Color.GREEN
}
Circle {
centerX: 100, centerY: 100
radius: 60
fill: Color.LIGHTBLUE
}
]
}
}

Como veran en el caso del circulo lo que se indica es el punto medio y el radio, y con fill establecemos el color de relleno.

Con eso ya tiene su primer aplicacion grafica creada, obviamente que no hace nada Ahora solo hagan click en Run en NetBeans y proban ver lo que han creado. Aqui les dejo un video que dura menos de 2 minutos que va desde el comienzo(crear el proyecto) hasta el final(ejecutarlo) y veran como hacer este ejemplo en NetBeans.

Creo que seria mejor si lo bajan, click aqui para bajar.

Bueno por ahora eso es todo, en la proxima parte de este tutorial seguiremos aprendiendo mas sobre las interfaces graficas.

Asi que me decidi a hacer yo uno. Ya les he contado de que se trata JavaFX y como instalar JavaFX asi que ahora vamos a empezar a aprender a usar el lenguaje.

En esta primera parte del tutorial vamos a ver:

• Objetos Literales
• Tipos de datos

Esto es un poco de teoria que a muchos nos aburre pero a veces es necesario verla. Quiero aclarar que todo esto lo hago basandome en el curso de javapassion que por supuesto esta en ingles y no a todo el mundo le gusta leer las cosas en ingles. (es mi caso ) Tambien he de aclarar que el curso de javapassion esta mucho mas completo pero yo omitire aquellas cosas que considere poco importantes. Por ejemplo los operadores, son los mismos en todos los lenguajes y a nadie le gusta tener que releer eso todas las veces.

Entenderan que yo recien estoy aprendiendo y espero que si alguien ve errores a lo lardo del tutorial me lo diga.

Antes de empezar con el tutorial quiero aclarar que JavaFX corre sobre la maquina virtual de Java y ademas en JavaFX pueden usar las mismas clases y funciones que usaban en Java para programar, por ejemplo en JavaFX puede usar JDBC para conectarse a las bases de datos, etc etc. Esto lo digo porque siempre hay algunos apresurados que no van a seguir el tutorial sino que quieren avanzar mas rapido

Bueno, con eso dicho empecemos.

Objetos Literales

Todos sabemos conceptualmente que es un objeto verdad? Un objeto nos sirve para modelar cualquier cosa, desde compenentes de la GUI (Graphic User Interface) hasta abstracciones no visuales como datos de temperatura, registros financieros, etc.

En JavaFX un objeto puede ser creado con un Objeto Literal. Lo que significa una sintaxis declarativa consisa parecida a javascript.

Ejemplo:

// Creando un Rectangle (rectangulo)
Rectangle {
x: 10 y: 10
width: 100
height: 100
}

Como veran la primer palabra “Rectangle” especifica el tipo de objeto, o sea la clase, que estas creando. Las variables en su interior no son asignaciones, son inicializaciones de los atributos del objeto.

Algo que me gusta de JavaFX es la manera en que se pueden colocar los atributos de un objeto. En el ejemplo anterior veran que no hay comas(“,”), ni puntos y comas(“;”) sino que estan separadas por un espacio(” “),pero, si se pueden usar. Por ejemplo podria ser asi:

// Creando un Rectangle (rectangulo)
Rectangle {
x: 10, y: 10,
width: 100,
height: 100,
}

O con putos y comas.

Objetos Anidados

Otra cosa que se puede hacer y en general lo van a hacer mucho en javaFX es anidar objetos. Esto es usar un objeto dentro de otro, normalmente como asignacion a uno de los atributos del objeto padre. Por ejemplo:

Rectangle {
x: 10
y: 10
width: 100 height: 100
fill: Color {
red: 1
green: 0
blue: 0
}
}

Como pueden ver, lo que hicimos fue usar el objeto Color dentro del objeto Rectangle para establecer el valor del atributo fill.

Asignando Objetos Literales a una variable

Otra cosa muy util que deberemos saber es a utilizar variables para asignar a ellas Objetos Literales. Esto es super sencillo y lo entenderan con el siguiente ejemplo.

var miColor:Color=Color{
red: 1
green: 0
blue: 0
}

Rectangle {
x: 10, y: 10
width: 140, height: 90
fill: miColor
}

En el ejemplo lo que hacemos es asignar un objeto de tipo “Color” a la variable “miColor” y luego cuando creamos un Rectangle solo usamos la variable “miColor”. He marcado con colores algunas partes para que entiendan mejor, pero luego esto lo explicare mejor. Lo que esta en rojo es el nombre de la variable, lo que esta en azul es el tipo y lo que esta en gris es el tipo de objeto o clase.

Tipo de datos

Esto es otra de las cosas que me gusto de JavaFX, en vez de tener muchos tipos de datos que al final nunca utilizamos, aqui tenemos solo 5.

• Boolean
• Integer
• Number
• String
• Duration

Strings

Un tipo string puede ser declarado usando comillas simples o comillas dobles indistintamente ya que no hay diferencias entre estas.

var s1 = ‘Hello’
var s2 = “Hello”

Puedes embeber variables dentro de un string usando llaves “{}”. Por ejemplo:

var nombre=”Perro”

var s=”Hola {nombre}”

Esto producira que la variable “s” sea igual a “Hola Perro”

Integer y Number

Estos son sencillos. Integer representa numeros enteros y Number representa numeros con punto flotante. En este caso se recomienda usar el tipo Number solo cuando es absolutamente necesario.

Boolean

Este tipo de datos representa 1 de 2 valores, o True o False. Ejemplo:

var cansado= True

Duration

El tipo de dato Duration representa una unidad fija de tiempo, por ejemplo.

5ms //representa 5 milisengundos

10s //representa 10 segundos

20m //representa 20 minutos

2h //representa 2 horas

Este tipo de datos lo usaremos cuando veamos animaciones.

Por hoy terminamos, en el proximo post de este tutorial haremos unos cuantos ejemplos para ejecutar en netbeans. Que les parece? Tambien estaba pensando que podiamos hacer mini test, para ver quien los resuelve mas rapido

Instalar NetBenas con el complemento incluido.

Es realmente sencillo, primero vamos a esta pagina, alli seleccionamos NetBeans IDE 6.5.1 for JavaFX 1.2 y luego le damos al boton Download. Al terminar de bajarse abrimos una consola, nos vamos a la carpeta donde se bajo y escribimos

sudo ./netbeans-6_5_1-javafx_sdk-1_2-linux-i586.sh

Obviamente el nombre puede variar con el tiempo a medida que salgan nuevas versiones.

Agregar el plugin de javaFX a NetBeans

1-Seguramente muchos ya tienen netbeans instalado y personalizado y no quieren desinstalarlo solo para instalar JavaFX, obviamente existe una solucion. Esta solucion no es para Linux sino que funciona para cualquier SO.

2-Asegurarse que tienen lo necesario para instalar javaFX, eso lo pueden ver en esta pagina.

3-Inicien su NetBeans

4-En el menu principal elijan Tools->Plugins

5-En la ventana que les aparecera seleccionen la pestaña Settings y activen todos los centros de Updates que tengan disponibles. Elijimos todos porque los otros centros pueden tener algunas de las dependencias que necesitamos.

Click para agrandar

6-Ahora seleccionamos la pestaña de Available Plugins y hacemos click en el boton Reload Catalog para que actualize la lista.

7-Ahora en el campo de busqueda que dice Search escriban “javafx”

8- Marquen para instalar todos los plugins que digan JavaFX que encuentren, en general solo aparecen 3 y despues hagan click en el boton Install

9-Les apareceran unas cuantas ventanas mas en las que solo deberan poner Continue o Next.

10-Despues de que se terminan de bajar e instalar los plugins les pedira reiniciar el NetBeans IDE y listo. Ya tendran instalado JavaFX.

En el proximo post sobre este tema les mostrare como hacer su primer aplicacion. Espero que todos los que no saben programar en ningun lenguaje se animen y empicen con algo. Saludos.