Documentation

Application Structure

Let's look at the structure of a simple Enyo application, the "FeedReader" app from the Enyo Tutorial. In most cases, you'll want to structure your own Enyo applications along similar lines.

Here is a list of the files and directories that make up the FeedReader application:

FeedReader/
  -> appinfo.json
  -> depends.js
  -> framework_config.json
  -> index.html
  -> css/
      -> css/FeedReader.css
  -> mock/
      -> feedReader_preferences_getPreferencesCall.json
      -> feedReader_preferences_setPreferencesCall.json
  -> source/
      -> source/Detail.js
      -> source/FeedReader.js
      -> source/Preferences.js
      -> source/Search.js

Application Folder

Inside the FeedReader directory, we find four files (appinfo.json, depends.js, framework_config.json, and index.html) at the top level. These are required in every Enyo application. Turning to the subdirectories, while the presence of css and source is not mandatory, it is recommended that you create these subdirectories and use them to house stylesheets and application code, respectively. The mock subdirectory is only needed under specific circumstances, as mentioned below.

appinfo.json

The appinfo.json file provides the framework with information it needs in order to load the application and run it.

Here are the contents of the appinfo.json file from FeedReader:

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

Of particular note is the uiRevision property. Its value must be set to "2" in order for an application to run at full screen resolution on the TouchPad.

More information about each property, including possible values, is available in appinfo.json.

depends.js

The depends.js file is new in Enyo; it is a manifest of the JavaScript and CSS files that make up the application.

Here's what the depends.js file for FeedReader looks like:

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

Note the first and last lines--every depends.js file is structured as a call to the enyo.depends function.

framework_config.json

The framework_config.json file may be used to configure a variety of settings, including the logging level. This is what the FeedReader app does in its framework_config.json file:

{
  "logLevel": 99
}

Here a value of 99 corresponds to the maximum logging level.

This file may also be used to enable debugging, via the debuggingEnabled property. Additional information on this and other properties is available in framework_config.json.

index.html

index.html is the file loaded at application startup.

Technically, this file doesn't have to be called index.html, but its name must match the value of the main property in appinfo.json. In practice, you'll probably want to name the file index.html for simplicity's sake.

The index.html file from FeedReader is simple, but it illustrates a pattern that you'll see over and over in Enyo applications:

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

The most interesting things here are the two <script> elements. The first, inside the <head>, loads the Enyo framework. (Note: If you're following along on your own computer, you'll need to edit the path to enyo.js to match the location of your Enyo installation.) In this case, we have specified launch="nobridge" because we are using mock data to test the app. (See the discussion of "mock" below).

The second <script>, inside the <body>, creates an instance of the main application kind.

css

By convention, the css subdirectory contains any CSS stylesheets that are specific to the current application. These files do not have to be referenced explicitly in index.html, but do have to be listed in depends.js.

mock

The mock subdirectory is required if (and only if) you are testing your application by feeding it mock service data. In that case, mock will contain one or more files of JSON-formatted mock data. Note that these mock data files do not need to be added to depends.js. (For more information on using mock data, see Part 6 of the Enyo Tutorial.)

source

By convention, the kinds that constitute the core of the application (in our current example, FeedReader.js, Detail.js, Search.js, and Preferences.js) are kept in a subdirectory called source under the app directory. You are free to create subdirectories under source, if you wish.

Exercise: Adding an application icon

If we wanted to add an icon to represent the FeedReader application, we would do the following:

Create the icon as a PNG file named icon.png. (For complete specifications for icon files, see the Enyo Design Guide.)

Add icon.png to the top level of the app directory, so the directory structure now looks like this:

FeedReader/
  -> appinfo.json
  -> depends.js
  -> framework_config.json
  -> icon.png
  -> index.html
  -> css/
      -> css/FeedReader.css
  -> mock/
      -> feedReader_preferences_getPreferencesCall.json
      -> feedReader_preferences_setPreferencesCall.json
  -> source/
      -> source/Detail.js
      -> source/FeedReader.js
      -> source/Preferences.js
      -> source/Search.js

Define icon.png to be the application's icon by adding a line to appinfo.json:

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

If our application had additional image files, by convention, we would add them under FeedReader/images/.

Note that it is not necessary to list image files or other media assets in depends.js.