Benutzung DockedFormEditor - Anchors

Für Fragen rund um die Ide und zum Debugger
Antworten
Michl
Beiträge: 2505
Registriert: Di 19. Jun 2012, 12:54

Benutzung DockedFormEditor - Anchors

Beitrag von Michl »

Servus,

aufgrund einer PN-Anfrage habe ich mich entschlossen hier kurz mal ein Beispiel zur Nutzung des Anchor-Designers (Reiter "Anchors") vom Package DockedFormEditor durchzuspielen.

Beispiel: Anzeigeformular mit einem Memo, einem OK-Button und einem Abbruch-Button:
- erstelle ein neues Projekt: Hauptmenü -> Neues Projekt -> Anwendung: (das Hauptformular Form1 soll gleichzeitig das zu bearbeitende Formular sein)
- wähle Reiter "Form"
- platziere ein TMemo und zwei TButtons auf dem Formular

Sieht dann ungefähr so aus:
Bild1.png
Bild1.png (4.25 KiB) 3564 mal betrachtet


Nun soll Memo1 oben links verankert werden:
- wähle Reiter "Anchors"
- wähle mit der Maus "Memo1"
- halte mit der Maus den oberen linken Griff
- bewege die Maus nach oben links, bis die Formularecke gefangen wird (sich orange färbt)

Orange Färbung des Formulars zeigt an, an welcher Komponente verankert wird, in diesem Fall Top, Left des Formulars:
Bild2.png
Bild2.png (3.71 KiB) 3561 mal betrachtet


Memo1 soll immer so breit, wie das Formular sein:
- fasse den rechten Griff von Memo1 und ziehe bis an die rechte Seite vom Formular

Im Hinweisfenster ist ersichtlich, welche Seiten verankert sind (aktuell: Left, Top, Right). Ebenso ersichtlich, die rechte Seite wird neu mit Form1 verankert:
Bild3.png
Bild3.png (6.48 KiB) 3553 mal betrachtet


Das Memo1 soll nicht direkt am Rand des Formulars kleben, sondern einen optisch schönen Abstand haben (z.B. 10 Pixel):
- halte <Ctrl> gedrückt und links klicke mit der Maus in die Mitte von Memo1 und halte die Maustaste gedrückt
- nun bewege die Maus langsam nach unten oder rechts und vergrößere den Abstand

Memo1.Borderspacing.Around wird vergrößert. Dies kann man im ObjektInspektor oder AnkerEditor nachvollziehen. Es wird ebenfalls im Hinweisfenster angezeigt:
Bild4.png
Bild4.png (5.13 KiB) 3551 mal betrachtet


Button2 soll Abbrechen-Button rechts unten werden:
- klicke Button2
- öffne ObjektInspektor und ändere Caption auf "Abbrechen"
- im AnchorDesigner rechtsklicke kurz Button2 und wähle im PopupMenu "Detach Control"
- alternativ kann man kurz Button2 anfassen und auf dem Formular verschieben, dies löst die obere linke Verankerung ebenfalls
- wähle den unteren rechten Griff von Button2
- verschiebe diesen an die untere rechte Ecke vom Formular

Wieder ist im Hinweisfenster ersichtlich, welche Seiten an welchem Control verankert werden (Right, Bottom - Rechts an Form1.Bottom - Unten an Form1.Bottom). Zu beachten ist, daß es bei vertikaler Verankerung Top, Center, Bottom (Oben, Mitte, Unten) begrifflich, wie optisch übereinstimmt. Bei vertikaler Verankerung wird ebenfalls Top, Center, Bottom genutzt, jedoch sollte man hier sinnbildlich Links, Mitte, Rechts im Kopf behalten.
Um den Button2 zu verschieben ist "Detach Control" notwendig, da sonst die Größe des Controls verändert wird. Immer wenn ein Control verändert wird, wird es so verändert, wie es aktuell mit der Mausbewegung stattfindet. Stellt man fest, daß es nicht richtig ist, kann man jederzeit diese Aktion per <ESC> abbrechen. Sollte fälschlicherweise eine Verschiebung oder Größenänderung stattgefunden haben, kann man mit <Ctrl> + <Z> (oder Menu -> Bearbeiten -> Rückgängig) die letzten Aktionen rückgängig machen.
Bild5.png
Bild5.png (7.14 KiB) 3547 mal betrachtet
Zuletzt geändert von Michl am Do 30. Sep 2021, 11:03, insgesamt 4-mal geändert.

Code: Alles auswählen

type
  TLiveSelection = (lsMoney, lsChilds, lsTime);
  TLive = Array[0..1] of TLiveSelection; 

Michl
Beiträge: 2505
Registriert: Di 19. Jun 2012, 12:54

Re: Benutzung DockedFormEditor - Anchors

Beitrag von Michl »

Muss neu anfangen, da nicht mehr als 5 Dateien als Anhang akzeptiert werden.

Button2 soll ebenfalls Abstand von 10 Pixel haben:
- mit <Ctrl> gedrückt, mit linker Maustaste auf Mitte Button2 klicken und Maustaste gedrückt halten
- Maus nach unten, rechts oder rechtsunten bewegen, bis Abstand 10 auf dem Hinweisfenster ersichtlich wird

Da es schwierig ist, die Maus pixelweise zu bewegen, ist es ratsam in den Optionen (Menu -> Werkzeuge -> Einstellungen -> Docked Form Editor -> Mouse cursor factor for BorderSpacing property) einen höheren Wert als 1 einzustellen. Ich komme mit 3 bis 5 am besten zurecht. D.h. z.b. bei 3 ich muss die Maus um mindestens 3 Pixel bewegen, bevor 1 Pixel Abstand eingestellt wird.
Bild6.png
Bild6.png (5.91 KiB) 3544 mal betrachtet


Button1 soll OK-Button links von Abbrechen-Button (Button2) werden:
- klicke Button1
- öffne ObjektInspektor und ändere Caption auf "OK"
- im AnchorDesigner rechtsklicke kurz Button1 und wähle im PopupMenu "Detach Control"
- alternativ kann man kurz Button1 anfassen und auf dem Formular verschieben, dies löst die obere linke Verankerung ebenfalls
- wähle den rechten Griff von Button1
- verschiebe diesen an den linken Rand von Button2

Im Hinweisfenster ist wieder ersichtlich, daß die rechte Seite verankert wird an Button2 (Seite Top, wie oben erwähnt hier zu lesen als "Links"). Um die Abhängigkeiten der Seiten voneinander zu verdeutlichen, sind zusätzlich die jeweils von einander abhängigen Seiten mit roten Linien markiert.
Bild7.png
Bild7.png (6.21 KiB) 3540 mal betrachtet


Button1 soll wie Button2 unten verankert sein:
- wähle unteren Griff von Button1 und verschiebe diesen unten an das Formular

Im Hinweisfenster ist ersichtlich, daß die Seiten Right, Bottom, also rechts und unten verankert sind. Neu verankert wird Unten und zwar an Form1.Bottom.
Bild8.png
Bild8.png (6.05 KiB) 3540 mal betrachtet


Button1 soll auf gleicher Höhe, wie Button1 sitzen (10 Pixel Abstand):
- wie oben, mit <Ctrl> gedrückt, mit linker Maustaste auf Mitte Button1 klicken und Maustaste gedrückt halten
- Maus nach unten, rechts oder rechtsunten bewegen, bis Abstand 10 auf dem Hinweisfenster ersichtlich wird
Bild9.png
Bild9.png (6.09 KiB) 3538 mal betrachtet


Memo1 an Button verankern:
- als letzten Schritt noch Memo1 mit unteren Griff an Button1 oder Button2 verankern
- unteren Griff von Memo1 mit Maus nach unten ziehen, bis oberer Rand von Button1 oder Button2 gefangen wird

Auch hier wird wieder das Control orange gefärbt, was zum verankern genutzt wird und im Hinweisfenster gezeigt, was passiert. Ebenfalls werden die verankerten Seiten farblich herausgestellt (hellblau sind die neu verankerten Seiten).
Bild10.png
Bild10.png (6.02 KiB) 3538 mal betrachtet

Das war es soweit mit dem Design. Jetzt kann man per <F9> das kleine Beispiel mal starten und zur Laufzeit die Größe des Formulars verändern (geht natürlich auch zur Designzeit) und die Anpassung des Memos an die jeweilige Formulargröße beobachten.

Viel Erfolg!

Code: Alles auswählen

type
  TLiveSelection = (lsMoney, lsChilds, lsTime);
  TLive = Array[0..1] of TLiveSelection; 

Benutzeravatar
af0815
Lazarusforum e. V.
Beiträge: 6198
Registriert: So 7. Jan 2007, 10:20
OS, Lazarus, FPC: FPC fixes Lazarus fixes per fpcupdeluxe (win,linux,raspi)
CPU-Target: 32Bit (64Bit)
Wohnort: Burgenland
Kontaktdaten:

Re: Benutzung DockedFormEditor - Anchors

Beitrag von af0815 »

Blöd kann man ruhig sein, nur zu Helfen muss man sich wissen (oder nachsehen in LazInfos/LazSnippets).

Benutzeravatar
lcb-User
Beiträge: 54
Registriert: Di 15. Jul 2014, 13:18
OS, Lazarus, FPC: Linux Mint 21.1 Cinnamon Lazarus 2.3.0 (rev main-2_3-3744-g967034aff5) FPC 3.3.1
CPU-Target: 64Bit
Wohnort: München

Re: Benutzung DockedFormEditor - Anchors

Beitrag von lcb-User »

Servus Michl

Danke für Dein Beispiel zur Nutzung des Anchor-Designers

Ich habe da ein Problem:

Wenn ich in deinem Beispiel eine StatusBar einfüge, und danach ein MainMenu dann ist unter Anchors-Ansicht die StatusBar vorhanden und kann auch in der Hohe verändert werden, verschwindet aber in der Form-Ansicht.

Ist auch so unter Windows XP(32Bit).
Unter Windows 10 kann ich es nicht testen.

Liebe Grüße
Sonnige Grüße
Bibsi


Traue keiner Statistik die du nicht selbst gefälscht hast (Sir Winston Churchill 1874 - 1965)
Linux Mint 21.1 Cinnamon 5.6.7 Kernel 5.19.0-35-generic
Lazarus 2.3.0 (rev main-2_3-3744-g967034aff5) FPC 3.3.1 x86_64-linux-gtk2

Michl
Beiträge: 2505
Registriert: Di 19. Jun 2012, 12:54

Re: Benutzung DockedFormEditor - Anchors

Beitrag von Michl »

af0815 hat geschrieben:
Do 30. Sep 2021, 13:05
++1

Würde da gut dazupassen https://wiki.lazarus.freepascal.org/DockedFormEditor
Ja, das weiß ich, werde das bei etwas mehr Freizeit mal angehen. Danke trotzdem.

Code: Alles auswählen

type
  TLiveSelection = (lsMoney, lsChilds, lsTime);
  TLive = Array[0..1] of TLiveSelection; 

Michl
Beiträge: 2505
Registriert: Di 19. Jun 2012, 12:54

Re: Benutzung DockedFormEditor - Anchors

Beitrag von Michl »

lcb-User hat geschrieben:
Fr 1. Okt 2021, 11:36
Wenn ich in deinem Beispiel eine StatusBar einfüge, und danach ein MainMenu dann ist unter Anchors-Ansicht die StatusBar vorhanden und kann auch in der Hohe verändert werden, verschwindet aber in der Form-Ansicht.
Da treffen zwei Probleme aufeinander.

Die StatusBar kann man im Designer nicht in der Höhe verändern. Diese wird offensichtlich vom System vorgegeben. Der Anker-Designer akzeptiert bisher die Constraints, nicht jedoch besondere Eigenschaften einzelner Komponenten. Wer die Möglichkeit von Größenänderungen oder Umstellung des Aligns auf Anchors durch den Anchors-Designer nicht will, kann dies auch per Option ausschalten (dann können tatsächlich nur Einstellungen vorgenommen werden, die auch mit dem Anker-Editor vorgenommen werden können).

Das zweite Problem hier ist, daß ein eingebettetes Formular kein Hauptmenü zeigt. Die Widgetsets Win32, GTK2 und soviel ich weiß Carbon & Cocoa verhalten sich hier identisch. Bisher ist mir nur bekannt, daß Qt4 und Qt5 bei eingebetteten Formularen das Hauptmenü zeigen (da gibt es dieses Problem nicht).
Bei den o.g. Widgetsets Win32 etc. wird das Mainmenu simuliert. D.h. das eingebettete Formular wird um die Höhe des simulierten Hauptmenüs nach unten verschoben. Das Ansichtfenster jedoch nicht.
Ich musste hier zwischen Pest oder Cholera wählen:
1. Entweder ich zeige das simulierte Hauptmenü oben und zeige das Formular in der kompletten Größe. Dann würde man die Statusbar trotz Hauptmenü sehen. Allerdings würde dann die Höhe des Formulars zur Laufzeit größer sein, als zur Designzeit (das OS schlägt dann die Höhe des Menüs dem Formular zu).
2. Wenn ein Hauptmenü auf dem Formular vorhanden ist, wird das Formular zur Designzeit um die Größe des Hauptmenüs unten beschnitten. Dann wäre der untere Rand des Formulars zur Designzeit nicht sichtbar jedoch die Höhe und die Plazierung der Komponenten stimmen zur Designzeit mit der zur Laufzeit überein.

Bei der Entwicklung des Packages habe ich zuerst den Ansatz 1 gewählt (wie es der Sparta_DockedFormEditor noch hat) und als das geringere Übel betrachtet. Nach einigen Bugreports habe ich auf Wunsch das Verhalten zu 2. geändert. Da diverse Lösungsversuche (Clientverschiebung, Größenanpassung per Hack) letztlich nicht zielführend waren, sehe ich als einzige Lösung, eine angepasste Höhe eines eingebetteten Designers. Dazu muss der Designer selbst angepasst werden. Ich schätze mal mit Tests und allem drum und dran, ca. 2 Wochen Arbeit - leider habe ich aktuell nicht die Zeit dafür - wird also noch eine Weile dauern.

Siehe auch:
https://wiki.lazarus.freepascal.org/Doc ... own_Issues
https://gitlab.com/freepascal.org/lazar ... sues/38701

Ich könnte auf recht kurzem Weg eine Option einbauen, daß man als User selbst das geringere Übel (also zwischen 1 und 2) wählen kann, als Übergangslösung, bis der Fix gemacht ist. Wäre das gewünscht / nötig?

Meine Empfehlung zur Zeit lautet, das MainMenu möglichst zur Laufzeit zu erstellen. (Ich selbst habe kein Projekt hier, wo das nicht so ist. Ich bin da schneller im Code ein neues Menü hinzuzufügen, mit einem TAction auszustatten etc.)

Code: Alles auswählen

type
  TLiveSelection = (lsMoney, lsChilds, lsTime);
  TLive = Array[0..1] of TLiveSelection; 

Benutzeravatar
lcb-User
Beiträge: 54
Registriert: Di 15. Jul 2014, 13:18
OS, Lazarus, FPC: Linux Mint 21.1 Cinnamon Lazarus 2.3.0 (rev main-2_3-3744-g967034aff5) FPC 3.3.1
CPU-Target: 64Bit
Wohnort: München

Re: Benutzung DockedFormEditor - Anchors

Beitrag von lcb-User »

Hallo Michl

Gut zu wissen das das nicht ein Problem meiner Installation ist.
Ich könnte auf recht kurzem Weg eine Option einbauen, daß man als User selbst das geringere Übel (also zwischen 1 und 2) wählen kann, als Übergangslösung, bis der Fix gemacht ist. Wäre das gewünscht / nötig?
Nö, ich kann warten.

Mir ist ehrlich gesagt der Anchors nicht wichtig,
ich komm mit dem AnkerEditer gut zurecht.

Ich hab nur einem Monitor und da ist mir der Formdesigner wichtig.

Danke für deine Arbeit. :)
Sonnige Grüße
Bibsi


Traue keiner Statistik die du nicht selbst gefälscht hast (Sir Winston Churchill 1874 - 1965)
Linux Mint 21.1 Cinnamon 5.6.7 Kernel 5.19.0-35-generic
Lazarus 2.3.0 (rev main-2_3-3744-g967034aff5) FPC 3.3.1 x86_64-linux-gtk2

HobbyProgrammer
Beiträge: 166
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Re: Benutzung DockedFormEditor - Anchors

Beitrag von HobbyProgrammer »

Mal ne blöde Frage, welches Package brauche ich genau?
Den Reiter 'Anchors' finde ich bei mir im Designer nicht.

Verwende Lazarus 2.0.12

Grüße
Hobbyprogrammer
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 2.2.6 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

Benutzeravatar
af0815
Lazarusforum e. V.
Beiträge: 6198
Registriert: So 7. Jan 2007, 10:20
OS, Lazarus, FPC: FPC fixes Lazarus fixes per fpcupdeluxe (win,linux,raspi)
CPU-Target: 32Bit (64Bit)
Wohnort: Burgenland
Kontaktdaten:

Re: Benutzung DockedFormEditor - Anchors

Beitrag von af0815 »

Das Paket DockedFormEditor. Ich weis nur nicht ob das bei 2.0.12 schon dabei ist. Es gab davon hier im Forum eine Standaloneversion.

Edit. Ist in diesem Thread viewtopic.php?f=5&t=13432&hilit=DockedF ... r&start=15
Blöd kann man ruhig sein, nur zu Helfen muss man sich wissen (oder nachsehen in LazInfos/LazSnippets).

HobbyProgrammer
Beiträge: 166
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Re: Benutzung DockedFormEditor - Anchors

Beitrag von HobbyProgrammer »

Danke. Dann kann ich lange suchen.
Denke ich werde warten bis der neue DockedFormEditor in einem Stable Release verfügbar ist. :D
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 2.2.6 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

wennerer
Beiträge: 507
Registriert: Di 19. Mai 2015, 20:05
OS, Lazarus, FPC: Linux Mint 20 Cinnamon,Lazarus 2.2.6 (rev lazarus_2_2_6) FPC 3.2.2 x86_64-linux-
CPU-Target: x86_64-linux-gtk2

Re: Benutzung DockedFormEditor - Anchors

Beitrag von wennerer »

Hallo,
der DockedFormEditor ist jetzt in der neuen Stable 2.2.0 vorhanden.
@Michl: Vielen Dank für die ausführliche Beschreibung und das klasse Tool!

Viele Grüße
Bernd

Michl
Beiträge: 2505
Registriert: Di 19. Jun 2012, 12:54

Re: Benutzung DockedFormEditor - Anchors

Beitrag von Michl »

Danke fürs Feedback!

Code: Alles auswählen

type
  TLiveSelection = (lsMoney, lsChilds, lsTime);
  TLive = Array[0..1] of TLiveSelection; 

Benutzeravatar
af0815
Lazarusforum e. V.
Beiträge: 6198
Registriert: So 7. Jan 2007, 10:20
OS, Lazarus, FPC: FPC fixes Lazarus fixes per fpcupdeluxe (win,linux,raspi)
CPU-Target: 32Bit (64Bit)
Wohnort: Burgenland
Kontaktdaten:

Re: Benutzung DockedFormEditor - Anchors

Beitrag von af0815 »

Michl hat geschrieben:
Mo 10. Jan 2022, 22:40
Danke fürs Feedback!
Von mit auch die ++1 , das werkt so unscheinbar im Hintergrund, das man ganz darauf vergisst das es ja ein extra Paket ist, das wer im Hintergrund erstellen, warten und Fixen muss.

Danke für deine Arbeit und der Arbeit der anderen für Lazarus insgesamt.

BTW: Ich habe kurz mal Delphi angeworfen - ich bin damit nicht mehr zurecht gekommen. Ich habe mich echt komplett an Lazarus gewöhnt, das ich dort verloren bin. Echt stark.
Blöd kann man ruhig sein, nur zu Helfen muss man sich wissen (oder nachsehen in LazInfos/LazSnippets).

Antworten