Step 4 - Set Size and Alignment (Object Pascal)
To test this particular component, the buttons need to be placed in a form opened as a modal dialog box with ShowModal.
- Activate the PanelTester.exe project, and open the main form, PanelTest.pas. This form opens the dialog form.
- Rename the class (auto-generated as Form1) to TPanelTestForm with Refactor > Rename. That also automatically changes the global reference variable to
- Then in TestDialog.pas, rename the form (Form2) to TTestDialogForm so that its reference is
- Switch the dialog form to the Form Designer. Drop a TDialogButtonPanel, found under the Samples category in the Tool Palette, onto the form.
- Note that the panel is neither correctly sized nor bottom-aligned. This is because:
- The size and alignment of the control that is created is separate from the style-resource component that is used to render it.
- So even though the root style-resource (the TRectangle) is set to Bottom, in most cases you would not want that because the style-resource is a child of the control, and you would not want the visual realization of that control to be restricted to some part of it, no matter how you try to resize or align the control.
- When style-resources are applied, their Align property is always set to Contents, so that the style-resources occupy the entire content box of the control they are rendering.
- But what you actually want to do is set the Align property of the custom component, not its style-resource. To do that, declare and implement a constructor. Also declare the default value for the property, and set the Height and Width (with Bottom the Width does not actually matter, but you can set it to a representative minimum):
public constructor Create(AOwner: TComponent); override; published property Align default TAlignLayout.Bottom;
constructor TDialogButtonPanel.Create(AOwner: TComponent); begin inherited; Height := 46; Width := 300; Align := TAlignLayout.Bottom; end;
- 5. To see these changes, re-install the component package: right-click the package project in the Project Manager and select Install again.
- 6. Then back in the dialog box form, delete the component and add another from the palette. The panel should now be properly sized and aligned.
- 7. To see your component in action, go back to the main form and drop a button (to open the dialog box) and a label (to see the modal result code).
- 8. Set the OnClick event handler for the button, as follows:
uses TestDialog; procedure TPanelTestForm.Button1Click(Sender: TObject); var ModalResult: Integer; begin ModalResult := TestDialogForm.ShowModal; Label1.Text := IntToStr(ModalResult); end;
- 9. Now run the PanelTester.exe project and click the button to open the dialog box. Clicking any of its three buttons closes the dialog box, and returns the corresponding modal result.