Tutorials : JavaFX: Learning by Example :

Class #6: The "Small Circles"


Figure 6. Small circles.

The two "small circles" are simply two images animated using the opacity attribute, the bind operator, and the onMouseEntered/onMouseExited events, exactly as you saw for the first graphical component. This component is named SmallCircles.fx and is shown in Listing 6.

Class #7: The "Big Circles"


Figure 7. Big circles.

The big circles do not simulate the original effect from Mariah's web page in this example either. Instead, we're creating a new effect by playing with two JavaFX discs displayed over the images. To draw a circle in JavaFX, use the Circle class and its attributes (cx, cy, radius, fill, stroke, strokeWidth, etc.). When the mouse hovers over the disc's surface, the disc is redrawn by decreasing the radius progressively. Of course, this is done by applying the bind operator to the radius attribute. When the mouse exits from the disc surface, the radius increases so the effect is reversed.

The last disc is special, because it wraps a music player. This is achieved by mixing Java code with JavaFX code. The JavaFX code is used to design the play/stop buttons and Java is used to play the song. This examples also uses the JMF (Java Media Framework), supposing that the songs will be in .mp3 format. In Listing 7 illustrates the way that you can mix Java code with JavaFX code to accomplish complex tasks. The name of this component is BigCircles.fx (Listing 7).

Class# 8: The Butterflies

The last graphical component contains the small butterflies near the "big circles." When the mouse hovers over a butterfly, you will see the butterfly performs a nice 360 degree rotation effect. The name of this component is Fly.fx and it's shown in Listing 8.

Testing the Application

To test the application, first download the .zip file. Then, simply unzip the archive and check to see that the java.exe path is correctly set in <INSTALL>/mariahcarey/bin/javafx.bat. Next, double-click on <INSTALL>/mariahcarey/src/mariahcarey/mariahcarey.bat. The application should run smoothly.

JavaFX Rocks!

Compare what you have done with just a few lines of JavaFX code with trying to do the same thing with Java! Of course, this article has demonstrated just a small piece of JavaFX's capabilities, but it should be enough to make you love this new framework from Sun.

Related Resources

Please visit these links for more technical specifications about JavaFX:

Home / Articles / JavaFX: Learning by Example / 1 / 2 / 3 / 4 /

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.

Elsewhere on internet.com:

WebDeveloper Java
Lots of Java information on webdeveloper.com

WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.

ScriptSearch Java
Hundreds of free Java code files to download.

jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.