How do I make my script dockable?

[Leo Bledo]

This is the script I made, but when I place it into the ScriptsUI folder, and launch it on After Effects it doesnt work as a dockable panel, just as a window. How can I convert it into a dockable panel??? HELP! 


// Function to add or update text in the composition
function updateTextInComp(text) {
var comp = app.project.activeItem;

if (comp && comp instanceof CompItem) {
// Check if a text layer already exists
var textLayer = null;
for (var i = 1; i <= comp.layers.length; i++) {
if (comp.layers[i] instanceof TextLayer) {
textLayer = comp.layers[i];
break;
}
}

if (textLayer) {
textLayer.property("Source Text").setValue(text);
} else {
textLayer = comp.layers.addText(text);
textLayer.property("Position").setValue([comp.width / 2, comp.height / 2]);
textLayer.startTime = comp.time;
}
} else {
alert("Please select or create a composition first.");
}
}

// Create UI panel
var win = new Window("palette", "Text Editor");
win.size = [400, 300];
win.alignChildren = ["fill", "fill"];

// Title
var title = win.add("statictext", undefined, "Text Editor");
title.alignment = "center";
title.graphics.font = ScriptUI.newFont("Verdana", "BOLD", 16);

// Text Input
var textInput = win.add("edittext", undefined, "", {
multiline: true,
scrolling: true,
enterKeySignalsOnChange: true
});
textInput.size = [undefined, 200];
textInput.graphics.backgroundColor = textInput.graphics.newBrush(
textInput.graphics.BrushType.SOLID_COLOR, [0.2, 0.5, 0.1]
);
textInput.graphics.foregroundColor = textInput.graphics.newPen(
textInput.graphics.PenType.SOLID_COLOR, [0.9, 0.9, 0.9], 1
);

// Update Button
var updateButton = win.add("button", undefined, "Update Text");
updateButton.alignment = "center";

updateButton.onClick = function () {
var text = textInput.text;
updateTextInComp(text);
};

win.show();

[Mathias Moehl]

You need to check if "this"  is a panel object. If it is, use it instead of creating a new Window:

var win =(this instanceof Panel) ? this : new Window("palette", "Text Editor");

[Aaron Cobb]

When you run a script from the ScriptUI Panels folder via the Window menu you don't need to create a Window object. Instead, this (in the global context) refers to the Panel object for your script, which is created for you automatically. So it can help to write your script inside a function that takes this as an argument, and inside that function, to be safe, check if this is a Panel object. If it is, then simply assign this to the variable you would otherwise use for your window. If it's not, then your script is being executed outside a ScriptUI Panels context, and you can create a Window for it to run as a floating palette and assign that Window to the same variable. Either way, you can then build your interface in the resulting container object, be it a Window or a Panel.

It might look something like this:

function MainFunction(thisObj){
	function BuildPanelUI(thisObj){
		var myPanel;		
		if(thisObj instanceof Panel) myPanel = thisObj
		else myPanel = new Window("palette", "Window Title", undefined, {resizeable:true});

	//.... interface stuff here ....

	}
}

MainFunction(this)

[Aaron Cobb]

Or, what Mathias said!