CollectionView: Display Data Sets in Tabris.js

Warning! This article is outdated and might not represent the current state of Tabris.js.

The CollectionView is one of the most powerful widgets on iOS. On Android, there’s a similar widget called RecyclerView. Both widgets implement the same idea: they display a data set by creating only as many cells as fit on the screen and mapping the visible data items to these cells. The cells are then recycled to contain new data items on scrolling or when the data changes. This approach offers the best performance even with large data sets.

As a cross-platform framework, we strive for a unique API that closely follows the native concepts. Therefore, Tabris.js comes with a CollectionView widget that is mapped to a CollectionView on iOS and to a RecyclerView on Android. Let’s have a look at the JavaScript API.

When you create a CollectionView in Tabris.js, you have to provide an initializeCell callback that is responsible for filling the reusable cells with whatever widgets required to display a single data item. Tabris.js will create as many cells as needed and invoke this callback for every one of them.

tabris.create("CollectionView", {
  initializeCell: function(cell) {
    tabris.create("ImageView", {
      layoutData: { ... }
    }).appendTo(cell);
    tabris.create("TextView", {
      layoutData: { ... },
      alignment: "center"
    }).appendTo(cell);
    ...
  },
  ...
}).appendTo(page);

When a data item is mapped to the cell, an itemchange event will be fired on the cell. You have to add an event listener to each cell that applies the item details onto the widgets you’ve created. Let’s add it to our example:

initializeCell: function(cell) {
  var imageView = tabris.create("ImageView", ...
  var nameView = tabris.create("TextView", ...
  cell.on("itemchange", function(person) {
    imageView.set("image", person.image);
    nameView.set("text", person.firstName);
  });
}

Now your CollectionView is all set up and ready to display data items. You can set the property items to an array that contains your data model and you’re done.

var people = [{firstName: ..., image: ...}, {firstName: ...
collectionView.set("items", people);

Since these are real native widgets, they expose the platform specific behavior such as native animations on insert and remove and the pull-to-refresh gesture. You wouldn’t notice that the application is written entirely in JavaScript. Of course, there are a lot more features to come, such as support for different types of cells (think section headers) or more advanced layouts. Stay tuned - follow @tabrisjs on Twitter.

P.S. If you want to run the code directly on your device, you need to get a Tabris.js developer app (App Store, Play Store) and sign up on tabrisjs.com.