Custom components

SuiBuilder allows the registration of custom components in the form of factory methods. Many examples can be found in folder Brixy/modules/ui/components.

Component's factory method

SuiBuilder calls the component's factory methods with context of the inner builder object, therefore factory methods have access to these properties:

Container component

Factory method should add a new component into the current container and assign it as the current container.

Example:

function row() {
    this.container = this.container.add('group {orientation: "row"}');
}

Element component

Factory method should add a new component into the current container and assign it as the current element.

Example:

function myEditText(text, characters) {
    this.element = this.container.add('edittext', undefined, text);
    if (characters > 0) {
        this.element.characters = characters - 0;
    }
}

Combined component

All factory methods may use another components or builder object.

Example:

// create a list of names inside a panel
function listOfNames(arrayOfNames) {
    // create panel
    this.builder.columnPanel('Names:');
    // add lines
    for (var i = 0, n = arrayOfNames.length; i < n; i++) {
        this.builder.staticText(arrayOfNames[i]);
    }
    // close panel
    this.builder.end();
}

Decorator method

Decorator method modifies the current element or does something else.

Example:

function foregroundColor(color) {
    var gr = this.element.graphics;
    gr.foregroundColor = gr.newPen(gr.PenType.SOLID_COLOR, color, 1);
}

Example:

function sayHello() {
    alert('Hello!');
}

Registration of components

Before using custom components, it is necessary to register the factory methods. For this purpose SuiBuilder offers this methods:

addComponent(name, factory)API - registration of the factory method as new component with the given name in the SuiBuilder instance

addComponents(components)API - multiple registration of components in the SuiBuilder instance

attach(members, replace)API - multiple registration of components in the SuiBuilder prototype makes components available all the application life in each SuiBuilder instance

Example:

// define components
var components = {
    myComponent1: function() {
      //...
    },
    myComponent2: function() {
      //...
    }
};

var SuiBuilder = BX.module.Me('brixy.ui.SuiBuilder');
var b = new SuiBuilder();

// register components
b.addComponents(components);

// using
b.window('dialog', 'Title')
    .myComponent1()
    .myComponent2()
    .showWindow();

Edited: 2017/01/24