From Clomosy Docs

(Created page with " AddNewProButton(TComponent, xName, xCaption): TClProButton Unlike the standard button component, it has the feature of adding an image on the button. Apart from that, when you use the standard button, there is no clicking effect on the button when you run the application. You will see this feature when you use the ProButton. The logic is the same as the standard button. Let's create our button with a few changes on the code.<br> Below are the json parameters. With thes...")
 
No edit summary
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
AddNewProButton(TComponent, xName, xCaption): TClProButton
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewProButton(AComponent: TCLComponent; xName, xCaption: string): TClProButton;
</div>


Unlike the standard button component, it has the feature of adding an image on the button. Apart from that, when you use the standard button, there is no clicking effect on the button when you run the application. You will see this feature when you use the ProButton. The logic is the same as the standard button. Let's create our button with a few changes on the code.<br>
<span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br>
Below are the json parameters. With these parameters, you can add new features to your button along with the standard features.<br>
* caption
* Width
* Height
* PositionX
* PositionY
* Align
* TextColor
* BackgroundColor
* TextSize
* TextVerticalAlign
* TextHorizontalAlign
* TextBold
* MarginTop
* MarginBottom
* MarginRight
* MarginLeft
* RoundHeight
* RoundWidth
* BorderColor
* BorderWidth
* ImgFit
* ImgStretch
* ImgUrl


Let's define the proButton at the beginning.<br>
<span style="color:blue"><b>xName</b></span> : The name of the defined button should be written.<br>
<blockquote style="background-color:#F7F5EB">
'''Var'''<br>
testBtn : TClProButton;
</blockquote>
Let's add ProButton to MyForm. Then let's give properties to our button with json structure.<br>
<blockquote style="background-color:#F7F5EB">
testBtn := MyForm.AddNewProButton(MyForm,'testBtn',<nowiki>''</nowiki>);<br>
  clComponent.SetupComponent(testBtn,'{"caption":"Click Hero","Align" : "Center","MarginBottom":135,"Width" :200, "Height":70,"RoundHeight":2,
  "RoundWidth":2,"BorderColor":"#7A3E65","BorderWidth":2}');
</blockquote>


We use the "SetImage" function to add an image to the button.<br>
<span style="color:blue"><b>xCaption</b></span> : You can add a title.<br>
<blockquote style="background-color:#F7F5EB">
MyForm.SetImage(testBtn,'https://www.pngitem.com/pimgs/m/7-73713_play-game-button-png-lilac-transparent-png.png');
</blockquote>


Finally, it gives a message when the button is clicked. A procedure has been established for this.<br>
Unlike the standard button component, it has the feature of adding an image on the button. Apart from that, when you use the standard button, there is no clicking effect on the button when you run the application. You will see this feature when you use the TclProButton. The logic is the same as the standard button. <br>
<blockquote style="background-color:#F7F5EB">
procedure BtnOnClick;<br>
begin<br>
  ShowMessage('Hello..');<br>
end;<br><br>
begin<br>
MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');<br>
end;
</blockquote>
'''Code:'''<br>
'''Var''' 
MyForm:TclForm;
testBtn : TClProButton;<br>
'''procedure''' BtnOnClick;
'''begin'''
        ShowMessage('Hello..');
'''end;'''<br>
'''begin'''
  MyForm := TclForm.Create(Self);<br>
  testBtn := MyForm.AddNewProButton(MyForm,'testBtn',<nowiki>''</nowiki>);
  clComponent.SetupComponent(testBtn,'{"caption":"Click Hero","Align" : "Center","MarginBottom":135,"Width" :200,
"Height":70,"RoundHeight":2,
  "RoundWidth":2,"BorderColor":"#7A3E65","BorderWidth":2}');
  MyForm.SetImage(testBtn,'https://www.pngitem.com/pimgs/m/7-73713_play-game-button-png-lilac-transparent-png.png');
  MyForm.AddNewEvent(testBtn,tbeOnClick,'BtnOnClick');
  MyForm.Run;<br> 
'''end;'''
'''Output:'''<br>


[[File:ProButton2.png|frameless|400px]]
<div class="alert alert-info" role="alert" data-bs-theme="light">
Refer to the [[TclButton]] page for standard button usage.
</div>
 
<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
|-
|TClProButton || ProButton1 : TClProButton;  || A variable belonging to the TClProButton class is created.
|-
|AddNewProButton || ProButton1 = Form1.AddNewProButton(Form1,'ProButton1','Test Button Caption'); || A new TClProButton is added to the form.
|}
</div>
 
In addition to the features of a standard button, TClProButton offers new and advanced features, which we will explain in detail below.<br>
 
<div class="row">
<div class="col-lg-6">
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
<div style="font-size: 16px;font-weight: bold;text-align:left;">
  clProSettings Properties
</div>
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>TextSettings</li>
<li>FontColor</li>
<li>FontName</li>
<li>FontSize</li>
<li>FontVertAlign</li>
<li>FontHorzAlign</li>
<li>BackgroundColor</li>
<li>BorderColor</li>
<li>IsTransparent</li>
<li>IsFill</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>IsRound</li>
<li>BorderWidth</li>
<li>PictureAutoFit</li>
<li>PictureStretch</li>
<li>PictureSource</li>
</div>
</div>
</div>
</div>
<br>
 
<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>
 
<b>Example</b><br>
 
<pre>
Var 
  Form1:TclForm;
  ProBtn : TClProButton;
 
void BtnOnClick;
{
  ShowMessage('Hello..');
}
 
{
  Form1 = TclForm.Create(Self);
 
  ProBtn = Form1.AddNewProButton(Form1,'ProBtn','Click Hero');
  ProBtn.Align = alCenter;
  ProBtn.Width = 150;
  ProBtn.Height = 70;
  ProBtn.clProSettings.FontColor = clAlphaColor.clDarkorchid;
  ProBtn.clProSettings.FontSize = 12;
  ProBtn.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
  ProBtn.clProSettings.FontHorzAlign = palCenter;
  ProBtn.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
  ProBtn.clProSettings.IsFill = True;
  ProBtn.clProSettings.PictureSource = 'https://clomosy.com/demos/foodInformationBox.png';
  ProBtn.SetclProSettings(ProBtn.clProSettings);
 
  Form1.AddNewEvent(ProBtn,tbeOnClick,'BtnOnClick');
  Form1.Run;
}
</pre>
 
 
<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]
{{#seo:|title=}}
{{#seo:|description=Explore TclButton in Clomosy, a customizable component for triggering actions with adjustable size, alignment, and text settings.}}

Latest revision as of 08:45, 16 April 2025

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

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

xCaption : You can add a title.

Unlike the standard button component, it has the feature of adding an image on the button. Apart from that, when you use the standard button, there is no clicking effect on the button when you run the application. You will see this feature when you use the TclProButton. The logic is the same as the standard button.

Feature Use of Definition
TClProButton ProButton1 : TClProButton; A variable belonging to the TClProButton class is created.
AddNewProButton ProButton1 = Form1.AddNewProButton(Form1,'ProButton1','Test Button Caption'); A new TClProButton is added to the form.

In addition to the features of a standard button, TClProButton offers new and advanced features, which we will explain in detail below.

clProSettings Properties

  • TextSettings
  • FontColor
  • FontName
  • FontSize
  • FontVertAlign
  • FontHorzAlign
  • BackgroundColor
  • BorderColor
  • IsTransparent
  • IsFill
  • RoundHeight
  • RoundWidth
  • IsRound
  • BorderWidth
  • PictureAutoFit
  • PictureStretch
  • PictureSource

  • Example

    Var   
      Form1:TclForm;
      ProBtn : TClProButton;
    
    void BtnOnClick;
    {
      ShowMessage('Hello..');
    }
    
    {
      Form1 = TclForm.Create(Self);
      
      ProBtn = Form1.AddNewProButton(Form1,'ProBtn','Click Hero');
      ProBtn.Align = alCenter;
      ProBtn.Width = 150;
      ProBtn.Height = 70;
      ProBtn.clProSettings.FontColor = clAlphaColor.clDarkorchid;
      ProBtn.clProSettings.FontSize = 12;
      ProBtn.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
      ProBtn.clProSettings.FontHorzAlign = palCenter;
      ProBtn.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
      ProBtn.clProSettings.IsFill = True; 
      ProBtn.clProSettings.PictureSource = 'https://clomosy.com/demos/foodInformationBox.png';
      ProBtn.SetclProSettings(ProBtn.clProSettings);
      
      Form1.AddNewEvent(ProBtn,tbeOnClick,'BtnOnClick');
      Form1.Run;
    }
    


    See Also