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.
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.
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);
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()]' }] ];
.atom-clock{ } .atom-clock span{ margin-left:5px; font-size:large; }
Add "atom-clock.js" and "atom-clock.css" after other Atoms.js related resources in your HTML page.
Automatically updates to current time every second any data bound element will refresh its content if bound to time property.