Skip to content

Month: July 2008

JavaFX, creating a sphere with shadow

This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients.

In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels of radius and color red. The idea is make this circle appears like a sphere and make the ellipse look like a shadow.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;

Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                 centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                 fill: Color.BLACK
            },
            Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
        ]
    }
}

Now we will just add two thing, a effect and a radial gradient.

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

effect: GaussianBlur{ radius: 20 }

This creates a gaussian blur of radius 20. The first ellipse was like

and now with the effect becomes

Now we create a radial gradient for the circle appears like a sphere. We do that using the RadialGradient class at

RadialGradient {
   centerX: 75, centerY: 75, radius: 50, proportional: false
   stops: [
      Stop {offset: 0.0 color: Color.WHITE},
      Stop {offset: 0.3 color: Color.RED},
      Stop {offset: 1.0 color: Color.DARKRED},
   ]
}

First lets look at the gradient. It starts with a white color, going to red during the first 30% of the way. The remaining of the way is the color red going to a dark red. It creates a gradient like this one:

But it is a radial gradient, with center in (75,75) and radius 50. So this radial gradient looks like this:

As we place this radial gradient in our circle, it was like this:

And now is like this:

Now the complete code. I guess it’s simple and also concise.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.geometry.*;

Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                fill: Color.BLACK
                effect: GaussianBlur{ radius: 20 }
            },
            Circle {
                centerX: 100, centerY: 100, radius: 50
                fill: RadialGradient {
                    centerX: 75, centerY: 75, radius: 50, proportional: false
                    stops: [
                        Stop {offset: 0.0 color: Color.WHITE},
                        Stop {offset: 0.3 color: Color.RED},
                        Stop {offset: 1.0 color: Color.DARKRED},
                    ]
                }
            }
        ]
    }
}

Here is the final screenshot:

JavaFX, handling events with overlapping elements

Here is a problem I faced those days while programming with JavaFX.
When you perform a click in a JavaFX area, mouse events are called to all nodes through that position. You can see this behavior in this video.

Example 1.

Here is the code.

import javafx.application.*;
import javafx.scene.geometry.*;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;

Frame {
    width: 200
    height: 200
    visible: true
    stage: Stage {
        content: [
            Rectangle {
                var color1 = Color.BLUE;
                x: 10, y: 10, width: 140, height: 90, fill: bind color1
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color1==Color.BLUE){
                        color1 = Color.GREEN;
                    } else {
                        color1 = Color.BLUE
                    }
                }
            },
            Circle {
                var color2 = Color.RED
                centerX: 100, centerY: 100, radius: 40, fill: bind color2
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color2==Color.YELLOW){
                        color2 = Color.RED;
                    } else {
                        color2 = Color.YELLOW
                    }
                }
            }
        ]
    }
}

This is the default behavior. All node are called with a mouse event. Is a expected and robust behavior but sometimes we just don’t want that. We want events called to just one node or a set of nodes.

Example 2.

Is exactly the same code but with blocksMouse: true in the circle node. When blocksMouse is true the mouse event will not be called to others node behind it.

package overlapping;

import javafx.application.*;
import javafx.scene.geometry.*;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;

Frame {
    width: 200
    height: 200
    visible: true
    stage: Stage {
        content: [
            Rectangle {
                var color1 = Color.BLUE;
                x: 10, y: 10, width: 140, height: 90, fill: bind color1
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color1==Color.BLUE){
                        color1 = Color.GREEN;
                    } else {
                        color1 = Color.BLUE
                    }
                }
            },
            Circle {
                var color2 = Color.RED
                centerX: 100, centerY: 100, radius: 40, fill: bind color2
                blocksMouse: true
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color2==Color.YELLOW){
                        color2 = Color.RED;
                    } else {
                        color2 = Color.YELLOW
                    }
                }
            }
        ]
    }
}

Thanks guys on the OpenJDK user mail list and at OpenJFX Forum, specially this thread.

Script to Installing JavaFX Compiler

Right in this moment you can choose between three options to develop JavaFX:

I did this little script to download the last version of JavaFX continuos build and install it for you.

#!/bin/sh
envfile=$HOME/.bash_profile

#download and unpatch the last build of JavaFx
mkdir jfx
cd jfx
wget http://openjfx.java.sun.com/hudson/job/openjfx-compiler/lastBuild/artifact/openjfx-compiler/dist//*zip*/dist.zip
unzip dist.zip
rm dist.zip

#set files at bin folder as executable
chmod +x dist/bin/*

#add those executables to the path
echo "PATH=\$PATH:`pwd`/dist/bin" >> $envfile

Save this script as install_jfx.sh and execute it. Probably you want to execute it at you home directory. If you want to install JavaFX to root change envfile for /root/.bash_profile, if you want to install to all users change for /etc/profile. I tested this script successfully on my Ubuntu 8.04.

After that open a new terminal and try to see if javafx, javafxc and javafxdoc are available. You can test your enviroment with this simple program.

import javafx.ui.*;
import java.lang.*;

Frame {
  visible: true
  content: FlowPanel {
  content: Button {
      var n = 0
      text: bind Integer.toString(n)
      action: function() {
        n++;
      }
    }
  }
}

Save it as Counter.fx, compile with javafxc Counter.fx and so execute it with javafx Counter.fx.

To know more, take a look into the preliminary JavaFX API or in the article Using JavaFX GUI Toolkit.

Café Com Tapioca Jazoon


Fotografia de fundo do poster é de P.B. Rage, sob licença Creative Commons Attribution-Share Alike 2.0 Generic.

Esse mês teremos um Café Com Tapioca diferente. Para começar não será realizado em uma universidade e sim em uma barraca de praia.
Amaury Brasil, André Paes, Herbert de Aquino, Rafael Tabosa, Rafael Carneiro e René Araújo vão contar as experiências da caravana do CEJUG que foi para a europa participar do Jazoon. Ou seja, vamos ter palestras técnicas também mas vai ser um encontro mais informal, algo como um luau. Inclusive com dois engradados de cerveja de graça para o jug, mas o resto e por conta de cada um. 😉

Mais informações do site do evento.

Poster em SVG: cct_jazoon.svg

Nerdproud versus Eu Podia Tá Matando, edição 2008

Eu Podia Tá Matando versus Nerdproud

Como já acontece tradicionalmente na Taça Pet, os dois piores times do curso de Computação UFC se enfrentam em uma partida memorável. Esse ano nosso time, Eu Podia tá Matando, perdeu primeiro de 2 a 0 para o Nerdproud e depois perdeu de 7 a 0 para o SECO. Pelo menos esse ano eu fiz um gol.


Vídeo original em melhor resolução gol_silveira.mov.

Na nossa avaliação foi um resultado muito bom esse ano. Não tivemos nenhuma baixa e ninguém foi teve que ir pro hospital. Além disso tivemos a maior platéia de todos os tempos, deviam haver umas 50 pessoas assistindo o jogo. Definitivamente um espetáculo.

Só faltou mesmo para sermos os campeões:

  • Um melhor preparo físico.
  • Mais dois jogadores reservas.
  • Treinarmos algumas partidas antes do jogo oficial.
  • Um juiz imparcial, ou pelo menos parcial para nosso lado.
  • Não termos nosso jogo marcado para depois do almoço.
  • Um uniforme oficial.
  • Um melhor ataque.
  • Uma melhor defesa.
  • Um melhor meio de campo.
  • Mais domínio de bola.
  • Mais pontaria para o gol.

Tirando isso, estamos muito bem.

Até ano que vêm tem mais.

Aniversário Casa Brasil Vila União

Programação I Aniversário Casa Brasil – Vila União
De 10/07 – 11/07
Horários Quinta-feira Quinta-feira Sexta-feira Sexta-feira
09:00 – 10:00 Abertura: – Apresentação do Projeto Casa Brasil. – Cordel Apresentando Casa Brasil – Vila União (Crianças da Sala de Leitura) Local: Auditório Oficina: Grafite (CB-Granja Portugal) Facilitadores: Cristiano (Selo) Local: Auditório
10:00 – 11:30 Oficina: Informática Educativa Facilitador: Wellington Leão Local: Telecentro Oficina: Gênero e Economia solidária. Facilitadora: Meiry Coelho (CB-Meniná Meninó Local: Auditório Oficina: “Fazendo o Som” Facilitador: Abraão de Alcântara (CB-Meniná Meninó) Local: Telecentro
11:30 – 13:30 ALMOÇO ALMOÇO ALMOÇO ALMOÇO
13:30 – 15:00 Oficina: Criação de Blog Facilitador: Alyne Castro Local: Telecentro Oficina: Bijouteria Metareciclada Facilitadoras: Meiry Coelho (CB-Meniná-Meninó), Edilândia e Antonilce Local: Lab. De MetaReciclagem Debate: Lixo tecnológico e sustentabilidade ambiental. Facilitadores: Erivelton Queiróz e Everton Kristan (CB-Caucaia) Local: Auditório Oficina: Expressão Teatral Facilitadora: Mayara (CB-Caucaia) Local: Sala de Leitura
15:00 – 16:30 Oficina: Fotografia Digital Facilitadora: Glaucia Barbosa Local: Auditório Oficina: Criação Quadrinhos. Facilitadora: Erika Barros Local: Sala de Leitura Atividades Livres!!
16:30 – 18:00 Teatro: Deu a louca nos contos de fada Grupo: Bairro Antônio Bezerra Encerramento: Apresentação do Bumba–meu-boi.