From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
Combobox is a box that opens in the form of a list. It is used in events such as data listing, data selection. Its appearance is close to AddNewEdit, but there is an arrow button on the right side that will enable it to open downwards. In this way, when you press the unlock button, you have the chance to choose among the data listed in it.<br>
Combobox is a box that opens in the form of a list. It is used in events such as data listing, data selection. Its appearance is close to AddNewEdit, but there is an arrow button on the right side that will enable it to open downwards. In this way, when you press the unlock button, you have the chance to choose among the data listed in it.<br>


  AddNewComboBox(TComponent,xName) : TClComboBox
  AddNewComboBox(TComponent,xName) : TClComboBox
Line 7: Line 8:
<span style="color:blue"> xName</span> : The name of the defined combobox should be written.
<span style="color:blue"> xName</span> : The name of the defined combobox should be written.


Let's create a combobox.<br>
1. Create a new project.<br>
2. You need to define TClComboBox on the form. To do this, you should add under the ''var'' parameter on the ide as follows. It is the name of your variable you typed at the beginning. You should define this as you want and add it as TClComboBox.<br>
'''var'''
testCombo : TClComboBox;
3. Add the TClComboBox to the form. For this, you must add the begin end block and add it inside the form after the form is defined. By saying MyForm.AddNewComboBox, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.<br>
testCombo := ''MyForm''.AddNewComboBox(MyForm,'testCombo');
4. If you do not want to define it in the form, you can add it in another component (such as Layout, Panel). Of course, before that, that component must be defined.
<span style="color:blue">testLayout</span> := MyForm.AddNewLayout(MyForm,'testLayout');
testCombo:= MyForm.AddNewComboBox(<span style="color:blue">testLayout</span>,'testCombo');


5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewComboBox" while the shortcut is in the code block, a pop-up menu will appear.<br>
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"|Definition
[[File:TclComboBoxShortcut.png|frameless|300px]]<br><br>
|-
|TClComboBox || testCombo : TClComboBox; || A variable belonging to the TClComboBox class is created.
|-
|AddNewComboBox ||testCombo := MyForm.AddNewComboBox(MyForm,'testCombo'); || A new ComboBox is added to the form.
|-
|AddItem || testCombo.AddItem('key1','value1'); ||In order to add data to the list in the Combobox, we need to use "AddItem". You must write the key value in the first parameter in the "AddItem" definition. This is the area you want to appear on the screen. You should write the value it will hold in the second parameter.
|-
|tbeOnChange || MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected'); || tbeOnChange is used as the event for clicking on the combobox.
|-
|ItemIndex || testCombo.ItemIndex || Specifies the index of the selected item. That is, it determines which element is selected.
|-
|GetValueIndex ||testCombo.GetValueIndex(testCombo.ItemIndex);||Returns the value of the selected string. In other words, it returns the value1 of the field defined by saying testCombo.AddItem('key1','value1').
|-
|GetItemIndex ||testCombo.GetItemIndex(testCombo.ItemIndex) ||Returns the key of the selected string. In other words, it returns the key1 value of the field defined by saying testCombo.AddItem('key1','value1').
|-
|Items ||testCombo.Items[testCombo.ItemIndex]; || This does the same thing as the GetItemIndex definition above.
|-
|Width ||testCombo.Width := 150; ||Allows the width of columns to be adjusted.
|-
|Height ||testCombo.Height := 50; ||llows the height of columns to be adjusted.
|-
|Align ||testCombo.Align := alTop; ||With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
|-
|Margins || testCombo.Margins.Left:= 50; // Right, Top, Bottom || With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
|}


As soon as you click, the following block will come automatically.<br>
AddNewComboBox(xOwner:TComponent; xName:String);
6. In order to add data to the list in the Combobox, we need to use "AddItem". You can see the definition below. You must write the key value in the first parameter in the "AddItem" definition. This is the area you want to appear on the screen. You should write the value it will hold in the second parameter.
testCombo.'''AddItem'''('key1','value1');
7. We gave the variable name while defining the TClComboBox in var. Now when you add this in begin end you should use this variable name in all definitions. Your code will throw an error when you write these variable names incorrectly.
8. Now let's design our TClComboBox component. Let's set the width and height first. For this, you must make the following definitions.
testCombo.Height := 50;
testCombo.Width := 150;
9. With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the [https://www.docs.clomosy.com/index.php/Object_Properties#Align page] to learn about these features. We're going to call it the top part here. So we have to write "AlTop".
testCombo.Align := alTop;
10. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
testCombo.Margins.Left:= 50;
testCombo.Margins.Right:= 10;
testCombo.Margins.Top:= 50;
testCombo.Margins.Bottom:= 10;
[[File:TclComboBoxMargins.png|frameless|400px]]<br><br>
11. To tell you the truth, you have created a simple application that does nothing yet. Let's save and start using our project. You can save in one of two ways:<br>
Click the save icon (the button in the upper right corner) or press Ctrl + S to save the project and see what you've done on the platforms now.


'''Example:'''<br>
'''Example:'''<br>
Now let's make an example where we can show the value of the selected one in the message box when we select and select one of the days.<br>
Now let's make an example where we can show the value of the selected one in the message box when we select and select one of the days.<br>
'''Code:'''<br>
 
:''Basic Syntax''<br>
  '''var'''
  '''var'''
   MyForm:TclForm;
   MyForm:TclForm;
Line 66: Line 48:
   '''procedure''' ComboSelected;
   '''procedure''' ComboSelected;
   '''var'''
   '''var'''
     str : String;
     strValue,strKey,strKey2 : String;
   '''begin'''
   '''begin'''
     str := testCombo.GetValueIndex(testCombo.ItemIndex);
     strValue := testCombo.GetValueIndex(testCombo.ItemIndex);
     ShowMessage(str);
    strKey := testCombo.GetItemIndex(testCombo.ItemIndex);
    strKey2 := testCombo.Items[testCombo.ItemIndex];
     ShowMessage('strValue : '+strValue); //value1
    ShowMessage('strKey : '+strKey); //key
    ShowMessage('strKey2 : '+strKey2); //key
    ShowMessage('testCombo.ItemIndex : '+IntToStr(testCombo.ItemIndex)); //index
   '''end;'''<br>   
   '''end;'''<br>   
  '''begin'''
  '''begin'''
Line 89: Line 77:
   testCombo.Margins.Left :=50;
   testCombo.Margins.Left :=50;
   testCombo.Margins.Right :=50;<br>   
   testCombo.Margins.Right :=50;<br>   
   testCombo.AddItem('Monday','Monday');
   testCombo.AddItem('Monday','01');
   testCombo.AddItem('Tuesday','Tuesday');
   testCombo.AddItem('Tuesday','02');
   testCombo.AddItem('Wednesday','Wednesday');
   testCombo.AddItem('Wednesday','03');
   testCombo.AddItem('Thursday','Thursday');
   testCombo.AddItem('Thursday','04');
   testCombo.AddItem('Friday','Friday');
   testCombo.AddItem('Friday','05');
   testCombo.AddItem('Saturday','Saturday');
   testCombo.AddItem('Saturday','06');
   testCombo.AddItem('Sunday','Sunday');<br>   
   testCombo.AddItem('Sunday','07');<br>   
   MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected');
   MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected');
   MyForm.Run;
   MyForm.Run;
  '''end;'''
  '''end;'''
:''TRObject Syntax''
var
  MyForm:TclForm;
  testCombo : TClComboBox;
  testLabel :TClLabel;
  void ComboSelected;
  var
    strValue,strKey,strKey2 : String;
  {
    strValue = testCombo.GetValueIndex(testCombo.ItemIndex);
    strKey = testCombo.GetItemIndex(testCombo.ItemIndex);
    strKey2 = testCombo.Items[testCombo.ItemIndex];
    ShowMessage('strValue : '+strValue); //value1
    ShowMessage('strKey : '+strKey); //key
    ShowMessage('strKey2 : '+strKey2); //key
    ShowMessage('testCombo.ItemIndex : '+IntToStr(testCombo.ItemIndex)); //index
  }
{
  MyForm = TclForm.Create(Self);
  testLabel= MyForm.AddNewLabel(MyForm,'testLabel','Select the day');
  testLabel.Align=alMostTop;
  testLabel.StyledSettings = ssFamily;
  testLabel.TextSettings.FontColor = clAlphaColor.clHexToColor('#820000');
  testLabel.TextSettings.Font.Size=20;
  testLabel.Width = 150;
  testLabel.Height = 25;
  testLabel.Margins.Top=50;
  testLabel.Margins.Left =50;
  testLabel.Margins.Right =50;
  testCombo = MyForm.AddNewComboBox(MyForm,'testCombo');
  testCombo.Align = alTop;
  testCombo.Width = 150;
  testCombo.Margins.Top=10;
  testCombo.Margins.Left =50;
  testCombo.Margins.Right =50;
  testCombo.AddItem('Monday','01');
  testCombo.AddItem('Tuesday','02');
  testCombo.AddItem('Wednesday','03');
  testCombo.AddItem('Thursday','04');
  testCombo.AddItem('Friday','05');
  testCombo.AddItem('Saturday','06');
  testCombo.AddItem('Sunday','07');
  MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected');
  MyForm.Run;
}


'''Output:'''<br>
'''Output:'''<br>

Revision as of 13:43, 30 November 2023

Combobox is a box that opens in the form of a list. It is used in events such as data listing, data selection. Its appearance is close to AddNewEdit, but there is an arrow button on the right side that will enable it to open downwards. In this way, when you press the unlock button, you have the chance to choose among the data listed in it.


AddNewComboBox(TComponent,xName) : TClComboBox

TComponent : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.

xName : The name of the defined combobox should be written.


Feature Use of Definition
TClComboBox testCombo : TClComboBox; A variable belonging to the TClComboBox class is created.
AddNewComboBox testCombo := MyForm.AddNewComboBox(MyForm,'testCombo'); A new ComboBox is added to the form.
AddItem testCombo.AddItem('key1','value1'); In order to add data to the list in the Combobox, we need to use "AddItem". You must write the key value in the first parameter in the "AddItem" definition. This is the area you want to appear on the screen. You should write the value it will hold in the second parameter.
tbeOnChange MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected'); tbeOnChange is used as the event for clicking on the combobox.
ItemIndex testCombo.ItemIndex Specifies the index of the selected item. That is, it determines which element is selected.
GetValueIndex testCombo.GetValueIndex(testCombo.ItemIndex); Returns the value of the selected string. In other words, it returns the value1 of the field defined by saying testCombo.AddItem('key1','value1').
GetItemIndex testCombo.GetItemIndex(testCombo.ItemIndex) Returns the key of the selected string. In other words, it returns the key1 value of the field defined by saying testCombo.AddItem('key1','value1').
Items testCombo.Items[testCombo.ItemIndex]; This does the same thing as the GetItemIndex definition above.
Width testCombo.Width := 150; Allows the width of columns to be adjusted.
Height testCombo.Height := 50; llows the height of columns to be adjusted.
Align testCombo.Align := alTop; With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins testCombo.Margins.Left:= 50; // Right, Top, Bottom With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.


Example:
Now let's make an example where we can show the value of the selected one in the message box when we select and select one of the days.

Basic Syntax
var
  MyForm:TclForm;
  testCombo : TClComboBox;
  testLabel :TClLabel;
procedure ComboSelected; var strValue,strKey,strKey2 : String; begin strValue := testCombo.GetValueIndex(testCombo.ItemIndex); strKey := testCombo.GetItemIndex(testCombo.ItemIndex); strKey2 := testCombo.Items[testCombo.ItemIndex]; ShowMessage('strValue : '+strValue); //value1 ShowMessage('strKey : '+strKey); //key ShowMessage('strKey2 : '+strKey2); //key ShowMessage('testCombo.ItemIndex : '+IntToStr(testCombo.ItemIndex)); //index end;
begin MyForm := TclForm.Create(Self);
testLabel:= MyForm.AddNewLabel(MyForm,'testLabel','Select the day'); testLabel.Align:=alMostTop; testLabel.StyledSettings := ssFamily; testLabel.TextSettings.FontColor := clAlphaColor.clHexToColor('#820000'); testLabel.TextSettings.Font.Size:=20; testLabel.Width := 150; testLabel.Height := 25; testLabel.Margins.Top:=50; testLabel.Margins.Left :=50; testLabel.Margins.Right :=50;
testCombo := MyForm.AddNewComboBox(MyForm,'testCombo'); testCombo.Align := alTop; testCombo.Width := 150; testCombo.Margins.Top:=10; testCombo.Margins.Left :=50; testCombo.Margins.Right :=50;
testCombo.AddItem('Monday','01'); testCombo.AddItem('Tuesday','02'); testCombo.AddItem('Wednesday','03'); testCombo.AddItem('Thursday','04'); testCombo.AddItem('Friday','05'); testCombo.AddItem('Saturday','06'); testCombo.AddItem('Sunday','07');
MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected'); MyForm.Run; end;
TRObject Syntax
var
 MyForm:TclForm;
 testCombo : TClComboBox;
 testLabel :TClLabel;

 void ComboSelected;
 var
   strValue,strKey,strKey2 : String;
 {
   strValue = testCombo.GetValueIndex(testCombo.ItemIndex);
   strKey = testCombo.GetItemIndex(testCombo.ItemIndex);
   strKey2 = testCombo.Items[testCombo.ItemIndex];

   ShowMessage('strValue : '+strValue); //value1
   ShowMessage('strKey : '+strKey); //key
   ShowMessage('strKey2 : '+strKey2); //key
   ShowMessage('testCombo.ItemIndex : '+IntToStr(testCombo.ItemIndex)); //index 
 }

{
 MyForm = TclForm.Create(Self);

 testLabel= MyForm.AddNewLabel(MyForm,'testLabel','Select the day');
 testLabel.Align=alMostTop;
 testLabel.StyledSettings = ssFamily;
 testLabel.TextSettings.FontColor = clAlphaColor.clHexToColor('#820000');
 testLabel.TextSettings.Font.Size=20;
 testLabel.Width = 150;
 testLabel.Height = 25;
 testLabel.Margins.Top=50;
 testLabel.Margins.Left =50;
 testLabel.Margins.Right =50;

 testCombo = MyForm.AddNewComboBox(MyForm,'testCombo');
 testCombo.Align = alTop;
 testCombo.Width = 150;
 testCombo.Margins.Top=10;
 testCombo.Margins.Left =50;
 testCombo.Margins.Right =50;

 testCombo.AddItem('Monday','01');
 testCombo.AddItem('Tuesday','02');
 testCombo.AddItem('Wednesday','03');
 testCombo.AddItem('Thursday','04');
 testCombo.AddItem('Friday','05');
 testCombo.AddItem('Saturday','06');
 testCombo.AddItem('Sunday','07');

 MyForm.AddNewEvent(testCombo,tbeOnChange,'ComboSelected');
 MyForm.Run;
}

Output:
Combobox.png

See Also