Fancy Preloader Part 1

Hi, friends today I’ve got something graphics and animation gift for you.
I know that JavaFX 2 has really Rich Interface in the Application that’s why many enterprises who are using the Swing as their core GUI are intending to divert to JavaFX 2 which is now becoming more stable and clear API. I just love doing javafx cuz it makes me fun and really interesting. The Application we develop in javafx can be huge so we need to load them during startup of the Application. JavaFX has concept of customizing the Preloader which we actually see those progress bar while we are loading any javafx application. Most of the enterprises don’t want to add the default they want something unique and some more eye caching loading so that user won’t feel bore while the application is loading. This is somehow the way of making the user’s eye hypnotized to application 🙂 .

So I’m today talking about same preloader which is actually customized animated graphics. Before starting the preloader we need to know about the flow of the preloader in Application Startup Life Cycle.

Basic Preloader Concept


Preloader Startup


Now up there you can see how the Preloader are initialized during the startup of the application. The full tutorial of the Preloader is available in Preloaders Tutorial And the full API of Preloader
The above picture describes the step wise lifecycle as below:

  1. Loading and Initializing Preloader

    Here the loading of the Preloader is done. It loads the jar which contains the preloader class.

  2. Preloader Started

    In this step the preloader will be loaded completely and the Preloader Class’s start() function is invoked by the JavaFX Engine.

  3. Loading Application Resources

    In this part the main application jar will be downloading. And the progress notification are send to the Preloader class. During this phase the notifyPreloader(PreloaderNotification) is invoked by the Runtime Engine and sends the Notification to the Preloader class continously.

  4. Application Initialization

    Now at this step the application jar will be fully loaded in client’s computer. And the main Application’s init() is being called. Before starting this init(). It sends the BEFORE_INIT state to the Preloader class.

  5. Application Started

    Finally the main Application’s start() function is invoked by the Java engine. But before starting that function it sends the notification of the BEFORE_START to the Preloader class. In this phase we actually hide the stages or remove the preloader’s stage.

Ok now Let’s hook over the Preloader Class function.


This function is the main function which helps to know the state of the Preloader. There currently three states of the Preloader.


Now we are currently only dealing with the BEFORE_START which actually means that the start() function of the main Application is going to be loaded.



Now this is another important function which is helpful for showing the Progress of the Application. Most of the application use this function to show how much the data is loaded. It shows the progress from 0.0(min) to 1.0(max) .


Implementation of Preloader

Software Used: Netbeans 7.2 (Beta)

Firstly to make our custom Preloader we will need to make new Project from Netbeans.
Click on New Project> JavaFX >JavaFX Application.
Name your project name . (I’ve named FancyPreloader)
Now check on the “Create Custom Preloader Checkbox

You will see now two projects being created by Netbeans.

  • FancyPreloader
  • FancyPreloader-Preloader

All we have to do is inside FancyPreloader-Preloader class of FancyPreloader-Preloader project. All the implementation of the Preloader is done here.


Let’s move to the coding part.

In above code I’ve used the class GUI which contains the GUI building class of the Preloader. The details of the GUI class will be included in next post. Now here we have used two function they are :

In above function we have made the current FancyPreloader_Preloader’s Stage to be hidden so that the real Application stage get’s visible to the user.

In above function we have overridden one more function; this is the function which helps to show the Progress of the preloader.

If you want to know what the GUI class actually does then it’s given below


In coming next blog post we ‘ll be learning about how to make the preloader looks more fancy using Animation and SVG stuffs.All the details of the GUI class will be included in next blog post.

Screenshot of Preloader

Keep in touch .Happy coding and have a 🙂 good day.

11 thoughts on “Fancy Preloader Part 1”

  1. Could you, by any chance, elaborate on how to use this kind oh custom preloader with Web Start (JNLP), in some of your future posts?

  2. Pingback: Java desktop links of the week, July 30 | Jonathan Giles

  3. Pingback: JavaFX links of the week, July 30 | JavaFX News, Demos and Insight // FX Experience

  4. Pingback: Fancy Preloader Part 2 « Java and FX

  5. Hi, I would like to ask about Java Fx preloader. If I want to try some preloader, I must have some application behind to load itself (and which app is good for testing, if its needed), or it is possible run the preloader indenpendently, just to see, how it looks like, or how its possible to load it etc. Thx very much.

    P.S. Sorry for bad eng.

  6. Hi ali,
    For better feel of preloader stuffs place some heavy files like video, or big files inside the javafx project and attach the preloader with them. Even if you are in local computer execution you will find the preloader clearly by this approach.


  7. Currenlty, i am developeing Desktop Application with JavaFx and i need to convert into .exe file. i am dacing problem in Converting my appication into JAr file …………..
    Please Help me

Leave a Reply