From Clomosy Docs
No edit summary
Line 1: Line 1:
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.<br>
Forms are fundamental building blocks for creating user interfaces in Clomosy applications. Forms contain visual objects (controls) and their associated events.<br>
Mobile applications are being developed through the forms. The first created form becomes the main form of the project. Visual or non-visual objects are placed on the main form to design the interface for end users.<br>
Just like in desktop applications, multiple forms can be used in a multi-platform project structure. Each created form is sized according to the height and width of the selected device display.<br>
 
 
To create a standard form, an instance of the TclForm class is first defined.<br>
<pre>
var
Form1 : TclForm;
</pre>
 
The defined object must be created using the "Create" function.<br>
<pre>
{
  Form1 = TCLForm.Create(Self);
}
</pre>
 
The "Run" property is used to make the created form functional on the screen.<br>
<pre>
{
  Form1 = TCLForm.Create(Self);
  Form1.Run;
}
</pre>
If used correctly, a screen like the one below will appear.<br>
 
[[File:FormScreenV1.0.png|frameless|350px]]<br>
 
When a standard form is created, the back button, menu, and loading button (spinner) are automatically available on the top bar from the Clomosy system.<br>
 
[[File:FormLytTopBarV1.0.png|frameless|350px]]<br>
This top bar is referred to as "LytTopBar."<br>
* 1: It is the back button, and it is named "BtnGoBack."
* 2: It is the loading button, and it is named "FormWaiting."
* 3: It is the menu button, and it is named "BtnFormMenu."
The "LytTopBar" can be closed if desired. To do this, the following code should be executed.<br>
<pre>
TclButton(Form1.clFindComponent('LytTopBar')).Visible = False;//True
</pre>
 
The components contained within the "LytTopBar" can be closed individually without closing the bar itself.<br>
*<b>To close "BtnGoBack";</b><br>
<pre>
TclButton(Form1.clFindComponent('BtnGoBack')).Visible = False;
</pre>
 
*<b>To close "BtnFormMenu";</b><br>
<pre>
TclButton(Form1.clFindComponent('BtnFormMenu')).Visible = False;
</pre>
 
*<b>To close "FormWaiting";</b><br>
<pre>
TclButton(Form1.clFindComponent('FormWaiting')).Visible = False;
</pre>
The loading duration of the "FormWaiting" button can be specified. This is done using the StartProcessMessages procedure, and the duration must be written in milliseconds. For example, if you want to display loading for 5 seconds;<br>
<pre>
Form1.StartProcessMessages(5000);
</pre>
To stop the loading state, the following command is executed.<br>
<pre>
Form1.StopProcessMessages;
</pre>
 
<h2> Form Creating </h2>
If the ready-made forms are not sufficient for your project while designing in your application, you can create custom forms. So how do we make these designs?<br>
See the following pages for their definition and explanation.
 
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Form Name !! style="background-color: #c3d7e0"|Explanation
|-
| <u>[[TclGuideForm]]</u> || A customized guide form is created.
|-
| <u>[[TclGameForm]]</u> || Game forms are created.
|-
| <u>[[TclDrawForm]]</u> || It is a form that can perform special drawing and graphic operations.
|-
| <u>[[TclStyleForm]]</u> || It is a form for customizing the appearance and behavior of a form.
|}
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Let's start with creating a new blank form. The parameter we need to use to create the form will be <span style="color:red">"TclForm"</span>. 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.


<blockquote style="background-color:#F7F5EB">
'''var'''<br>
MyForm:TclForm;
</blockquote >


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.


:'''Base Syntax'''
<blockquote style="background-color:#F7F5EB">
'''begin'''<br>
MyForm := TclForm.Create(Self);<br>
MyForm.Run;<bR>
'''end;'''<br>
</blockquote>
:'''TRObject Syntax'''
<blockquote style="background-color:#F7F5EB">
'''{'''<br>
MyForm = TclForm.Create(Self);<br>
MyForm.Run;<bR>
'''}'''<br>
</blockquote>


After that, you can make your designs suitable for your project in the Form.<br>


'''Output:'''<br>
[[File:FormCreating.png|frameless|450px]]
<br>
= Form Background Property =
= 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?<br>
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?<br>

Revision as of 11:39, 5 November 2024

Forms are fundamental building blocks for creating user interfaces in Clomosy applications. Forms contain visual objects (controls) and their associated events.
Mobile applications are being developed through the forms. The first created form becomes the main form of the project. Visual or non-visual objects are placed on the main form to design the interface for end users.
Just like in desktop applications, multiple forms can be used in a multi-platform project structure. Each created form is sized according to the height and width of the selected device display.


To create a standard form, an instance of the TclForm class is first defined.

var 
 Form1 : TclForm;

The defined object must be created using the "Create" function.

{
  Form1 = TCLForm.Create(Self);
}

The "Run" property is used to make the created form functional on the screen.

{
  Form1 = TCLForm.Create(Self);
  Form1.Run;
}

If used correctly, a screen like the one below will appear.

FormScreenV1.0.png

When a standard form is created, the back button, menu, and loading button (spinner) are automatically available on the top bar from the Clomosy system.

FormLytTopBarV1.0.png
This top bar is referred to as "LytTopBar."

  • 1: It is the back button, and it is named "BtnGoBack."
  • 2: It is the loading button, and it is named "FormWaiting."
  • 3: It is the menu button, and it is named "BtnFormMenu."

The "LytTopBar" can be closed if desired. To do this, the following code should be executed.

TclButton(Form1.clFindComponent('LytTopBar')).Visible = False;//True

The components contained within the "LytTopBar" can be closed individually without closing the bar itself.

  • To close "BtnGoBack";
TclButton(Form1.clFindComponent('BtnGoBack')).Visible = False;
  • To close "BtnFormMenu";
TclButton(Form1.clFindComponent('BtnFormMenu')).Visible = False;
  • To close "FormWaiting";
TclButton(Form1.clFindComponent('FormWaiting')).Visible = False;

The loading duration of the "FormWaiting" button can be specified. This is done using the StartProcessMessages procedure, and the duration must be written in milliseconds. For example, if you want to display loading for 5 seconds;

Form1.StartProcessMessages(5000);

To stop the loading state, the following command is executed.

Form1.StopProcessMessages;

Form Creating

If the ready-made forms are not sufficient for your project while designing in your application, you can create custom forms. So how do we make these designs?
See the following pages for their definition and explanation.

Form Name Explanation
TclGuideForm A customized guide form is created.
TclGameForm Game forms are created.
TclDrawForm It is a form that can perform special drawing and graphic operations.
TclStyleForm It is a form for customizing the appearance and behavior of a form.











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.

Base Syntax
var
MyForm:TclForm;

begin
MyForm := TclForm.Create(Self);
MyForm.SetFormColor('#CBEDD5','',clGNone);
MyForm.Run;

end;
TRObject Syntax
var
MyForm:TclForm;

{
MyForm = TclForm.Create(Self);
MyForm.SetFormColor('#CBEDD5','',clGNone);
MyForm.Run;

}

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.

Base Syntax
var
MyForm:TclForm;

begin
MyForm := TclForm.Create(Self);
MyForm.SetFormColor('#CBEDD5','#E6E2C3',clGVertical);
MyForm.Run;

end;
TRObject Syntax
var
MyForm:TclForm;

{
MyForm = TclForm.Create(Self);
MyForm.SetFormColor('#CBEDD5','#E6E2C3',clGVertical);
MyForm.Run;

}

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.

Base Syntax
var
MyForm:TclForm;

begin
MyForm := TclForm.Create(Self);
MyForm.SetFormBGImage('https://clomosy.com/theme/SurveyStyle5.png');

MyForm.Run;

end;
TRObject Syntax
var
MyForm:TclForm;

{
MyForm = TclForm.Create(Self);
MyForm.SetFormBGImage('https://clomosy.com/theme/SurveyStyle5.png');

MyForm.Run;

}

Output:
File:FormBGImage.png

Object Types

Fields

Feature Use of Definition
BtnFormMenu TclButton(MainForm.clFindComponent('BtnFormMenu')).Visible := False; //True
TclButton(MainForm.clFindComponent('BtnFormMenu')).Click;		 The visibility of the menu button on the form can be toggled, and its clickability can be enabled or disabled.
BtnFormPictureShare TclButton(MainForm.clFindComponent('BtnFormPictureShare')).Visible := False; //True
TclButton(MainForm.clFindComponent('BtnFormPictureShare')).Click;		 The visibility of the share button is enabled, and clicking it can be triggered.
BtnGoBack TclButton(MainForm.clFindComponent('BtnGoBack')).Visible := False;//True
TclButton(MainForm.clFindComponent('BtnGoBack')).Click;		 The visibility of the back button on the form can be toggled, and its clickability can be enabled or disabled.
clCanClose MainForm.clCanClose := false; //True If this method is given a value of false, the form will not close; if value of true, the form can be closed.
clsender TCLLayout(MainForm.Clsender).Hint;
TColumn(MyForm.clSender).Index (ex.)		 It is a parameter commonly used in event handlers. clSender represents the object that triggered the event. In an example usage, in the event of a TclLayout click, clSender would represent the hint value of this button object.
clVKBoundsHeight MyForm.clVKBoundsHeight It returns the keyboard's boundary height.
clVKBoundsLeft MyForm.clVKBoundsLeft It returns the left boundary value of the keyboard.
clVKBoundsRight MyForm.clVKBoundsRight It returns the right boundary value of the keyboard.
clVKBoundsWidth MyForm.clVKBoundsWidth It returns the keyboard's boundary width.
clVKVisible MyForm.clVKVisible := False; The visibility of the keyboard is set.
FormClListView TClListView(MyGuideForm.clFindComponent('FormClListView')); It returns the ListView pre-existing in the GuideForm.

Methods

Feature Use of Definition
AddAssetFromUrl Form1.AddAssetFromUrl('https://clomosy.com/demos/apple.png'); Saves the image at the given url address to the project's file path.
AddNewButton MyForm.AddNewButton(MyForm,'testBtn','Test Button Caption'); It is used to add a new button component.
AddNewChart MyForm.AddNewChart(MyForm,'testChart','Clomosy Inc'); It is used to add a new chart component.
AddNewCheckBox MyForm.AddNewCheckBox(MyForm,'testCheckBox','Test CheckBox Caption'); It is used to add a new checkbox component.
AddNewComboBox MyForm.AddNewComboBox(testLayout,'testCombo'); It is used to add a new comboBox component.
AddNewEdit MyForm.AddNewEdit(MyForm,'testEdt','Test Edit Message'); It is used to add a new edit component.
AddNewEvent MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick'); It is used to give a component the ability to be clicked.
AddNewExpander MyForm.AddNewExpander(MyForm,'MyExpander1',''); It is used to give a component the ability to be clicked.
AddNewHorzScrollBox MyForm.TclHorzScrollBox(MyForm,'TestHorz'); It is used to add a new horz scrollbox component.
AddNewImage MyForm.AddNewImage(MyForm,'testImg'); It is used to add a new image component.
AddNewLabel MyForm.AddNewLabel(MyForm,'testLabel','Test Label Caption'); It is used to add a new label component.
AddNewLayout MyForm.AddNewLayout(MyForm,'testLayout'); It is used to add a new layout component.
AddNewListView MyForm.AddNewListView(MyForm,'testListview'); It is used to add a new listview component.
AddNewMemo MyForm.AddNewMemo(MyForm,'noteMemo','Test Memo Message'); It is used to add a new memo component.
AddNewMenuFrame MainForm.AddNewMenuFrame(MainForm,'tstmenuFrame'); It is used to add a new menu component.
AddNewMQTTConnection MyForm.AddNewMQTTConnection(MyForm,'MyMQTT'); Mqtt connections are established.
AddNewNumberBox MainForm.AddNewNumberBox(MainForm,'tstNumberBox'); It is used to add a new numberbox component.
AddNewPanel MyForm.AddNewPanel(MyForm,'testPanelRow'); It is used to add a new panel component.
AddNewProButton MyForm.AddNewProButton(MyForm,'testBtn','Click'); It is used to add a new pro button component.
AddNewProDateEdit MyForm.AddNewProDateEdit(MyForm,'testDate'); It is used to add a new date selection and editing component.
AddNewProEdit MyForm.AddNewProEdit(MyForm,'testEdit','Phone Number'); It is used to add a new pro edit component.
AddNewProImage MyForm.AddNewProImage(MyForm,'testImg'); It is used to add a new pro image component.
AddNewProLabel MyForm.AddNewProLabel(MyForm,'testLabel','User Name :'); It is used to add a new pro label component.
AddNewProListView MyForm.AddNewProListView(MyForm,'testListview'); It is used to add a new pro listview component.
AddNewProListViewDesignerPanel MyForm.AddNewProListViewDesignerPanel(testListview,'testDesignerPanel'); It is used to add a new pro listview designer panel component.
AddNewProPanel MyForm.AddNewProPanel(MyForm,'testPanel'); It is used to add a new pro panel component.
AddNewProSearchEdit MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search...'); It is used to add a new pro search edit component.
AddNewQRCodeGenerator MyForm.AddNewQRCodeGenerator(MyForm,'QRGen','QRGen Caption'); It is used to add a new QRCode generator component.
AddNewRadioButton MyForm.AddNewRadioButton(MyForm,'testRadio','RadioButton Caption'); It is used to add a new radio button component.
AddNewRadioGroup MainForm.AddNewRadioGroup(MainForm,'testRadioGrp','Group Caption'); It is used to add a new radio group component.
AddNewSensorsMotion MainForm.AddNewSensorsMotion(MainForm,'testSensor'); It is used to add a new sensors motion component.
AddNewSwitch MainForm.AddNewSwitch(MainForm,'testSwitch'); It is used to add a new switch component.
AddNewTimer MyForm.AddNewTimer(MyForm,'GetTimer',1000); It is used to add a new timer component.
AddNewVertScrollBox MyForm.AddNewVertScrollBox(MyForm,'Test'); It is used to add a new vert scrollbox component.
AddNewWebBrowser MyForm.AddNewWebBrowser(MyForm,'xWeb'); It is used to add a new web browser component.
BtnFormMenuClick MainForm.BtnFormMenuClick(self); When triggered, it opens the menu button of the form.
BtnGoBackClick MainForm.BtnGoBackClick(self); When triggered, the back button of the form becomes active and the form closes.
CallBarcodeReader MyForm.CallBarcodeReader(testLabel); The data inside the barcode is read and transferred to the 'testLabel' as in the example.
CallBarcodeReaderWithScript MainForm.CallBarcodeReaderWithScript(testLabel,'procTest'); After reading the barcode, it writes the data into the "testLabel" as shown in the example. Following this, it goes to the trigger field "procTest".
clDateTimeToSQLStr dateSql := MainForm.clDateTimeToSQLStr(Now); Using the function, you can convert a TclDateTime value into a format that can be used in an SQL query.
clFindComponent TclProButton(MyForm.clFindComponent('BtnGoBack')).Click;

TclButton(MyGuideForm.clFİndComponent(’butonAdi’).Visible :=False

The function allows you to find a specific component under a form or component.
clGetChild MainForm.clGetChild(testVertScrll); It is added as a subelement of the used form.
clGetChildEx MainForm.clGetChildEx(exBtn,testVertScrll); It is used when a component is desired to be assigned as a subelement of a component on the form.
clWidth MainForm.clWidth The width of the form is reached.
clHide MainForm.clHide; Form hiding is performed.
clSetCaption MainForm.clSetCaption('newCaption'); Changes the title of the form
clShow MainForm.clShow; The form is made visible.
clSQLDateTimeToDateTime DateTimeValue := MainForm.clSQLDateTimeToDateTime(SQLStrDate); It is used to convert a date in SQL format to Clomosy's TclDateTime format.
clHeight MainForm.clHeight The height of the form is reached.

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:

Base Syntax
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://www.clomosy.com/demos/bg7.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://www.clomosy.com/demos/musical.png');

testBtn := MyForm.AddNewProButton(MyForm,'testBtn','');
clComponent.SetupComponent(testBtn,'{"Align" : "Bottom","MarginBottom":50,"MarginLeft":30,"Width" :110,"Height":90}');
  
MyForm.SetImage(testBtn,'https://www.clomosy.com/demos/cornerArrow.png'); 
MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');
MyForm.Run;
end;
TRObject Syntax
var
MyForm:TclForm;
testImg : TclImage;
testBtn : TclProButton;
testLabel : TclLabel;

void BtnOnClick
{
  ShowMessage('LISTEN');
}

{
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://www.clomosy.com/demos/bg7.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://www.clomosy.com/demos/musical.png');

testBtn  = MyForm.AddNewProButton(MyForm,'testBtn','');
clComponent.SetupComponent(testBtn,'{"Align" : "Bottom","MarginBottom":50,"MarginLeft":30,"Width" :110,"Height":90}');
  
MyForm.SetImage(testBtn,'https://www.clomosy.com/demos/cornerArrow.png'); 
MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');
MyForm.Run;
}

Output
MusicApp.png

Also See

Retrieved from "http:///index.php?title=TclForm&oldid=2945"