About docking in general see Docking.

Anchor Docking with TLazDockingManager

The TLazDockingManager is part of the LCL and can be found unit LDockCtrl. It is not yet complete and therefore not yet part of the IDE component palette. An example can be found in lazarus/examples/anchordocking/docking1.lpi.

A step by step example

Features

By using the LCL's anchors almost any layout is possible. It is for example not limited to the strict top/bottom/left/right order of the Align property.
It does not use hidden panels. What you see is how it is structured.
TSplitter are automatically inserted between docked forms
Page docking. Forms can be docked not only left/right/above/below, but in pages too. A TPageControl is automatically created. A page can contain arbitrary docked forms too, including paged docked forms, allowing nested pages.
Easy use: Just drop a TLazControlDocker onto the form that should be dockable, give it an unique name and connect it to the TLazDockingManager.
Not only forms, but any TWinControl can be made dockable. (needs testing)
Popup menu: User interface via platform independent popup menu. TLazControlDocker adds by default a popup menu 'Docking' to the PopupMenu of the form. This menu item opens a dialog where the user can setup the docking.
Easy docking via code. For example dock Form2 left of Form1:

 DockingManager.Manager.InsertControl(Form2,alLeft,Form1);

Can save/load layouts from/to xml config files. The layout information is stored for each dockable control and if the application gets more or less dockable controls the old layout will still work.
Dynamic and automatic restore layout algorithm. The layout is restored when a control is shown. That means no matter when or how a form is shown, the docking manager will automatically dock it according to the last known layout of this form. It will automatically resize the neighborhood. (already works for many layouts, needs some improvements for complex cases).

ToDos

Improve and harden the restore algorithm until it is good enough for the IDE.
Implement automatic menu merging in the LCL.
Fix the winapi widgetset for docked forms.
Write examples and docs
Add it to the IDE component palette
Implement drag and drop docking.

Usage

Create a TLazDockingManager

 DockingManager:=TLazDockingManager.Create(Self);

</DELPHI> The Self as parameter is only used as Owner. That means, when the mainform is freed, the DockingManager is freed too. You can use nil and free the DockingManager yourself.

Optional: Loading a configuration

You can load the user configuration from disk. <DELPHI>

 Config:=TXMLConfigStorage.Create('config.xml',true);
 DockingManager.LoadFromConfig(Config);
 Config.Free;

</DELPHI> This loads the file config.xml. The config can be created by the SaveToConfig function. See below.

Make a form/control dockable

Create a TLazControlDocker for each form/control that should be dockable <DELPHI>

 ControlDocker1:=TLazControlDocker.Create(Self);
 ControlDocker1.Name:='DockerForm1';
 ControlDocker1.Manager:=DockingManager;

</DELPHI>

Optional: Saving the user configuration to disk

When the program is closed you can save the user configuration to disk <DELPHI>

 Config:=TXMLConfigStorage.Create('config.xml',true);
 DockingManager.SaveToConfig(Config);
 Config.WriteToDisk;
 Config.Free;

</DELPHI>

Enlarge/Shrink

The anchor docking manager can enlarge/shrink docked neighbors. This is done via the function TAnchoredDockManager.EnlargeControl.

Enlarge one, shrink another

Shrink one neighbor control, enlarge Control. Two splitters are resized.

     |#|         |#         |#|         |#
     |#| Control |#         |#|         |#
   --+#+---------+#   --> --+#| Control |#
   ===============#       ===#|         |#
   --------------+#       --+#|         |#
       A         |#        A|#|         |#
   --------------+#       --+#+---------+#
   ==================     ===================

Enlarge one, shrink many

Move one neighbor splitter, enlarge Control, resize one splitter, rotate the other splitter.

     |#|         |#|          |#|         |#|
     |#| Control |#|          |#|         |#|
   --+#+---------+#+--  --> --+#| Control |#+--
   ===================      ===#|         |#===
   --------+#+--------      --+#|         |#+--
           |#|   B            |#|         |#|B
           |#+--------        |#|         |#+--
       A   |#=========       A|#|         |#===
           |#+--------        |#|         |#+--
           |#|   C            |#|         |#|C
   --------+#+--------      --+#+---------+#+--
   ===================      ===================

Why use Anchors instead of Align?

Anchors allow to create any possible rectangular layout. Align is limited. Align with Panels can theoretically create a lot of layouts, but still not all. And some operations like enlarge/shrink are more complicated using Align/Panels than using Anchors. Align works good for a few forms, but the more forms are docked, the more the disadvantages of Align become visible.

Layouts that can be created with Align

Align can only create the following layouts:

 +------------------------------------------+
 |      alTop                               |
 +------------------------------------------+
 +------------------------------------------+
 |      alTop                               |
 +------------------------------------------+
 +------++------++--------++-------++-------+
 |alLeft||alLeft||alClient||alRight||alRight|
 +------++------++--------++-------++-------+
 +------------------------------------------+
 |      alBottom                            |
 +------------------------------------------+
 +------------------------------------------+
 |      alBottom                            |
 +------------------------------------------+

The alTop controls are always at the top, filling the whole horizontal width. That's because the LCL first aligns all controls with alTop, then all alBottom, then alLeft, then alRight and finally alClient.

Layouts that can be created with Align and Panels

It is possible to nest Align layouts by using hidden panels. Then any layout that can be recursively splitted in halves can be created. Then you can create for example:

 +--++-------++---+
 |  ||   B   ||   |
 |  |+-------+|   |
 |A |+-------+| E |
 |  ||   C   ||   |
 |  |+-------+|   |
 |  |+-------+|   |
 |  ||   D   ||   |
 +--++-------++---+

This requires only one hidden panel.

Changing Layouts

Now the user wants to enlarge D horizontally (and shrink E):

 +--++-------++---+
 |  ||   B   ||   |
 |  |+-------+|   |
 |A |+-------+| E |
 |  ||   C   ||   |
 |  |+-------++---+
 |  |+------------+
 |  ||   D        |
 +--++------------+

Now you need 3 panels. One for B,C,D,E, one for B,C,E and one for B,C. An algorithm to allow this layout change, must analyze the whole structure, as if there were no panels and must reparent a lot of things. Basically the algorithm must do the same as the anchor docking algorithm, but with the extra work of translating the layout into Align plus hidden panels.

Layouts that are impossible with Align and Panels

Now the user wants to enlarge B horizontally (and shrink A):

 +-----------++---+
 |    B      ||   |
 +-----------+|   |
 +--++-------+| E |
 |A ||   C   ||   |
 |  |+-------++---+
 |  |+------------+
 |  ||   D        |
 +--++------------+

This layout is impossible with Align and panels. The same with

  +-----------++--------------+
  |    A      ||              |
  +-----------+|      B       |
  +-----++----+|              |
  |     ||    |+--------------+
  |     || D  |+----++--------+
  |  C  ||    ||  E ||        |
  |     |+----++----+|   F    |
  |     |+----------+|        |
  |     ||    G     ||        |
  +-----++----------++--------+

Conclusion

Align with hidden panels allows to easily create a simple docking manager that works good for a few forms. But it will always limit the user. Align is useful for row and column layouts, not for tables. Anchor docking works even for complex forms.

Anchor Docking

Contents