3.0 beta 2

Layers

Each visual feature of the component is usually implemented as a separate layer.

This provides an easy way to activate each element separately, reduces interdependencies between component parts and allows missing feature emulation on legacy platforms.

Composition

Most ActiveWidgets components are implemented as layered components and share the same internal structure.

Layered components

Component parts (layers) are absolutely positioned on top of each other and fill the available space within the component base element.

Component layers

The margin attribute defines the distance from the layer edge to the component boundaries. The exception is the content layer, which keeps relative position and may affect the component dimensions when width or height properties are set to 'auto'.

Component layers

Compared to the traditional nested layout this approach allows better separation between component parts and also significantly reduces the DOM tree depth.

Adding layers

The layers property stores the collection of layers and is referenced by the default innerHTML template. To add a new layer you should attach it to the component as a new property and then add a reference to the layers collection.

// create a custom layer object
var overlay = new AX.HTML({
    styles: 'position:absolute'
});

// assign the layer object to the new 'overlay' property
obj.set('overlay', overlay); 

// add reference to the layers collection
obj.layers().add('@overlay');

Show/hide individual layers

Most layers include visible property (boolean default) so that you can show and hide individual layers by assigning true/false.

var obj = new AX.Component({
    border: true,
    background: true,
    padding: 10,
    html: 'Lorem ipsum'
});

Disable layers

In the exceptional cases the layered structure can be disabled to reduce the component to a simple html tag -

var obj = new AX.Component({
    layers: false,
    html: 'Hello'
});

obj.toHTML(); // <span class="ax-component">Hello</span>

This may be useful to improve layout and paint performance in the extreme conditions (for example, the grid cell has layers disabled by default).

Visual layers

Border

The component border is implemented via border property and AX.Border class. To hide/show the border use obj.border() with boolean argument.

var obj = new AX.Component({
    classes: 'my-panel',
    border: true
});

The custom styles can be applied using .ax-border selector.

.my-panel>.ax-border {
    border: 1px solid red;
}

Background

The background property and AX.Background class implement the component background. Call obj.background(true/false) to show or hide the background layer.

var obj = new AX.Component({
    classes: 'my-panel',
    background: true
});

The custom styles can be applied using .ax-background selector.

.my-panel>.ax-background {
    background: #ccc;
}

Frame

The frame property and AX.Frame class add a small extra frame around the component (similar to windows frame). Good for popup windows or dialog boxes together with Shadow. Call obj.frame(true/false) to show or hide the frame.

var obj = new AX.Component({
    frame: true
});

Shadow

To add a shadow around the component use shadow property (AX.Shadow class). Call obj.shadow(true/false) to show or hide the shadow layer.

var obj = new AX.Component({
    shadow: true
});

Content layer

A content layer is an extra span tag aroung the html content (see html property). The content layer is implemented with content property and AX.Content class.