Enyo Tutorial: Part 1

20 Sep 2012 | By Robert Kowalski | Tags tutorials enyo enyo-kowalski frameworks mobile

Enyo is a mobile and desktop framework that uses JavaScript and HTML5. Developed by HP and the open source community, it’s licensed under the Apache License. If you’re looking to build mobile applications with JavaScript, then Enyo is a great choice. In this tutorial series, I’ll introduce the major concepts through some worked examples that you can build or download and try out. The Enyo styleguide is suggesting double quotes instead of single quotes. Enyo also uses tabs for indentation. Although I prefer 2 Spaces as indentation and single quotes, I will follow these rules during this tutorial.

Kinds

Enyo applications are built around object prototypes called kinds. These can be either components or controls. Kinds in Enyo are very modularized, reusable and encapsulated.

Controls, on the other hand, are for controlling DOM nodes and manipulating them. Controls can nest other controls or components – they’re the “building blocks” for applications. A good example would be an app consuming an XML feed: a component would process the feed to JSON and rearrange the data. The views of that application representing the feed would be controls.

The Tip Calculator

There are hundreds of tip calculator apps on all the major vendor-specific app stores. We can go one better though – let’s build a tip calculator that can run on pretty much anything. Also, our Enyo-based app will be publishable using Cordova (formerly PhoneGap).

Setup

The Enyo project provides Bootplate – Enyo’s template project. All we have to do is clone the repository and init the submodules:

git clone https://github.com/enyojs/bootplate.git
cd bootplate
git submodule update --init

First Steps

Next open debug.html. You should now see the example app. In our developer console, type the following:

new enyo.Control({ content: 'Hello World' }).write();

This creates an Enyo control. It’s rendered as a simple div:

<html>
  <head>
  </head>
  <body>
    <div id="control">Hello World</div>
  </body>
</html>

Going Deeper: Controls, Getter and Setter, Events

To start developing the tip calculator, delete the contents of source/App.js – we’ll replace it with a new file.

Let’s add a kind called App to our emptied App.js:

enyo.kind({
  name: "App",
  kind: enyo.Control,
  style: "",
  classes: "onyx",
  components: [
    {kind: "onyx.InputDecorator", components: [
      {kind: "onyx.Input", name: "sumControl", placeholder: "Enter sum"}
    ]},
    {kind: "onyx.InputDecorator", components: [
      {kind: "onyx.Input", name: "percentControl", placeholder: "Enter percent"}
    ]},
    {kind: "onyx.Button", content: "Calculate tip", ontap: "calculate"},
    {tag: "div", name: "tipAmount"}
  ],
  create: function() {
    this.inherited(arguments);
  },
  calculate: function(inSource, inEvent) {
    var sum = this.$.sumControl.hasNode().value;
    var percent = this.$.percentControl.hasNode().value;

    var result = (sum * percent) / 100;
    this.$.tipAmount.setContent(result);

    return true; // stop bubbling
  }
});

An instance is created and rendered into the DOM in our debug.html file with renderInto:

new App().renderInto(document.body);

Now I’ll explain the previous example in detail. The kind property is set to enyo.Control, and there are currently no inline styles – the style property is empty. The onyx CSS class should be added, which is an included submodule in the Bootplate that themes our Enyo application and the applications elements.

The components property is used to nest more kinds – I’ve used several to define the required input controls, a button, and a div to display the results. All of these components have a name property, which is important and will be explained later.

The button has an event attached, the tap-event. Enyo supports many other events, e.g. dragging over the screen, flick, or self-created events.

When a kind is created the method create is automatically called by the Enyo framework. The method inherits from its parent kind with this.inherited(arguments); and can be overwritten. There are several other constructor and constructor-like functions in the lifecycle of a kind: destroy, create or constructor.

Every time we tap our button the calculate method is called. this.$ is used to address and access controls within the kind.

var sum = this.$.sumControl.hasNode().value

This line is where the value of the control with the name sumControl is accessed. After that we calculate the tip and render the result into the element.

this.$.tipAmount.setContent(result);

Every control has some handy getters and setters:

.setContent();
.getContent();
.getClasses();
.setClasses();
.getStyle();
.setStyle();
.getAttribute();
.setAttribute();

At the end of the method return true is used to prevent the tap event from bubbling up.

Get the Source

The source is available at my GitHub account: robertkowalski/enyo-dailyjs.

Conclusion

We’ve now hacked together a very basic tip calculator. This example could be built on to add a canvas element for diagrams, localStorage for statistics, or simply to add validation to user input.

In the next part of this series we’ll have a closer look at components and exposing the published properties of kinds. We’ll also create more reusable components from our app.


blog comments powered by Disqus