From Clomosy Docs
When you create forms in the Form designer at design time, they are implemented as descendants of TclForm. Forms can represent the application's main window, or dialog boxes. A form can contain other objects, such as TclButton, TclCheckBox, and TclComboBox objects.
Let's start with creating a new blank form. The parameter we need to use to create the form will be "TclForm". It is the variable name that we defined as "MyForm" in the example. You can define the variable name however you want. In this way, we define the form. We should write our codes in the Main Code section of our project.
var
MyForm:TclForm;
Now that we have done the definition process, we need to call and run it in the application. In this way, as soon as the project is clicked, an empty form page will appear.
begin
MyForm := TclForm.Create(Self);
MyForm.Run;
end;
After that, you can make your designs suitable for your project in the Form.
Code:
var MyForm:TclForm;
begin MyForm := TclForm.Create(Self); MyForm.Run; end;
Output:
File:FormCreating.png
Form Background Property
In the project, it is possible to add a picture to the background of the form, add a single color or more than one color to give it a gradient feature. So how can we do this?
A form must be defined for this. Then the necessary parameters to add a picture and color for the form background;
For color: SetFormColor(‘1.color’,’2.color’,clGParam)
- Color parameters:
- clGNone: Used for uniform color
- clGVertical: It gradients vertically.
- clGHorizontal: It makes a horizontal gradient.
- clGCross: It makes a diagonal gradient.
For image: SetFormBGImage(‘imageURL’)
Let's activate the form background feature by adding a single color.
var MyForm:TclForm;
begin MyForm := TclForm.Create(Self); MyForm.SetFormColor('#CBEDD5','',clGNone); MyForm.Run;
end;
Output:
File:FormColor.png
Now let's add two colors into the form. For this, you can just make the "clGNone" field one of the parameters clGVertical-clGHorizontal-clGCross and add the second color. You can use it by defining it this way.
var MyForm:TclForm;
begin MyForm := TclForm.Create(Self); MyForm.SetFormColor('#CBEDD5','#E6E2C3',clGVertical); MyForm.Run;
end;
Output:
File:FormColorVertical.png
We learned the form coloring feature. Now let's add an image to the form background. We will use the "SetFormBGImage" parameter for this and you only need to enter the url address of the image.
var MyForm:TclForm;
begin MyForm := TclForm.Create(Self); MyForm.SetFormBGImage('https://clomosy.com/theme/SurveyStyle5.png');
MyForm.Run;
end;
Output:
File:FormBGImage.png
Sample:
Music application home screen design example has been made. Here, a simple design was made by adding a picture to the background. In this way, you can create design screens suitable for the project you want.
Code:
var MyForm:TclForm; testImg : TclImage; testBtn : TclProButton; testLabel : TclLabel;
procedure BtnOnClick begin ShowMessage('LISTEN'); end;
begin MyForm := TclForm.Create(Self);
testLabel:= MyForm.AddNewLabel(MyForm,'testLabel','MUSIC APP'); testLabel.StyledSettings := ssFamily; testLabel.TextSettings.Font.Size:=60; testLabel.TextSettings.FontColor := clAlphaColor.clHexToColor('#FAF8F1'); testLabel.Align := alTop; testLabel.Margins.Left:= 30; testLabel.Margins.Top:= 50; testLabel.Height := 70; testLabel.Width := 150; MyForm.SetFormBGImage('https://cdn.wallpapersafari.com/65/32/GhZHFt.png');
testImg:= MyForm.AddNewImage(MyForm,'testImg'); testImg.Align := alTop; testImg.Height := 120; testImg.Width := 120; testImg.Margins.Top:=130; testImg.Margins.Left:=40; MyForm.setImage(testImg,'https://cdn-icons-png.flaticon.com/128/2753/2753289.png');
testBtn := MyForm.AddNewProButton(MyForm,'testBtn',''); clComponent.SetupComponent(testBtn,'{"Align" : "Bottom","MarginBottom":50,"MarginLeft":30,"Width" :110,"Height":90}');
MyForm.SetImage(testBtn,'https://pngimage.net/wp-content/uploads/2018/06/seta-png-branca-4-300x200.png'); MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick'); MyForm.Run; end;
