Last Updated:

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