Creating a Mac OS-X like Docking Panel in Java

Docking area from Mac OS-X

The docking area from Mac OS-X

Applications relying on the core elements of the Swing library are rather static. To build livelier applications, animation libraries like Timing Framework provide classes for making Java animation and timing-based control easier.

In this post, I provide a Swing component acting like the Mac OS-X Dock (see the image to the right) to build interactive menus and more.

Resources:

This library requires Java 6 and the Timing Framework 4.1 library.

Usage example:

The following code shows how to use the library to create a Dock containing 5 buttons.
This code can also be found in the source code of the library

The “Dock Effect” specific code can be found from line 80 to line 100.

[crayon lang=”java” url=”http://www.yoannkubera.net/wp-content/uploads/2012/10/JButtonBasedExample.java” /]

Important notice

The DockEffectPanel relies on the Timing Framework library. This library has to be programmatically initialized using specific commands. An example can be found in the lines 28, 29 and 30.

Diving into the code

The component displaying the “Dock area” is an instance of the aeym.swingLibs.dockEffect.DockEffectPanel abstract class. This component extends the JPanel and can be directly added to a swing application.

The aeym.swingLibs.dockEffect.DockEffectPanel abstract class is defined by three elements:

  • a parameter type, defining the nature of the components in the Dock. In this example, the class is JButton.
  • a protected JButton createComponent(int index) method, defining how the components in the dock are created. The index corresponds to the position of the component in the dock. 0 corresponds to the leftmost/topmost element. Note that the dimensions of this component will automatically be set in the DockEffectPanel.
  • a set of constructor parameters:

    • The regular dimensions of the components
    • The dimensions when components are next to the hovered item
    • The dimensions when a component is hovered
    • The layout policy used to draw components. It has to be a value from the aeym.swingLibs.dockEffect.DockEffectPanel.DockEffectLayout enumeration:

      • HORIZONTAL_WITH_TOP_EXTENSION to draw components from the left to the right and to align components to the bottom.
      • HORIZONTAL_WITH_CENTERED_ITEMS to draw components from the left to the right and to vertically center the components
      • HORIZONTAL_WITH_BOTTOM_EXTENSION to draw components from the left to the right and to align components to the top
      • VERTICAL_WITH_LEFT_EXTENSION to draw components from the top to the bottom and to align components to the right
      • VERTICAL_WITH_CENTERED_ITEMS to draw components from the top to the bottom and to align components to the center
      • VERTICAL_WITH_RIGHT_EXTENSION to draw components from the top to the bottom and to center the components
    • The gap in pixels between the components of the dock area
    • The number of components in the dock area
Categories: animation, GUI, java, library, swing | Tags: | 5 Comments