User Interface building

Find out why the . goes before the /

Moderator: Paul Tuersley

Post Reply
miki
Posts: 17
Joined: December 20th, 2004, 10:48 am
Location: London, UK
Contact:

I'm finding it very cumbersome building user interfaces into my scripts. It's particularly annoying to have to specify dimensions of every widget in absolute co-ordinates.

Has anyone got any tools or tips to make this easier?

So far I've found that Panels are good way to break up a big UI into more managable modules - which helps a bit.

Miki
vidpat
Posts: 86
Joined: October 21st, 2004, 12:36 am
Location: Phoenix, AZ
Contact:

When I started writing scripts for AE, I was frustrated by Adobe's script UI implementation, too. I ended up writing a basic layout manager. There were a few things I had wanted to change before posting it, but I haven't gotten around to it. However, if there is interest, I will gladly post the script as it is.

Peter
User avatar
Disciple
Posts: 137
Joined: June 5th, 2004, 8:05 am
Location: Los Angeles, CA
Contact:

Please do, would be very interesting to see how you did it.

Thanks
Alex
vidpat
Posts: 86
Joined: October 21st, 2004, 12:36 am
Location: Phoenix, AZ
Contact:

I posted the layout manager in the General Scripts Library.
I hope that it is of use.

Peter
miki
Posts: 17
Joined: December 20th, 2004, 10:48 am
Location: London, UK
Contact:

Thanks very much for posting your script!

Could you possibly give us some example code showing how do build a basic UI using the script? (E.g. a window with a few widgets in it)

Thanks again,

Miki
vidpat
Posts: 86
Joined: October 21st, 2004, 12:36 am
Location: Phoenix, AZ
Contact:

The following is the UI code from a script that sorts layers within a composition. This demonstrates using the layout manager.

Code: Select all

// Globals used for some components to retrieve values later
var sortBy, optReverse, optSelectedOnly, optUnlockedOnly;

// Include UILayout.jsx and any other scripts.
includeScripts = ["(lib)/UILayout.jsx", /* ... */];
for (var i = 0; i < includeScripts.length; i++) {
	var scriptFile = new File(includeScripts[i]);
	if (scriptFile.open()) {
		eval(scriptFile.read());
		scriptFile.close();
	}
	else {
		alert(NAME_STR + ":\n\nUnable to open included file " + includeScripts[i] + ".");
	}
}

// Used to enable/disable components as needed
function validateSelection() {
	if (this.value) sortBy = this.name;
	optSelectedOnly.enabled = !sortBySel.value;
	optUnlockedOnly.enabled = !optSelectedOnly.value && !sortBySel.value;
}

// Create our dialog and populate the UI
function buildDialog() {
	// Window Bounds must be specified, but the LM can resize it.
	// In this case, the LM will resize the Window's height.
	var dlg = new Window("dialog", NAME_STR, [100, 100, 470, 500]);

	sortBy = D_ORDER_BY;
	// Using addUI() saves us from entering Bounds.
	var sortPanel = dlg.addUI("panel", "Sort By");
	var sortByIn = sortPanel.addUI("radiobutton", "inPoint");
	sortByIn.name = "sortIn";
	var sortByOut = sortPanel.addUI("radiobutton", "outPoint");
	sortByOut.name = "sortOut";
	var sortBySel = sortPanel.addUI("radiobutton", "Selection Order");
	sortBySel.name = "sortSel";

	var optPanel = dlg.addUI("panel", "Options");
	// Change the flow direction for the LM for this container.
	optPanel.layoutFlow = UILM_FLOW_DOWN;
	optReverse = optPanel.addUI("checkbox", "Sort Descending");
	optReverse.value = D_REVERSE_ORDER;
	optSelectedOnly = optPanel.addUI("checkbox", "Only sort selected layers");
	optSelectedOnly.value = D_SELECTED_ONLY;
	optUnlockedOnly = optPanel.addUI("checkbox", "Only sort unlocked layers");
	optUnlockedOnly.value = D_UNLOCKED_ONLY;
	optUnlockedOnly.enabled = !optSelectedOnly.value;

	dlg.addUI("button", "Cancel", {name: "cancel"});
	dlg.addUI("button", "Sort", {name: "ok"});

	sortByIn.onClick = validateSelection;
	sortByOut.onClick = validateSelection;
	sortBySel.onClick = validateSelection;
	optSelectedOnly.onClick = validateSelection;

	sortPanel.children[sortBy].value = true;

	// Lay out the components.
	layoutUI(dlg);
	// Call center() after layoutUI() since the LM can resize the Window.
	dlg.center();
	return dlg;
}
I hope this provides a general idea of how to use UILayout.jsx.
Please let me know if you have any more questions.

Peter
Impudent1
Posts: 57
Joined: June 12th, 2004, 6:40 pm

I haven't had time to try using it yet but it definately looks like a great tool. My one question is:
Does the script take into account the UI size differences between mac and pc buttons?
vidpat
Posts: 86
Joined: October 21st, 2004, 12:36 am
Location: Phoenix, AZ
Contact:

The default button width is varied based on Windows/Mac and whether the text is Japanese, based on the code in Adobe's example DemoPalette.jsx. I have only used the script under Windows, so I am not certain how well all of the default sizes will port to the Mac. The way UILayout.jsx is presently set up, the default values are global variables and can be changed as needed.

I certainly would be interested in making the script as portable and useful as possible. Any suggestions as to default sizes for other configurations would be welcome.

Peter
Impudent1
Posts: 57
Joined: June 12th, 2004, 6:40 pm

Nice, I had planned on getting around to make some global functions like the button scale.

I will have to give it a wheel for the next ui script :)
Post Reply