[JS] ScriptUI groups

Hi all,
I am exploring ScriptUI and cannot make groups to work. Items I add to groups doesn't show up.
An example of my code look like this:
win.radioPanel = win.add("panel", [25, 140, 295, 275]);
win.radioPanel.rpGrp = win.radioPanel.add('group');
win.radioPanel.rpGrp.radOne = win.radioPanel.rpGrp.add("radiobutton");
What am I doing wrong?

In general, use the layout manager to place things.
When you specify the bounds like you do in the panel, the layout manager "sees" the bounds in the container, and stops. It will not layout the contents of the container. Possible "containers" are windows, panels, and groups.
Basically, once you specify the bounds for a container, you're committed. You have to specify the bounds for everything in it.
var win = new Window( "palette", "test" );
win.radioPanel = win.add("panel");
win.radioPanel.rpGrp = win.radioPanel.add('group');
win.radioPanel.rpGrp.radOne = win.radioPanel.rpGrp.add("radiobutton");
win.center();
win.show();
This will give you a dorky looking little palette.
Regards
Bob

Similar Messages

JS/ScriptUI: placeholder madness

I created this yummy text box entry placeholder for CS4 on my Mac:
but for some reason this fails to draw correctly on Windows! If the edit box is active and the cursor is in it, the text is not drawn but the cursor blinks at correct position at the end of that invisible text. Moving the cursor or typing in something makes the text pop back into view. (Sorry, should have thought of making a 'shot of that as well.) A real shame, because on my Mac it works as I meant it to: placeholder text shows when the field is inactive and empty, placeholder disappears when you enter the field and type anything in it. Delete text and leave box makes it appear again.
Is this an error in my code (silently corrected on the Mac but showing up on 'the other platform'), or is it an error on the Windows' Side of the world? Or is this just something one should not be messing with using ScriptUI? (A fairly reasonable explanation.) Or might it work correctly on CS5 for both platforms? (In which case I could put in a platform/version check -- "no fancy dialog for you, you Older Version on a Microsoft Platform!").
I also have a variant of same code that would underline static text, which also shows up correctly on Mac and not-at-all on Windows -- but then it may be failing for the very same reason.
My code:
var w = new Window ("dialog", "Display Placeholder");
w.bg = w.graphics.newBrush(w.graphics.BrushType.SOLID_COLOR,[1,1,1]);
w.textPen = w.graphics.newPen(w.graphics.PenType.SOLID_COLOR,[0.67,0.67,0.67], 1);
with(w.add ("group"))
add ("statictext", undefined, "Text");
editbox = add ("edittext", undefined, '');
editbox.characters = 32;
editbox.onDraw = function(d)
    if( this.text || this.active)
      this.parent.onDraw(d)
    else
      this.graphics.rectPath (0,0,this.size.width,this.size.height);
      this.graphics.fillPath(w.bg);
      this.graphics.drawString("<required>",w.textPen,0,0,this.graphics.font);

Hi Guys
Peter, I'm afraid I should disagree with you on a few points.
(...) In CS5.5, your script breaks on this.parent.onDraw(d). The error message is "this.parent.onDraw is not a function", which is fair enough, because onDraw is a callback. (...)
The reason why this.parent.onDraw is not a function in Jongware's code, is just that this.parent.onDraw is undefined—as John supposed. When we call x( ) from an undefined x var, the interpreter prompts a not-a-function error.
Why is this.parent.onDraw undefined? Because there is no line in the code which sets up such member on this.parent—which by the way is a (ScriptUI) Group object, considering the context. What we call 'callback' functions are optional custom methods that are supposed to connect to events, usually, but widget prototypes do not provide any default callbacks. myWidget.onDraw, myWidget.onClick, etc., are simply undefined as long as we don't set them.
In addition, the onDraw callback, when defined, does not work the same way that other event callbacks (which are high-level fake event listeners and could generally be developed through an addEventListener() setter providing much more precision). Indeed, onDraw has no actual event counterpart (or, if any, it is not exposed to scripters as 'show', 'focus', 'blur', 'change', 'click', etc., are.) As documented, onDraw is automatically called when a widget needs to be (re)drawn, but this 'when' is highly unpredictable as it depends on the user interactions, the OS, and probably a number of low-level events.
We also know that custom layout—i.e. myContainer.layout.layout(1)—triggers such drawing stages (from containers). Also, there are crazy paths to get a non-container widget redrawn, for example:
    wg.visible=false; wg.visible=true;
or sometimes:
   wg.size = [wg.size[0],wg.size[1]];
The issue with manually calling a custom onDraw() method is we generally don't know when it is safe to call it and whether it may conflict with the automatic calls. I found circumstances where manual onDraw() simply fails due to a temporary invalidation of the widget.graphics property (I believe this depends on the object type). This may explain why Peter wrote:
(...) onDraw is a function but not one that you call like x.onDraw()
However, onDraw is indeed a simple (callable) function if the script did it so. What matters is that a custom onDraw() overrides and bypasses, as much as possible, the native drawing stage. So, in many cases, an empty onDraw() callback makes the widget totally undrawn (hidden) although room has been reserved to it during layout. (That's not true for composite or very interactive widgets—such as scrollbar or listbox—which still inherit from low-level painting events, at least partially.)
ANYWAY, in Jongware's script I don't see any reason to make this.onDraw() attempt to call a hypothetical parent onDraw method—which for the time being does not exist—or even to trigger the native drawing stage on the parent. Why? I guess there is a confusion between drawing and layout (?)
What is sure is that the statement this.parent.onDraw(d) fails. And, since ScriptUI is known for hushing errors up in many event handlers, you get unaccountable side effects in your EditText control.
To me, a valid approach would be to invoke the ScriptUIGraphics.drawOSControl() method when you need to produce the default widget skin before further customization.
The following snippets should provide better results (unfortunately, I can't test this on all systems):
// =====================================
// EditText placeholder
// =====================================
var u,
    w = new Window('dialog', "Display Placeholder"),
    e1 = w.add('edittext'),
    e2 = w.add('edittext'),
    b = w.add('button', u, "OK"),
    wgx = w.graphics,
    grayPen = wgx.newPen(wgx.PenType.SOLID_COLOR,[.67,.67,.67], 1);
e1.characters = e2.characters = 32;
e1.onDraw = e2.onDraw = function(/*DrawState*/)
    var gx = this.graphics;
    gx.drawOSControl();
    this.text || this.active || gx.drawString("<required>", grayPen, 0, 0);
w.show();
And:
// =====================================
// Underlined StaticText
// =====================================
var u,
    w = new Window('dialog', "Underline Me!"),
    s1 = w.add('statictext', u, "Not Underlined"),
    s2 = w.add('statictext', u, "Underlined"),
    b = w.add('button', u, "OK"),
    wgx = w.graphics,
    linePen = wgx.newPen(wgx.PenType.SOLID_COLOR,[0,0,0], 1);
s2.preferredSize[1] += 3;
s2.onDraw = function(/*DrawState*/)
    var gx = this.graphics,
        sz = this.preferredSize,
        y = sz[1]-1;
    gx.drawOSControl();
    gx.newPath();
    gx.moveTo(0, y);
    gx.lineTo(sz[0],y);
    gx.strokePath(linePen);
w.show();
Hope that helps.
@+
Marc

ScriptUI panel renders in ESTK but not in AE

Hi There,
I just finished watching David Torno's excellent tutorials on developing ScriptUI panels with Extendscript. I followed all of his directions, and the panel does show up as expected in my ESTK, but when I save the .jsx to the ScriptUI folder within the Script directory of AE, the panel shows up, but none of the elements I created render within the panel. It's very odd, might anybody know what I'm doing wrong?
Here is my code, which is a derivative of David's example code building ScriptUI panels with resource strings:
    function templaterGUI(thisObj){
        function templater_buildGUI(thisObj){
            var templaterWindow = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'Templater', undefined, {resizeable : true});
            gui = "Group{orientation: 'column', alignChildren: 'fill',\
                         settings: Group{orientation: 'row', alignChildren: 'fill',\
                                        pAssets: Panel{text: 'Assets'},\
                                        pOptions: Panel{text: 'Render Options'},\
                         action: Button{text: 'Render Batch'},\
                         console: Panel{text: 'Status',\
                                        msg: StaticText{text: 'Currently Idle'}},\
            templaterWindow.grp = templaterWindow.add(gui);
            return templaterWindow;
        var templaterDock = templater_buildGUI(thisObj);
        if ((templaterDock != null) && (templaterDock instanceof Window)){
                templaterDock.center();
                templaterDock.show();
     templaterGUI(this);
Here's what it looks like when I run this code in ESTK:
I placed the script in the `ScriptUI` folder within the AE CS6 application folder, and here's what it looks like when I invoke the exact same .jsx file from `Window` menu in AE:
Maybe I overlooked something in the code that David provided in his tutorial? Can anybody offer any suggestions for debugging / troubleshooting?
Thanks for your time and help!

Hey David or Xavier,
Thanks for providing guidance on setting up the layout manager for I'm running into a similar issue with ESTK behaving differently than AE when it comes to rendering my UI controls. I'm specifically referring to a DropDownList element. In ESTK my code seems to be working fine, where I am able to see the selection elements in the DropDownList control. I can see the `items` Array appear as the list. However, in AE, I see the DropDownList control mechanism, but I no matter what, I cannot see the list of elements. Is there a specific reason that this might be happening for this DropDownList element?
Here is the portion of my resource string that is being used to generate the dropdown list:
gTemplates: Group { orientation: 'row', alignChildren: ['fill','top'], alignment: ['fill','fill'],margins: [0,10,0,0],\
                                  lRenderTemplates : DropDownList { title: 'Render Template', titleLayout: {alignment: ['center','top'], spacing: 10} },\
                                  lOutputModules : DropDownList { title: 'Output Module', titleLayout : {alignment: ['center','top'], spacing: 10} },\
Then I have a function in my javascript that just adds items like this, and I call it before I return templaterWindow as shown in my previous code:
function setupControls(ui) {
     var options = ui.grp.settings.pOptions.optionsControls;
     options.gTemplates.lRenderTemplates.add('item', "ONE");
     options.gTemplates.lRenderTemplates.add('item', "TWO");
Again, it works great in ESTK where I can see the elements in the dropdown, but not in the context of running it in AE. Any ideas?
Thanks again for any help you can provide!

CS6 ScriptUI Scrollbar issues

We're working on building a palette with a scrollbar. However, we're running into an issue with the display in CS6. We've gotten it to display correctly on Windows and Macs in previous versions of Bridge, but CS6 seems to have a bug even after the most recent update (version 5.0.1.21).
The scroll bar appears as below.
When we changed the dimensions of the scrollbar, we found that not only was the scrollbar distorted but it's actually oriented horizontally to control the vertical position.
We've tried nesting the scrollbar in a group or giving it a separate panel, as well as giving those panels and groups a specific column orientation, but nearly all of those results give us something like the following:
The following code was our last iteration that gives the above output:
#target bridge
if (BridgeTalk.appName == 'bridge')
    // dimension and font variables
   var fF = ['fill', 'fill'];
   var fT = ['fill', 'top'];
   var lblSize = [60, 15];
   var lblBounds = [5, 10, 60, 27];
   var etFont = ScriptUI.newFont ("Arial", 11);
   var etBounds = [10, 10, 200, 27];
    // Create the TabbedPalette object, of type "script"
    var tbPalette = new TabbedPalette( app.document, "CSU Metadata", "CSU_Metadata", "script", "right", "bottom");
    // Create a ScriptUI panel to be displayed as the tab contents.
    var panel = tbPalette.content.add('panel', "x:0, y:0, width:300, height:500", "");
    var tbPanelSbGrp = tbPalette.content.add('panel', "x:302, y:0, width:200, height:500", 0, 0, 20, 500);
    tbPanelSbGrp.orientation = 'column';
    var tbPanelSb = panel.add('scrollbar', "x:302, y:0, width:40, height:500");
    tbPanelSb.stepdelta = 10;
    tbPanelSb.jumpdelta = 40;
    tbPanelSb.onChanging = function() {
     var scrollVal = Math.round(this.value);
    this.value = scrollVal
Has anyone found a work around for this problem? I've seen the same problem mentioned elsewhere but without a solution:
http://www.ps-scripts.com/bb/viewtopic.php?f=9&t=4915
http://feedback.photoshop.com/photoshop_family/topics/extendscript_ui_not_drawing_correctl y_in_bridge?from_gsfn=true

I have given up on this. More than a year has passed and the Bridge ScriptUI is still non-functional. I am looking for another solution for my workflow so I can ditch Bridge/Photoshop and find a vendor that supports their products.

[JS CS4/CS5] ScriptUI Click Event Issue in JSXBIN

Still working on a huge ScriptUI project, I discovered a weird issue which appears to *only* affect 'binary compiled' scripts (JSXBIN export), not the original script!
When you repeatedly use addEventListener() with the same event type, you theorically have the possibility to attach several handlers to the same component and event, which can be really useful in a complex framework:
// Declare a 'click' manager on myWidget (at this point of the code)
myWidget.addEventListener('click', eventHandler1);
// Add another 'click' manager (for the same widget)
myWidget.addEventListener('click', eventHandler2);
When you do this, both eventHandler1 and eventHandler2 are registered, and when the user clicks on myWidget, each handler is called back.
The following script shows that this perfectly works in ID CS4 and CS5:
// Create a dialog UI
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
// Set some widget properties
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
// g->click Listener #1
g.addEventListener('click', function(ev)
     e1.text = 'click handler 1';
// g->click Listener #2
g.addEventListener('click', function(ev)
     e2.text = 'click handler 2';
w.show();
The result is that when you click on the group box, e1.text AND e2.text are updated.
But now, if I export the above code as a JSXBIN from the ESTK, the 2nd event handler sounds to be ignored! When I test the 'compiled' script and click on the group box, only e1.text is updated. (Tested in ID CS4 and CS5, Win32.)
By studying the JSXBIN code as precisely as possible, I didn't find anything wrong in the encryption. Each addEventListener() statement is properly encoded, with its own function handler, nothing is ignored. Hence I don't believe that the JSXBIN code is defective by itself, so I suppose that the ExtendScript/ScriptUI engine behaves differently when interpreting a JSXBIN... Does anyone have an explanation?
@+
Marc

John Hawkinson wrote:
Not an explanation, but of course we know that in JSXBIN you can't use the .toSource() method on functions.
So the implication here is that perhaps the .toSource() is somehow implicated in event handlers and there's some kind of static workaround for it?
Perhaps you can get around this by eval() or doScript()-ing strings?
Thanks a lot, John, I'm convinced you're on the good track. Dirk Becker suggested me that this is an "engine scope" issue and Martinho da Gloria emailed me another solution —which also works— and joins Dirk's assumption.
Following is the result of the various tests I did from your various suggestions:
// #1 - THE INITIAL PROBLEM// =====================================
// EVALUATED BINARY CODE
var handler1 = function(ev)
     ev.target.parent.children[1].text = 'handler 1';
var handler2 = function(ev)
     ev.target.parent.children[2].text = 'handler 2';
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBn0AKJAnASzIjIjBjOjEjMjFjShRByBNyBnA . . . . .");
// RESULT
// handler 1 only, that's the issue!
Now to John's approach:
// #2 - JOHN'S TRICK
// =====================================
var handler1 = function(ev)
     ev.target.parent.children[1].text = 'handler 1';
var handler2 = function(ev)
     ev.target.parent.children[2].text = 'handler 2';
// EVALUATED BINARY CODE
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBn0AIbCn0AFJDnA . . . . .");
// RESULT
// handler1 + handler2 OK!
This test shows that if handler1 and handler2's bodies are removed from the binary, the script works. Note that the handlers are declared vars that refer to (anonymous) function expressions. (BTW, no need to use a non-main #targetengine.) This is not a definitive workaround, of course, because I also want to hide handlers code...
Meanwhile, Martinho suggested me an interesting approach in using 'regular' function declarations:
// #3 - MARTINHO'S TRICK
// =====================================
// EVALUATED BINARY CODE
function handler1(ev)
     ev.target.parent.children[1].text = 'handler 1';
function handler2(ev)
     ev.target.parent.children[2].text = 'handler 2';
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBnACMAbyBn0ABJCnA . . . . .");
// RESULT
// handler1 + handler2 OK!
In the above test the entire code is binary-encoded, and the script works. What's the difference? It relies on function declarations rather than function expressions. As we know, function declarations and function expressions are not treated the same way by the interpreter. I suppose that function declarations are stored at a very persistent level... But I don't really understand what happens under the hood.
(Note that I also tried to use function expressions in global variables, but this gave the original result...)
Thanks to John, Dirk, and Martinho for the tracks you've cleared. As my library components cannot use neither the global scope nor direct function declarations my problem is not solved, but you have revealed the root of my troubles.
@+
Marc

[JS CS3] ScriptUI button wants to be clicked twice

Hi I created a sample scriptUI dlg with three buttons:
res =
]"dialog { \
]s: StaticText { text:'Chosissez une période:' }\
]]period: DropDownList { alignment:'center' }, \
]]s: StaticText { text:'Chosissez un fichier:' }\
]]files: DropDownList { alignment:'center' }, \
]]buttons: Group { orientation: 'row', alignment: 'center', \
]]] revealBtn: Button { text:'Ouvrir le dossier'}, \
]]] okBtn: Button { text:'Ouvrir le fichier'}, \
]]] cancelBtn: Button { text:'Annuler', properties:{name:'cancel'} } \
win = new Window (res);
win.buttons.okBtn.onClick = function ()
]win.close(1);
win.buttons.revealBtn.onClick = function ()
]win.close(45);
if(win.show()==1)
]clickButton("file","Le fichier ne se trouve plus ici :");
else if(win.show()==45)
]clickButton("folder","Le dossier n'a pas été trouvé.");
b The cancel button works fine and actually all the buttons too. Except that for the two open buttons, I need to click twice to make them run.
Any idea ?
TIA Loic

Hi Peter,
Thanks for the tip. I should have see it. Nevertheless I thought it was the way to go.
I thought the script should have ignored one of the conditions. I will try to do differently so.
Thanks a lot
Loic

[CS3][JS] Create Group Prior to its Children

Hi
Is there a way to create group along with all members in one go?
What I currently do is:
myGroupMembers = [
myBox01,
myBox02,
myBox03,
myBox04
myDoc.groups.add(MyGroupMembers)
Obviously, InDesign has to create all group members first and let me stare
at the partial screen updates as the script runs. This can take quite long
for 500 item catalogue subsection.
So I thought there must be a quicker way.
So far I tried this:
mySpecs = {
myItem01: Rectangle{
label: "01",
// other properties
myItem02: Rectangle{
label: "02",
// other properties
myItem03: Rectangle{
label: "03",
// other properties
myGroup = myDoc.groups.add(mySpecs);
I based this on ScriptUI resource string. I didn't expect it to work (It
doesn't indeed). I'm just wondering whether it's only syntax error or flawed
idea.
Can anuone help me please?
Thanks
Weller

Change those curly brackets around your mySpecs definition to square brackets (thereby changing it from an object to an array) and I think it'll work.
Dave

JS CS3 ScriptUI layout options

I've been working through the examples and docs and found there are a few ways you can lay out components in the dialog.
Here is the first example of a simple dialog with 2 drop menus and static text for each. I've aligned them to the right but it just does not look correct.
var myDialog = new Window('dialog', ' Details');
myDialog.fDetails = myDialog.add('panel',undefined,'File details');
myDialog.fDetails.alignChildren = 'right';
    myDialog.fDetails.fPath = myDialog.fDetails.add('group');
    myDialog.fDetails.fTitle = myDialog.fDetails.add('group');
    myDialog.fDetails.fPages = myDialog.fDetails.add('group');
    with (myDialog.fDetails){
    fPath.st = fPath.add('statictext',undefined,'Path:');
    fPath.dd = fPath.add('dropdownlist', undefined, undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]})
    fTitle.st = fTitle.add('statictext',undefined,'Current Doc Title:');
    fTitle.dd = fTitle.add('dropdownlist', undefined, undefined, {items:["Product1", "Product2","Product3"]})
myDialog.show();
In the second example I've used the coordinates to lay out the dialog and achieve the look I want but it took some playing around to get there. The static text and drop menus line up nicely.
var myDialog = new Window('dialog', ' Details');
myDialog.fDetails = myDialog.add('panel',[0,100,200,190],'File details');
    myDialog.fDetails.pathName = myDialog.fDetails.add('statictext',[70,15,100,35],'Path:');
    myDialog.fDetails.pathNameDrop = myDialog.fDetails.add('dropdownlist', [105,12,145,32], undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]});
    myDialog.fDetails.docName = myDialog.fDetails.add('statictext',[10,45,100,60], 'Current Doc Title:');
    myDialog.fDetails.docNameDrop = myDialog.fDetails.add('dropdownlist',[105,42,180,62], undefined, {items:["Product1", "Product2","Product3"]});
myDialog.show();
To achieve the look of the second option using the first method (not coordinates) is it possible to set the static test in one column and align it to the right and set the dropmenus in a second column and align them to the left? This would be easier but is it possible?
Cheers, John.

Here's my Code created with RapidScriptUI application
var rapidDlg = new Window('dialog',"<Replace Me>",undefined);
buildWindow();
rapidDlg.show();
function buildWindow(){
rapidDlg.orientation = "row";
// Properties for rapidDlg.Group1
rapidDlg.Group1 = rapidDlg.add('group',undefined);
rapidDlg.Group1.alignment = [' ','fill'];
rapidDlg.Group1.alignChildren = ['right','fill'];
rapidDlg.Group1.orientation = "column";
// Properties for rapidDlg.Group1.StaticText2
rapidDlg.Group1.StaticText2 = rapidDlg.Group1.add('statictext',undefined,"short");
// Properties for rapidDlg.Group1.StaticText3
rapidDlg.Group1.StaticText3 = rapidDlg.Group1.add('statictext',undefined,"this is medium");
// Properties for rapidDlg.Group1.StaticText4
rapidDlg.Group1.StaticText4 = rapidDlg.Group1.add('statictext',undefined,"this is a very long string");
// Properties for rapidDlg.Group2
rapidDlg.Group2 = rapidDlg.add('group',undefined);
rapidDlg.Group2.alignment = [' ','fill'];
rapidDlg.Group2.alignChildren = ['fill',' '];
rapidDlg.Group2.orientation = "column";
// Properties for rapidDlg.Group2.DropDownList1
rapidDlg.Group2.DropDownList1 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['this contains very long strings']});
// Properties for rapidDlg.Group2.DropDownList2
rapidDlg.Group2.DropDownList2 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['short']});
// Properties for rapidDlg.Group2.DropDownList3
rapidDlg.Group2.DropDownList3 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['This contains medium']});
or you can try
'rapidDlg.Group2.alignChildren = ['left',' '];
if you want left aligned not justified
Steven
http://scriptui.com

[JS] CS3 One radio group multiple colums

Is there any way to split one radio group into multiple columns?
For example:
Paragraph Alignment: Left
Right
Center
Justify
I would like it to look like this:
Paragraph Alignment: Left Center
Right Justify

> Would you know where documentation for ScriptUI would be?
ESTK 3: Help > JavaScript Tools Guide
ESTK 2: Help > SDK > JavaScript Tools Guide
Peter

ScriptUI: How to update Listbox values? (CC2014)

Is there way to update listbox element that filled with JS array elements. If I push more elements to the array, how I can re-render it in ScriptUI? Is there way to do this.
I know there is way just to add elements to listbox like in Peter Kahrel's PDF. But this isn't so dynamic:
var w = new Window ("dialog");
var myList = w.add ("listbox", undefined, ["one", "two", "three"]);
var b = w.add ("button", undefined, "Add");
b.onClick = function () {myList.add ("item", "zero", 0)}
w.show ();
How about if I wan't to update listbox when I have changed my arrays, like below:
// Create example array
var testArr = ['item1', 'item2']
$.writeln(testArr.length);
startGUI();
function startGUI() {
    // Window
    var win = new Window( "palette", script_name, undefined, { resizeable:true } );
    win.orientation = "column";
    win.alignChildren = ["fill", "fill"];
    // Listbox
    var myListbox = win.add ("listbox", undefined, testArr,
        numberOfColumns: 1,
        showHeaders: true,
        columnTitles: ['Name']
    // Add Item To Array
    var addItem = win.add("button", undefined, "Add Item");
    addItem.onClick = function() {
        testArr.push ('item3');
        $.writeln(testArr.length);
    // Quit BTN
    win.quitBtn = win.add("button", undefined, "Close");
    win.quitBtn.onClick = function() {
        win.close();
    win.show();
Maybe there is some update funtion on ScriptUI. I tried to search solution without success. Any help?

I updated your own script to show how I removed the listbox
I added a group to host the listbox, the purpose of the group is to be used as a placeholder( to add the new listbox in the right place) and to easily get the listbox to be removed
// listboxEditFromJSArray.jsx - Sakari Niittymaa
// https://forums.adobe.com/message/6785515
//#target illustrator
// Create example array
var testArr = ['item1', 'item2', 'item3'];
startGUI();
function startGUI() {
    // Main Window
    var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } );
    win.orientation = "column";
    win.alignChildren = ["fill", "fill"];
    // Listbox Group
    var grpListbox = win.add('group');
    grpListbox.alignChildren = ['fill', 'fill'];
    var myListbox = addListBox (grpListbox, testArr);
    // add ListBox
function addListBox(container, testArr) {
        var listbox = container.add("listbox", undefined, testArr,
            numberOfColumns: 1,
            showHeaders: true,
            columnTitles: ['Name']
        return listbox;
    // BTN: Add Items To Array
    var addItem = win.add("button", undefined, "Add Item");
    addItem.onClick = function() {
        testArr.push ('item' + (testArr.length + 1));
        grpListbox.remove(grpListbox.children[0]);
        myListbox = addListBox (grpListbox, testArr);
        win.layout.layout(true);
        //updateListboxArray(myListbox);
        //$.writeln (testArr.length + " " + myListbox.items.length);
    // BTN: Remove Selected
    var removeSelectedItems = win.add("button", undefined, "Remove Selected");
    removeSelectedItems.onClick = function() {
        // Remove selected listbox item from array
        testArr.splice( myListbox.selection.index, 1 );
        updateListboxArray(myListbox);
    // BTN: Clear Listbox
    var removeAllItems = win.add("button", undefined, "Clear Listbox");
    removeAllItems.onClick = function() {
        // Clear the array
        testArr = [];
        updateListboxArray(myListbox);
    // Update listbox items
    function updateListboxArray(listbox) {
        // Clear listbox first
        listbox.removeAll();
        // Create new listbox items from array
        var i = 0;
        while (listbox.items.length < testArr.length) {
            listbox.add ("item", testArr[i]);
            i++;
    // Quit BTN
    win.quitBtn = win.add("button", undefined, "Close");
    win.quitBtn.onClick = function() {
        win.close();
    // Window Settings
    win.onResizing = function () { this.layout.resize(); };
    win.onShow = function () { win.layout.resize(); };
    win.center();
    win.show();

[JS] Eval problem with scriptUI

Hello,
I want to build an scriptUI Interface with a specific group of buttons.
This group will be repeated accordingly to a an external txt file (telling the script how many groups are needed).
My script uses a for loop in the dialog construction like this :
for(i=0; i<n; i++)
     //Repeat the group of buttons with i as an ID;
     eval(addBtn(i));
to get the construction of the button, I created a addBtn(btnId) function.
It returns the code string to create my group of buttons with i as an ID.
function addBtn(btnId)
        myBtnString = "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=" = rapidDlg.add('group',undefined); ";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".alignment = ['left',' '];";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".checkBoxItem = rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".add('checkbox',undefined,undefined);";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".aFile = rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".add('button',undefined,\'a File\');";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".aFile.size= [245,20];";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".removeItem = rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".add('button',undefined,\'-\');";
        myBtnString+= "rapidDlg.Group";
        myBtnString+=String(btnId);
        myBtnString+=".removeItem.size= [30,20];";
        return myBtnString;
But my loop doesn't seem to wok, and as the dialog appears, my groups are not created :-(
Am i wrong using eval() or do I misuse it ?
Thanks a lot for your help :-)
Regards,
Loic
Attached the fulle script

Dave,
Thanks for the reply.
I'm not sure what you mean by "convert the references on the fly." You mean find a way to advance two characters forward and tag that? In the script I submitted here I am only searching for "abc," which of course I would not search or at all in real life. The script uses grep to search for about twenty different typographical errors that typically appear and tags them all.
Reiterating backwards seems, at first sight the way to go. But I haven't a clue as to how to reverse the order of the stories. I can get an array of stories, and array.reverse() them, but am not sure how to then make the script put this reversed order into the xml structure. Any hints?
There, of course is bigger problem with the stories. If the document is written with one story created after another then the order of them is top to botom. But if say a text frame edited into the middle of all this, that story is still the last one in the xml structure. At least in one test, that was so. Maybe the way to solve this is to build an array of stories that have as one xml attribute the page it first appears on. Then order the array according to that attribute.
Any advice you give will be appreciated.
Thanks,
Tom

CS5 ScriptUI dialogs open with no minimum width or height

Hi There,
Running my script as ScriptUI in CS5 seems to cause a strange issue with window drawing / resizing. I am unable to reproduce the issue in CS6 or CC. In some cases, when I run the script targeting CS5 from within ESTK, the initial window panel will appear very small and requires a user to resize it until it becomes totally visible. Also, when I spawn a new dialog window from within a button's click handler, the dialog displays, but appears to have no specified or determined width or height. As a workaround, I set the "resizing" for the dialog to true even though I would prefer not to let the user resize this particular dialog. I tried setting preferredSize on almost all the elements so that I could minimize the use of automatic layout, but that didn't seem to do the trick.
Has anybody encountered this? Does CS5 require that the Bounds property is set? It doesn't seem to be the case for CS6+
If anyone has encountered this type of UI issue in CS5, any help or suggestions to fix would be appreciated.
Thank you for your time and help!
--Arie

You can't "minimize the use of automatic layout". Either you use it, either you don't.
I can't speak for others, but when using layout.layout(true), i often have to do many tries until "it behaves as i wanted to" (which actually means: until i find how things should be written).
There are few rules though, and one is that preferredSize is irreliable, better use minimumSize and maximumSize (can't remember where i read that but i did, probably in the Javascript Tools Guide).
What i do all the time is create a big group (in the exemple below it is called 'content') within the window and specify min or max dimensions for that group, not the window itself.
Also, if you dont want the window to be resized, just set its creation property 'resizeable' to false.
var win = new Window("palette", "myScript", undefined, {resizeable: false});
win.alignChildren = ['left', 'top'];
win.margins=8;
win.content = win.add("group{ orientation:'column', margins: 0, spacing: 5, alignChildren:['left', 'top'],\
" /* more stuff here */ + "\
win.content.minimumSize = [500,300];
win.layout.layout(true);
win.layout.resize();
win.show();
If this doesnt help, please provide a bit of your code. I have CS5.5 and never encountered your issue.
Xavier.

Does onClick event work with Group in Adobe CC?

Hi everyone
I need to know if onClick event can be used on a Group in Adobe CC as it does in CS versions.
Thanks!

The removal of this option may also be due to the ScriptUI update in CC.
http://blogs.adobe.com/aftereffects/2013/04/whats-new-changed-after-effects-next.html
scripting changes
ScriptUI is now based on the same controls as the main application, so appearance and functionality of panels created with scripts should be more consistent.
Other scripting changes will be listed in a separate post on this blog soon.

Close() into function using ScriptUI.

Guys, I created an interface with ScriptUI that has a iconbutton within a group, which in turn is inside another group. I also created a listener to see which pressed on the keyboard, which performs a function where there is a condition that should close the interface if the key is pressed "Enter." However there is an error on line # 23, I am unable to set the correct path .... I'm even embarrassed to ask, but I'm more than an hour trying and I can not solve this. The onClick event on line # 12 runs correctly kicking the groups using "parent", but how do I need to walk the line as # 23?
Very Thanks
dialogo();
function dialogo(){
            var janela = new Window ("dialog");
                        var grupoDaDireita = janela.add ("group");
                                    var grupo4Dir = grupoDaDireita.add ("group");
                                    var btnOK = File (Folder(File($.fileName).parent).fullName+"/"+"ok_btn.png")
                                    var eventoOk = grupo4Dir.add ("iconbutton", undefined, btnOK, {style: "toolbutton"});
                                    eventoOk.onClick = function (){this.parent.parent.parent.close();};
            janela.addEventListener ("keydown", function (k) {verificaKeyboard(k);});
            janela.show ();
function verificaKeyboard(k){
            alert(k.keyName);
            if(k.keyName == "Enter"){
                        janela.close();

Hi,
move your function verificaKeyboard() into body of function dialogo()
variable "janela" is local and can not be accessed.
Jarek

Making a Group or Panel Scroll

I have an application that builds a dynamic group object with controls shown in rows based the number of fields returned from an xml file. The window looks something like this:
GROUP
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
checkbox | statictext | edittext| checkbox |
I cannot control how many fields are returned as it is variable for each publication. The problem is that the UI grows vertically to match the size using the autolayoutmanager and may push the window size outside of the screen. I can constrain the Group UI object by setting the maximumSize = [400,400], but if the size of the controls in the group overflow there is no way to make them scroll. So they get clipped. So I thought it might be possible to create a group container that contained a scrollbar and a inner group object that would house the gridrows and use the onDraw method of most scriptUI controls. But I am finding this hard to do. Has anyone encountered a similiar situation or can help guide me on how to do this?
I have attached a prototype that I was working on below
var resUI =
"dialog{ alignChildren:'stack', \
outerContainer: Group{ \
groupContainer:Group{\
orientation:'column', \
maximumSize:[400,400] \
scroll:Scrollbar{ \
preferredSize:[20,400] \
var dialog = new Window(resUI);
with(dialog.outerContainer.groupContainer)
for(i = 0; i < 25;i++)
add("button",undefined,i);
//When the user changes the scrollbar determine
//how to make the groupContainer scroll to match the appropriate
//viewport
dialog.outerContainer.scroll.onChange = function()
var ticks = this.value;
//gfx = dialog.outerContainer.groupContainer.graphics;
var groupContainer = dialog.outerContainer.groupContainer;
for(var i =0; i < groupContainer.children.length;i++)
if(i < ticks)
groupContainer.children[i].visible = false;
else
groupContainer.children[i].visible = true;
dialog.layout.layout(true);
dialog.show();

Here is another example of ScriptUI scrollbar experimentation:
http://www.indiscripts.com/post/2010/12/scriptui-challenge-jpeg-links-explorer
@+
Marc

[JS] ScriptUI groups

Similar Messages

Maybe you are looking for