Part 4: Displaying Data

In order to display the results of our RSS request, we first need a place to store the returned data. We'll set this up by defining a create method in FeedReader.js, which will override the behavior of the create method inherited from VFlexBox:

create: function() {
  this.inherited(arguments);
  this.results = [];
}

this.inherited(arguments) calls the create method of our kind's superkind, VFlexBox. Then we set up an empty array (this.results) in which we'll store our results. Since the create method is called each time an object is instantiated, we'll have access to this.results in each new FeedReader object going forward.

Now let's change gotFeed to actually store the result data in this.results when we receive a successful response to our request. Let's also change gotFeedFailure to behave more discreetly in the event of a failure.

gotFeed: function(inSender, inResponse) {
  this.results = inResponse.query.results.item;
},
gotFeedFailure: function(inSender, inResponse) {
  enyo.log("got failure from getFeed");
}

The actual display of data will be handled by a new UI component (or "Control", in Enyo-speak). We'll add this to the components block of FeedReader, which will now look like this:

components: [
  {name: "getFeed", kind: "WebService",
      onSuccess: "gotFeed",
      onFailure: "gotFeedFailure"},
  {kind: "PageHeader", content: "Enyo FeedReader"},
  {kind: "RowGroup", caption: "Feed URL", components: [
      {kind: "InputBox", components: [
          {name: "feedUrl", kind: "Input", flex: 1, 
              value: "http://feeds.bbci.co.uk/news/rss.xml"},
          {kind: "Button", caption: "Get Feed", onclick: "btnClick"}
      ]}
  ]},
  {kind: "Scroller", flex: 1, components: [
      {name: "list", kind: "VirtualRepeater", onSetupRow: "getListItem",
          components: [
              {kind: "Item", layoutKind: "VFlexLayout", components: [
                  {name: "title", kind: "Divider"},
                  {name: "description"}
              ]}
          ]
      }
  ]} 
]

At the heart of our new Scroller control is a VirtualRepeater, which contains a variable number of Item objects. The Item kind definition specifies some simple formatting that we'll apply to each item in our result set when displaying the data. As each new Item object is added to the VirtualRepeater, we call the new getListItem method, which fills in the title and description values for the particular Item:

getListItem: function(inSender, inIndex) {
  var r = this.results[inIndex];
  if (r) {
      this.$.title.setCaption(r.title);
      this.$.description.setContent(r.description);
      return true;
  }
}

In technical terms, a Scroller is a fixed-height viewport into a larger region of content. Practically speaking, the Scroller does what you would expect--it allows the user to scroll through the items in our VirtualRepeater if there are too many of them to fit in the Scroller control's allotted screen height. The flex property indicates that the Scroller should fill all the available space down to the bottom of the FeedReader VFlexBox. (The behavior of the flex property in Enyo is similar to that of the box-flex property of flexible box modules in CSS3.)

There's one last thing we have to do in order to have live result data appear in our UI--redraw the VirtualRepeater after we've added all of our Items to it. All that's needed is a single line of new code at the end of gotFeed:

gotFeed: function(inSender, inResponse) {
  this.results = inResponse.query.results.item;
  this.$.list.render();
}

With that, the fruits of our labor become readily apparent:

(Continue to Part 5: Working with Multiple Views.)