Servicios de desarrollo

Tutorial JavaFX – parte 3

A la hora de hacer interfaces graficas JavaFX y NetBeans nos brindas varias facilidades, y entre ellas estan las formas basicas predefinidas que pueden ser agregadas al codigo con simplemente arrastrar y soltar.

Formas Basicas de JavaFX
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:

screenshot_004

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:

screenshot_005

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:

screenshot_006

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
Sombra JavaFX

Otros efectos

Supongamos que tenemos la siguiente figura:

Imagen Original
Imagen Original

Estos son algunos efectos que podremos usar con esa imagen:

effect: SepiaTone { level: 0.5 }

Sepia
Sepia

effect: Glow { level: 0.7 }

Glow
Glow

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

Blur
Blur

effect: Reflection {
fraction: 0.7 }

Reflection
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

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
mimestim
mimestim

Bueno que sepas que el tutorial SE SALE !!!!!!!!!!!!! , lo dicho había visto algunas cosillas por ahí sobre JavaFX pero como lo que ví no me gusto mucho lo dejé aparacado, ahora con este tuto estoy volviendo a coger interes la verdad.

Saludos.

skandelabro
skandelabro

Hoal hola la verdad es que estamuy bueno el tutorial

pero al pasar el codigo a netbeans
no funa y me tira errores

nose si me puedes ayudar :)

saludos

Izack
Izack

Hola!

Muy buena web!
Esta chila!

Oye, me aparecieron errores en el netbeans, al colocar el ShapeSubtract,
desde ahi me marcan los errores, ya tengo los imports, he intentado arreglar el codigo pero no se deja, no se quitan. Tambien tengo instalado los plugins de Javafx, pero aun asi no funciona, solo lo hizo para el ejemplo anterior, cuando creamos el rentagulo y el circulo.

Me puedes ayudar?
De antemano Gracias!

Izack

jose galvez
jose galvez

me pregunto si esto puede ser aplicado a open office.
esto + una nueva interfaz puede ponerlo contra office.

Izack
Izack

Oh, gracias amigo!!!

Ya se arreglo, eran los imports, jeje. Se ve q soy novato en esto, jeje

Gracias!
Seguire con el Tutorial!

Esta muy chilo!

Cualquier duda te comento, :)

Elecciones

Excelente blog y muy buen post, realmente llegué a tú blog por casualidad, pero he leído un par de artículos y me han parecido muy interesantes, te seguire leyendo frecuentemente.

Un saludo :up: .

José
José

:( Hola estimado amigo, me siento muy contento por haber encontrado este tutorial por el que te agradezco mucho. También decir que esta bueno y muy didactico. :help: estaba siguiendo la parte de efectos que no me da resultados, el tultiltext me sale lo siguiente: incompatibles types found : javafx.scene.effect.Shadow required: javafx.scene.Node[] Ocurre cuando uso los efectos en este caso Shadow, también para todos los que usas en este tema. tambien me he fijado en las librerias (Include) y he seguido todo al pie de la letra. Estaré muy agradecido por la ayuda. atentamente: Un seguidor que le esta dando… Leer mas »

Edel_310
Edel_310

El efecto se lo aplicas a un Nodo sino no funciona un texto un 
Button {                text: “Ejemplo”                effect:Shadow {                    color: Color.BLACK                    radius: 15                }                action: function() {
                }            }

Edel_310
Edel_310

como giro un circulo sobre su propio eje 

Toache_13
Toache_13

AMIGO COMO PUEDO VER LOS BASIC SHAPES EN LA PALETA? ME MUESTRA LA PALETA PERO VACIA, UNO NETBEANS 7.01 CON EL PLUGIN DE JAVAFX 2.0