Photoshop: How do I add options to a button via scripting?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Hi there,

I've got the following code:

obj = w.add('panel', [45,50,350,135], 'Title');

How do I add options, such as 'size', 'margins', 'alignChildren' to this panel?

If I would do this in Script UI I'de do something like this:

var layout = "dialog { \
text: 'Title', \
orientation: 'column', \
alignChildren: ['fill', 'top'], \
preferredSize:[340, 135], \
margins: 15, \
\
calculator: Panel { \
text: 'Sub-Title', \
orientation: 'row', \
alignChildren: 'fill', \
margins: 15, \
} \
}",

But since I'm developing for Photoshop CC 2014, I can't use this syntax.
Photo of Goncalo Espinha

Goncalo Espinha

  • 12 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Tom Ruark

Tom Ruark, Official Rep

  • 26 Posts
  • 11 Reply Likes
Official Response
var layout = "dialog { \
text: 'Title', \
orientation: 'column', \
alignChildren: ['fill', 'top'], \
preferredSize:[340, 135], \
margins: 15, \
\
calculator: Panel { \
text: 'Sub-Title', \
orientation: 'row', \
alignChildren: 'fill', \
margins: 15, \
} \
}";

var w = new Window(layout);
obj = w.add('panel', [45,50,350,135], 'Title');
alert(obj.size); // not sure why you need to set size as you specified it in the add call above
obj.margins = 55;
obj.alignChildren = 'fill';
obj.add('button', undefined, "Hello");
obj.add('button', undefined, "Good Bye");
w.show();

You can add and remove the alignChildren and margins to see the changes.

I changed it to this to not specify the size and let auto layout do the calculation for you.

var layout = "dialog { \
text: 'Title', \
orientation: 'column', \
alignChildren: ['fill', 'top'], \
preferredSize:[340, 135], \
margins: 15, \
\
calculator: Panel { \
text: 'Sub-Title', \
orientation: 'row', \
alignChildren: 'fill', \
margins: 15, \
} \
}";

var w = new Window(layout);
obj = w.add('panel', undefined, 'Title');
// alert(obj.size);
obj.margins = 55;
obj.alignChildren = 'fill';
obj.add('button', undefined, "Hello");
obj.add('button', undefined, "Good Bye");
// you may or may not need this obj.layout.layout();
w.show();

I got this example from Image Processor. It does some crazy stuff that may or may not be needed! Look at the onShow as well as it does some adjusting after auto layout.

I would NOT advise setting any sizes if you can. Let auto layout do the work for you. You will be better off when you have to redesign your dialog!

I have some code from others that has a ton of layout offsets += 5 and stuff that is going to be a nightmare for me to fix!