Atoms.js Plugins

Atoms.js is all about a UI component, and a plugin is an additional UI Component Library which you can use it on an Atom Application.

We are shipping certain plugins by default with our library, however atoms.js do not include these plugins as they are little resource intensive and they need Flash fallback etc.

How to make Plugin?

Plugin is a simple UI component, and Atoms.js has specific life cycle events that plugin must program. Plugin can control one or more UI controls. Following guidelines must be used while creating plugins.

  1. Plugin must and only contain UI Controls, other referenced JS files must be kept separate.
  2. Plugin must specify external JS/CSS references in documentation correctly along with their licenses.
  3. While encapsulating other JS library, plugin file name and UI control name should always begin with word "Atom". For example VideoJS UI Control should be named as "AtomVideoJS" and file name should be "atom-videojs" or "atom-video-js".
  4. README.md must be provided in the same folder, all necessary JS references should be kept in the same folder or child folder.

Create Class

Atoms.js has a global method to create class, which obeys object oriented principles and also flatterns prototype chain for faster execution.

(function (window, base) {
    return createClass({
        name: "AtomClock",
        base: base,
        start: function (e) {
            $(e).addClass("atom-clock");
        },
        properties: {
            time: (new Date())
        },
        methods: {
 
            /*init called before setting properties*/
 
            //init: function () {
            //    base.init.call(this);
            //},
 
 
            /*onCreated gets called after successful creation of this component*/
            onCreated: function () {
                base.onCreated.call(this);
 
                /*Pattern of passing this*/
                var _this = this;
                setInterval(function () {
                    _this.updateTime();
                }, 1000);
            },
 
 
            updateTime: function () {
                Atom.set(this"time", (new Date()));
            }
        }
    });
})(window, WebAtoms.AtomControl.prototype);

Create Default Template

And you have to provide a default template for the control as shown as below, template must be provided in JsonML format.

Templates.jsonML["AtomClock.template"] = [
    ["span", { 'atom-text''[($owner.time).getHours()]' }],
    ["span", { 'atom-text''[($owner.time).getMinutes()]' }],
    ["span", { 'atom-text''[($owner.time).getSeconds()]' }]
];

Create Default Style

.atom-clock{
 
}
 
.atom-clock span{
    margin-left:5px;
    font-size:large;
}

Sample Documentation

Add "atom-clock.js" and "atom-clock.css" after other Atoms.js related resources in your HTML page.

Properties

time

Automatically updates to current time every second any data bound element will refresh its content if bound to time property.

Sample Usage