Script UI Resource Strings

Pre: This is some old documentation on resource strings I made in 2010. It is not finished yet. Also I abandoned it because resource strings are pretty hard to debug.
A better way to build UIs is to hard code them. Have a look into Peter Kahrels ScriptUI documentation

Target Engine

These examples work fine when executed from ESTK. If you want to run them in other Adobe applications like AI or ID you need to define a #targetengine 'foo-bah' (name of your choice). This is like a session memory where the panel will live in. See also

Global

These properties can be set for any object. A list or a group or a button. ##Properties ####

active

bounds

enabled

helpTip

text

These properties are quite easy and can be set in the common way: active is a Boolean
bounds accepts an Array with 4 values (see below)
enabled is a Boolean
helpTip is a String
text accepts a String

Some of these properties only work in combination with the group or window orientation and alignment. So sometimes they don't have the expected effect when setting them. For example in the following code the bounds of each button is set to [x,y,width,heigt] [0,0,100,100] but this would lay both of the buttons onto the same place. So the second button has to move over. so his bounds are finally [114,2,214,102]. Also the first button is not at [0,0,100,100] he is at [4,2,104,102] according to the margin and spacing of the parent element

// global properties 01
// define the a window with 2 buttons string
var pal = "palette{text:'Buttons'}";
var grp = "group{\
            orientation:'row',\
                btnone: Button {\
                text:'Hello!',\
                enabled:false,\
                bounds:[0,0,100,100]\
                }\
                btntwo: Button {text:'World!',\
                helpTip:'some text',\
                active:true,\
                bounds:[0,0,100,100]\
                }\
            }";
var w = new Window(pal);
w.g = w.add(grp);
w.show();
$.writeln(w.g.btnone.bounds);
$.writeln(w.g.btntwo.bounds);

####

bounds undefined

As you see in the first example the buttons get the rectangular look when you define the bounds. If you don't do that you end up with the basic rounded button you know from most of the user interfaces. The size of the buttons then depends on the length of the text value

	// ex global properties 02
	// no defined bounds
	// define the  window with 2 buttons
	var pal = "palette{text:'Buttons'}";
	var grp = "group{\
	            orientation:'row',\
	                btnone: Button {\
	                text:'Hello!',\
	                enabled:false,\
	                }\
	                btntwo: Button {text:'World!',\
	                helpTip:'some text',\
	                active:true,\
	                }\
	            }";
	var w = new Window(pal);
	w.g = w.add(grp);
	w.show();
	$.writeln(w.g.btnone.bounds);
	$.writeln(w.g.btntwo.bounds);

So why bother setting sizes anyway? As I said. The size depends on the length of the text value. The safest and shortest way seems to be the preferredSize. ####

preferredSize

The preferredSize is defined in a Dimension object with 2 values [width,height]

	// ex global properties 03
	// no define preferredSize: [WIDTH,HEIGHT]
	// define a window with 2 buttons
	var pal = "palette{text:'Buttons'}";
	var grp = "group{\
	            orientation:'row',\
	                btnone: Button {\
	                text:'Hello!',\
	                preferredSize:[100,23]\
	                }\
	                btntwo: Button {text:'World!',\
	                preferredSize:[100,23]\
	                }\
	            }";


	var w = new Window(pal);

	w.g = w.add(grp);

	w.show();
	$.writeln(w.g.btnone.bounds);
	$.writeln(w.g.btntwo.bounds);

In the next example the size of the checkbox and the size of a slider get set with preferredSize. The size of the space the slider takes get set, but the checkbox doesn't stretch out the text to fill the gaps. You can set the justification of the text but you can't fill the whole space.

	// ex global properties 04
	// no define preferredSize: [WIDTH,HEIGHT]
	// define a window with 2 buttons
	var pal = "palette{text:'Buttons'}";
	var grp = "group{\
	            orientation:'row',\
	                chkbbxone: Checkbox {\
	                text:'Hello!',\
	                value:true,\
	                preferredSize:[100,23]\
	                }\
	                btnone: Button {text:'World!',\
	                preferredSize:[100,23]\
	                }\
	                sldr: Slider{text:'Slider',\
			preferredSize:[600,23]\
	                }\
	            }";
	var w = new Window(pal);
	w.g = w.add(grp);
	w.show();
	$.writeln(w.g.chkbbxone.bounds);
	$.writeln(w.g.btnone.bounds);

The following parts are some examples I wrote. But this is unfinished business.

	// ex global properties 07
	// define propperties:{}
	// define a window with 2 buttons
	var pal = "palette{text:'Buttons'}";
	var grp = "group{\
	            orientation:'row',\
	                chkbbxone: Checkbox {\
	                text:'Hello!',\
	                value:true,\
	                preferredSize:[100,23],\
                    properties:{\
                        name:'theCheckBox',\
                        \
                        }\
                    }\
	                btnone: Button {text:'World!',\
	                preferredSize:[100,23]\
	                }\
	                sldr: Slider{text:'Slider',\
                    preferredSize:[600,23]\
	                }\
	            }";
	var w = new Window(pal);
	w.g = w.add(grp);
	w.show();

// ex 05 basic window with resource string

// define the wohle string
var res = "palette{text:'Hello',\
            btn: Button {text:'World!',\
            properties: { style : 'toolbutton'},\
            preferredSize:[125,25]}\
            }";

//Or separate the string into it parts

//var pal = "palette{text:'Hello'}";

var w = new Window(res);
w.show();

{
// the function that builds holds the full script
function basic_panel(thisObj){
// declare a global variable
var o = new Object();
// The string to start with
o.theText = "Start";
// the strings to change to
o.theStrings = new Array("clicked once", "second click","three is enough");
// this is for counting the clicks
o.count = 0;
// build the panel
function x_buildUI(thisObj){
    // define a window
    var w  = "palette{text:'Change Values',properties:{resizeable:true}}";
    // build a group
    var g = "group{orientation:'column', alignment:'top',\
    btn: Button {text:'"+o.theText+"',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    }";        
    // create the window
    var pal = new Window(w);
    // add the group to the window
    pal.grp = pal.add(g);
    // call the button
    
    // dig into this later
    pal.layout.layout(true);
    // this to
    pal.layout.resize();
     // the buttons function   
     pal.grp.btn.onClick = function(){
        // set the global variable to a new value
        o.theText = o.theStrings[o.count];
        // update the buttons value with the global
        pal.grp.btn.text = o.theText;
        // count the clicks
        o.count++;
        // if the user clicked 3 times cloase the window
        if(o.count>2){
            pal.close();    
            }
        }
        // give back the panel
       return pal;
    }
    // create the panel
    var tmn_Pal = x_buildUI(thisObj);
if (tmn_Pal != null){
        //if it is a window
        if (tmn_Pal instanceof Window){
            // Show the palette
            tmn_Pal.center();
            tmn_Pal.show();
        } else{
            // if it is a panel
            tmn_Pal.layout.layout(true);
        }
    }
}// close main function
// run main function
basic_panel(this); 

}
{
function basic_panel(thisObj){
    var o = new Object();
    o.theText = "Start";
    o.theStrings = new Array("clicked once", "second click","three is enough");
    o.count = 0;
    function x_buildUI(thisObj){
    // define a window
    var w  = "palette{text:'Change Values',properties:{resizeable:true}}";
    // build a group
    var g = "group{orientation:'column', alignment:'top',\
    btn: Button {text:'"+o.theText+"',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    }";
    var pal = new Window(w);
    // build the window
    //var pal = new Window(w);
    // add the group to the window
    pal.grp = pal.add(g);
    // call the button
    pal.layout.layout(true);
    pal.layout.resize();
     pal.grp.btn.onClick = function(){
        o.theText = o.theStrings[o.count];
        pal.grp.btn.text = o.theText;
        o.count++;
        if(o.count>2){
            pal.close();    
            }
        }
       return pal;
    }
var tmn_Pal = x_buildUI(thisObj);
if (tmn_Pal != null){
        if (tmn_Pal instanceof Window){
            // Show the palette
            tmn_Pal.center();
            tmn_Pal.show();
        } else{
            tmn_Pal.layout.layout(true);
        }
    }
}
basic_panel(this); 
}

// ex button properties
// define the a window with 2 buttons string
var pal = "palette{text:'Buttons'}";
var grp = "group{\
            orientation:'row',\
                btnone: Button {\
                text:'Hello!',\
                enabled:false,\
                bounds:[0,0,100,100]\
                }\
                btntwo: Button {text:'World!',\
                helpTip:'some text',\
                active:true,\
                bounds:[0,0,100,100]\
                }\
            }";
var w = new Window(pal);

w.g = w.add(grp);


w.show();
$.writeln(w.g.btnone.bounds);
$.writeln(w.g.btntwo.bounds);

// ex button properties 02
// no defined bounds
// define a window with 2 buttons
var pal = "palette{text:'Buttons'}";
var grp = "group{\
            orientation:'row',\
                btnone: Button {\
                text:'Hello!',\
                enabled:false,\
                }\
                btntwo: Button {text:'World!',\
                helpTip:'some text',\
                active:true,\
                }\
            }";

 
var w = new Window(pal);

w.g = w.add(grp);


w.show();
$.writeln(w.g.btnone.bounds);
$.writeln(w.g.btntwo.bounds);

// ex button properties 02
// no define preferredSize: [WIDTH,HEIGHT]
// define a window with 2 buttons
var pal = "palette{text:'Buttons'}";
var grp = "group{\
            orientation:'row',\
                btnone: Button {\
                text:'Hello!',\
                preferredSize:[100,23]\
                }\
                btntwo: Button {text:'World!',\
                preferredSize:[100,23]\
                }\
            }";


var w = new Window(pal);

w.g = w.add(grp);

w.show();
$.writeln(w.g.btnone.bounds);
$.writeln(w.g.btntwo.bounds);

var res = "palette{text:'lets talk nerd', alignment:'top',\
btn0: Button {text:'Hello',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn1: Button {text:'World',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn2: Button {text:'This',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn3: Button {text:'is',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn4: Button {text:'your',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn5: Button {text:'computer',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn6: Button {text:'speaking',properties; { style : 'toolbutton' },preferredSize:[125,25]},\
btn7: Button {text:'!',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn8: Button {text:'Keep',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
btn9: Button {text:'coding',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
}";

var w = new Window(res);
w.btn6.onClick = function(){

alert("still working. nifty ain't it?");    
    }
w.show();

    var res = "palette{text:'lets talk nerd', alignment:'top',\
    btn0: Button {text:'Hello',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn1: Button {text:'World',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn2: Button {text:'This',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn3: Button {text:'is',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn4: Button {text:'your',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn5: Button {text:'computer',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn6: Button {text:'speaking',properties; { style : 'toolbutton' },preferredSize:[125,25]},\
    btn7: Button {text:'!',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn8: Button {text:'Keep',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    btn9: Button {text:'coding',properties: { style : 'toolbutton' },preferredSize:[125,25]},\
    }";
    try{
    var w = new Window(res);
    }catch(e){
        $.writeln(e);
    }
    w.btn6.onClick = function(){
    alert("still working. nifty ain't it?");    
    }
    w.show();

var numOButtons = 10;
var res1 = "palette{text:'lets talk nerd', alignment:'top',";
var res2 = "";
var res3 = "}";
var text = new Array("Hello","World","This","is","your", "computer", "speaking", "!", "Keep"," coding");
for(var i = 0;i < numOButtons; i++){
    res2 = res2 + "btn"+i+": Button {text:'"+text[i]+"',properties: { style : 'toolbutton' },preferredSize:[125,25]},"
    }
var res = res1 + res2 + res3;
var w = new Window(res);
w.btn6.onClick = function(){
alert("still working. nifty ain't it?");    
    }
w.show();

    var text = new Array("Hello","World","This","is","your", "computer", "speaking", "!", "Keep" ,"coding");
    var numOButtons = 10;
    
    var w = new Window ("palette", "lets talk nerd", undefined);
    var b = new Array();    
        for(var i = 0; i < numOButtons; i++ ){
        b[i] = w.add ("button", undefined, {style: "toolbutton"});
        b[i].text = text[i];
        b[i].preferredSize = [125,25];
        }
        b[6].onClick = function(){
        alert("still working. nifty ain't it?");    
        }
    w.show();

This wiki is maintained by:
fabiantheblind

Collaborators

Thanks to:

JohnDarnell for fixing lots of typos.
jsp for fixing lots of typos.
ltfschoen for fixing typos.
wridgers for adding more links.

Thanks to the students from the seminar for asking all those questions and making me start this wiki.

You are awesome.

Home

Hide Items

Paste images into Photoshops active document

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Script UI Resource Strings

Target Engine

Global

Collaborators

JavaScript

ExtendScript

Script UI

AfterEffects

Illustrator

InDesign

Basiljs

Photoshop

Clone this wiki locally