SuiBuilder components

SuiBuilder contains a set of predefined Adobe ScriptUI components in the 'brixy.ui.components.base'API module. Note that some components are not supported in every target application.

In following examples, the resource argument means any valid resource string. It is an object written as string, e.g. "{alignment: 'left', text: 'OK'}".

Code snippets assume that the builder is an instance of the SuiBuilder class, e.g.:

var builder = new SuiBuilder();
builder.window('dialog', 'Title');

Container components

Window

builder.window(type, 'Title', bounds, properties)

Groups

builder.group(resource).end()

builder.panel(resource).end()

builder.row().end() // group with orientation 'row'

builder.rowPanel('Title').end() // panel with orientation 'row'

builder.column().end() // group with orientation 'column'

builder.columnPanel('Title').end() // panel with orientation 'column'

builder.stack().end() // group with orientation 'stack'

builder.stackPanel('Title').end() // panel with orientation 'stack'

Tabbed panel

builder.tabbedPanel(resource)
    .tab(resourceOrTabTitle)
        // ...
        .end()
    .tab(resourceOrTabTitle)
        // ...
        .end()
    .end()

DropDown list

builder.dropDownList(['First item', 'Second item']).end()

builder.dropDownList(resource)
    // add new items:
    .item('First item')
    .item('Second item')
    .end()

ListBox

builder.listBox(resource)
    // add new lines:
    .item('First line')
    .item('Second line')
    .end()

Multicolumn ListBox (if supported in target application):

builder.listBox(['First column', 'Second column', 'Third column'])
    // add first line:
    .item('First line')
        .subItem(0, 'Text in 2. column')
        .subItem(1, 'Text in 3. column')
    // add second line:
    .item('Second line')
        .subItem(0, 'Text in 2. column')
        .subItem(1, 'Text in 3. column')
    .end()

TreeView

builder.treeView(resource)
    .item('First item')
    .nodeItem('Sublist') // nodeItem is a container, therefore end() must close it
        .item('Aaa')
        .item('Bbb')
        .nodeItem('Sub-sublist')
            .item('John')
            .item('Jay')
            .item('Lenny')
            .end()
        .end()
    .item('Last item')
    .end()

Element components

Button

builder.button('Caption')

builder.button(resource)

Checkbox

builder.checkbox('Caption')

builder.checkbox(resource)

EditText

builder.editText('Text')

builder.editText(resource)

StaticText

builder.staticText('Text')

builder.staticText(resource)

FlashPlayer

builder.flashPlayer(resource, file)

IconButton

builder.iconButton(resource)

builder.iconButton([image1, image2, image3, image4]) // 4-state button

builder.iconButton('path/to/image')

Image

builder.image(resource)

builder.image(File)

builder.image('path/to/image')

ProgressBar

builder.progressBar(resource)

RadioButton

builder.radioButton('Caption')

builder.radioButton(resource)

Radio group:

builder.columnPanel('Select:')
    .radioButton('choice 1')
    .radioButton('choice 2')
    .radioButton('choice 3')
    .end()

Scrollbar

builder.scrollbar(resource)

Slider

builder.slider(resource)

Decorators

Events

// add event listener
builder.addEventListener(eventName, callback, capturePhase)

Note that event listeners differ from event-handlers like onClick, which are set as well as other properties via builder.set('onClick', callback).

// add onClick event, that closes the window with a result code
// it may invoke validation before closing
builder.closeOnClick(validate, result)

// add special onClick event for label-like functionality
builder.labelFor(anotherElementId)

// click the staticText to set focus on editText
builder.staticText('Full name:').labelFor('name')
    .editText().id('name')

Properties

builder.align(alignment) // 'alignment' style of the element

builder.alignChildren(alignment) // 'alignChildren' style of the element

builder.doubleAmps(property) // doubles ampersand characters of the element's property

builder.set(property, value) // sets the value of the element's property

builder.set({property1: value1, property2: value2}) // sets given properties of the element's property

Behaviors

builder.counter(number) // sets the inner component counter

builder.end() // closes the current container component

builder.execute(callback) // immediatelly executes a callback

builder.id(key) // marks the current element

// example:
builder.button('Save').id('saveButton')
// ...
// button is available:
var btn = builder.get('saveButton');

builder.showWindow(position)

builder.validator(callback) // registers a validator to the current element

builder.validator(builtinValidator, property, arg, message)

Edited: 2017/01/21