Copy link to clipboard
Copied
I'm looking for standard reference info on UI elements like popup windows (dialogs, palettes etc). I've been through the Illustrator CS6 Javascript Scripting reference guide and also the CS6 Scripting guide, checking every mention of the words "Window", "Dialog", "Palette" etc (there aren't many), plus related terms like "edittext" and "slider" (which seemingly don't exist in these documents at all), and can't find what I'm looking for.
----------
I'm trying to script a simple info box that contains information generated by a script that doesn't need to be closed before the user continues working.
All I'm trying to find out is the basics. From looking at other scripts I've figured out that you can create a popup box like this:
var box = new Window('dialog', 'Some title');
var panel = box.add(panel, undefined, 'Panel title');
panel.add('edittext', undefined, 'Default value');
panel.add('slider', undefined, /*Default numeric value*/,/*min*/,/*max*/);
var group = box.add(group, undefined, 'Group title');
group = area_len_box.add('group', undefined, 'Title (not displayed)');
group.orientation='row';
group.closeBtn = group.add('button',undefined, 'Close', {name:'close'});
group.closeBtn.onClick = function(){
box.hide();
return false;
}
...which is enough for a very rudimentary input system, but one which has to be closed before the user can return to their work - and I can't find any resource that gives the full options:
- What are the other options for 'new Window'? I'm aware of 'palette' which appears to need an array of four co-ordinates like [20,20,100,100], but it clearly needs something else too as every palette I've made instantly closes. And what else is there beyond Window and Palette?
- What other input devices are there beyond edittext and slider, and what parameters do they each need?
- What can go in the "undefined"s I see everywhere these are used?
- etc etc
There must be a reference to this somewhere, but I can't find it.
1 Correct answer
Here's an attempt at a full consolidated answer:
Scripting interface elements are similar for all Adobe applications - called "ScriptUI". There are two PDFs:
- Peter Kahrel's ScriptUI documentation (recommended)
- The Adobe Javascript Tools Guide (not as good, but official)
There are two ways to browse the object structure to see what exists:
- Use the generated web pages at http://jongware.mit.edu/, e.g.
- ScriptUI - http://jongware.mit.edu/scriptuihtml/Sui/index_1.html
- Illustrator (CS6) - http://jongware.mit.edu/iljscs6html/iljscs6/
Explore related tutorials & articles
Copy link to clipboard
Copied
I thought of searching on every specific term above and found an unoffical document for "ScriptUI" by Peter Kahrel, hosted by his personal site not available on Adobe.com. This looks like the missing reference for scripting Illustrator user interface elements and information boxes that I was referring to.
I recognise the name Kahrel as a well known scripter so it seems legit... It states early on that "dialogs" prevent the user from doing anything else but "palettes" allow them to carry on, looks like exactly what I was looking for.
It looks like scripting for interface and interaction elements is identical between each scriptable Adobe application including Photoshop, InDesign etc - which meant documenting this wasn't the responsibility of any one product team... which meant nobody at Adobe ever actually did it (until Peter Kahrel stepped in to fill the void - very much appreciated!)......
Copy link to clipboard
Copied
Also, looks like there was an official Adobe version - called the "Javascript Tools Guide", not a title I'd have ever thought to look for - but there seems to be no CS6 version of this, only CS5. It doesn't seem as well written as the Peter Kahrel document.
No evidence of any SEO-friendly web-orientated reference like every major programming system has - just print orientated PDFs. Becasue clearly a stack of printed sheets of paper is a better reference lookup system than purpose-designed search engines...
Copy link to clipboard
Copied
you already found the 2 only documents that I know of about the ScriptUI, Peter's is the most clear and easy way to start, but get absolutely every object, you need the Tools Guide, there's a short cut to it,
- open the ESTK
- go to Help, and you'll see the Javascript Tools Guide, + the Intro to Scripting guide
you can also use the Object Model Viewer under the Help Menu.
Copy link to clipboard
Copied
Also see… http://www.jongware.com/idjshelp.html
Copy link to clipboard
Copied
Cool, thanks MuppetMark - through following some links from that page I found some actual browsable web-based documentation for Adobe scripting:
- ScriptUI - http://jongware.mit.edu/scriptuihtml/Sui/index_1.html
- Illustrator (CS6) - http://jongware.mit.edu/iljscs6html/iljscs6/
- InDesign (CS6) - http://jongware.mit.edu/idcs6js
- Photoshop (CS5) - http://jongware.mit.edu/pscs5js_html/psjscs5/
- Various others including downloadable zips for using these offline - http://jongware.mit.edu/
It only gives bare-bones information - no examples or detailed explanations - but it's a good start and useful for browsing what exists.
Copy link to clipboard
Copied
Here's an attempt at a full consolidated answer:
Scripting interface elements are similar for all Adobe applications - called "ScriptUI". There are two PDFs:
- Peter Kahrel's ScriptUI documentation (recommended)
- The Adobe Javascript Tools Guide (not as good, but official)
There are two ways to browse the object structure to see what exists:
- Use the generated web pages at http://jongware.mit.edu/, e.g.
- ScriptUI - http://jongware.mit.edu/scriptuihtml/Sui/index_1.html
- Illustrator (CS6) - http://jongware.mit.edu/iljscs6html/iljscs6/
- InDesign (CS6) - http://jongware.mit.edu/idcs6js
- Photoshop (CS5) - http://jongware.mit.edu/pscs5js_html/psjscs5/
- Open up the Adobe Extendscript Toolkit (ESTK, on a Mac it's in Applications > Utilities > Adobe Utilities...), then open Help > Object Model Viewer, choosing "ScriptUI classes" from the top left drop down menu.
Copy link to clipboard
Copied
A nice cross-program-summary.
But too bad that you did not gotten helpful answers.
Copy link to clipboard
Copied
yes he did, he was looking for the UI documentation.
Copy link to clipboard
Copied
One thing to add specific to illustrator that's not coverred by the docs above (not that I can see, anyway):
If you try to use palettes in Illustrator, they'll disappear straight away, unless your script starts with this:
#target Illustrator
#targetengine main
Copy link to clipboard
Copied
Thanks!!!!!!!!!! I have been pulling my hair out trying to figure out why I could run this in the debugger and it would work fine. but the second I launched it from illustrator it would just close as fast as it opened!
-Boyd
Copy link to clipboard
Copied
From nearly 10 years in the future, thank you for asking and posting these. It only took me an hour of frantic searching to stumble across this post. All I wanted was my own custom panel with widgets inside Illustrator, yet I couldn't come up with the correct phrasing for Google to help me. Thanks again!!!!
Copy link to clipboard
Copied
At first you've forgot to show() the window. And otherwise the whole thing is wrong and unstructured.
Perhaps this example helps you a little bit.
var box = new Window('dialog', "Some title");
box.panel = box.add('panel', undefined, "Panel title");
box.panel_text1 = box.panel.add('edittext', undefined, "Default_value_1");
box.panel_text2 = box.panel.add('edittext', undefined, "Default_value_2");
box.panel_text3 = box.panel.add('edittext', undefined, "Default_value_3");
box.panel2 = box.add('panel', undefined, "Title (not displayed)");
box.panel2.group = box.panel2.add('group', undefined );
box.panel2.group.orientation='row';
box.panel2.group.text1 = box.panel2.group.add('statictext', undefined, "Press Button to close");
box.panel2.group.closeBtn = box.panel2.group.add('button',undefined, "Close", {name:'close'});
box.panel3 = box.add('panel', undefined, "Title 2 (not displayed)");
box.panel3.group = box.panel3.add('group', undefined, );
box.panel3.group.orientation='column';
box.panel3.group.text1 = box.panel3.group.add('statictext', undefined, "Dummy Button for nothing");
box.panel3.group.closeBtn = box.panel3.group.add('button',undefined, "Somewhat", {name:'Somewhat'});
box.panel2.group.closeBtn.onClick = function(){
box.close();
}
box.show()
And in the ScriptUI there is hardly difference between CS5 and CS6. By the way: Peter Kahrel is a good address.

