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
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
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 Booleanbounds accepts an Array with 4 values (see below)enabled is a BooleanhelpTip is a Stringtext 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);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.
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();