TclForm

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.

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.

This top bar is referred to as "LytTopBar."

• 1: It is the back button, and it is named "BtnGoBack."
• 2: It is the loading circle, 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.

Form1.LytTopBar.Visible = False;//True

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

• To close "BtnGoBack";
  

Form1.BtnGoBack.Visible = False;

• To close "BtnFormMenu";
  

Form1.BtnFormMenu.Visible = False;

• To close "FormWaiting";
  

Form1.FormWaiting.Visible = False;

The loading duration of the "FormWaiting" circle 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;

Notice:
The following codes can be used to perform the back button and menu button click actions:

MyForm.BtnGoBackClick(Self);
MyForm.BtnFormMenuClick(Self);

These codes manually trigger the click events of the respective buttons.

Types of Forms

Each form inherits from the TclForm class and thus shares the common properties and behaviors of TclForm.

Other forms, such as TclGameForm, TclDrawForm, TclStyleForm, and TclGuideForm, are derived from this base form class, TclForm. This means that the other forms inherit the properties and methods of TclForm.
Each form has the extended features and behaviors of TclForm while also potentially containing its own unique properties and behaviors.
Below are the other types of forms derived from the TclForm class.

Form Name	Explanation
TclGameForm	It is a customized game form.
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.
TclGuideForm	A customized guide form is created.
TclSyntaxForm	It is a form for coding on a mobile platform.

Since other forms are derived from TclForm, the properties of the TclForm class are also available on the other forms.

Object Types

Properties

Feature	Use of	Definition
SetFormColor	Form1.SetFormColor('#CBEDD5','',clGNone);	It is used to add color to the background of the form. It also accepts options other than "clGNone." These are: clGNone: Used for a solid color. clGVertical: Creates a vertical gradient. clGHorizontal: Creates a horizontal gradient. clGCross: Creates a cross gradient.
SetFormBGImage	Form1.SetFormBGImage('https://clomosy.com/theme/SurveyStyle5.png');	It is used to add an image to the background of the form.
SetImage	Form1.setImage(Image1,'https://clomosy.com/demos/bg.png'); //Image1:TclImage	It is used to add an image to an object of the TclImage class.
AddAssetFromUrl	Form1.AddAssetFromUrl('https://clomosy.com/demos/apple.png');	It is a function used to download an asset from a URL and include it in your application. This function is used to download a file (for example, an image or a sound file(.wav)) from the internet and save it to the file system of the project being used. NOTE: To check if the image has been saved to the file, you can write Clomosy.AppFilesPath in the project to learn the file path extension. (Check the file on Windows.)
clIsIntersectsWith	Form1.clIsIntersectsWith(Img1,Img2) //Img1,Img2:TclIamge;	It is used to check the intersection between two objects. This method is used to determine if one object intersects with another. It returns a value of TRUE when they intersect.
clIsIntersectsAny	Form1.clIsIntersectsAny(Img1,Form1)//Img:TclImage / Form1:TclForm	It checks whether an object intersects with any object within a given object. It returns a value of TRUE when they intersect. The first parameter represents the object that may intersect, and the second parameter represents the container that will be triggered if an intersection occurs.
clIsIntersectsList	ListObject = Form1.clIsIntersectsList(Button1, Panel1); //ListObject: TclStringList / Button1 : TclButton / Panel1: TclPanel	The function checks whether a specific control collides with other controls (or a control list) within a specific container. The first parameter represents the object for which the collision is to be checked, while the second parameter represents the container in which the collision will be checked with the first parameter. If a collision occurs, it returns a TclStringList containing the names of the colliding controls. If there is no collision, it returns an empty TclStringList.
clSetWindowState	Form1.clSetWindowState(fwsMaximized);	It is a property that indicates the visibility status of a window on Windows. This property helps manage the size, position, and state of a window. This property can have one of the following values: fwsMinimized: Minimizes the form window to an icon. fwsNormal: Displays the form window in a normal view. fwsMaximized: Maximizes the form window to full screen.
clSetPosition	Form1.clSetPosition(fpDefault);	On Windows, it includes a set of options that determine how a window is positioned on the screen. These options provide control over the size and position of the form. This property can have one of the following values: fpDesigned: The position and size of the form are determined based on the values set at design time. When the application launches, it is displayed at the top-left corner of the screen. fpDefault: The form is positioned and sized according to the operating system's default rules. fpDefaultPosOnly: The position of the form is set by the operating system, but its size remains as defined at design time. fpDefaultSizeOnly: The size of the form is set by the operating system, but its position remains as defined at design time. When the application launches, it is displayed at the top-left corner of the screen. fpScreenCenter: The form is centered on the screen. fpDesktopCenter: The form is centered on the desktop (relevant in multi-monitor systems). fpMainFormCenter: The form is centered relative to the main form. fpOwnerFormCenter: The form is centered relative to its owner form (if it has one).

Fields

Feature	Use of	Definition
BtnFormMenu	TclButton(Form1.clFindComponent('BtnFormMenu')).Visible = False; //True TclButton(Form1.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(Form1.clFindComponent('BtnFormPictureShare')).Visible = False; //True TclButton(Form1.clFindComponent('BtnFormPictureShare')).Click;	The visibility of the share button is enabled, and clicking it can be triggered.
BtnGoBack	TclButton(Form1.clFindComponent('BtnGoBack')).Visible = False;//True TclButton(Form1.clFindComponent('BtnGoBack')).Click;	The visibility of the back button on the form can be toggled, and its clickability can be enabled or disabled.
clCanClose	Form1.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(Form1.Clsender).Hint; TColumn(Form1.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	Form1.clVKBoundsHeight	It returns the keyboard's boundary height.
clVKBoundsLeft	Form1.clVKBoundsLeft	It returns the left boundary value of the keyboard.
clVKBoundsRight	Form1.clVKBoundsRight	It returns the right boundary value of the keyboard.
clVKBoundsWidth	Form1.clVKBoundsWidth	It returns the keyboard's boundary width.
clVKVisible	Form1.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	Form1.AddNewButton(Form1,'testBtn','Test Button Caption');	It is used to add a new button component.
AddNewChart	Form1.AddNewChart(Form1,'testChart','Clomosy Inc');	It is used to add a new chart component.
AddNewCheckBox	Form1.AddNewCheckBox(Form1,'testCheckBox','Test CheckBox Caption');	It is used to add a new checkbox component.
AddNewComboBox	Form1.AddNewComboBox(testLayout,'testCombo');	It is used to add a new comboBox component.
AddNewEdit	Form1.AddNewEdit(Form1,'testEdt','Test Edit Message');	It is used to add a new edit component.
AddNewEvent	Form1.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');	It is used to give a component the ability to be clicked.
AddNewExpander	Form1.AddNewExpander(Form1,'MyExpander1','');	It is used to give a component the ability to be clicked.
AddNewHorzScrollBox	Form1.TclHorzScrollBox(Form1,'TestHorz');	It is used to add a new horz scrollbox component.
AddNewImage	Form1.AddNewImage(Form1,'testImg');	It is used to add a new image component.
AddNewLabel	Form1.AddNewLabel(Form1,'testLabel','Test Label Caption');	It is used to add a new label component.
AddNewLayout	Form1.AddNewLayout(Form1,'testLayout');	It is used to add a new layout component.
AddNewListView	Form1.AddNewListView(Form1,'testListview');	It is used to add a new listview component.
AddNewMemo	Form1.AddNewMemo(Form1,'noteMemo','Test Memo Message');	It is used to add a new memo component.
AddNewMenuFrame	Form1.AddNewMenuFrame(Form1,'tstmenuFrame');	It is used to add a new menu component.
AddNewMQTTConnection	Form1.AddNewMQTTConnection(Form1,'MyMQTT');	Mqtt connections are established.
AddNewNumberBox	Form1.AddNewNumberBox(Form1,'tstNumberBox');	It is used to add a new numberbox component.
AddNewPanel	Form1.AddNewPanel(Form1,'testPanelRow');	It is used to add a new panel component.
AddNewProButton	Form1.AddNewProButton(Form1,'testBtn','Click');	It is used to add a new pro button component.
AddNewProDateEdit	Form1.AddNewProDateEdit(Form1,'testDate');	It is used to add a new date selection and editing component.
AddNewProEdit	Form1.AddNewProEdit(Form1,'testEdit','Phone Number');	It is used to add a new pro edit component.
AddNewProImage	Form1.AddNewProImage(Form1,'testImg');	It is used to add a new pro image component.
AddNewProLabel	Form1.AddNewProLabel(Form1,'testLabel','User Name :');	It is used to add a new pro label component.
AddNewProListView	Form1.AddNewProListView(Form1,'testListview');	It is used to add a new pro listview component.
AddNewProListViewDesignerPanel	Form1.AddNewProListViewDesignerPanel(testListview,'testDesignerPanel');	It is used to add a new pro listview designer panel component.
AddNewProPanel	Form1.AddNewProPanel(Form1,'testPanel');	It is used to add a new pro panel component.
AddNewProSearchEdit	Form1.AddNewProSearchEdit(Form1,'searchEdt','Search...');	It is used to add a new pro search edit component.
AddNewQRCodeGenerator	Form1.AddNewQRCodeGenerator(Form1,'QRGen','QRGen Caption');	It is used to add a new QRCode generator component.
AddNewRadioButton	Form1.AddNewRadioButton(Form1,'testRadio','RadioButton Caption');	It is used to add a new radio button component.
AddNewRadioGroup	Form1.AddNewRadioGroup(Form1,'testRadioGrp','Group Caption');	It is used to add a new radio group component.
AddNewSensorsMotion	Form1.AddNewSensorsMotion(Form1,'testSensor');	It is used to add a new sensors motion component.
AddNewSwitch	Form1.AddNewSwitch(Form1,'testSwitch');	It is used to add a new switch component.
AddNewTimer	Form1.AddNewTimer(Form1,'GetTimer',1000);	It is used to add a new timer component.
AddNewVertScrollBox	Form1.AddNewVertScrollBox(Form1,'Test');	It is used to add a new vert scrollbox component.
AddNewWebBrowser	Form1.AddNewWebBrowser(Form1,'xWeb');	It is used to add a new web browser component.
BtnFormMenuClick	Form1.BtnFormMenuClick(self);	When triggered, it opens the menu button of the form.
BtnGoBackClick	Form1.BtnGoBackClick(self);	When triggered, the back button of the form becomes active and the form closes.
CallBarcodeReader	Form1.CallBarcodeReader(testLabel);	The data inside the barcode is read and transferred to the 'testLabel' as in the example.
CallBarcodeReaderWithScript	Form1.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 = Form1.clDateTimeToSQLStr(Now);	Using the function, you can convert a TclDateTime value into a format that can be used in an SQL query.
clFindComponent	TclProButton(Form1.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	Form1.clGetChild(testVertScrll);	It is added as a subelement of the used form.
clGetChildEx	Form1.clGetChildEx(exBtn,testVertScrll);	It is used when a component is desired to be assigned as a subelement of a component on the form.
clWidth	Form1.clWidth	The width of the form is reached.
clHeight	Form1.clHeight	The height of the form is reached.
clHide	Form1.clHide;	Form hiding is performed.
clSetCaption	Form1.clSetCaption('newCaption');	Changes the title of the form
clShow	Form1.clShow;	The form is made visible.
clSQLDateTimeToDateTime	DateTimeValue = Form1.clSQLDateTimeToDateTime(SQLStrDate);	It is used to convert a date in SQL format to Clomosy's TclDateTime format.

Example
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.

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','');
  testBtn.Align = AlBottom;
  testBtn.Height = 90;
  testBtn.Width = 110;
  testBtn.Margins.Left = 30;
  testBtn.Margins.Bottom = 50;
  testBtn.clProSettings.PictureSource = 'https://www.clomosy.com/demos/cornerArrow.png';  
  testBtn.SetclProSettings(testBtn.clProSettings);
  
  MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');
  MyForm.Run;
}

Output:

See Also

• TRObject Language
• Virtual Keyboard