OPCB – Object Pascal Component Builder Library

[fabianoallex]

fabianoallex, have you tested your library with pas2js?

https://wiki.freepascal.org/pas2js

I wasn’t familiar with the pas2js library. As soon as I have some time, I’ll study it and run a few tests.

Regarding the previous topic, I’ve been reviewing the use of the With prefix, and indeed, in the Creator classes, it doesn’t fit very well. I’ll create new methods using the Set prefix to replace them, while keeping the old ones marked as deprecated. Thanks for the feedback.

[kirchfritz]

Hi,
can anybody help me?

My Mainform's OnCreate procedure looks like this:

Code: Pascal  [Select][+][-]

1. procedure TForm1.FormCreate(Sender: TObject);
2. begin
3.   Color := clWhite;
4.   SetupDesktop;
5. end;  
6.  

The SetupDesktop procedure looks like this:

Code: Pascal  [Select][+][-]

1. procedure TForm1.SetupDesktop;
2. var
3.   ControlBuilder : TControlCreator;
4. begin
5.   ControlBuilder := TControlCreator.Create;
6.   try
7.     ControlBuilder
8.       .WithOwnerAndParent(Self,Self)
9.       .SetSpace(5,15)
10.       .SubLevel(TControlBuilder.Create(TPanel, FPanel).WithHeight(34).WithCaption('').WithAlign(alTop).Setup(@SetupPanel))
11.          .SubLevel(cpdHorizontal)
12.          .Add(TControlBuilder.Create(TColorSpeedButton)
13.                .WithCaption(#$E700)
14.                .WithWidth(36)
15.                .WithAlign(alLeft)
16.                .WithTag(0)
17.                .WithOnClick(@TabClick)
18.                .Setup(@SetupTab))
19.          .Add(TControlBuilder.Create(TLabel, TitelLabel)
20.               .WithPropSet('Alignment',ord(taCenter))
21.               .WithPropSet('Layout',ord(tlCenter))
22.               .WithProp('borderspacing.left',10)
23.               .WithCaption('PrintOnDemand')
24.               .WithWidth(200)
25.               .WithAlign(alLeft)
26.               .Setup(@SetupTitleFont))
27.          .Add(TControlBuilder.Create(TColorSpeedButton, BookTab)
28.               .WithCaption('Bücher')
29.               .WithWidth(80)
30.               .WithProp('borderspacing.left',20)
31.               .WithAlign(alLeft)
32.               .WithTag(1)
33.               .WithOnClick(@TabClick)
34.               .Setup(@SetupTab))
35.          .Add(TControlBuilder.Create(TColorSpeedButton, PublisherTab)
36.               .WithCaption('Verlage')
37.               .WithWidth(80)
38.               .WithAlign(alLeft)
39.               .WithTag(2)
40.               .WithOnClick(@TabClick)
41.               .Setup(@SetupTab))
42.          .Add(TControlBuilder.Create(TColorSpeedButton,UserTab)
43.               .WithCaption('Benutzer')
44.               .WithWidth(80)
45.               .WithAlign(alLeft)
46.               .WithTag(3)
47.               .WithOnClick(@TabClick)
48.               .Setup(@SetupTab))
49.          .SuperLevel
50.       .SuperLevel
51.       .SetTopLeft(10,10)
52.       .SubLevel(TControlBuilder.Create(TNotebook, FNotebook).WithAlign(alClient))
53.         .SubLevel(TControlBuilder.Create(TPage)
54.           .WithCaption('Dashboard'))
55.           .Add(TControlBuilder.Create(TMemo).WithAlign(alBottom))
56.         .SuperLevel
57.       .SuperLevel
58.   finally
59.     ControlBuilder.Free;
60.   end;
61. end;
62.  
63.  

All of this create a user interface like this (see attachments)

The problem is:
Initialy the sequence of my TColorSpeedButtons is correct.
first there is a MenuButton followed by a TitleLabel, followed by "Bücher", "Verlage", "Benutzer" - ColorSpeedButtons place on a panel

but after resizing the mainform the sequenz of my TColorSpeedButtons changed to
first there is a MenuButton followed by a TitleLabel, followed by "Verlage", "Benutzer", "Bücher" - ColorSpeedButtons place on a panel


Whats wrong with my ControlBuilder-method-chain?

Fritz

[kirchfritz]

find below my "setup"-procedures:

Code: Pascal  [Select][+][-]

1. procedure TForm1.SetupPanel(aControl: TControl);
2. begin
3.   TPanel(aControl).BevelOuter := bvNone;
4.   TPanel(aControl).Color      := $F8F6F4;
5. //  TPanel(aControl).BorderStyle := bsSingle;
6. end;

Code: Pascal  [Select][+][-]

1. procedure TForm1.SetupTitleFont(aControl: TControl);
2. begin
3.   TLabel(aControl).Font.Size  := 16;
4.   TLabel(aControl).Font.Style := [fsBold];
5. end;    
6.  

Code: Pascal  [Select][+][-]

1. procedure TForm1.SetupTab(aControl: TControl);
2. begin
3.   TColorSpeedButton(aControl).GroupIndex := 1;
4.   TColorSpeedButton(aControl).StateNormal.BorderWidth := 0;
5.   TColorSpeedButton(aControl).StateNormal.Color := $F8F6F4;
6.   TColorSpeedButton(aControl).StateHover.BorderWidth := 0;
7.   TColorSpeedButton(aControl).StateActive.BorderWidth := 0;
8.   case TColorSpeedButton(aControl).Tag of
9.     0: TColorSpeedButton(aControl). Font.Name := 'Segoe Fluent Icons';
10.   end;
11. end;  

[fabianoallex]

The problem is:
Initialy the sequence of my TColorSpeedButtons is correct.
first there is a MenuButton followed by a TitleLabel, followed by "Bücher", "Verlage", "Benutzer" - ColorSpeedButtons place on a panel

but after resizing the mainform the sequenz of my TColorSpeedButtons changed to
first there is a MenuButton followed by a TitleLabel, followed by "Verlage", "Benutzer", "Bücher" - ColorSpeedButtons place on a panel


Whats wrong with my ControlBuilder-method-chain?

Fritz

This issue is related to the Align property of controls created at runtime.

When you create controls dynamically and set Align := alLeft, the Left property also needs to be assigned with increasing values in the order you want them to appear on the screen.

If all controls have the same Left value (probably 0, since none was specified), the Form will “randomly” decide their display order when resized.

Try setting the Left of the second control as the Left of the first one plus its Width, the Left of the third as the Left of the second plus its Width, and so on.

[kirchfritz]

I set Left values, but nothing changed.

Code: Pascal  [Select][+][-]

1. procedure TForm1.SetupDesktop;
2. var
3.   ControlBuilder : TControlCreator;
4. begin
5.   ControlBuilder := TControlCreator.Create;
6.   try
7.     ControlBuilder
8.       .WithOwnerAndParent(Self,Self)
9.       .SetSpace(5,15)
10.       .SubLevel(TControlBuilder.Create(TPanel, FPanel).WithHeight(34).WithCaption('').WithAlign(alTop).Setup(@SetupPanel))
11.          .SubLevel(cpdHorizontal)
12.          .Add(TControlBuilder.Create(TColorSpeedButton)
13.                .WithCaption(#$E700)
14.                .WithWidth(36)
15.                .WithAlign(alLeft)
16.                .WithLeft(10)
17.                .WithTag(0)
18.                .WithOnClick(@TabClick)
19.                .Setup(@SetupTab))
20.          .Add(TControlBuilder.Create(TLabel, TitelLabel)
21.               .WithPropSet('Alignment',ord(taCenter))
22.               .WithPropSet('Layout',ord(tlCenter))
23.               .WithProp('borderspacing.left',10)
24.               .WithCaption('PrintOnDemand')
25.               .WithWidth(200)
26.               .WithAlign(alLeft)
27.               .WithLeft(50)
28.               .Setup(@SetupTitleFont))
29.          .Add(TControlBuilder.Create(TColorSpeedButton, BookTab)
30.               .WithCaption('Bücher')
31.               .WithWidth(80)
32.               .WithProp('borderspacing.left',20)
33.               .WithLeft(300)
34.               .WithAlign(alLeft)
35.               .WithTag(1)
36.               .WithOnClick(@TabClick)
37.               .Setup(@SetupTab))
38.          .Add(TControlBuilder.Create(TColorSpeedButton, PublisherTab)
39.               .WithCaption('Verlage')
40.               .WithWidth(80)
41.               .WithLeft(400)
42.               .WithAlign(alLeft)
43.               .WithTag(2)
44.               .WithOnClick(@TabClick)
45.               .Setup(@SetupTab))
46.          .Add(TControlBuilder.Create(TColorSpeedButton,UserTab)
47.               .WithCaption('Benutzer')
48.               .WithWidth(80)
49.               .WithLeft(500)
50.               .WithAlign(alLeft)
51.               .WithTag(3)
52.               .WithOnClick(@TabClick)
53.               .Setup(@SetupTab))
54.          .SuperLevel
55.       .SuperLevel
56.       .SetTopLeft(10,10)
57.       .SubLevel(TControlBuilder.Create(TNotebook, FNotebook).WithAlign(alClient))
58.         .SubLevel(TControlBuilder.Create(TPage)
59.           .WithCaption('Dashboard'))
60.           .Add(TControlBuilder.Create(TMemo).WithAlign(alBottom))
61.         .SuperLevel
62.       .SuperLevel
63.   finally
64.     ControlBuilder.Free;
65.   end;
66. end;                  
67.