Part 1: Initial Setup

Let's make a simple application for reading RSS feeds. We start by creating a directory called FeedReader to house the app. Within the FeedReader directory, we create an index.html file. To start out, the contents of index.html will be simple: 

<!doctype html>
<html>
<head>
<title>Enyo FeedReader</title>
<script src="../../enyo/1.0/framework/enyo.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
  new MyApps.FeedReader().renderInto(document.body);
</script>
</body>
</html>

The <head> element contains a <title> tag with the application name. There's also a <script> tag referencing the location of the Enyo framework file. (Note: If you're running the tutorial app on your own computer, be sure to modify the path to enyo.js to match the location of your Enyo installation.)

Within the <body> element is a call to instantiate a new FeedReader object, which will then be rendered onscreen.

There are a few other files that we need to create before we can start working on our application. In addition to index.html, the FeedReader directory must contain a JSON-formatted list of application properties (appinfo.json), a JSON file of framework configuration settings (framework_config.json), and a manifest listing all the files that make up the application (depends.js).

For now, this will be the contents of appinfo.json: 

{
  "id": "com.palm.feedreader",
  "version": "1.0.0",
  "vendor": "HP",
  "type": "web",
  "main": "index.html",
  "title": "Enyo FeedReader",
  "uiRevision": "2"
}

Because we've set the uiRevision property to 2, our app will run at full screen resolution in the TouchPad Emulator and on actual TouchPad hardware.

This will be the contents of framework_config.json: 

{
  "logLevel": 99
}

By setting the "logLevel" to 99, we are telling enyo.log to use its highest level of logging, which is suitable for an application in development. For release, "logLevel" should be set to 0. (For more information on the options that can be set in this file, see framework_config.json.)

Finally, this will be the contents of depends.js: 

enyo.depends(
  "source/FeedReader.js",
  "css/FeedReader.css"
);

At this point, depends.js is pretty spare, containing only the paths to our main application object (source/FeedReader.js) and our application's master style sheet (css/FeedReader.css). As we add new files to the application, we also need to also add them to depends.js.

Finally, let's create FeedReader.js and FeedReader.css. For now, we'll leave FeedReader.css empty, and FeedReader.js will contain the following: 

enyo.kind({
  name: "MyApps.FeedReader",
  kind: enyo.VFlexBox,
  components: [
  ]
});

Taken as a whole, FeedReader.js defines a kind called MyApps.FeedReader. That is to say, it contains instructions for creating new FeedReader objects. The kind property tells us that a FeedReader object is a view that inherits from enyo.VFlexBox. (A VFlexBox is a box that stacks content vertically.) The components property will eventually contain UI elements that we want to show when we instantiate a new FeedReader.

We now have a very simple Enyo application. It doesn't display anything or do anything useful yet, but it's a start.

(Continue to Part 2: Basic UI.)