Enyo: Up and Running

Chapter 3. Components, Controls, and Other Objects

In Chapter 2, we covered kinds and inheritance. It should come as no surprise that Enyo makes good use of those features by providing a rich hierarchy of kinds you can use and build upon in your apps. In this chapter, we’ll focus on two important kinds that Enyo provides: Component and Control. We’ll also touch on some of the other kinds that you’ll need to flesh out your apps.

Components

Components introduce one of the most-used features of Enyo apps: the ability to create kinds composed of other kinds. This ability to compose new components from other components is one of the key features that encapsulation allows. Most kinds you’ll use, including the Application kind, will be based upon Component or one of its descendants.

Composition

Composition is a powerful feature that lets you focus on breaking down your app into discrete pieces and then combine those pieces together into a unified app. We used this feature in Chapter 1 when we built a traffic light out of three individual lights. Each descendant of Component has a components block that takes an array of component definitions.

For example, in Advanced Events, the Receiver kind has a Control named display:

enyo.kind({
    name: 'Receiver',
    components: [
        { name: 'display', content: 'Waiting...' },
        { kind: 'Signals', onButtonSignal: 'update' }
    ],
    ...

Methods within Receiver can access display through this.$.display. For set() and get(), the path would be $.display.propertyName. Enyo stores ...