From Clomosy Docs

Revision as of 14:31, 5 November 2024 by ClomosyManager (talk | contribs)

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;

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.
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 file) 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.

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=2949"