# 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 { 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:

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   #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.

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