# Month: July 2008

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 {
fill: Color.BLACK
},
Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
]
}
}```

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

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

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 {
fill: Color.BLACK
},
Circle {
centerX: 100, centerY: 100, radius: 50
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:

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.

Teddy brincando (destruindo) um colar de luau.

Ele estÃ¡ naquela fase de morder tudo, inclusive eu.

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

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.

As seen in the Sun Tech Days page, the Sun Tech Days Brazil will happen this September. In a few days we can know exactly the day the event will occurs. Probably we CEJUG will prepare a parallel event and see live the event in SÃ£o Paulo by video stream. :)