From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
TclLoyout is a container for other graphic object. Use TclLayout to edit multiple chart controls under the same parent. For example, you wanted to put 2 components (label, button) in a single line on the page you want to design. In such cases, you can position these 2 components in a single Layout.
TclLoyout is a container for other graphic object. Use TclLayout to edit multiple chart controls under the same parent. For example, you wanted to put 2 components (label, button) in a single line on the page you want to design. In such cases, you can position these 2 components in a single Layout.


  AddNewLayout(TComponent, xName)
  AddNewLayout(xOwner:TComponent; xName:String): TclLayout


<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 7: Line 7:
<span style="color:blue">''xName''</span> : The name of the defined layout should be written.
<span style="color:blue">''xName''</span> : The name of the defined layout should be written.


Let's create a layout.<br>
1. Create a new project.<br>


2. You need to define TclLayout 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 TclLayout.<br>
{| class="wikitable" style="border: 2px solid #c3d7e0"
 
! style="background-color: #c3d7e0"| Feature !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"|Definition
'''var'''
|-
testLayout : TclLayout;
|TclLayout || Layout1 : TclLayout; || A variable belonging to the TclLayout class is created.
 
|-
3. Add the TclLabel 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.AddNewLabel, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.
|AddNewLayout || Layout1 = MyForm.AddNewLayout(MyForm,'Layout1'); || A new TclLayout is added to the form.
testLayout := MyForm.'''AddNewLayout'''(MyForm,'testLayout');
|-
 
|Width || Layout1.Width = 150; ||Allows adjusting the width of the layout.
4. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewLayout" while the shortcut is in the code block, a pop-up menu will appear.<br>
|-
 
|Height || Layout1.Height = 50; ||Allows adjusting the height of the layout.
[[File:TclLayoutShortcut.png|frameles|400px]]<br><br>
|-
 
|Align || Layout1.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.
As soon as you click, the following block will come automatically.<br>
|-
AddNewLayout(xOwner:TComponent; xName:String);
|Margins || Layout1.Margins.Left = 50; // Right, Top, Bottom ||With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.<br>[[File:PanelAppearance.png|frameless|200px]]<br><br>
 
|}
5. We gave the variable name while defining the TclLayout 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.
 
6. Now let's design our TclLayout component. Let's set the width and height first. For this, you must make the following definitions.
testLayout.Height := 50;
  testLayout.Width := 150;
 
7. 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".
testLayout.Align := alTop;
 
8. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
 
testLayout.Margins.Left:= 50;
testLayout.Margins.Right:= 10;
testLayout.Margins.Top:= 50;
testLayout.Margins.Bottom:= 10;
 
'''Appearance:'''<br>
 
[[File:PanelAppearance.png|frameless|450px]]
 
9. If we want to add click feature to your component, you can use the following procedure. 'BtnOnClick' is a procedure name. For more information about the AddNewEvent component, see the [https://www.docs.clomosy.com/index.php/AddNewEvent page].
MyForm.AddNewEvent(testLayout,tbeOnClick,'BtnOnClick');
 
10. 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>


:'''Base Syntax'''
:'''TRObject Syntax'''
   Var   
   Var   
     MyForm:TclForm;
     MyForm:TclForm;
Line 60: Line 33:
     Edit1 : TclEdit;
     Edit1 : TclEdit;
    
    
   begin
   {
    
    
     MyForm:=TclForm.Create(self);
     MyForm=TclForm.Create(self);
      
      
     Panel1:=MyForm.AddNewPanel(MyForm,'Panel1');
     Panel1=MyForm.AddNewPanel(MyForm,'Panel1');
     Panel1.Align:=ALTop;
     Panel1.Align=ALTop;
     Panel1.Height:=100;
     Panel1.Height=100;
      
      
     Layout1 := MyForm.'''AddNewLayout'''(Panel1,'Layout1');
     Layout1 = MyForm.'''AddNewLayout'''(Panel1,'Layout1');
     Layout1.Align:=ALCenter;
     Layout1.Align=ALCenter;
     Layout1.Height := 50;
     Layout1.Height = 50;
      
      
     Edit1 := MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
     Edit1 = MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
     Edit1.Align:=aLLeft;
     Edit1.Align=aLLeft;
     Edit1.Width := 150;
     Edit1.Width = 150;
      
      
     MyForm.Run;
     MyForm.Run;
    
    
   end;
   }


:'''TRObject Syntax'''
:'''Base Syntax'''
   Var   
   Var   
     MyForm:TclForm;
     MyForm:TclForm;
Line 87: Line 60:
     Edit1 : TclEdit;
     Edit1 : TclEdit;
    
    
   {
   begin
    
    
     MyForm=TclForm.Create(self);
     MyForm:=TclForm.Create(self);
      
      
     Panel1=MyForm.AddNewPanel(MyForm,'Panel1');
     Panel1:=MyForm.AddNewPanel(MyForm,'Panel1');
     Panel1.Align=ALTop;
     Panel1.Align:=ALTop;
     Panel1.Height=100;
     Panel1.Height:=100;
      
      
     Layout1 = MyForm.'''AddNewLayout'''(Panel1,'Layout1');
     Layout1 := MyForm.'''AddNewLayout'''(Panel1,'Layout1');
     Layout1.Align=ALCenter;
     Layout1.Align:=ALCenter;
     Layout1.Height = 50;
     Layout1.Height := 50;
      
      
     Edit1 = MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
     Edit1 := MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
     Edit1.Align=aLLeft;
     Edit1.Align:=aLLeft;
     Edit1.Width = 150;
     Edit1.Width := 150;
      
      
     MyForm.Run;
     MyForm.Run;
    
    
   }
   end;


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

Revision as of 15:05, 22 August 2024

TclLoyout is a container for other graphic object. Use TclLayout to edit multiple chart controls under the same parent. For example, you wanted to put 2 components (label, button) in a single line on the page you want to design. In such cases, you can position these 2 components in a single Layout. 

AddNewLayout(xOwner:TComponent; xName:String): TclLayout

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


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

Example:

TRObject Syntax
 Var   
   MyForm:TclForm;
   Panel1 : TclPanel;
   Layout1 : TclLayout;
   Edit1 : TclEdit;
 
 {
 
   MyForm=TclForm.Create(self);
    
   Panel1=MyForm.AddNewPanel(MyForm,'Panel1');
   Panel1.Align=ALTop;
   Panel1.Height=100;
    
   Layout1 = MyForm.AddNewLayout(Panel1,'Layout1');
   Layout1.Align=ALCenter;
   Layout1.Height = 50;
   
   Edit1 = MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
   Edit1.Align=aLLeft;
   Edit1.Width = 150;
    
   MyForm.Run;
 
 }
Base Syntax
 Var   
   MyForm:TclForm;
   Panel1 : TclPanel;
   Layout1 : TclLayout;
   Edit1 : TclEdit;
 
 begin
 
   MyForm:=TclForm.Create(self);
    
   Panel1:=MyForm.AddNewPanel(MyForm,'Panel1');
   Panel1.Align:=ALTop;
   Panel1.Height:=100;
    
   Layout1 := MyForm.AddNewLayout(Panel1,'Layout1');
   Layout1.Align:=ALCenter;
   Layout1.Height := 50;
   
   Edit1 := MyForm.AddNewEdit(Layout1,'Edit1','Write something...');
   Edit1.Align:=aLLeft;
   Edit1.Width := 150;
    
   MyForm.Run;
 
 end;

Output:
Layout.png

See Also

Retrieved from "http:///index.php?title=TclLayout&oldid=2108"