Fork me on GitHub

Download ZIP Download TAR View on GitHub

A first component

This section describes a minimal ‘Hello World’ component. It:

  • Calls the constructor of Component, passing an ID to it.
  • Creates a new button widget with a ‘Hello World’ Label appended to it
  • Before it is rendered, adds this label to itself (and hence the application)
  • Fires the ready() method of the application module created in the previous section the first time it is shown
    function (Component, Button, Label) {

        // All components extend Component
        return Component.extend({
            init: function init () {
                var self, label, button;

                self = this;

                // It is important to call the constructor of the superclass
      , "simplecomponent");

                // Hello World
                label = new Label("Hello World");
                this._button = new Button();

                this.addEventListener("beforerender", function (ev) {

                // calls Application.ready() the first time the component is shown
                // the callback removes itself once it's fired to avoid multiple calls.
                this.addEventListener("aftershow", function appReady() {
                    self.removeEventListener('aftershow', appReady);

            // Appending widgets on beforerender ensures they're still displayed
            // if the component is hidden and subsequently reinstated.
            _onBeforeRender: function () {

Next page Example layout and basic style

Previous page Launching the application