From Clomosy Docs

(Created page with "Base class for controls that represent a scroll area (scroll box). One use of a scroll box is to group multiple graphical controls (such as buttons, list boxes, edit boxes, radio buttons, and so on) under the same scrollable parent (the scroll box itself). In this way, a smaller form can contain a lot of graphical objects organized in a scrollable manner in order to occupy less space on a graphical user interface. AddNewHorzScrollBox(TComponent, xName): TclHorzScrollB...")
 
No edit summary
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Base class for controls that represent a scroll area (scroll box). One use of a scroll box is to group multiple graphical controls (such as buttons, list boxes, edit boxes, radio buttons, and so on) under the same scrollable parent (the scroll box itself). In this way, a smaller form can contain a lot of graphical objects organized in a scrollable manner in order to occupy less space on a graphical user interface.
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewHorzScrollBox(AComponent: TCLComponent; xName: string): TclHorzScrollBox;
</div>


AddNewHorzScrollBox(TComponent, xName): TclHorzScrollBox
<span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br>


<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"><b>xName</b></span> : The name of the defined horzscrollbox should be written.<br>


<span style="color:blue"> xName</span> : The name of the defined horzscrollbox should be written.
The TclHorzScrollBox class creates a horizontal scroll box. This component is used to organize the contained control elements and provide navigation between content with a horizontal scrollbar.<br>


Let's create a horzscrollbox.<br>
<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
|-
|TclHorzScrollBox || HorzScrollBox1: TclHorzScrollBox;  || A variable belonging to the TclHorzScrollBox class is created.
|-
|AddNewHorzScrollBox || HorzScrollBox1 = Form1.AddNewHorzScrollBox(Form1,'testHorzScrollBox'); || A new TclHorzScrollBox is added to the form.
|-
|ScrollBy(DeltaX,DeltaY: Integer); || HorzScrollBox1.ScrollBy(-100,0); || To scroll the contents within the control, call ScrollBy.<br>
The DeltaX parameter is the change in pixels along the X-axis.<br>
A positive DeltaX value scrolls the content to the left; a negative value scrolls the content to the right.<br>
The DeltaY parameter is the change in pixels along the Y-axis.<br>
A positive DeltaY value scrolls the content upward; a negative value scrolls the content downward.
|-
|ScrollTo(X,Y: Integer); || HorzScrollBox1.ScrollTo(-100,0); || To scroll the contents within the control, call ScrollTo.<br>
The X parameter is the change in pixels along the X-axis.<br>
A positive X value scrolls the content to the left; a negative value scrolls the content to the right.<br>
The Y parameter is the change in pixels along the Y-axis.<br>
A positive Y value scrolls the content upward; a negative value scrolls the content downward.
|-
|Width || HorzScrollBox1.Width = 150; ||Allows adjusting the width of the scrollBox.
|-
|Height || HorzScrollBox1.Height = 50; ||Allows adjusting the height of the scrollBox.
|-
|Align  || HorzScrollBox1.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.
|-
|Margins || HorzScrollBox1.Margins.Left = 50; // Right, Top, Bottom ||With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.<br>
|}
</div>


1. Create a new project.<br>
<b>Example</b><br>
 
<pre>
2. You need to define TclHorzScrollBox 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 TclHorzScrollBox.<br>
  var
'''var'''
  MyForm:TclForm;
testHertScrollBox: TclHorzScrollBox;
  testButton : TclButton;
 
  horzScrollBox : TClHorzScrollBox;
3. Add the TclHorzScrollBox 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.AddNewHorzScrollBox, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.<br>
  lytContainer : TClLayout;
 
  testImg : TClProImage;
testHorzScrollBox := MyForm.'''TclHorzScrollBox'''(MyForm,'Test');
  isCreated : Boolean;
 
  void SetupImageComponent;
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.
  var
<span style="color:blue">testLayout</span> := MyForm.AddNewLayout(MyForm,'testLayout');
testHorzScrollBox := MyForm.TclHorzScrollBox(<span style="color:blue">testLayout</span>,'testHorzScrollBox');
 
5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "TclHorzScrollBox" while the shortcut is in the code block, a pop-up menu will appear.<br>
[[File:TclHorzScrollBoxShortcut.png|frameless|400px]]<br><br>
 
As soon as you click, the following block will come automatically.<br>
 
  AddNewHorzScrollBox(xOwner:TComponent; xName:String);
 
6. We gave the variable name while defining the TclHorzScrollBox 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 TclHorzScrollBox component. Let's set the width and height first. For this, you must make the following definitions.
 
testHorzScrollBox.Height := 50;
testHorzScrollBox.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".
testHorzScrollBox.Align := alTop;
 
9. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
 
testHorzScrollBox.Margins.Left:= 50;
testHorzScrollBox.Margins.Right:= 10;
testHorzScrollBox.Margins.Top:= 50;
testHorzScrollBox.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>
'''var'''
MyForm:TFrmClomosyBasisForm;
testButton : TclButton;
horzScrollBox : TClHorzScrollBox;
lytContainer : TClLayout;
testImg : TClProImage;
isCreated : Boolean;
  '''procedure''' SetupImageComponent;
  '''var'''
   i : Integer;
   i : Integer;
  '''begin'''
  {
   if isCreated then exit;
   if (isCreated)  exit;
   lytContainer.Width := 0;
   lytContainer.Width = 0;
   for i:= 1 to 7 do
   for (i = 1 to 7)
   begin
   {
     testImg := MyForm.AddNewProImage(lytContainer,'testImg'+IntToStr(i));
     testImg = MyForm.AddNewProImage(lytContainer,'testImg'+IntToStr(i));
     testImg.Align := alLeft;
     testImg.Align = alLeft;
     testImg.Margins.Left := 10;
     testImg.Margins.Left = 10;
     testImg.Width := 100;
     testImg.Width = 100;
     MyForm.SetImage(testImg,'https://media1.cucuvi.com/Dic19/BD220BD4-7AEA-43FA-AF97-E62D073AFD1B.jpg');
     MyForm.SetImage(testImg,'https://media1.cucuvi.com/Dic19/BD220BD4-7AEA-43FA-AF97-E62D073AFD1B.jpg');
     lytContainer.Width := lytContainer.Width + testImg.Width + testImg.Margins.Left;
     lytContainer.Width = lytContainer.Width + testImg.Width + testImg.Margins.Left;
   end;
   }
   isCreated := True;
   isCreated = True;
  '''end;'''<br>
  }
  '''procedure''' ButtonClicked;
  '''begin'''
  void ButtonClicked;
  {
   SetupImageComponent;
   SetupImageComponent;
  '''end;'''<br>
  }
  '''begin'''
   
  isCreated := False;
  {
MyForm := TFrmClomosyBasisForm.Create(Self);
  isCreated = False;
testButton:= MyForm.AddNewButton(MyForm,'testButton','Load Images Horizontally');
  MyForm = TclForm.Create(Self);
testButton.TextSettings.Font.Size:=50;
  testButton= MyForm.AddNewButton(MyForm,'testButton','Load Images Horizontally');
testButton.Align := alCenter;
  testButton.TextSettings.Font.Size=50;
testButton.Height := 50;
  testButton.Align = alCenter;
testButton.Width := 200;<br>
  testButton.Height = 50;
horzScrollBox := MyForm.AddNewHorzScrollBox(MyForm,'horzScrollBox');
  testButton.Width = 200;
horzScrollBox.Align := alTop;
 
horzScrollBox.Height := 100;
  horzScrollBox = MyForm.AddNewHorzScrollBox(MyForm,'horzScrollBox');
horzScrollBox.Margins.Left := 10;
  horzScrollBox.Align = alTop;
horzScrollBox.Margins.Right := 10;
  horzScrollBox.Height = 100;
horzScrollBox.Margins.Top := 10;
  horzScrollBox.Margins.Left = 10;
horzScrollBox.ShowScrollBars := True;<br>
  horzScrollBox.Margins.Right = 10;
lytContainer := MyForm.AddNewLayout(horzScrollBox,'lytContainer');
  horzScrollBox.Margins.Top = 10;
lytContainer.Align := alLeft;
  horzScrollBox.ShowScrollBars = True;
lytContainer.Width := 200;<br>
 
MyForm.AddNewEvent(testButton,tbeOnClick,'ButtonClicked');
  lytContainer = MyForm.AddNewLayout(horzScrollBox,'lytContainer');
MyForm.Run;
  lytContainer.Align = alLeft;
  '''end;'''
  lytContainer.Width = 200;
'''Output:'''<br>
 
[[File:HorzScrollBox.png|500px|frameless]]
  MyForm.AddNewEvent(testButton,tbeOnClick,'ButtonClicked');
  MyForm.Run;
  }
</pre>
 
<b>Output:</b><br>
[[File:HorzScrollBox.png|500px|frameless]]<br>


= See Also =
<h2> See Also </h2>
* [[Components]]
* [[Object Properties]]
* [[Object Properties]]
* [[AddNewEvent]]
* [[AddNewEvent]]
{{#seo:|description=TclHorzScrollBox creates a horizontal scroll box for organizing controls and enabling navigation with customizable size and alignment.}}

Latest revision as of 08:30, 24 April 2025

AComponent : Specifies the parent of the object to be defined.

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

The TclHorzScrollBox class creates a horizontal scroll box. This component is used to organize the contained control elements and provide navigation between content with a horizontal scrollbar.

Feature Use of Definition
TclHorzScrollBox HorzScrollBox1: TclHorzScrollBox; A variable belonging to the TclHorzScrollBox class is created.
AddNewHorzScrollBox HorzScrollBox1 = Form1.AddNewHorzScrollBox(Form1,'testHorzScrollBox'); A new TclHorzScrollBox is added to the form.
ScrollBy(DeltaX,DeltaY: Integer); HorzScrollBox1.ScrollBy(-100,0); To scroll the contents within the control, call ScrollBy.

The DeltaX parameter is the change in pixels along the X-axis.
A positive DeltaX value scrolls the content to the left; a negative value scrolls the content to the right.
The DeltaY parameter is the change in pixels along the Y-axis.
A positive DeltaY value scrolls the content upward; a negative value scrolls the content downward.

ScrollTo(X,Y: Integer); HorzScrollBox1.ScrollTo(-100,0); To scroll the contents within the control, call ScrollTo.

The X parameter is the change in pixels along the X-axis.
A positive X value scrolls the content to the left; a negative value scrolls the content to the right.
The Y parameter is the change in pixels along the Y-axis.
A positive Y value scrolls the content upward; a negative value scrolls the content downward.

Width HorzScrollBox1.Width = 150; Allows adjusting the width of the scrollBox.
Height HorzScrollBox1.Height = 50; Allows adjusting the height of the scrollBox.
Align HorzScrollBox1.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 HorzScrollBox1.Margins.Left = 50; // Right, Top, Bottom With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.

Example

 var
   MyForm:TclForm;
   testButton : TclButton;
   horzScrollBox : TClHorzScrollBox;
   lytContainer : TClLayout;
   testImg : TClProImage;
   isCreated : Boolean;
 void SetupImageComponent;
 var
   i : Integer;
 {
   if (isCreated)  exit;
   lytContainer.Width = 0;
   for (i = 1 to 7)
   {
     testImg = MyForm.AddNewProImage(lytContainer,'testImg'+IntToStr(i));
     testImg.Align = alLeft;
     testImg.Margins.Left = 10;
     testImg.Width = 100;
     MyForm.SetImage(testImg,'https://media1.cucuvi.com/Dic19/BD220BD4-7AEA-43FA-AF97-E62D073AFD1B.jpg');
     lytContainer.Width = lytContainer.Width + testImg.Width + testImg.Margins.Left;
   }
   isCreated = True;
 }
 
 void ButtonClicked;
 {
   SetupImageComponent;
 }
 
 {
   isCreated = False;
   MyForm = TclForm.Create(Self);
   testButton= MyForm.AddNewButton(MyForm,'testButton','Load Images Horizontally');
   testButton.TextSettings.Font.Size=50;
   testButton.Align = alCenter;
   testButton.Height = 50;
   testButton.Width = 200;
   
   horzScrollBox = MyForm.AddNewHorzScrollBox(MyForm,'horzScrollBox');
   horzScrollBox.Align = alTop;
   horzScrollBox.Height = 100;
   horzScrollBox.Margins.Left = 10;
   horzScrollBox.Margins.Right = 10;
   horzScrollBox.Margins.Top = 10;
   horzScrollBox.ShowScrollBars = True;
   
   lytContainer = MyForm.AddNewLayout(horzScrollBox,'lytContainer');
   lytContainer.Align = alLeft;
   lytContainer.Width = 200;
   
   MyForm.AddNewEvent(testButton,tbeOnClick,'ButtonClicked');
   MyForm.Run;
 }

Output:
HorzScrollBox.png

See Also

Retrieved from "http:///index.php?title=TclHorzScrollBox&oldid=3975"