Servicios de desarrollo

Tutorial JavaFx – parte 5

Hola gente, despues de mucho pensarlo me decidi a reinstalar NetBeans 6.5.1 para poder continuar con el tutorial. Luego me di cuenta que podia tener NetBeans 6.5.1 y Netbeans 6.7 instalados a la vez sin problemas

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
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
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!!!!! :evil:

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

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

27
Comenta!

avatar
Juan Carlos

Excelente material.

Yo tampoco nunca e logrado aprender bien sobre los Layout que maneja Java, se me hacen muy engorrosos :P

Estare atento a futuros tutoriales sobre JavaFX

zesar
zesar

hola primero gracias por el tutorial es muy bueno!!
solo que me surgio una duda, me preguntaba como instanciar una clase cualquiera hecha en java,para usarla en la animacion,bueno eso es todo gracias.

Charly
Charly

Excelente aporte, he visto hasta ahora todos los tutoriales, y me han sido de ayuda para tener idea del JavaFx, por allí me conseguí un manual en inglés y espero aprenderlo muy bien, así que muchas gracias por estos Tutos!, te felicito!!

eder
eder

Excelente ¡¡¡¡¡¡

bifer
bifer

Muchas gracias por todos los tutoriales de javaFX. Ala espera de mas :razz:

P@kitoConK
P@kitoConK

que tal, un saludo, te felicito por tus concretos tutoriales, me han ayudado mucho para comenzar a trabajar con javafx

Irene
Irene

Muy buenos los tutoriales… Felicidades… Y de casualidad no piensas hacer uno para conectar con una base de datos? :halo: … Ojala pudieras jeje… Y ya con este son los 10 comentarios que pediste jajaja

Julio
Julio

Hola es fantástico el trabajo que haces :cool: . Tambien esperare la parte de Base de datos :up: . Sería fabuloso que NetBeans incluyera un editor de objetos como cuando creas UI con swing y los enlazas a eventos. :lol:

John
John

Gracias por los tutoriales, pienso incluirlo en un curso
:up:

trackback

[…] tambien para todos aquellos que estaban o estan siguiendo mi tutorial de javafx, que se quedo en la parte 5, pues pronto explicare como conectar una base de datos MySQL con […]

Arien Neldor
Arien Neldor

Felicidades por los tutoriales buscando información de javafx, con tus 5 tutoriales, (sabiendo java) me he enterado a la perfeción de como funciona este lenguaje.

Felicidades y estoy ansioso de leer mas partes.
:up:

mimestim
mimestim

Hola, los tutoriales se salen !!!

Saludos !!!

facundo
facundo

muy buen tutorial gracias x compartir tu tiempo con los demas, me gustaria que agregues algo de animacion, ah una pregunta, se pueden combinar componentes swing con los d javafx? porfavor contestame gracias!!!

facu

Jairo
Jairo

Oye mi Perro

Levo dos dias siguiendo los ejemplos y he entendido bastante de éste interesante y útil tema. Gracias por tu bondad de compartir el resultado de tus esfuerzos y dedicación, esto es comunidad.

De nuevo gracias y felicidades

obelich

Hola como esta oye estan super bien explicados los tutos felicidades oye me preguntaba si seguiras con lo de base de datos hehehe yo uso PostgreSQL y me gustaria hacer por ahi algo que sea interactivo con JavaFX :)

José Williams

Se agradece Buen tutorial…. almenos ya tengo una idea de como usar el JavaFX :p claro ya pase por los 4 primeros post ;)

Turumay
Turumay

Nunca he hecho GUIs con java porque me parce un peñazo, pero esto me parece súmamente fácil, y el tutorial va directamente al grano, lo cual se agradece. Comentabas que el ejemplo de esta parte para los radio has utilizado el método “onMouseClicked” pero puede no dar el resultado esperado, si eres un poco puñetero y pinchas un radio y arrastras y sueltas fuera, el círculo cambia de color pero el radio no se activa. Para hacerlo correctamente, hay que declarar los radios como variables scene: Scene { …. var radioVerde: SwingRadioButton var radioRojo: SwingRadioButton content: [ VBox { …..… Leer mas »

jorge alejandro
jorge alejandro

hola hermano muy bueno el tutorial felicidades :up: ya me aventé los pasados y espero seguirte asta que esto termine :P, también espero poder aportar algo en un futuro ya que tenga experiencia en javafx jeje

IRIE!!

flcarby
flcarby

Has visto esta página del tutorial de Oracle (antes Sun ;-]) ????

http://download.oracle.com/javafx/1.3/tutorials/ui/layout/index.html

Creo que hace lo mismo que buscas.

softmafy
softmafy

Muy buen post, explicación clara y concisa. Gracias