From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
AddNewVertScrollBox (TClVertScrollBox) create scrolling areas within a form. Applications often need to display more information than will fit in a particular area. Some controls, such as list boxes, notes, and forms, can automatically scroll down their content.
AddNewVertScrollBox (TClVertScrollBox) create scrolling areas within a form. Applications often need to display more information than will fit in a particular area. Some controls, such as list boxes, notes, and forms, can automatically scroll down their content.
  AddNewVertScrollBox (TComponent, xName): TClVertScrollBox
  AddNewVertScrollBox (xOwner:TComponent; xName:String): TClVertScrollBox


<span style="color:blue"> TComponent</span> : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.
<span style="color:blue"> TComponent</span> : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.
Line 6: Line 6:
<span style="color:blue"> xName</span> : The name of the defined vertscrollbox should be written.
<span style="color:blue"> xName</span> : The name of the defined vertscrollbox should be written.


Let's create a vertscrollbox.<br>
{| class="wikitable" style="border: 2px solid #c3d7e0"
 
! style="background-color: #c3d7e0"| Feature !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"|Definition
1. Create a new project.<br>
|-
 
|TclVertScrollBox || VertScrollBox1: TclVertScrollBox;   || A variable belonging to the TclVertScrollBox class is created.
2. You need to define TclVertScrollBox 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 TclVertScrollBox.<br>
|-
'''var'''
|AddNewVertScrollBox || VertScrollBox1 = MyForm.AddNewVertScrollBox(MyForm,'VertScrollBox1'); || A new TclVertScrollBox is added to the form.
testVertScrollBox: TclVertScrollBox;  
|-
 
|Width || VertScrollBox1.Width = 150; ||Allows adjusting the width of the scrollBox.
3. Add the TclVertScrollBox 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.AddNewVertScrollBox, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.<br>
|-
 
|Height || VertScrollBox1.Height = 50; ||Allows adjusting the height of the scrollBox.
testVertScrollBox = MyForm.'''AddNewVertScrollBox'''(MyForm,'Test');
|-
 
|Align || VertScrollBox1.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 [[Object_Properties#Align | page]] to learn about these features.
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');
|Margins || VertScrollBox1.Margins.Left = 50; // Right, Top, Bottom ||With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.<br>
testVertScrollBox = MyForm.AddNewVertScrollBox(<span style="color:blue">testLayout</span>,'testVertScrollBox');
|}
 
5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewVertScrollBox" while the shortcut is in the code block, a pop-up menu will appear.<br>
[[File:TclVertScrollBoxShortcut.png|frameless|400px]]<br><br>
 
As soon as you click, the following block will come automatically.<br>
 
AddNewVertScrollBox(xOwner:TComponent; xName:String);
 
6. We gave the variable name while defining the TclVertScrollBox 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.
 
7. Now let's design our TclVertScrollBox component. Let's set the width and height first. For this, you must make the following definitions.
 
  testVertScrollBox.Height = 50;
testVertScrollBox.Width = 150;
 
8. 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".
testVertScrollBox.Align = alTop;
 
9. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
 
testVertScrollBox.Margins.Left= 50;
testVertScrollBox.Margins.Right= 10;
testVertScrollBox.Margins.Top= 50;
testVertScrollBox.Margins.Bottom= 10;
 
10. Nothing appears on the screen unless data is entered into our scrollable component.
 
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>
In the example, a menu list has been created. The menu list includes headings such as vegetables, fruits, beverages, and types of meat. To enable a scrollable structure, a TCLVertScrollBox was created, containing buttons. When clicked, the specific button that was clicked is identified.
In the example, a menu list has been created. The menu list includes headings such as vegetables, fruits, beverages, and types of meat. To enable a scrollable structure, a TCLVertScrollBox was created, containing buttons. When clicked, the specific button that was clicked is identified.
:'''Base Syntax'''
  var
    Form1: TclStyleForm;
    btnS : TclProButton;
    vScroll:TCLVertScrollBox;
    BtnCaptionArr,BtnNameArr,btnImgArr  : array of String;
    i : Integer;
 
  procedure BtnOnClick;
  var
    clickedBtn:TClProButton;
  begin
    clickedBtn := TClProButton(Form1.Clsender);
    ShowMessage(clickedBtn.Caption);
    ShowMessage(clickedBtn.Hint);
 
  end;
 
  begin
    BtnNameArr := ['btnVegetables','btnFruits','btnBeverages','btnMeatTypes','btnCakes'];
    BtnCaptionArr := ['Vegetables','Fruits','Beverages','Meat Types','Cakes'];
    btnImgArr := ['https://clomosy.com/demos/aubergine.png',
    'https://clomosy.com/demos/watermelon.png',
    'https://clomosy.com/demos/fruitJuice.png',
    'https://clomosy.com/demos/meat.png',
    'https://clomosy.com/demos/cake.png'];
    Form1 := TclStyleForm.Create(Self);
    Form1.SetFormColor('#ffffff',<nowiki>''</nowiki>, clGNone);
    Form1.clSetCaption('Menu List');
   
    vScroll := Form1.AddNewVertScrollBox(Form1,'ScrollBoxY');
    vScroll.Align := alMostTop;
    vScroll.Height := Form1.clheight-70;
   
    for i := 0 to 4 do
    begin
      btnS := Form1.AddNewProButton(vScroll,BtnNameArr[i],BtnCaptionArr[i]);
      btnS.Align := AlTop;
      btnS.Height := 150;
      btnS.Margins.Bottom := 5;
      btnS.clProSettings.IsFill := True;
      btnS.clProSettings.FontSize := 14;
      btnS.clProSettings.FontColor := clAlphaColor.clHexToColor('#000000');
      btnS.clProSettings.TextSettings.Font.Style := [fsBold,fsItalic];
      btnS.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#4287f5');
      btnS.clProSettings.FontVertAlign := palLeading;
      btnS.clProSettings.FontHorzAlign := palcenter;
      btnS.clProSettings.PictureSource := btnImgArr[i];
      btnS.clProSettings.PictureAutoFit := True;
      btnS.SetclProSettings(btnS.clProSettings);
      btnS.Hint := BtnNameArr[i];
      Form1.AddNewEvent(btnS,tbeOnClick,'BtnOnClick');
    end;
   
    Form1.Run;
  end;


:'''TRObject Syntax'''
:'''TRObject Syntax'''
Line 169: Line 82:
     Form1.Run;
     Form1.Run;
   }
   }
:'''Base Syntax'''
  var
    Form1: TclStyleForm;
    btnS : TclProButton;
    vScroll:TCLVertScrollBox;
    BtnCaptionArr,BtnNameArr,btnImgArr  : array of String;
    i : Integer;
 
  procedure BtnOnClick;
  var
    clickedBtn:TClProButton;
  begin
    clickedBtn := TClProButton(Form1.Clsender);
    ShowMessage(clickedBtn.Caption);
    ShowMessage(clickedBtn.Hint);
 
  end;
 
  begin
    BtnNameArr := ['btnVegetables','btnFruits','btnBeverages','btnMeatTypes','btnCakes'];
    BtnCaptionArr := ['Vegetables','Fruits','Beverages','Meat Types','Cakes'];
    btnImgArr := ['https://clomosy.com/demos/aubergine.png',
    'https://clomosy.com/demos/watermelon.png',
    'https://clomosy.com/demos/fruitJuice.png',
    'https://clomosy.com/demos/meat.png',
    'https://clomosy.com/demos/cake.png'];
    Form1 := TclStyleForm.Create(Self);
    Form1.SetFormColor('#ffffff',<nowiki>''</nowiki>, clGNone);
    Form1.clSetCaption('Menu List');
   
    vScroll := Form1.AddNewVertScrollBox(Form1,'ScrollBoxY');
    vScroll.Align := alMostTop;
    vScroll.Height := Form1.clheight-70;
   
    for i := 0 to 4 do
    begin
      btnS := Form1.AddNewProButton(vScroll,BtnNameArr[i],BtnCaptionArr[i]);
      btnS.Align := AlTop;
      btnS.Height := 150;
      btnS.Margins.Bottom := 5;
      btnS.clProSettings.IsFill := True;
      btnS.clProSettings.FontSize := 14;
      btnS.clProSettings.FontColor := clAlphaColor.clHexToColor('#000000');
      btnS.clProSettings.TextSettings.Font.Style := [fsBold,fsItalic];
      btnS.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#4287f5');
      btnS.clProSettings.FontVertAlign := palLeading;
      btnS.clProSettings.FontHorzAlign := palcenter;
      btnS.clProSettings.PictureSource := btnImgArr[i];
      btnS.clProSettings.PictureAutoFit := True;
      btnS.SetclProSettings(btnS.clProSettings);
      btnS.Hint := BtnNameArr[i];
      Form1.AddNewEvent(btnS,tbeOnClick,'BtnOnClick');
    end;
   
    Form1.Run;
  end;


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

Revision as of 06:25, 23 August 2024

AddNewVertScrollBox (TClVertScrollBox) create scrolling areas within a form. Applications often need to display more information than will fit in a particular area. Some controls, such as list boxes, notes, and forms, can automatically scroll down their content. 

AddNewVertScrollBox (xOwner:TComponent; xName:String): TClVertScrollBox

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 vertscrollbox should be written.

Feature Use of Definition
TclVertScrollBox VertScrollBox1: TclVertScrollBox; A variable belonging to the TclVertScrollBox class is created.
AddNewVertScrollBox VertScrollBox1 = MyForm.AddNewVertScrollBox(MyForm,'VertScrollBox1'); A new TclVertScrollBox is added to the form.
Width VertScrollBox1.Width = 150; Allows adjusting the width of the scrollBox.
Height VertScrollBox1.Height = 50; Allows adjusting the height of the scrollBox.
Align VertScrollBox1.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 VertScrollBox1.Margins.Left = 50; // Right, Top, Bottom With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.

Example:
In the example, a menu list has been created. The menu list includes headings such as vegetables, fruits, beverages, and types of meat. To enable a scrollable structure, a TCLVertScrollBox was created, containing buttons. When clicked, the specific button that was clicked is identified.

TRObject Syntax
 var
   Form1: TclStyleForm;
   btnS : TclProButton;
   vScroll:TCLVertScrollBox;
   BtnCaptionArr,BtnNameArr,btnImgArr  : array of String;
   i : Integer;
 
 void BtnOnClick; 
 var
   clickedBtn:TClProButton;
 {
   clickedBtn = TClProButton(Form1.Clsender);
   ShowMessage(clickedBtn.Caption);
   ShowMessage(clickedBtn.Hint);
 
 }
 
 {
   BtnNameArr = ['btnVegetables','btnFruits','btnBeverages','btnMeatTypes','btnCakes'];
   BtnCaptionArr = ['Vegetables','Fruits','Beverages','Meat Types','Cakes'];
   btnImgArr = ['https://clomosy.com/demos/aubergine.png',
   'https://clomosy.com/demos/watermelon.png',
   'https://clomosy.com/demos/fruitJuice.png',
   'https://clomosy.com/demos/meat.png',
   'https://clomosy.com/demos/cake.png'];
   Form1 = TclStyleForm.Create(Self);
   Form1.SetFormColor('#ffffff','', clGNone);
   Form1.clSetCaption('Menu List');
   
   vScroll = Form1.AddNewVertScrollBox(Form1,'ScrollBoxY');
   vScroll.Align = alMostTop;
   vScroll.Height = Form1.clheight-70;
   
   for (i = 0 to 4)
   {
     btnS = Form1.AddNewProButton(vScroll,BtnNameArr[i],BtnCaptionArr[i]);
     btnS.Align = AlTop;
     btnS.Height = 150;
     btnS.Margins.Bottom = 5;
     btnS.clProSettings.IsFill = True;
     btnS.clProSettings.FontSize = 14;
     btnS.clProSettings.FontColor = clAlphaColor.clHexToColor('#000000');
     btnS.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
     btnS.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#4287f5');
     btnS.clProSettings.FontVertAlign = palLeading;
     btnS.clProSettings.FontHorzAlign = palcenter;
     btnS.clProSettings.PictureSource =btnImgArr[i];
     btnS.clProSettings.PictureAutoFit = True;
     btnS.SetclProSettings(btnS.clProSettings);
     btnS.Hint = BtnNameArr[i];
     Form1.AddNewEvent(btnS,tbeOnClick,'BtnOnClick');
   }
   
   Form1.Run;
 }
Base Syntax
 var
   Form1: TclStyleForm;
   btnS : TclProButton;
   vScroll:TCLVertScrollBox;
   BtnCaptionArr,BtnNameArr,btnImgArr  : array of String;
   i : Integer;
 
 procedure BtnOnClick; 
 var
   clickedBtn:TClProButton;
 begin
   clickedBtn := TClProButton(Form1.Clsender);
   ShowMessage(clickedBtn.Caption);
   ShowMessage(clickedBtn.Hint);
 
 end;
 
 begin
   BtnNameArr := ['btnVegetables','btnFruits','btnBeverages','btnMeatTypes','btnCakes'];
   BtnCaptionArr := ['Vegetables','Fruits','Beverages','Meat Types','Cakes'];
   btnImgArr := ['https://clomosy.com/demos/aubergine.png',
   'https://clomosy.com/demos/watermelon.png',
   'https://clomosy.com/demos/fruitJuice.png',
   'https://clomosy.com/demos/meat.png',
   'https://clomosy.com/demos/cake.png'];
   Form1 := TclStyleForm.Create(Self);
   Form1.SetFormColor('#ffffff','', clGNone);
   Form1.clSetCaption('Menu List');
   
   vScroll := Form1.AddNewVertScrollBox(Form1,'ScrollBoxY');
   vScroll.Align := alMostTop;
   vScroll.Height := Form1.clheight-70;
   
   for i := 0 to 4 do
   begin
     btnS := Form1.AddNewProButton(vScroll,BtnNameArr[i],BtnCaptionArr[i]);
     btnS.Align := AlTop;
     btnS.Height := 150;
     btnS.Margins.Bottom := 5;
     btnS.clProSettings.IsFill := True;
     btnS.clProSettings.FontSize := 14;
     btnS.clProSettings.FontColor := clAlphaColor.clHexToColor('#000000');
     btnS.clProSettings.TextSettings.Font.Style := [fsBold,fsItalic];
     btnS.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#4287f5');
     btnS.clProSettings.FontVertAlign := palLeading;
     btnS.clProSettings.FontHorzAlign := palcenter;
     btnS.clProSettings.PictureSource := btnImgArr[i];
     btnS.clProSettings.PictureAutoFit := True;
     btnS.SetclProSettings(btnS.clProSettings);
     btnS.Hint := BtnNameArr[i];
     Form1.AddNewEvent(btnS,tbeOnClick,'BtnOnClick');
   end;
   
   Form1.Run;
 end;

Output:
MenuList.png

See Also

Retrieved from "http:///index.php?title=TclVertScrollBox&oldid=2112"