Tabris.js Widgets: CollectionView

This widget creates a scrollable list of elements with equal intervals between them. CollectionView can have more than one column, making it look like an HTML element. But all cells are distributed equally between columns, so it is very tricky to create real tables using CollectionView. In most cases, it is better to stick with only one column, especially given the fact that most mobile devices have relatively small screens.

Static text lists are not the only purpose of this widget – you can fill it up with Buttons and place it inside a Drawer to create application navigation, or use ImageViews to make a gallery. Don’t confuse it with ScrollView if you are looking for an internal scroll (the one you can get “overflow: scroll;” CSS property in HTML) because CollectionView can’t provide such functionality.

Here is a simple example of the widget in JS syntax:

It is empty and pretty meaningless without content, so let’s find out how to fill it:

  1. First, you need the createCell property. It defines a callback function that will be used for creating a new cell. There are no “real” cells where you put content, but as explained earlier, the individual widgets serve as cells. For example, if you want a CollectionView filled with Buttons, Buttons will serve as cells. Take a look at the example below, and everything will make sense.
  2. Then fill the cell widgets with content based on cell index. It is done with help of updateCell property.

Let’s fill the ContentView from above with some text fields:

And here is a bit more complicated, but better-looking example in JSX syntax. Scan the QR-code below using Tabris.js Developer App to see the code in action!

As you may have noticed, syntactically dividing createCell() and updateCell() functions, you can make your code pretty readable and good-looking.
Just like most of Tabris widgets, CollectionView is single-purposed and simple-looking but serves as a powerful tool if used with a bit of creativity. For example, take a look at how you can change the columns count dynamically:

Use the CollectionView documentation page to find out more about the widget properties and methods.