Getting Started

:: Install Java Docking ::

  1. Install the Java JDK.
    Make sure you are using a recent version of the Java JDK (1.4 or later). With Java 6.0 you can use all the available features. Otherwise you can download it from Java Downloads

  2. Download Sanaware Java Docking.
    Download the Java Docking Library.

  3. Unzip the Java Docking package.
    Unzip the Java Docking package. You will find the following files:



:: Build a simple application ::

You can find the code of this example in FirstExample.java.

  1. Add javadocking.jar as library to your project.


  2. Create a new class FirstExample.java that extends javax.swing.JPanel and add 2 java.swing.JSplitPane objects to it.
    public class FirstExample extends JPanel
    {
    
    	// Constructor.
    
    	public FirstExample(JFrame frame)
    	{
    		super(new BorderLayout());
    		
    		// Create the split panes.
    		JSplitPane leftSplitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT);
    		leftSplitPane.setDividerLocation(250);
    		JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT);
    		splitPane.setDividerLocation(400);
    		splitPane.setLeftComponent(leftSplitPane);
    		
    		// Add the split pane to the panel.
    		add(splitPane, BorderLayout.CENTER);
    	}
    
    }
    		
  3. Show the panel in a javax.swing.JFrame.
    	public static final int FRAME_WIDTH = 600;
    	public static final int FRAME_HEIGHT = 450;
    
    	public static void createAndShowGUI()
    	{
    		
    		// Create the frame.
    		JFrame frame = new JFrame("First Example");
    
    		// Create the panel and add it to the frame.
    		FirstExample panel = new FirstExample(frame);
    		frame.getContentPane().add(panel);
    		
    		// Set the frame properties and show it.
    		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    		Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
    		frame.setLocation((screenSize.width - FRAME_WIDTH) / 2, (screenSize.height - FRAME_HEIGHT) / 2);
    		frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
    		frame.setVisible(true);
    		
    	}
    
    	public static void main(String args[]) 
    	{
            Runnable doCreateAndShowGUI = new Runnable() 
            {
                public void run() 
                {
                    createAndShowGUI();
                }
            };
            SwingUtilities.invokeLater(doCreateAndShowGUI);
        }
    		
  4. Run the application.

    You wil see a frame with 2 empty split panes.
    Now the content has to be added with dockables and docks.

  5. Create a private class TextPanel for the content of the dockables.
    	private class TextPanel extends JPanel
    	{
    		private JLabel label; 
    		
    		public TextPanel(String text)
    		{
    			super(new FlowLayout());
    			
    			// The panel.
    			setMinimumSize(new Dimension(80,80));
    			setPreferredSize(new Dimension(150,150));
    			setBackground(Color.white);
    			setBorder(BorderFactory.createLineBorder(Color.lightGray));
    			
    			// The label.
    			label = new JLabel(text);
    			label.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
    			add(label);
    		}
    	}
    		
  6. Create the content panels and put them in dockables.
    		// Create the content components.
    		TextPanel textPanel1 = new TextPanel("I am window 1.");
    		TextPanel textPanel2 = new TextPanel("I am window 2.");
    		TextPanel textPanel3 = new TextPanel("I am window 3.");
    		TextPanel textPanel4 = new TextPanel("I am window 4.");
    		TextPanel textPanel5 = new TextPanel("I am window 5.");
    
    		// Create the dockables around the content components.
    		Dockable dockable1 = new DefaultDockable("Window1", textPanel1, "Window 1", null, DockingMode.ALL);
    		Dockable dockable2 = new DefaultDockable("Window2", textPanel2, "Window 2", null, DockingMode.ALL);
    		Dockable dockable3 = new DefaultDockable("Window3", textPanel3, "Window 3", null, DockingMode.ALL);
    		Dockable dockable4 = new DefaultDockable("Window4", textPanel4, "Window 4", null, DockingMode.ALL);
    		Dockable dockable5 = new DefaultDockable("Window5", textPanel5, "Window 5", null, DockingMode.ALL);
    		
  7. Create the tab docks and add the dockables to them.
    		// Create the tab docks.
    		TabDock topTabDock = new TabDock();
    		TabDock bottomTabDock = new TabDock();
    		TabDock rightTabDock = new TabDock();
    
    		// Add the dockables to these tab docks.
    		topTabDock.addDockable(dockable1, new Position(0));
    		topTabDock.addDockable(dockable2, new Position(1));
    		bottomTabDock.addDockable(dockable3, new Position(0));
    		rightTabDock.addDockable(dockable4, new Position(0));
    		
  8. Add the tab docks to split docks.
    		// The windows of the tab docks should be able to split.
    		// Put the tab docks in split docks.
    		SplitDock topSplitDock = new SplitDock();
    		topSplitDock.addChildDock(topTabDock, new Position(Position.CENTER));
    		SplitDock bottomSplitDock = new SplitDock();
    		bottomSplitDock.addChildDock(bottomTabDock, new Position(Position.CENTER));
    		SplitDock rightSplitDock = new SplitDock();
    		rightSplitDock.addChildDock(rightTabDock, new Position(Position.CENTER));
    		
  9. Create the dock model, add the frame as owner window to it and give the dock model to the docking manager
    		// Create the dock model for the docks.
    		FloatDockModel dockModel = new FloatDockModel();
    		dockModel.addOwner("frame0", frame);
    		DockingManager.setDockModel(dockModel);
    		
  10. Add the root docks to the dock model. The frame is the owner window of these root docks.
    		// Add the 3 root docks to the dock model.
    		dockModel.addRootDock("topdock", topSplitDock, frame);
    		dockModel.addRootDock("bottomdock", bottomSplitDock, frame);
    		dockModel.addRootDock("rightdock", rightSplitDock, frame);
    		
  11. Add the root docks to the split panes.
    		// Add the root docks to the split panes.
    		leftSplitPane.setLeftComponent(topSplitDock);
    		leftSplitPane.setRightComponent(bottomSplitDock);
    		splitPane.setLeftComponent(leftSplitPane);
    		splitPane.setRightComponent(rightSplitDock);
    		
  12. Make dockable 5 float in the middle of the screen.
    		// Dockable 5 should float. Add dockable 5 to the float dock of the dock model (
    		// The float dock is a default root dock of the FloatDockModel.
    		FloatDock floatDock = dockModel.getFloatDock(frame);
    		Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
    		floatDock.addDockable(dockable5, new Point(screenSize.width / 2, screenSize.height / 2), new Point());
    		
  13. Run the application.

    It will look like this. You can move the windows around by dragging the tabs.

    First Example

  14. Add dragging functionality to the content.

    TextPanel should implement the interface DraggableContent.
    		public void addDragListener(DragListener dragListener)
    		{
    			addMouseListener(dragListener);
    			addMouseMotionListener(dragListener);
    			label.addMouseListener(dragListener);
    			label.addMouseMotionListener(dragListener);
    		}
    		
  15. Run the application.

    It will look like the same, but now you can move the windows also by dragging the content panels.
Sanaware