From Clomosy Docs

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 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;

Types of Forms

Each form inherits from the TclForm class and thus shares the common properties and behaviors of TclForm.
TypesOfForms.png
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.

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.
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:
MusicApp.png

See Also