Styling the collection view in Tabris.js

One of the most common mobile views for displaying information is the collection view. The collection view is a scrollable list often used for presenting data as a series of rows and has been part of Tabris.js since the beginning. Previously Tabris.js required that all rows be styled the same, but with Tabris.js 1.1 you can now style each item separately.

Collection views are styled using the initializeCell function. In this example, we style Section Headers with 18px bold font, and all other cells with 14px font. We also set a different background colour for section headers too.

  initializeCell: function(cell, type) {
    var textView = tabris.create("TextView", {
      layoutData: {top: 2, bottom: 2, left: 5, right: 5},
      font: type === "section" ? "bold 18px" : "14px"
    }).appendTo(cell);
    if (type === "section") {
      cell.set("background", "#cecece");
    }
    cell.on("change:item", function(widget, item) {
      textView.set("text", item.name);
    });
  }

The type of the cell is published by implementing the cellType function. Finally, the height of the item can be set by implementing the itemHeight function.

 cellType: function(item) {
    return item.type;
 },
 itemHeight: function(item, type) {
    return type === "section" ? 30 : 24;
 }

The complete example can be found on tabrisjs.com or in our tabris.js GitHub repository.

For more Tabris.js Tips and Tricks, follow us on Twitter.