Sign in Join
Wiki copytemporary

Anchor Docking: what changed

Revision 2 to 3. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
11About docking in general see [[Docking]].
22
33## Overview
44
55Docking allows you to combine forms, or to treat controls as forms. You use the mouse to drag and dock forms together or undock (split) them. The basic dragging, docking and undocking functionality is provided by the LCL. But you need a docking manager to add splitters and grab zones, and to save and restore layouts.
66
77Anchor docking has been implemented since version 0.9.29 in the package *anchordocking.lpk* for use in your own Lazarus applications, and *AnchorDockingDsgn.lpk* if you wish to make the Lazarus IDE windows dockable. It is easy to use, and provides many features and options not available in earlier docking packages.
88
99You will find a code example at: components/anchordocking/miniide/miniide1.lpi
1010
1111This means that the earlier TLazDockingManager and unit LDockCtrl are obsolete and now deprecated.
1212
1313### Features
1414
1515- **Drag and dock**: Headers are added that can be dragged to dock controls with the mouse. Preview rectangles will show where and how a control is docked.
1616- **Any layout**: By using the LCL's anchors almost any layout is possible. You can dock to left, right, top, bottom, inside or outside or as page like in a TPageControl. You can enlarge docked controls via the popup menu. No need to undock your whole layout.
1717- **What you see is how it is structured**: There are no hidden panels to align controls in rows and columns. Anchor docking makes sure forms do not overlap.
1818- **Splitters** are automatically inserted between docked forms to allow resizing.
1919- **Page docking**. Forms can be docked not only left/right/above/below, but in pages too. A TPageControl is automatically created for native look and feel. A page can contain arbitrary docked forms too, including paged docked forms, allowing nested pages and layouts. When a page is undocked the pagecontrol is automatically removed. You can drag and drop the tabs or use the popup menu to move pages.
2020- **Easy use**: With one line of code you can make a form or control dockable. Just give them unique names.
2121- Not only forms, but any **TWinControl** can be made dockable.
2222- Can **save/load layouts**. The layout information is stored for each dockable control and old layout files will still work even when the application gets more dockable controls or some are removed. The information is stored in the abstract class LCL TConfigStorage. So you can use for example TXMLConfigStorage to store layouts in xml files or you can write your own storage to store it wherever you want.
2323- Each docked form is put into a docksite providing an optional **header**. The header shows the caption of the docked form and contains a close button. You can *drag the header* to drag the form and undock it or to dock it at another position. The header can be at any of the four sides and moves by default automatically to the smaller side to save space. You can customize this. The header shows a customizable hint allowing to read long captions.
2424- When a docksite is resized the *child sites are automatically scaled*. You can turn this off.
2525- **Preserve size of forms**. For instance when docking a form to a left side of a site the width of the docked form is kept. The same for the other sides and the same for undocking.
2626- **Flickerless**: The restore tries to reuse existing sites and splitters to reduce creation and flickering of forms and to preserve the Z order of forms. This allows to quickly switch between layouts.
2727- **Header popup menu**:
2828 - lock/unlock (disable dragging)
2929 - header position (auto, left, top, right, bottom), this is saved/restored with the layout
3030 - merge (for example after moving a dock page into a layout)
3131 - undock (needed if no place to undock on screen)
3232 - enlarge side to left, top, right, bottom
3333 - close
3434 - options
3535- **Page popup menu**:
3636 - lock/unlock (disable dragging)
3737 - undock (needed if no place to undock on screen)
3838 - tab position for pagecontrol (top,bottom, left, right), this is saved/restored with the layout
3939 - move page to the left, right, leftmost, rightmost
4040 - close
4141 - options
4242- Forms can be made dock sites. Then they can dock at one side. But they can not be docked itself.
4343- close button automatically saves a layout
4444- Powerful functions to alter the layout. You can use D&D to move a form and you can undock and dock in one move. There are functions to enlarge forms and shrinking others. These functions are available via the header popup menu as well. See below.
4545- There is an IDE package which makes the Lazarus IDE dockable. It is called anchordockingdsgn.lpk. Make sure you only install one docking package. Do not install the easydockmgr at the same time!
4646
4747### ToDos
4848
4949- Design time package: Add all layout files to menu
5050- simple way to make forms dockable at designtime (that means without writing any code)
5151- minimize button and Hide
5252- on show again: restore a default layout
5353- close button for pages
5454- Implement automatic menu merging in the LCL (when two forms with main menus are docked).
5555
5656## Usage I. (Add docking support to the Lazarus IDE)
5757
5858If you don't like the default "separate windows" look of the Lazarus IDE and prefer a single window (e.g., like RAD Studio™), you can install a package called **[[AnchorDockingDsgn]]** (lazarus/components/anchordocking/design/anchordockingdsgn.lpk). This package makes the IDE windows dockable.
5959
6060### Important to macOS users
6161
6262Before Lazarus 3.0, there are many bugs related to docking.
6363
6464If "anchordockingdsgn" has been installed before Lazarus 3.0, the wrong configuration may be saved and needs to be reset first.
6565
6666The configuration is saved in environmentoptions.xml, which usually located in ~/.lazarus
6767
6868Close the IDE, locate environmentoptions.xml, delete the content between \<AnchorDocking\> and \</AnchorDocking\>, and the initial setting of anchordockingdsgn will be automatically set when the IDE is started again.
6969
7070### Installation
7171
7272Uninstall any other docking managers (e.g., easydockmgrdsgn). From the Lazarus menu bar pick "Package" - "Install/Uninstall Packages" and install the "anchordockingdsgn" package.
7373
7474After you have successfully installed the package and restarted the IDE, the IDE starts with a default docked layout like shown below. Note that AnchorDocking headers and splitters have been added to all dockable windows of the IDE. In case the headers don't get visible, see the section "Options" below on how to enable/disable them.
7575
76-<img src="2021-12-02_10_21_07-Debian_10.8_Buster_-_VMware_Workstation.png" title="2021-12-02_10_21_07-Debian_10.8_Buster_-_VMware_Workstation.png" width="1333" />
76+![](/wiki-images/a/ac/2021-12-02_10_21_07-Debian_10.8_Buster_-_VMware_Workstation.png)
7777
7878You can change the layout by grabbing a dockable window by the Anchordocking header and drag and dock it anywhere else, or resize docked windows via splitters added to the window borders. You can right-click on the headers too for other options, for example, to change the look of the headers, as shown farther down below.
7979
8080You can save the layout via the menu item **Tools / Save window layout as default**. This saves to ~/.lazarus/anchordocklayout.xml and restores it when the IDE starts up.
8181
8282You can also save the layout to a file and load them later.
8383
8484Since Lazarus 1.1 you can pass a command line parameter
8585
8686`./lazarus --anchordocklayout=<filename>`
8787
8888The look (like the headers) can be further tweaked by right-clicking on them.
8989
9090![](/wiki-images/8/8a/Docking_headers.gif)
9191
9292### Options
9393
9494After the successful installation of the AnchorDockingDsgn package, an additional configuration menu is added to the Lazarus options dialog ("Tools" - "Options" - "Environment")
9595
9696![](/wiki-images/3/3a/Anchordocking_options.png)
9797
9898#### Scale on resize
9999
100100When resizing a window, all docked forms inside are scaled by the same percentage.
101101
102102#### Show headers
103103
104104To dock/undock a window, you need to enable this option.
105105
106106#### Flatten headers
107107
108108No 3d frame in headers.
109109
110110#### Header align top/left
111111
112112Headers are automatically put at top or left depending on these two values:
113113
114114- Move header to top, when (width/height)*100\<=HeaderAlignTop, default 80
115115- Move header to left, when (width/height)*100\>=HeaderAlignLeft, default 120
116116- Otherwise keep the header at the current position.
117117
118118Which means the header is by default put at the smaller side of a docked control. When the control is resized, the header switches to the smaller side.
119119
120120#### Allow dock sites to be minimized
121121
122122A extra minimize button is added, so a site can be minimized. Then sites next to it get more space. If needed, the minimized site then can easy be opened.
123123
124124#### Multine Tabs
125125
126126Feature added in Lazarus 2.2. If a OS support multiline tabs (like Windows), if there are no many tabs, they are shown in multiple lines.
127127
128128#### Floating windows on top
129129
130130Feature added in Lazarus 2.2. If there are undocked windows shown, show these on top of main window. In a own application, there can be set DockMaster.MainDockForm, then all floating windows are shown on top of it. If MainDockForm is not set, Application.MainForm is used.
131131
132132## Usage II. (Add docking support to your own applications)
133133
134134### Quick start
135135
136136Add the package **AnchorDocking** to the required packages in the project inspector.
137137
138138Then add the unit **AnchorDocking** to the uses section of your main unit (the unit with your main form).
139139
140140Add to the FormCreate of your main form:
141141
142142``` pascal
143143 DockMaster.MakeDockSite(Self,[akBottom],admrpChild);
144144```
145145
146146For the other dockable forms replace all calls of *Show* and *ShowOnTop* with
147147
148148``` pascal
149149 DockMaster.MakeDockable(Form1,true,true);
150150```
151151
152152For the other dockable forms replace all calls of *Visible:=true* with
153153
154154``` pascal
155155 DockMaster.MakeDockable(Form1,true);
156156```
157157
158158Remove or comment all *Hide*, *Visible:=false*, *WindowState:=* calls.
159159
160160### Prerequisites
161161
162162- Your project must use the package *AnchorDocking*.
163163- All dockable forms must be shown with MakeDockable or MakeDockSite. Do not use *Show*, *BringToFront*, *ShowOnTop*, *Visible:=true*. Of course you can have some non dockable forms, like hints or splashscreens.
164164- All dockable forms must be free resizable, that means no constraints, no BorderStyle bsDialog.
165165- No other docking system. AnchorDocking is incompatible with EasyDockMgr.
166166
167167### Making forms dockable
168168
169169There are two ways to make a form dockable. You can use **DockMaster.MakeDockable** to wrap a form into a dock site. Then your form can dock and be docked completely free. You will use that for the biggest part of your forms, except for the MainForm, because this is only supported for the MainForm on gtk2 and qt. The second way is to use **DockMaster.MakeDockSite**. The form can dock other sites, but can not be docked itself. You might want to use *MakeDockSite* for the *MainForm*. For most other forms you probably want to use this:
170170
171171``` pascal
172172// shows YourForm
173173// if not already done, wrap the form into a dock site
174174DockMaster.MakeDockable(YourForm);
175175```
176176
177177Here are some examples how a form looks like that was made dockable with **DockMaster.MakeDockable**:
178178
179179![](/wiki-images/b/bc/Docksite1.png) ![](/wiki-images/c/c6/Docksite2.png)
180180
181181The header position is normally done automatically and the user can with a right click put it to any of the four sides.
182182
183183### Example: miniide1
184184
185185The example can be found in *lazarus/components/anchordocking/miniide/miniide1.lpi*. It has a *mainform* in unit *unit1.pas* with a main menu which works as a docksite and several forms that are dockable.
186186
187187![](/wiki-images/a/a5/Anchordocking_miniide1.png)
188188
189189### Making the main form a dock site
190190
191191In the TMainIDE.FormCreate the main form **MainIDE** is turned into a docksite:
192192
193193``` pascal
194194DockMaster.MakeDockSite(Self,[akBottom],admrpChild);
195195```
196196
197197The parameter *\[akBottom\]* allows to dock other sites at the bottom of MainIDE. The parameter *admrpChild* tells the DockMaster that when the MainIDE is enlarged the extra space is distributed to the docked sites.
198198
199199When the user docks a site to the bottom of MainIDE the site is put onto MainIDE (Site.Parent:=MainIDE) with Site.Align=alBottom. The other controls on MainIDE must be compatible to this. MainIDE for example has a BtnPanel with Align=alLeft and a TNoteBook with Align=alClient. See [[Autosize / Layout|here]] how Align works.
200200
201201The DockMaster adds automatically a splitter:
202202
203203![](/wiki-images/c/ca/Anchordocking_miniide_dockedse1.png)
204204
205205As soon as a dockable form is docked its caption is shown in the dock header.
206206
207207#### Requirements for a custom dock site
208208
209209As long as nothing is docked into a custom dock site, your form can do everything as a normal form. But when a site is docked to it, some properties and methods need special care:
210210
211211- AutoSize=true may result in an endless loop. Disable it or override DoAutoSize/CalculatePreferredSize and take special care.
212212- Constraints: The DockMaster clears the maximum Constraints and will restore them on undock.
213213- Child controls anchored to the aligned site may overlap. See [[Autosize / Layout|here]] how Align works.
214214- ChildSizing: The spacing properties like LeftRightSpacing, TopBottomSpacing may interfere with the docking layout.
215215
216216### Procedure to create all other forms by name
217217
218218The MainIDE sets the **DockMaster.OnCreateControl** event, to enable the DockMaster to create forms by name. This is needed to restore layouts.
219219
220220``` pascal
221221DockMaster.OnCreateControl:=@DockMasterCreateControl;
222222```
223223
224224``` pascal
225225procedure TMainIDE.DockMasterCreateControl(Sender: TObject; aName: string; var
226226 AControl: TControl; DoDisableAutoSizing: boolean);
227227
228228 procedure CreateForm(Caption: string; NewBounds: TRect);
229229 begin
230230 AControl:=CreateSimpleForm(aName,Caption,NewBounds,DoDisableAutoSizing);
231231 end;
232232
233233begin
234234 // first check if the form already exists
235235 // the LCL Screen has a list of all existing forms.
236236 // Note: Remember that the LCL allows as form names only standard
237237 // pascal identifiers and compares them case insensitive
238238 AControl:=Screen.FindForm(aName);
239239 if AControl<>nil then begin
240240 // if it already exists, just disable autosizing if requested
241241 if DoDisableAutoSizing then
242242 AControl.DisableAutoSizing;
243243 exit;
244244 end;
245245 // if the form does not yet exist, create it
246246 if aName='CodeExplorer' then
247247 CreateForm('Code Explorer',Bounds(700,230,100,250))
248248 ...
249249 else if aName='DebugOutput' then
250250 CreateForm('Debug Output',Bounds(400,400,350,150));
251251end;
252252```
253253
254254Creating a form can be as simple as this:
255255
256256``` pascal
257257MyForm:=TMyForm.Create(Self);
258258if DoDisableAutoSizing then
259259 MyForm.DisableAutoSizing;
260260```
261261
262262But of course you can put there all kind of initialization code.
263263
264264The *DisableAutoSizing* reduces flickering. Make sure your forms **Visible** property is set to **false**.
265265
266266Remember to call **DisableAutoSizing** for the form if the parameter **DoDisableAutoSizing** is set to *true*, because *Disable-* and *EnableAutosizing* calls must be balanced. If you miss the *DisableAutosizing*, the LCL will raise an exception later:
267267
268268`TControl.EnableAutoSizing SourceEditor1:TSimpleForm: missing DisableAutoSizing`
269269
270270![](/wiki-images/8/8e/MissingDisableAutoSizing.png)
271271
272272If you call **DisableAutoSizing** too much, your forms will not appear and/or not resize properly as the LCL is waiting for the *EnableAutoSizing* call that never comes.
273273
274274### Showing forms
275275
276276When a form should be shown, you have probably used something like *'MyForm.Show*. Instead you should now use
277277
278278``` pascal
279279DockMaster.MakeDockable(MyForm);
280280```
281281
282282This will wrap MyForm in a dock site and show it. It is clever enough to figure out if the form is already wrapped in a dock site.
283283
284284If you set the **DockMaster.OnCreateControl** event you can use this:
285285
286286``` pascal
287287DockMaster.ShowControl('MyForm',true);
288288```
289289
290290### Docking manually, via code
291291
292292Use the procedure **DockMaster.ManualDock** to dock a site to or into another.
293293
294294``` pascal
295295procedure ManualDock(SrcSite, TargetSite: TAnchorDockHostSite; Align: TAlign; TargetControl: TControl = nil);
296296```
297297
298298- **SrcSite** is the site to be docked. If SrcSite was docked it will be undocked first.
299299- **TargetSite** is the site where SrcSite will be docked into or docked as neighbor.
300300- **TargetControl** specifies if docking as neighbor (=nil), as inside neighbor (=TargetSide) or in front of a page (=a TAnchorDockPage).
301301
302302### Undocking manually, via code
303303
304304Use the procedure **DockMaster.ManualFloat** to undock a site from its neighbors and create a flotaing top level form. The embedded control stays embedded into a TAnchorDockHostSite.
305305
306306``` pascal
307307procedure ManualFloat(AControl: TControl);
308308```
309309
310310You can give as parameter a TAnchorDockHostSite or a control embedded into a TAnchorDockHostSite (for example a form made dockable with MakeDockable). The site will be put at the same screen location.
311311
312312### Save layout
313313
314314The DockMaster allows to save the current layout to a TConfigStorage. The miniide example uses the xml version:
315315
316316``` pascal
317317procedure TMainIDE.SaveLayout(Filename: string);
318318var
319319 XMLConfig: TXMLConfigStorage;
320320begin
321321 try
322322 // create a new xml config file
323323 XMLConfig:=TXMLConfigStorage.Create(Filename,false);
324324 try
325325 // save the current layout of all forms
326326 DockMaster.SaveLayoutToConfig(XMLConfig);
327327 XMLConfig.WriteToDisk;
328328 finally
329329 XMLConfig.Free;
330330 end;
331331 except
332332 on E: Exception do begin
333333 MessageDlg('Error',
334334 'Error saving layout to file '+Filename+':'#13+E.Message,mtError,
335335 [mbCancel],0);
336336 end;
337337 end;
338338end;
339339```
340340
341341### Load layout
342342
343343``` pascal
344344procedure TMainIDE.LoadLayout(Filename: string);
345345var
346346 XMLConfig: TXMLConfigStorage;
347347begin
348348 try
349349 // load the xml config file
350350 XMLConfig:=TXMLConfigStorage.Create(Filename,True);
351351 try
352352 // restore the layout
353353 // this will close unneeded forms and call OnCreateControl for all needed
354354 DockMaster.LoadLayoutFromConfig(XMLConfig);
355355 finally
356356 XMLConfig.Free;
357357 end;
358358 except
359359 on E: Exception do begin
360360 MessageDlg('Error',
361361 'Error loading layout from file '+Filename+':'#13+E.Message,mtError,
362362 [mbCancel],0);
363363 end;
364364 end;
365365end;
366366```
367367
368368### Enlarge/Shrink
369369
370370The anchor docking manager can enlarge/shrink docked neighbors. This is done via the popup menu of the dock header or in code with the function **DockMaster.ManualEnlarge**:
371371
372372``` pascal
373373function ManualEnlarge(Site: TAnchorDockHostSite; Side: TAnchorKind; OnlyCheckIfPossible: boolean): boolean;
374374```
375375
376376Site is a child site, Side the side of Site to expand. If you only want to test if enlarge is possible set OnlyCheckIfPossible to true.
377377
378378### Enlarge one, shrink another
379379
380380Shrink neighbor *Object Inspector*, enlarge *Messages*: Right click on the header of *Messages* and click on **Enlarge right side**. Two splitters are resized.
381381
382382![](/wiki-images/1/15/Anchordocking_before_enlarge1.png) enlarging *Messages* to the right side: ![](/wiki-images/f/f8/Anchordocking_after_enlarge1.png)
383383
384384### Enlarge one, shrink many
385385
386386Shrink splitter at one side, enlarge both neighbor splitters, rotate the splitter behind, enlarge Control, shrink controls at rotate splitter. Right click on header of *Source Editor 1* then click on **Enlarge bottom side**.
387387
388388![](/wiki-images/c/cb/Anchordocking_before_enlarge2.png) becomes ![](/wiki-images/4/42/Anchordocking_after_enlarge2.png)
389389
390390### General docking options
391391
392392The AnchorDocking package provides a dialog to setup some of the properties of the DockMaster. The dialog is in the unit AnchorDockOptionsDlg and you can use it simply:
393393
394394``` pascal
395395uses ... AnchorDockOptionsDlg;
396396...
397397procedure TMainIDE.FormCreate(Sender: TObject);
398398...
399399begin
400400 ...
401401 DockMaster.OnShowOptions:=@ShowAnchorDockOptions;
402402 ...
403403end;
404404```
405405
406406This will add a new menu item to the popup menus of the dock headers and pages called *Docking options*.
407407
408408## Why use Anchors instead of Align?
409409
410410Anchors 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.
411411
412412### Layouts that can be created with Align
413413
414414Align can only create the following layouts:
415415
416416![](/wiki-images/1/13/Anchordocking_align_layout1.png)
417417
418418The 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.
419419
420420### Layouts that can be created with Align and Panels
421421
422422It 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:
423423
424424![](/wiki-images/0/0e/Anchordocking_align_panels_layout1.png)
425425
426426This requires only one hidden panel.
427427
428428### Changing Layouts
429429
430430Now the user wants to enlarge the *FPDocEditor* horizontally (and shrink *CodeExplorer*). With the *AnchorDocking* you can simply right click on the *FPDocEditor* header and click **Enlarge right side**.
431431
432432![](/wiki-images/8/88/Anchordocking_align_panels_layout2.png)
433433
434434Other docking engines need at least 2 panels. One for *SrcEditor*,*Messages*,*FPDocEdit*,*CodeExpl* and one for *SrcEdit* and *Messages*. Most docking layouters do not even provide a simple way to change the layout in this way. 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.
435435
436436### Layouts that are impossible with Align and Panels
437437
438438Now the user wants to enlarge *SourceEditor1* horizontally (and shrink *ObjectInspector*):
439439
440440![](/wiki-images/e/e9/Anchordocking_impossible_with_align_panels1.png)
441441
442442This layout is impossible with Align and panels, because you can not cut it in two halves. The same with
443443
444444![](/wiki-images/1/1e/Anchordocking_impossible_with_align_panels2.png)
445445
446446### Conclusion
447447
448448Align with hidden panels allows you to easily create a simple docking manager that works well 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.
449449
450450## Old/deprecated anchor docking
451451
452452### Create a TLazDockingManager
453453
454454``` pascal
455455 DockingManager:=TLazDockingManager.Create(Self);
456456```
457457
458458The 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.
459459
460460### Optional: Loading a configuration
461461
462462You can load the user configuration from disk.
463463
464464``` pascal
465465 Config:=TXMLConfigStorage.Create('config.xml',true);
466466 DockingManager.LoadFromConfig(Config);
467467 Config.Free;
468468```
469469
470470This loads the file *config.xml*. The config can be created by the SaveToConfig function. See below.
471471
472472### Make a form/control dockable
473473
474474Create a TLazControlDocker for each form/control that should be dockable
475475
476476``` pascal
477477 ControlDocker1:=TLazControlDocker.Create(Self);
478478 ControlDocker1.Name:='DockerForm1';
479479 ControlDocker1.Manager:=DockingManager;
480480```
481481
482482### Optional: Saving the user configuration to disk
483483
484484When the program is closed you can save the user configuration to disk
485485
486486``` pascal
487487 Config:=TXMLConfigStorage.Create('config.xml',true);
488488 DockingManager.SaveToConfig(Config);
489489 Config.WriteToDisk;
490490 Config.Free;
491491```
492492
493493## See also
494494
495495- [[AnchorDockingDsgn]] AnchorDocking in the Lazarus IDE
496496- [[Anchor Docking Step by step example|Anchor Docking: A Step by step example]]
497497- [[Docking]] in general
498498- [[EasyDockingManager]] - an alternative docking implementation with a simpler layout engine and fewer options.
499499
500500---
501501*From the Free Pascal wiki, page "Anchor Docking", as it stood on 2024-01-27 after a change by Rich2014, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
502502Category: Docking
503503Category: Lazarus IDE plugins

Back to history