Mechanizm kotwic/anchors

Odpowiedz Nowy wątek
2019-11-06 09:52
1

Parę dni temu podczas rozmowy z @furious programming poruszyliśmy temat kotwic/anchors. Dla osób niewtajemniczonych - jest to mechanizm, który pozwala na dynamiczne (i oczywiście - całkowicie automatyczne) skalowanie i przesuwanie elementów okna. Możemy wskazać, względem czego mają się skalować (względem okna, ale równie dobrze innych elementów), jakie mają posiadać marginesy, w jaki sposób się wyrównywać, można robić "łańcuszki" zależności itp.

Kiedyś, kiedy jeszcze siedziałem na Delphi, miałem z tym styczność, ale jakoś ten mechanizm nie przemawiał do mnie, przez co mi zostało przekonanie, żeby z tego nie korzystać, w związku z czym w Lazarusie nie ruszałem tej opcji. Ostatnio (dzięki FP) rzuciłem na to okiem i się mocno zdziwiłem.

Na poniższych obrazkach widać, jak anchors wygląda w Delphi (pierwszy screen) oraz w Lazarusie (drugi obrazek). Różnica jest ogromna. Właściwie to w Delphi (praktycznie najnowszej wersji - 10.2) można jedynie ustawić TRUE/FALSE dla poszczególnych kotwic (lewo, prawo itp.), natomiast Lazarus oferuje o wieeeele więcej. I pytanie - czy ja nie wiem, jak się dostać do analogicznej funkcjonalności w Delphi, czy może pod względem mechanizmu kotwiczenia komponentów, Lazarus masakruje swojego większego, starszego i bardziej dojrzałego kuzyna? ;)

Delphi:
title
.
Lazarus:
screenshot-20191106094743.png


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-11-06 15:57

Pozostało 580 znaków

2019-11-06 21:25
1

W Lazarusie poradzono sobie z kotwiczeniem podobnych do TLabeledEdit kontrolek TEditButton oraz TDateEdit, ponieważ przerobiono je na oparte na TCustomControl. Wcześniej był ten sam problem, co w TLabeledEdit.
TLabeledEdit jest oparte na TCustomEdit, gdzie Label jest zakotwiczony do TEdit.
Może za jakiś czas przerobią w podobny sposób kontrolkę TLabeledEdit

edytowany 1x, ostatnio: skrzat, 2019-11-06 21:26
Dokładnie, tyle że TEditButton nie miał być kompatybilny z Delphi, więc napisano go po ludzku. ;) - furious programming 2019-11-07 00:21

Pozostało 580 znaków

2019-11-07 09:04
1

@furious programming co do jednego ma rację - pisanie kodu w zdarzeniu typu onResize to relikt przeszłości. Layout ma być responsywny i sam układać się odpowiednio Jeśli ktoś widział, jak projektuje się layouty w nowszych technologiach, jak wpf albo w aplikacjach mobilnych, ten wie o czym mówię. Niekiedy wręcz odchodzi się nawet od jawnego podawania rozmiarów kontrolek, mają ustawić się w oknie i same przeskalować, a wszystko bez pisania kodu.

Te kotwice w Lazarusie to mały krok w dobrym kierunku. Jeszcze nie to, co np ConstraintLayout w Androidzie, ale lepsze to, niż klepanie na małpę gównokodu w onResize. Koncepcja kotwic jest o tyle mało elastyczna, że nie pozwala definiować wzajemnych relacji pomiędzy każdą konkretną kontrolką i/lub krawędziami formularza (jeśli dobrze zrozumiałem)

Gdyby kogoś ciekawiło, jak np Google rozwiązał ten problem: https://developer.android.com/training/constraint-layout

Koncepcja kotwic i ograniczników (czyli Anchors + AnchorSide + Constraints) pozwala na to samo co ConstraintLayout. Z tego co zauważyłem to jedynym jego ograniczeniem w tym porównaniu jest brak obsługi zawijania komponentów gdy cały ich rządek się nie mieści w oknie. - furious programming 2019-11-08 02:43

Pozostało 580 znaków

2019-11-07 09:22
0

@wloochacz: wczoraj już na forum nie zajrzałem, w międzyczasie watek trochę poszedł do przodu, a ja nabrałem dystansu do sprawy ;) W związku z czym mam propozycję/pytanie - czy zamiast przepychanki, możemy zacząć jeszcze raz?

Jeśli tak, to ja pierwszy ;)

za pomocą masakrującego mechanizmu w Lazarusie?

Co konkretnie miałeś na myśl odnośnie tego, że mechanizm jest masakrujący?

Anchors niczego i nie skaluje. Utrzymuje rozmiar kontrolki względem jej krawędzi, przez co ona będzie większa (np. panel czy inny grid) ale nie będzie przeskalowana.

OK, kwestia nazwania, może użyłem błędnego określenia. W każdym razie - żeby była jasność: chodzi mi o efekt, w którym podczas zmiany rozmiaru okna, jego elementy składowe dynamicznie reagują na zmiany, poprzez przeskalowanie się czy "przyklejenie" do brzegu okna, albo innego elementu. Może nie jest to "prawdziwe" skalowanie, ale w zakresie tego, czego oczekuję (czyli zmiany rozmiaru i/lub położenia) mechanizm oferowany przez Lazarusa działa zgodnie z moimi oczekiwaniami.

nie odpowiada za to Anchor bezpośrednio a pośrednio, ponieważ utrzymuje rozmiar kontrolki względem innych.

Wyjaśnij proszę, jakie to ma znaczenie, jak ten mechanizm działa "pod spodem"? Bo może czegoś nie rozumiem i masz rację, ale na chwilę obecną sytuacja wygląda (z mojego punktu widzenia) następująco: ustawiam sobie kotwiczenie, w którym określam, jak okno ma się zachować. I (co jest bardzo istotne) rozumiem, jak działa to narzędzie, umiem uzyskać pożądany efekt. W związku z czym, co zmienia fakt, czy anchor coś ustawia/przełącza pośrednio, czy bezpośrednio?

Dla mnie jest to jeden z mechanizmów oferowanych przez LCL/VCL. Analogicznie, można by było rozważać jak np. działa constraints - czy bezpośrednio, wykorzystuje API systemu, a może przechwytuje obsługę komunikatu związanego ze zmianą rozmiaru i nie pozwala na wyjście poza zakres? Szczerze mówiąc nie wiem, jak jest zaimplementowany mechanizm coinstraints, tak samo jak nie wiem, w jaki sposób "pod maską" działa anchor. Tak samo jak nie wiem, co dokładnie się dzieje, gdy zmieniam caption okienka. Ale moim zdaniem nie muszę tego wiedzieć, bo to są mechanizmy wyższego poziomu, oferowane przez środowisko, na których można się opierać i wcale nie trzeba rozumieć, co się dokładnie dzieje w chwili, w której się z nic skorzysta. Oczywiście - ta wiedza może się czasem przydać, ale nie jest konieczna.

W każdym razie - nie wiem, na jakiej zasadzie (od strony technicznej implementacji) działają kotwice, ale wiem, jak się powinno z nich korzystać. Czy to jest coś złego?

włącz skalowanie okna, a najprawdopodobniej bardzo szybko je wyłączysz

Być może, ale nie o tym teraz gadamy. Jak pisałem pod drugim cytatem - mi chodzi niekoniecznie o efekt "prawdziwego" skalowania, ale o mechanizm dostarczony w ramach funkcjonalności kotwic. "Prawdziwego" skalowania nie planuję uruchamiać, a nawet jakbym kiedyś do tego przysiadł, to powtórzę - nie tego dotyczy ten wątek.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

2019-11-07 09:56
2
[Meini napisał(a)

Te kotwice w Lazarusie to mały krok w dobrym kierunku. Jeszcze nie to, co np ConstraintLayout w Androidzie, ale lepsze to, niż klepanie na małpę gównokodu w onResize. Koncepcja kotwic jest o tyle mało elastyczna, że nie pozwala definiować wzajemnych relacji pomiędzy każdą konkretną kontrolką i/lub krawędziami formularza (jeśli dobrze zrozumiałem)

Źle zrozumiałeś, bo właśnie anchor editor w Lazarusie to ustawienie relacji między kontrolkami i krawędziami formularza

ja bym raczej napisał między kontrolkami I/LUB krawędziami formularza - cerrato 2019-11-07 10:32
Trochę niejasno się wyraziłem, chodziło o to, że każda konkretna kontrolka może mieć relację albo z inną konkretną kontrolką, albo z krawędzią okna, nie zrozumiałem do końca czy te kotwice Lazarusa umożliwiają coś takiego, czy nie. - Meini 2019-11-07 11:39
@Meini: dokładnie to umożliwiają. - furious programming 2019-11-07 16:22

Pozostało 580 znaków

2019-11-07 11:43
0

Trochę niejasno się wyraziłem, chodziło o to, że każda konkretna kontrolka może mieć relację albo z inną konkretną kontrolką, albo z krawędzią okna, nie zrozumiałem do końca czy te kotwice Lazarusa umożliwiają coś takiego, czy nie

Dlatego w pierwszym poście umieściłem screen z lazarusowego edytora kotwic, w którym specjalnie rozwinąłem listę "sibling" dla górnego kotwiczenia. Widać, że na liście da się wskazać, do czego dana kontrolka ma się doczepić, Można więc ją kotwiczyć względem okienka (Form1), ale także da się to połączyć z Button1, czyli inną kontrolką.

Można także określić jeden z 3 sposobów wyrównania - wyrównanie do środka, górnej krawędzi albo "jedno pod drugim", można także wskazać odstęp między kontrolkami (odpowiednik webowego margin używanego w CSS)


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2019-11-07 11:45

Pozostało 580 znaków

2019-11-07 15:25
1

Ciekawa dyskusja, nigdy tych kotwic nie używałem, ale w końcu chciałbym by w moich programach wszystko skalowało/zmieniało rozmiary automatycznie, taki "responsive design" dla aplikacji desktopowych:)

Pozostało 580 znaków

2019-11-07 15:31
1

nigdy tych kotwic nie używałem, ale w końcu chciałbym by w moich programach wszystko skalowało/zmieniało rozmiary automatycznie

No to dzięki wujkowi @cerrato masz okazję zapoznać się z nowym, bardzo przydatnym ( w mojej ocenie) mechanizmem ;)

A tak poważnie - jak pisałem, sam wcześniej miałem styczność z tym, jak to było zrobione w Delphi, a później (za namową @furious programming) przyjrzałem się temu rozwiązaniu w Lazarusie i jestem pod jego wrażeniem. A jeśli rzeczywiście jest to wersja rozwojowa, która będzie dopieszczana i poszerzana, to tylko wypada się cieszyć i z niecierpliwością czekać na więcej ;)


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2019-11-07 15:33

Pozostało 580 znaków

2019-11-07 16:36
2

Nie lubię słowa „responsywny” – zostało już nieziemsko wyświechtane przez webowych głupków i kojarzy mi się jedynie z krowiastymi stronami internetowymi, ładującymi się pół godziny i marnującymi miejsce na ekranie poprzez wyświetlanie właściwej treści w kolumnie o szerokości 30% ekranu. To nie jest rosponsywność, to żenada do kwadratu. A zwróć takiemu uwagę, że interfejs to kpina, to ci powie, że nie masz pojęcia o projektowaniu UI. :/


Jeśli mowa o Lazarusie to o ile edytor kotwic pozwala wszystko dość łatwo ustawić, o tyle wolałbym jego funkcjonalność zaimplementować bezpośrednio w designerze, tak abym nie musiał obsługiwać dwóch okien (designera i edytora kotwic) i kontrolki wybierać z comboboxów. Ale póki co nie mam konkretnego pomysłu na to jak miało by to wyglądać, więc niczego deweloperom nie sugeruję (tylko pipetę zasugerowałem, o której wspomniałem w poście gdzieś wyżej).

To czego na pewno brakuje to funkcjonalność zawijania komponentów, jeśli nie mieszczą się w jednej linii w komponencie-rodzicu (albo oknie). Obecnie można to rozwiązać za pomocą TFlowPanel, no ale to jednak tylko obejście problemu. Mam nadzieję, że taka funkcjonalność się w przyszłości pojawi i że dosłownie pełne zachowanie interfejsu będzie można wyklikać, bez konieczności pisania kodu.


edytowany 5x, ostatnio: furious programming, 2019-11-07 16:46

Pozostało 580 znaków

2019-11-08 06:48
1
furious programming napisał(a):

...
Jeśli mowa o Lazarusie to o ile edytor kotwic pozwala wszystko dość łatwo ustawić, o tyle wolałbym jego funkcjonalność zaimplementować bezpośrednio w designerze, tak abym nie musiał obsługiwać dwóch okien (designera i edytora kotwic) ...

Nie wiem czy o to Tobie chodzi, ale po zainstalowaniu pakietów "AnchorDocking" i "Sparta DockedFormEditor" możesz osiągnąć poniższy efekt:
screenshot-20191108064826.png


pozdrawiam
paweld

Pozostało 580 znaków

2019-11-08 07:46
0

@Paweł Dmitruk: wiem, ale nie chcę używać wymienionych pakietów i nie o taki efekt mi chodziło. ;)

Miałem na myśli implementację całego edytora kotwic wewnątrz designera, gdzie po zaznaczeniu komponentu pojawiały by się opcje dotyczące zakotwiczania, offsetów i marginesów, tak aby kontrolki do ustawiania tych wszystkich opcji były wokół zaznaczonego komponentu. Wszystko po to, aby nie trzeba było jeździć kursorem po całym ekranie, a tylko w obrębie designera.

Ale te dodatkowe ficzery nie pokazywały by się po zwykłym zaznaczeniu komponentu, bo to by przeszkadzało, a po kolejnym kliknięciu na już zaznaczony komponent – np. Inkscape ma różne opcje dotyczące rozciągania po pierwszym kliknięciu na kształt, a inny zestaw po drugim. Coś takiego bym widział w designerze.


edytowany 1x, ostatnio: furious programming, 2019-11-10 18:39

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0