Tutorials : JavaFX: Learning by Example :

Class #3: Application's Up Menu

Figure 3. The application's up menu.

Now, it's time to take care of the small pieces of the puzzle, starting with the up menu. This menu looks like a typical JavaScript menu, implemented with an image map technique. I've tried to implement the same technique with JavaFX, by using two pictures for every item of the menu and the onMouseEntered/onMouseExited events. To change the cursor into a hand when it hovers on an item, use the cursor attribute with the HAND value. This new component is named UpMenu.fx, shown in Listing 3.

Class #4: The Application's Down Menu

Figure 4. The application's down menu.

The down menu can be simulated in the same manner as the up menu, but for variety, here it's been implemented by using the opacity technique. When the mouse hovers on an item, the pictures remain the same, but its opacity becomes smaller. This component is named DownMenu.fx, shown in Listing 4.

Class #5: Transparent Rectangles

Figure 5. The transparent rectangles.

First of all, notice that the JavaFX application has split the original transparent rectangle from the web page into two rectangles with different degrees of opacity. To display the rectangles, you use the JavaFX Rect class and its attributes (x, y, height, width, arcHeight, arcWidth, fill, stroke, strokeWidth). In addition, the second rectangle is displayed by "rolling" it, like a carpet. This effect was obtained by using the bind operator for the height attribute.

The text was displayed by using the JavaFX Text class and its attributes (x, y, content, fill, font, etc.). To create a nice gradient effect over the text, use the LinearGradient class. For different effects, you can also use RadialGradient or Pattern.

Finally, to simulate the link effect for the text inside the rectangles, use the JavaFX Line class, the bind operator for the strokeWidth attribute, and the onMouseEntered/onMouseExited events. You can obtain the same link effect by using the JavaFX Label class, which supports HTML and CSS as in a web application.

To display the flowers above and below the rectangles, use the ImageView class exactly as you saw earlier. No trick here!

The new component is named itemsRect.fx and shown in Listing 5.

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.