Part 2: Basic UI

Let's add some UI to our application by populating the components property of the FeedReader constructor. In FeedReader.js, we add a header (of kind PageHeader) and a text input box (of kind Input):

enyo.kind({
  name: "MyApps.FeedReader",
  kind: enyo.VFlexBox,
  components: [
      {kind: "PageHeader", content: "Enyo FeedReader"},
      {kind: "RowGroup", caption: "Feed URL", components: [
          {kind: "InputBox", components: [
              {name: "feedUrl", kind: "Input", flex: 1},
              {kind: "Button", caption: "Get Feed", onclick: "btnClick"}
          ]}
      ]}
  ],
  btnClick: function() {
      // handle the button click
  }
});

One of the virtues of Enyo is that it allows much of the application development process to take place entirely within the Web browser. For example, you can check the look of your app by opening the index.html file in a WebKit-based desktop browser (such as Safari or Chrome), without having to upload the application to either an actual device or the software device emulator.

Because of security restrictions, if you choose to develop the tutorial app in Chrome, you'll need to launch the browser using the command-line switch "--allow-file-access-from-files". On Windows, you can do this by creating a shortcut to chrome.exe and adding the switch to the end of the shortcut's Target property. Then use the shortcut each time you launch the browser. A similar approach should work on Mac and Linux, as well.

(Note: Although we haven't been able to confirm it in our own testing, some developers have reported that two additional launch parameters, --enable-file-cookies and -disable-web-security, may be needed to make Chrome run the tutorial app successfully.)

Here's what our application looks like in its current state:

Looking at the source code, we see that the text input box is an Input object with the name "feedUrl". This Input object and an accompanying Button object are contained within an InputBox, which neatly aligns the two. (By setting flex: 1, we indicate that the Input should take up all the horizontal space not used by the Button.) The InputBox is then nested inside a RowGroup object, which gives us the nice-looking border with the "FEED URL" text.

At runtime, when a user enters a URL and taps the Get Feed button, we want a specific action to take place (i.e., we want to get the feed data). Within Enyo, the button tap generates a click event, so we've defined a function ("btnClick") to handle the event. The name of the function is specified in the Button object's "onclick" property, and the function itself is defined as a property of FeedReader, on the same level as name, kind, and components.

Now let's turn our attention to retrieving the actual feed data.

(Continue to Part 3: Using a Service.)