AlloyUI - under the hood

http://alloyui.com

Iliyan Peychev

Liferay Inc.

2014

AGENDA

Anatomy of a component
Component types
Creating custom plugins, widgets and extensions
Events
Attributes
Conditionally loading browser specific code
Dissection of a real Widget

Anatomy of a component


var ExampleComponent = A.Component.create({
    NAME: 'example-component',
    
    EXTENDS: A.Base,
    
    ATTRS: {
    },
   
   UI_ATTRS: [],
   prototype: {
       
   }
});

AlloyUI Base

Base is a low-level foundation class.

Provides a consistent lifecycle:

- init

- destroy

A.Component

A.Component is convenient way to create Widgets

(but not only)

Extends Widget.

Provides full Widget lifecycle:

initializer
renderUI
bindUI
syncUI
destructor

A.Component static properties

Provides a few important static properties:

NAME - used to identify the class
ATTRS - defines the default set of attributes
EXTENDS - which class your Component extends
UI_ATTRS - The lists of UI attributes to bind and sync for widget's _bindUI and _syncUI implementations. Example: "poster" -> _uiSetPoster

A.Component static properties

(continue)

AUGMENTS - Augments the Component with prototype properties from other modules.
BIND_UI_ATTRS - specify the UI attrs which should sync on bindUI implementation
SYNC_UI_ATTRS - specify the UI attrs which should sync on syncUI implementation

Applying bind and sync UI attributes (widget code)

 /**
 * Creates DOM (or manipulates DOM for progressive enhancement)
 * This method is invoked by render() and is not chained
 * automatically for the class hierarchy (unlike initializer, destructor)
 * so it should be chained manually for subclasses if required.
 *
 * @method renderer
 * @protected
 */
renderer: function() {
    // kweight
    var widget = this;

    widget._renderUI();
    widget.renderUI();

    widget._bindUI();
    widget.bindUI();

    widget._syncUI();
    widget.syncUI();

A.Component bind and sync UI attributes

A.Component UI_ATTRS internal implementation

 if (config.UI_ATTRS || config.BIND_UI_ATTRS || config.SYNC_UI_ATTRS) {
     var BIND_UI_ATTRS = concat(config.BIND_UI_ATTRS, config.UI_ATTRS);
          var SYNC_UI_ATTRS = concat(config.SYNC_UI_ATTRS, config.UI_ATTRS);}

A.Component CSS_PREFIX

CSS_PREFIX - identifies the CSS prefix of the Component

 /**
 * Applies standard class names to the boundingBox and contentBox
 *
 * @method _renderBoxClassNames
 * @protected
 */
_renderBoxClassNames : function() {   ...
    // Start from Widget Sub Class
    for (i = classes.length-3; i >= 0; i--) {
        cl = classes[i];
        boundingBox.addClass(cl.CSS_PREFIX || _getClassName(cl.NAME.toLowerCase()));
    }

    // Use instance based name for content box
    this.get(CONTENT_BOX).addClass(this.getClassName(CONTENT));
}

A.Component prototype

var ExampleComponent = A.Component.create({   ....
   prototype: {
       initializer: function() {       },            destructor: function() {       },
       // your component's functions here
   }
});

Component types

Plugins

Extensions

Widgets

SPA pieces (Models, Views, Controllers)*

Creating custom Plugin

Might be simple function or Y.Plugin.Base extension.

Changes the behavior on an instance only.

Might be plugged or unplugged on the fly.

Usually overwrites some functions of its host.

Example

Creating custom Extension

Changes the behavior of a class.

Allows creating of entirely new modules just by mixing different extensions

Example

Creating custom Widget

Recommendations

Create Base class

Separate the UI (if possible)

Extract browser specific code

Create Plugin and an instantiable class

Create it using Progressive enhancement technique.

Example

Events

Convenient way to communicate across Modules.

Multiple subscribers to one single event.

Out-of-the-box life-cycle subscribers ("on" and "after").

Provide default function.

Might be prevented and canceled (or not).

Documentation

Attributes

Provide a way to configure a module.

The developer may change the behavior of a class instance on the fly.

Out-of-the-box value validation, getter, setter.

Might be "read only" or "write once".

Documentation

Conditional loading

Allows loading of the code only if needed.

Often used for patching the browser.

Polyfils.

Documentation

Dissection of a real Widget

Implementing a Widget example:

Spinner

Thanks!

Questions?

ipeychev

Alloyui - under the hood

By ipeychev

Alloyui - under the hood

2,621

ipeychev

ipeychev

AlloyUI - under the hood

AGENDA

Anatomy of a component

AlloyUI Base

A.Component

A.Component static properties

A.Component static properties

Applying bind and sync UI attributes (widget code)

A.Component bind and sync UI attributes

A.Component CSS_PREFIX

A.Component prototype

Component types

Creating custom Plugin

Creating custom Extension

Creating custom Widget

Recommendations Create Base class Separate the UI (if possible) Extract browser specific code Create Plugin and an instantiable class Create it using Progressive enhancement technique. Example

Events

Attributes

Conditional loading

Dissection of a real Widget

Alloyui - under the hood

More from ipeychev

Recommendations

Create Base class

Separate the UI (if possible)

Extract browser specific code

Create Plugin and an instantiable class

Create it using Progressive enhancement technique.

Example