How can I make this type of ScriptUI as you see in the model image?

[Adirai Maji]

I want to make this type of UI for my script. But It is kind of headache for me to give space between the buttons 1&2 and buttons 3&4. If I use alignment It doesn't work. Can anyone help me to achieve this??

I Can do that by introducing a statictext between 1&2 and 3&4 with bunch of spaces. But is there any simple/ procedural way to make it possible??

[Tomas Sinkunas · Accepted solution]

This is rather a straight forward way of doing things. 

The magic here is element.alignment and parentGroup.alignChildren properties.

(function() {
	var win = new Window('palette', 'script', undefined, {
		resizeable: true
	});

	win.alignChildren = ['fill', 'top'];


	var grpLine1 = win.add('group');
	var btn1 = grpLine1.add('button', undefined, '1');
	var btn2 = grpLine1.add('button', undefined, '2');
	btn2.alignment = ['right', 'top'];


	var grpLine2 = win.add('group');
	var btnMiddle = grpLine2.add('button', undefined, 'MIDDLE BUTTON');
	btnMiddle.alignment = ['fill', 'top'];
	btnMiddle.preferredSize.width = 300;


	var grpLine3 = win.add('group');
	var btn3 = grpLine3.add('button', undefined, '3');
	var btn4 = grpLine3.add('button', undefined, '4');
	btn4.alignment = ['right', 'top'];


	win.onResizing = win.onResize = function() {
		this.layout.resize();
	};

	win.center();
	win.show();
})();

[Adirai Maji]

Thank you so much. I wasn't aware of element.alignChildren until now. Thank you somuch for make my life easier.

[Tomas Sinkunas]

You can find more info in the docs: http://estk.aenhancers.com/4%20-%20User-Interface%20Tools/window-object.html?highlight=alignchildren...