Lazarus

Using the Lazarus IDE => Designer => Topic started by: tr_escape on September 11, 2018, 12:52:11 pm

Title: Suggestion about desinger guide line spacer
Post by: tr_escape on September 11, 2018, 12:52:11 pm
Hello,

Is there any work around about Delphi component spacer like as in the attached figure?

Ofcourse sometimes this method can be not effective but it helps for tidy design.

Best regards

Lazarus 1.9.0 r58688 FPC 3.1.1 i386-win32-win32/win64
Title: Re: Suggestion about desinger guide line spacer
Post by: ASerge on September 11, 2018, 04:38:50 pm
Is there any work around about Delphi component spacer like as in the attached figure?
And is it necessary? As seen in the picture text for Memo and Button at different heights.
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 11, 2018, 04:50:14 pm
But designer holds automaticly when you try to move button component to the memo.

If you still move the button to memo component designer breaks your movement.

IMHO it will be helps for form design timing.
Title: Re: Suggestion about desinger guide line spacer
Post by: ASerge on September 11, 2018, 05:05:45 pm
But designer holds automaticly when you try to move button component to the memo.
How is that better than the aligning by borders?
Title: Re: Suggestion about desinger guide line spacer
Post by: wp on September 11, 2018, 05:18:26 pm
The only time when I am missing this feature is when horizontally aligning a label to an edit: The IDE easily alignes the edit to the top or bottom of the edit which means that the text of the edit and the caption of the label are at different heights.  But now I am working a lot with the Anchor Editor where I can vertically center the label with respect to the edit, and this looks fine.

A problem with the alignment line appears to me that they seem to be correct only for the current font. But when a cross-platform application runs under another widget set usually there are different fonts which have different ascenders and descenders making the form look bad. I have not seen this when the label is centered to the edit with the Anchor Editor.
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 11, 2018, 06:25:38 pm
I think there is a misunderstanding that I think I couldn't share picture what I meaning.

If you look zoom that figure there is some space about 4 pixel between both component.

Designer holding my movement when I try to move near by memo.
Other way user have align by first component.


I will explain with an gif or small video what I mean.
Title: Re: Suggestion about desinger guide line spacer
Post by: lucamar on September 11, 2018, 07:21:17 pm
I'm not sure I'm following you, either, but just in case this is what you want ...

When you align components you must be aware that the intrinsic border of the control plays a role too. In your case, the (widgetset dependent) border of the memo is a simple line, while the border of the button is a bit more complex (and fatter). What this means is that, aligned on top, the caption of the button will naturally be a little lower than the first line of the memo.

There is little you can do about this, since it's all system-dependent, i.e. it depends on the operating sytem, the widget-set, the desktop manager, the desktop theme, ... most of which is outside and independent of your program.

Regarding this:
Designer holding my movement when I try to move near by memo.
Other way user have align by first component.

May it be that you have "snap to grid" selected for control-positioning? Or maybe the button and/or memo have some BorderSpacing set?
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 11, 2018, 07:41:47 pm
So,

It is OK I created a gif file that in that site:

https://gph.is/2QoW4bk (https://gph.is/2QoW4bk)

Yes snap to grid is also good but I am not using long time.

You will see some guide lines when you move components on the form.

Also I added some new figure you will see details of the snap lines


Title: Re: Suggestion about desinger guide line spacer
Post by: ASerge on September 11, 2018, 09:55:07 pm
It is OK I created a gif file that in that site:
The only difference with Lazarus is the extra inner lines in the center. Is that all?
Title: Re: Suggestion about desinger guide line spacer
Post by: HeavyUser on September 11, 2018, 10:00:41 pm
It is OK I created a gif file that in that site:
The only difference with Lazarus is the extra inner lines in the center. Is that all?
yes that makes a big difference on the speed of design of forms and standardizes the placement of controls to a huge extended.
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 11, 2018, 10:26:49 pm
It is OK I created a gif file that in that site:
The only difference with Lazarus is the extra inner lines in the center. Is that all?

Ofcourse it may as an option because of general usage habit of actual users.
Title: Re: Suggestion about desinger guide line spacer
Post by: JuhaManninen on September 12, 2018, 12:28:46 am
It is OK I created a gif file that in that site:
https://gph.is/2QoW4bk (https://gph.is/2QoW4bk)
The video or the pictures show nothing about the text aligning snap lines that you had in the first post. Is it intentional?

The arguments against such text aligning lines are valid. The results would not be consistent between different widgetsets and fonts.
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 12, 2018, 07:02:39 am
It is OK I created a gif file that in that site:
https://gph.is/2QoW4bk (https://gph.is/2QoW4bk)
The video or the pictures show nothing about the text aligning snap lines that you had in the first post. Is it intentional?

The arguments against such text aligning lines are valid. The results would not be consistent between different widgetsets and fonts.

Actually I never talked about text alignment but the pink line of the first figure is drove the lazarus team to different way. Sorry about that. :)
But also I would prefer if you able to align by the text too :)


Title: Re: Suggestion about desinger guide line spacer
Post by: JuhaManninen on September 12, 2018, 07:34:28 am
Actually I never talked about text alignment but the pink line of the first figure is drove the lazarus team to different way. Sorry about that. :)
But also I would prefer if you able to align by the text too :)
To my understanding the pink line in Delphi aligns text in those controls. In Lazarus designer the lines only align edges of controls.
Title: Re: Suggestion about desinger guide line spacer
Post by: AFFRIZA 亜風実 on September 12, 2018, 09:51:04 am
I think that's a not bad idea!  :)
To align TLabel to center to the TEdit in Lazarus I need to type the Top property manually, but that's okay. That's not a something annoys me  :-[

I don't think it will be broken in another widget set, mostly anchor guided it when the font size changed, isn't it?

Edit: sorry. When I think again, it will not work in a different widget set, because of the space between font and border may different. Hmmm... There's no alternative for this idea for now I think.

(Sorry for my broken English  :-\ )
Title: Re: Suggestion about desinger guide line spacer
Post by: wp on September 12, 2018, 10:32:47 am
It is less fluent to use, and in complex forms it is terrible to understand the dependencies between aligned controls because it is no longer possible to drag controls with the mouse, but the easiest way to solve alignment requirements is to use the Anchor Editor. I was scared of it for a long time, but once I understood its principle, I use it almost all the time. It is to easiest way to create cross-platform and multi-language applications.

E.g: http://wiki.freepascal.org/Anchor_Sides
Title: Re: Suggestion about desinger guide line spacer
Post by: JuhaManninen on September 12, 2018, 11:48:37 am
To align TLabel to center to the TEdit in Lazarus I need to type the Top property manually
What do you mean? You don't need to type anything when anchoring and aligning controls.
Title: Re: Suggestion about desinger guide line spacer
Post by: tr_escape on September 12, 2018, 12:45:45 pm
Anchor side is good but also I would prefer another feature that resize by percentage:

Normally we can do it by code ofcourse but I would prefer by form design:

Code: Pascal  [Select][+][-]
  1.  
  2. procedure TfrmMain.FormResize(Sender: TObject);
  3. begin
  4.   // pnl_Top.Height:=Round(frmMain.Height * 0.08);
  5.   pnl_Bottom.Height:=Round(frmMain.Height * 0.20);
  6.  
  7.   pnl_Left1.Width:=Round(frmMain.Width * 0.10);
  8.   pnl_Left2.Width:=Round(frmMain.Width * 0.10);
  9.   pnl_Right1.Width:=Round(frmMain.Width * 0.10);
  10.   pnl_Right2.Width:=Round(frmMain.Width * 0.10);
  11.  
  12.   Button1.Width:=round(pnl_Top.Width * 0.10);
  13.   Button2.Width:=round(pnl_Top.Width * 0.10);
  14.   Button3.Width:=round(pnl_Top.Width * 0.10);
  15.   Button4.Width:=round(pnl_Top.Width * 0.10);
  16.   Button5.Width:=round(pnl_Top.Width * 0.10);
  17.  
  18.   Button6.Width:=round(pnl_Top.Width * 0.10);
  19. end;
  20.  

But ofcourse there is no full scaleable form design. (maybe firemonkey is exception)
Title: Re: Suggestion about desinger guide line spacer
Post by: andresayang on September 16, 2018, 09:02:00 pm
Hi all,

Isn't exactly what I already ask for here: http://forum.lazarus-ide.org/index.php/topic,39735.0.html (http://forum.lazarus-ide.org/index.php/topic,39735.0.html)

Cheers
Title: Re: Suggestion about desinger guide line spacer
Post by: Yukiko on October 08, 2018, 02:03:23 am
I appreciate and use the guide lines in the Designer but there have been a few times when I can see having "custom" guide lines might be useful.

I used to do desktop publishing and the program we had, Page Maker, had horizontal and vertical guide lines that could be dragged in from the edges of the page to aid in alignment. Dragging from the edge of a form is probably not possible but perhaps there would be a way a user could overlay and position their own guides on a form. The way positioning the guides worked in Page Maker was you would place the mouse cursor on the guide line and the cursor would change to arrows pointing either left and right or up and down depending on the orientation of the guide and you would click-drag the line where you wanted it.

Just a thought.
TinyPortal © 2005-2018