3.0 beta 2

Components

The AX.Component class is the base class for all ActiveWidgets components. AX.Component inherits from AX.HTML and adds common functionality (such as sizing, component positioning, content alignment|flow|wrap, state handling) as well as common internal structure (see Layers).

Using components

Standalone

Using a standalone component is not much different from a simple html element. Assign a unique id to the component -

var obj = new AX.Component({
    id: 'my-component',
    html: 'Hello!'
});

and put the placeholder tag with the same id into the page markup -

<span id="my-component">Loading...</span>

The component will scan the page for a node with a matching id and replace the placeholder with its own html output. Alternatively you can insert a component manually using toHTML() method.

targetNode.innerHTML = obj.toHTML();

Composite components

While adding the components into containers or assembling composite elements you only have to manually insert the top level element into the page. The parent elements will then take care of rendering the children and updating the markup.

Common functions

Most of the components share the same structure and have a set of common functionality. For example, the html property represents the html content -

var obj = new AX.Component({
    html: 'Hello, <b>{{$name}}</b>'
});

Layers

The typical component consist of a set of layers. Each component feature (such as border, background, shadow, frame) represented by a separate layer, which are absolutely positioned on top of each other and can be easily enabled/disabled without affecting the other parts.

var obj = new AX.Component({
    border: true,
    background: true
});

Content

The content presentation parameters (alignment, flow direction, whitespace control) are implemented via align and content properties.

var obj = new AX.Component({
    align: 'top left',
    content: 'wrap'
});

Sizing

The component dimensions are controlled by width, height, margin and padding properties.

var obj = new AX.Component({
    width: '50%',
    height: 25,
    margin: [5, 20]
});

Standard components

ActiveWidgets includes a set of common UI elements.

(Coming soon)

Extending components

Mixins

In case a custom component is required - check if the desired functionality can be achieved by a combination of existing mixins.

var obj = new AX.Component({
    use: ['text', 'icon'],  // adds text property and icon object
    icon: url,
    text: message
});

Composite objects

To produce a composite component add child objects as component properties, then reference them either in html template or one of the collections (layers, items, dock etc.).

var obj = new AX.Component({

    okButton: {
        component: 'button',
        text: 'OK',
        command: 'doSomething'
    },

    html: ' ... {{@okButton}} ...'

});