From Clomosy Docs
Responsive design is achieved not through flexible structures like in the web world, but by dynamically adjusting the size and position of visual components.
Especially in desktop applications, a responsive layout can be created using properties like Align, which resizes the component based on the width and height values of its container.
Responsive Design in Clomosy
Align Property
It is used to adjust the position and size of a component relative to its parent (container). With this method, as the size of the form changes, the objects inside it also adjust according to the form.
Pnl1.Align = alTop; // The panel is fixed at the top, and it expands horizontally as the form grows.
Memo1.Align = alClient; // Fills the remaining area.
Container Resizing
In Clomosy, the application can resize components according to the screen size of the device it is opened on. This is achieved by using the component's Align property with width/height calculated using percentage values.
Top/Bottom Layout
When set to Top and Bottom, the height can be adjusted.
Btn1.Align = AlMostTop;
Btn1.Height = (Pnl1.Height*35)/100; // %35
Left/Right Layout
When set to Left and Right, the width can be adjusted.
Img1.Align = AlLeft;
Img1.Width = (Pnl1.Width*30)/100; // %30
Filling the Entire Area
To fill the entire content of the container, Client or Contents is used. When used this way, Margins can be applied.
Pnl1.Align = AlClient;
Pnl1.Margins.Top = 5;
Pnl1.Margins.Bottom = 5;
Pnl1.Margins.Left = 5;
Pnl1.Margins.Right = 5;
Layout Based on Device Type
In Clomosy, by determining the behavior according to the screen size (MainForm.clWidth, MainForm.clHeight), a different design setup can be created for different devices.
if (MainForm.clWidth < 600)
- AnaPanel.Align = alClient; // Mobile view
else
- AnaPanel.Align = alTop; // Different view for larger screens
Scrollable Structures (Scrollable Panels)
If the panel content exceeds the screen, providing scroll support is also a part of the responsive approach. Components such as TclVertScrollBox or TclHorzScrollBox can be used.
Example:
Example
var
MyForm:TCLForm;
PnlMain,Pnl2, Pnl3, Pnl4 : TclProPanel;
Lbl1 : TclProLabel;
Combo1: TCLComboBox;
Btn1, Btn2 : TclProButton;
Img1 : TclImage;
QRCode : TclQRCodeGenerator;
Switch1 : TclSwitch;
void SetObjectMargins(AObject,AValue)
{
AObject.Margins.Top = AValue;
AObject.Margins.Bottom = AValue;
AObject.Margins.Left = AValue;
AObject.Margins.Right = AValue;
}
{
MyForm = TCLForm.Create(Self);
PnlMain=MyForm.AddNewProPanel(MyForm,'PnlMain');
PnlMain.Align = AlClient;
SetObjectMargins(PnlMain,10);
PnlMain.clProSettings.RoundHeight = 10;
PnlMain.clProSettings.RoundWidth = 10;
PnlMain.clProSettings.IsRound = True;
PnlMain.clProSettings.BorderColor = clAlphaColor.clHexToColor('#b90e1f');
PnlMain.clProSettings.BackgroundColor = nil;
PnlMain.clProSettings.BorderWidth = 2;
PnlMain.SetclProSettings(PnlMain.clProSettings);
Pnl2=MyForm.AddNewProPanel(PnlMain,'Pnl2');
Pnl2.Align = AlMostTop;
Pnl2.Height = (PnlMain.Height*15)/100; //PnlMain %15
SetObjectMargins(Pnl2,5);
Pnl2.SetclProSettings(PnlMain.clProSettings);
Switch1 = MyForm.AddNewSwitch(Pnl2,'Switch1');
Switch1.Align = AlLeft;
Switch1.Width = (Pnl2.Width*20)/100; //Pnl2 %20
SetObjectMargins(Switch1,20);
Combo1 = MyForm.AddNewComboBox(Pnl2,'Combo1');
Combo1.Align = AlClient;
SetObjectMargins(Combo1,5);
Lbl1=MyForm.AddNewProLabel(PnlMain,'Lbl1','RESPONSIVE - DESIGNING');
Lbl1.Align = AlMostTop;
Lbl1.Height = (PnlMain.Height*10)/100; //PnlMain %10
SetObjectMargins(Lbl1,5);
Lbl1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#b90e1f');
Lbl1.clProSettings.BorderWidth = 1;
Lbl1.clProSettings.FontHorzAlign = palCenter;
Lbl1.clProSettings.FontVertAlign = palCenter;
Lbl1.SetclProSettings(Lbl1.clProSettings);
QRCode = MyForm.AddNewQRCodeGenerator(PnlMain,'QRCode','https://www.docs.clomosy.com/Main_Page');
QRCode.Align = AlClient;
QRCode.Height = (PnlMain.Height*10)/100; //PnlMain %10
SetObjectMargins(QRCode,5);
Pnl3=MyForm.AddNewProPanel(PnlMain,'Pnl3');
Pnl3.Align = AlBottom;
Pnl3.Height = (PnlMain.Height*30)/100; //PnlMain %30
SetObjectMargins(Pnl3,10);
Pnl3.SetclProSettings(PnlMain.clProSettings);
Img1 = MyForm.AddNewImage(Pnl3,'Img1');
Img1.Align = AlLeft;
Img1.Width = (Pnl3.Width*30)/100; //Pnl3 %30
SetObjectMargins(Img1,20);
MyForm.setImage(Img1,'https://clomosy.com/demos/clomosylearn.png');
Pnl4=MyForm.AddNewProPanel(Pnl3,'Pnl4');
Pnl4.Align = AlClient;
SetObjectMargins(Pnl4,5);
Pnl4.SetclProSettings(PnlMain.clProSettings);
Btn1 = MyForm.AddNewProButton(Pnl4, 'Btn1', 'BUTTON 1');
Btn1.Align = AlMostTop;
Btn1.Height = (Pnl4.Height*35)/100; //Pnl4 %35
SetObjectMargins(Btn1,5);
Btn1.SetclProSettings(PnlMain.clProSettings);
Btn2 = MyForm.AddNewProButton(Pnl4, 'Btn2', 'BUTTON 2');
Btn2.Align = AlTop;
Btn2.Height = (Pnl4.Height*35)/100; //Pnl4 %35
SetObjectMargins(Btn2,5);
Btn2.SetclProSettings(PnlMain.clProSettings);
MyForm.Run;
}
Output
See Also