The Group Box

Group box object is based on Vertical Layout, so it lays objects vertically but with titled grouping border. The next example shows a group box with default parameters.

var btnSubmit = new TButton("Submit");
var layGroupBox = new TGroupBox('Test Group Box');
var txtEmail = new TTextBox();
var wndGroupBox = createWindow('Group Box Sample');

layGroupBox.add(new TText('Enter your email:'));
layGroupBox.add(txtEmail);
layGroupBox.add(btnSubmit);

wndGroupBox.add(layGroupBox);
showModal(wndGroupBox);

Group box constructor takes four parameters:

var layGroupBox = new TGroupBox(title, borderColor, margin, padding);

Group Box Layouts

You may use any layout to arrange your UI objects inside a group box. In the next example, we used a simple login form inside a group box.

var btnLogin = new TButton("Login");
var layForm = new TFormLayout();
var layGroupBox = new TGroupBox('Please Login', '#8AC007', 5, 10);
var txtPassword = new TTextBox();
var txtUserName = new TTextBox();
var wndGroupBox = createWindow('Form Layout Group Box');

layForm.add(new TText('Username:'), txtUserName);
layForm.add(new TText('Password:'), txtPassword);

layGroupBox.alignTitleLeft();
layGroupBox.add(layForm);
layGroupBox.add(btnLogin);

wndGroupBox.add(layGroupBox);
showModal(wndGroupBox);
Group Box Methods
Method Description
add Adds UI object to the group box
alignLeft Positions all UI object on the group box to the left. By default group box objects have center align
alignRight Positions all UI object on the group box to the right. By default group box objects have center align
alignTitleLeft Positions group box title to the left. By default group box title has center align
alignTitleRight Positions group box title to the right. By default group box title has center align
setBorderColor Sets group box border color. For example:
layGroupBox.setBorderColor('#40B3DF');
setTitle Sets group box title text. For example: layGroupBox.setTitle('test');
setTitleColor Sets group box title text color. For example:
layGroupBox.setTitleColor('#40B3DF');