lunes, 17 de mayo de 2010

Tutorial javaFX: Pintando formas simples

Debido a la escasez de material sobre javafx y aun siendo un poco nuevo con el,
voy a intentar hacer un tutorial de javafx, yo usaré NetBeans como IDE, también pensé en eclipse pero me daba muchos problemas a la hora de dejarlo todo listo para usar javafx podeis descargar netbeans para usarlo con javafx de aquí lo suyo para ahorrar en espacio es coger la que incluye solo javafx, pero eso ya al gusto de cada uno.

Bien, una vez tenemos instalado netbeans "Instalarlo es la tipica pantalla siguiente siguiente, sin mas" tendremos todo lo necesario para empezar, pulsamos sobre File/New Proyect y ya tendremos este codigo que nos genera por defecto:

/*
* Main.fx
*
* Created on 17-may-2010, 13:04:09
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

/**
* @author Paco
*/

//Stage es el "main" de la aplicación
Stage {
//Esto es simple, es el titulo de la aplicación, es el texto que aparece
//en la parte superior de la ventanita
title: "Application title"
//La scene que incluimos dentro de la Stage es la ventana de nuestro programa
//y dentro es donde creamos todos los objetos y lo que queramos mostrar
scene: Scene {
//variables para definir el ancho y alto de nuestra ventana
width: 250
height: 80

//En el content es donde tenemos todos los elementos graficos que
//vamos a mostrar
content: [
//Con text insertamos un texto dentro de nuestro content
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}


Con este código se genera una ventana simple como esta:




Las lineas que tenemos aqui son realmente simples y las he dejado en ese mismo trozo de codigo comentadas, aunque ahora tocaremos un poquito el codigo.

Vamos a insertar en nuestra aplicación algunas formas, para eso nos vamos a la parte derecha a la paleta y pulsamos sobre basic shapes, vereis que tenemos varias formas como pueden ser lineas o circulos, podemos coger la que queramos y arrastrarla sobre el codigo, con lo que ya se genera un codigo genérico que podemos modificar para darle la forma que queramos, en mi caso he cogido el circulo y lo he arrastrado antes del text.

Ya con esto podemos poner varias formas sobre nuestra ventana y modificar tanto la ventana como las demas formas de tamaño y color


/*
* Main.fx
*
* Created on 17-may-2010, 13:04:09
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

/**
* @author Paco
*/

//Stage es el "main" de la aplicación
Stage {
//Esto es simple, es el titulo de la aplicación, es el texto que aparece
//en la parte superior de la ventanita
title: "Application title"
//La scene que incluimos dentro de la Stage es la ventana de nuestro programa
//y dentro es donde creamos todos los objetos y lo que queramos mostrar
scene: Scene {
//variables para definir el ancho y alto de nuestra ventana
width: 250
height: 250

//En el content es donde tenemos todos los elementos graficos que
//vamos a mostrar
content: [

//Con circle pintamos nuestro circulo
Circle {
centerX: 100, centerY: 100 //Posición central en el eje X e Y de la ventana
radius: 40 //Tamaño del radio
fill: Color.RED //Color del relleno
}


//Con text insertamos un texto dentro de nuestro content
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}



No hay comentarios: