Desktop Dock effects in Javafx

Code Walkthrough DockEffect

I would not start of at the very basic level I would expect you to know, to at least create stages and scenes and to implement scenes within a stage.

For obtaining the below effect you could use the ScaleTransition and TranslateTransition packages. The upward and downward movement of the dock panel is controlled by the translate transition package. The effects of dock icons are obtained by the scale transitions which will scale the images quickly based on the scale transition time defined in milliseconds.

When the mouse pointer enters the image in the panel it is captured and then Scale Transition is called to provide the dock bounce effect as soon as the mouse exists the image the transition is stopped and the image scaled back to its original size.

Similarly when the mouse pointer enters the dock panel then it is captured and the dock panel is translated downward across its Y axis to provide the slow drop down effect. Also when the mouse pointer exists the Dock panel it is translated back to its original position.

Below is a sample for dock effect that you basically experience in Ubuntu and Windows. If you want the code for the same, I can post that to you.

Press on the Launch button to launch the application using webstart.  

For windows users pressing on the Launch button would start the App in java web start.

However Linux users may face the problem of just jnlp the file being downloaded onto the system. However we can still get the application started by opening the terminal and setting the JDK home to 1.6 and then start the application by using

export JAVA_HOME=/usr/jdk1.6.0_18 and then set the PATH variable export export PATH=/usr/jdk1.6.0_18/bin:$PATH

After doing the above just execute:-   javaws DockEffect.jnlp


Filed under Javafx Code Demos

11 responses to “Desktop Dock effects in Javafx

  1. John Erick Okatch

    I am a beginner on javafx but really impressed with desktop dock effects please can you send me the code?

  2. John Erick Okatch

    Sorry sir! Do you have any idea on where to get javafx.ui package? It is not available but I have seen guys using it. I am currently using netbean 6.9.1.

  3. John Erick Okatch

    Thank you very much and a happy new year. I wanted to create my own own window titlebar with all the functionality provided by the default title bar i.e. close, minimize,restore and movable but I found this though they use javafx.ui.* package.
    Thank you for your help. I am really determine to be a javafx guru in the year 2011, that is my resolution.
    Happy new year.
    John Erick

  4. Erdem

    Thank you, it’s very good topic. I am searching to find an example just like this. When i run the jnlp file, the icons (internet, etc.) are shown on the rectangle panel, but i tried to realize the example on netbeans. the icons, text or else cannot be added on the rectangle. Could you help me about the key point for adding items on the rectangle panel?
    I am looking forward to your reply

    • Howdy,

      Can you please let me know how you want the dock to look like? Here the rectangular panel that you see is actually an image over which we superimose the icons. Therefore we actually give an illusion to the user that it is a docking panel having icons on it. you can see variable hbox:HBox in the code below, It actually prepares a horizontal box for all the images to be put in place.

      You could try browsing through the code here

      If possible you could probably post a screenshot of what you except if the above answer is not satisfactory


      • Erdem

        even if i defined in hbox, the items cannot be shown on the scene. But there is a weird situation which i don’t understand why it does. If i define first image and then dockpanel respectively in the hbox, both of them is shown on the screen, but if i define first dockpanel and then add something such as image or swingtable, instead of dockpanel nothing can show on the screen.
        How could i resolve this problem or is this possible to set dockpanel to the backmost?

      • Hello,

        Can you please post me the code? I can look at it and suggest the change needed for this?
        Have tried to reduce the opacity of the Dockpanel? “opacity: .4;” If while superimposing the images if the dockpanel is covering up the image you have included you may have the situation where only dockpanel is visible since the image is under the dockpanel image.

  5. Erdem

    thank you for the help , i resolved the problem. I added all the things ( background, icons and others) into a panel object.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s