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

 

 

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.

handleStateChangeNotification(Preloader.StateChangeNotification);

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

• BEFORE_INIT
• BEFORE_LOAD
• BEFORE_START

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.

 

handleProgressNotification(Preloader.ProgressNotification);

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.

 FancyPreloader_Preloader.java

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
GUI.java

 
 

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.

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