Creating a Simple Form

Scripts aren’t limited to background work — they can present full user interfaces with native controls. This guide builds the smallest possible form, then extends it with a button and an event handler.

The smallest form

Create a new script (File → New → Script) and enter:

const f = new Form();   // create a new form
f.show();               // show the form
Application.run();      // process events

Run it (Tools → Run Script/Query, or Alt+Enter) and an empty window appears. The three lines are the skeleton of every interface script:

Create a form.
Show it.
Start the event loop with Application.run(), which keeps the script alive and delivers the user’s actions — clicks, keystrokes, resizes — to your code.

Extending the Form class

Real interfaces are usually written as a class extending the built-in Form class, so the form’s contents and behavior live together in one place:

class MyForm extends Form
{
    constructor()
    {
        // when the form is created, add a button to it
        super();
        this.add(new Button("Ok"));
    }
}

const f = new MyForm();  // create the custom form
f.show();                // show it
Application.run();       // process events

In JavaScript you can define your own types from scratch or derive them from existing ones; deriving from a class is called extending it. Here MyForm extends Form, so it inherits everything a form can do, and its constructor adds an “Ok” button the moment an instance is created. (See the Language Overview for the class syntax in general.)

Responding to events

Controls expose events, and events connect to methods. Here’s a complete form with a button that closes the application when clicked:

class MyForm extends Form
{
    constructor()
    {
        // call the base Form constructor: caption, x, y, width, height
        super("Button Example", 100, 100, 200, 100);

        // create a button and add it to the form
        const button = new Button("Exit", 60, 20, 80, 24);
        this.add(button);

        // when the button is clicked, call this.onButtonClicked
        button.click.connect(this, this.onButtonClicked);
    }

    onButtonClicked()
    {
        // exit the application event loop
        Application.exit();
    }
}

const f = new MyForm();
f.show();
Application.run();

The pattern event.connect(this, this.method) is how all events are wired: the first argument is the object to use as this inside the handler, the second is the method to invoke.

Next steps

API Overview — layouts, dialogs, controls, and everything else available to scripts
Form class reference — every method and event on Form
Creating a “Hello, World” Extension — packaging scripts for distribution

Developer Resources