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.
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:
|
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:
|
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:
|
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; }