Tutorial de JavaFX – parte 1

Estuve buscando horas por google por un buen tutorial o manual de JavaFX pero no encontre ni uno solo, pero en serio no encontre ni uno!

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 :P) 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

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.

13
Comenta!

avatar
trackback

[…] 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 […]

Jacobo Cantillo
Jacobo Cantillo

Ante la carencia de tutoriales de JavaFx, este es una «luz en la oscuridad». Gracias por el aporte.

Francisco
Francisco

por fa envienme el link de de la parte 6 para la configuracion de javafx con bases de datos mySQl por por favor

trackback

[…] los que se pregunten de donde saqué esto de JavaFX, debo decirles que ya hace algún tiempo leí el tutorial de Paraíso Linux y me gustó lo que ví, luego de ahí, hace unos días empecé a aprender de forma […]

Morenokuan
Morenokuan

Gracias hermano…gracias a ti ahora se que es javafx. Lo estoy implementando.
Gracias por el empujonsito

javhs
javhs

tengo una pregunta,lo que sale al principio al iniciar el proyecto se borra o se deja?

trackback

[…] los que se pregunten de donde saqué esto de JavaFX, debo decirles que ya hace algún tiempo leí el tutorial de Paraíso Linux y me gustó lo que ví, luego de ahí, hace unos días empecé a aprender de forma […]

Sergio Ortega
Sergio Ortega

Muuuchas gracias perro por el aporte, este tuto es único :D

Marlon Gabriel

 Hola, muy buen post enserio, mis compañeros estamos empezando a aprender sobre javaFX ii tenemos muy en cuenta este peq tutorial, espero alguna dudda o sugerencia podamos contar con vos. Muchas Gracias

Luis Alberto
Luis Alberto

esta muy chevere el tutorial y muy bien explicado… se te agradece… a ver si aprendo un poco

trackback

[…] 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 […]