Tutorial : How to Create a Border Glow Effect in JavaFX

At IDRSolutions, our PDF Viewer (part of our JPedal Library) currently uses Java Swing to create the PDF Viewer interface. However, we are now also in the process of developing a JavaFX PDF Viewer, this involves mimicking our Swing PDF Viewer and producing the same Graphical Interface but with JavaFX 2.2 instead.

In this tutorial I will be demonstrating how to produce a glowing border effect which you can apply to any JavaFX Node, see the desired effect bellow.

Swing Border Glow Effect
glowingSwing

To achieve the glowing border effect in JavaFX we will be using the JavaFX class DropShadow, the key methods of the DropShadow class are setOffsetX and setOffsetY, manipulating these methods by a positive value will move the shadow right/up, manipulating them by a negative value will move them left/down. To create a uniform glow around the Node we want to use a value of 0f for both X and Y.

DropShadow borderGlow = new DropShadow();
borderGlow.setColor(Color.RED);
borderGlow.setOffsetX(0f);
borderGlow.setOffsetY(0f);

To change the width / height of the glow, you can use the following two DropShadow class methods setWidth and setHeight. For example, manipulating the setHeight from 170 to 70 you can have the following two glow thicknesses.

setHeight(170);

glow170

setHeight(70);

85

To apply our DropShadow effect (borderGlow) we call the setEffect method on the node we wish to apply the borderGlow effect to. We do this like so :

node.setEffect(Effect);

So, to put all this together and create a border glow effect on our JavaFX Node, it’s as simple as writing the following code :

int depth = 70;  //Setting the uniform variable for the glow width and height
 
DropShadow borderGlow= new DropShadow();
borderGlow.setOffsetY(0f);
borderGlow.setOffsetX(0f);
borderGlow.setColor(Color.RED);
borderGlow.setWidth(depth);
borderGlow.setHeight(depth);
 
node.setEffect(borderGlow);  //Apply the borderGlow effect to the JavaFX node

Alas! we have the desired effect now written purely in JavaFX instead of Swing!  :

JavaFX Border Glow Effect
fxGlow

We also have a JavaFX PDF Viewer plugin for NetBeans which you can grab here.
For more information on Effects in JavaFX, please see here.

Thank you for reading! If you have a better way to add glowing borders, would like to share anything or have any questions then please comment bellow!

This post is part of our “JavaFX article Index” series. In these articles, we aim to explore the world of Java and Javafx. Have a look through!

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Related Posts:

The following two tabs change content below.
Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled 'Lessons Learned from Using GlassFish with NetBeans". Nathan also enjoys writing technical blog-articles.
Nathan

About Nathan Howard

Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled ‘Lessons Learned from Using GlassFish with NetBeans”. Nathan also enjoys writing technical blog-articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>