Search code examples
scriptingadobeextendscriptafter-effectsadobe-scriptui

How can I create the resource string without a big string?

In After Effects scripts, if you want your script to be able to be docked in the program's workspace, the only way to do it as far as I know is to use a resource string like this:

var res = "Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    group1: Group{orientation:'column', alignment:['fill', ''], alignChildren:['fill', ''],\
        button1: Button{text: 'Button'},\
    },\
}";
                
myPanel.grp = myPanel.add(res);

The above code creates a script UI with one button ("button1") inside a group ("group1").

I would like to know other ways to create the same resource string. Is it possible to make it using a JSON object and then stringifying it??

I know it can be done somehow, because I have inspected the Duik Bassel script that is dockable and, for example, adds elements like this:

var button1 = myPal.add( 'button' );

but I cannot understand how to do it myself.

TL;DR: I want to make a dockable scriptUI without writing a giant string all at once, but bit by bit, like a floating script.

Solution

  • UI container elements have an add() method which allows you to add other UI elements to them, and you can treat them as normal objects.

    var grp = myPanel.add("group");
grp.orientation = "column";
grp.alignment = ['fill', 'fill'];
grp.alignChildren = ['fill', 'fill'];

var group1 = grp.add("group");
…
var button1 = group1.add("button");
button1.text = 'Button'

    More details and examples here: https://extendscript.docsforadobe.dev/user-interface-tools/types-of-controls.html#containers

    Also worth checking out https://scriptui.joonas.me/ which is a visual scriptUI interface builder. You have to do some work on the code it produces to get panels for AE, but it's not hard.