How to use the tabris.CollectionView function in tabris

// Create a collection view, initialize its cells and fill it with items
import {CollectionView, Composite, ImageView, TextView, contentView} from 'tabris';
const IMAGE_PATH = 'resources/';

const people = [
  ['Holger', 'Staudacher', 'holger.jpg'],
  ['Ian', 'Bull', 'ian.jpg'],
  ['Jochen', 'Krause', 'jochen.jpg'],
  ['Jordi', 'Böhme López', 'jordi.jpg'],
  ['Markus', 'Knauer', 'markus.jpg'],
  ['Moritz', 'Post', 'moritz.jpg'],
  ['Ralf', 'Sternberg', 'ralf.jpg'],
  ['Tim', 'Buschtöns', 'tim.jpg']
].map(([firstName, lastName, image]) => ({firstName, lastName, image: IMAGE_PATH + image}));

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: people.length,
  cellHeight: 256,
  createCell: () => {
    const cell = new Composite();
    new ImageView({
      top: 16, centerX: 0, width: 200, height: 200
    }).appendTo(cell);
    new TextView({
      left: 30, top: 'prev() 16', right: 30,
      alignment: 'center'
    }).appendTo(cell);
    return cell;
  },
  updateCell: (cell, index) => {
    const person = people[index];

import {CollectionView} from 'tabris';

let widget = new CollectionView();

const firstVisibleIndex = widget.firstVisibleIndex;
widget = new CollectionView({firstVisibleIndex});
widget.set({firstVisibleIndex});
widget.firstVisibleIndex = firstVisibleIndex;

const lastVisibleIndex = widget.lastVisibleIndex;
widget = new CollectionView({lastVisibleIndex});
widget.set({lastVisibleIndex});
widget.lastVisibleIndex = lastVisibleIndex;

/*Expected
(6,
(7,
firstVisibleIndex
(8,

import {CollectionView} from 'tabris';

let widget = new CollectionView();

const firstVisibleIndex = widget.firstVisibleIndex;
widget = new CollectionView({firstVisibleIndex});
widget.set({firstVisibleIndex});
widget.firstVisibleIndex = firstVisibleIndex;

const lastVisibleIndex = widget.lastVisibleIndex;
widget = new CollectionView({lastVisibleIndex});
widget.set({lastVisibleIndex});
widget.lastVisibleIndex = lastVisibleIndex;

/*Expected
(6,
(7,
firstVisibleIndex
(8,
firstVisibleIndex

(11,
(12,
lastVisibleIndex
(13,
lastVisibleIndex
*/

import {CollectionView, TextView, ImageView, contentView} from 'tabris';

const items = [];
for (const section of ['settings-black-24dp@3x.png', 'share-black-24dp@3x.png', 'search-black-24dp@3x.png']) {
  items.push({type: 'section', image: `resources/${section}`});
  for (let i = 1; i <= 25; i++) {
    items.push({type: 'item', text: `Item ${i}`});
  }
}

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: items.length,
  cellType: index => items[index].type,
  cellHeight: (index, type) => type === 'section' ? 48 : 24,
  createCell: type => type === 'section' ? new ImageView() : new TextView(),
  updateCell: (view, index) => {
    const item = items[index];
    if (item.type === 'section') {
      view.image = item.image;
    } else {
      view.text = item.text;
    }
  }
}).appendTo(contentView);

const TEXT = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem' +
  ' accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab' +
  ' illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.' +
  ' Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,' +
  ' sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.' +
  ' Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,' +
  ' adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et' +
  ' dolore magnam aliquam quaerat voluptatem.';

const items = [];

for (let i = 0; i < 30; i++) {
  items[i] = TEXT.substring(0, (i + 1) * 50);
}

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: items.length,
  createCell: () => {
    const composite = new Composite();
    new ImageView({
      left: MARGIN, top: MARGIN,
      image: {src: 'resources/arrow-forward-black-24dp@3x.png', scale: 3}
    }).appendTo(composite);
    new TextView({
      left: ['#imageView', MARGIN], top: MARGIN, right: MARGIN
    }).appendTo(composite);
    return composite;
  },
  updateCell: (cell, index) => cell.find(TextView).set({text: items[index]})
}).appendTo(contentView);

const {CollectionView, Composite, ImageView, NavigationView, Page, TextView, WebView, contentView} = require('tabris');

const ITEM_FETCH_COUNT = 25;

let loading;
let items = [];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const page = new Page({
  title: 'Reddit - Pets'
}).appendTo(navigationView);

const collectionView = new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  background: '#f5f5f5',
  refreshEnabled: true,
  cellHeight: 96,
  cellType: index => items[index].loading ? 'loading' : 'normal',
  createCell: (type) => {
    if (type === 'normal') {
      return createItemCell();
    }
    return createLoadingCell();
  },
  updateCell: (view, index) => {
    const item = items[index];
    if (!(item.loading)) {
      view.find('#container').first().item = item;
      view.find('#itemImage').set({image: {src: item.data.thumbnail, width: 80, height: 80}});

let selectedLanguage, texts;

loadLanguage(device.language);

new Picker({
  left: 16, top: 8, right: 16,
  itemCount: LANGUAGES.length,
  itemText: index => LANGUAGES[index].name,
  selectionIndex: LANGUAGES.map(element => element.id).indexOf(selectedLanguage)
}).on('select', ({index}) => {
  loadLanguage(LANGUAGES[index].id);
  collectionView.itemCount = texts.items.length;
  collectionView.refresh();
}).appendTo(contentView);

const collectionView = new CollectionView({
  left: 0, top: 'prev() 8', right: 0, bottom: 0,
  itemCount: texts.items.length,
  cellHeight: 54,
  createCell: () => new MenuCell(),
  updateCell: (cell, index) => cell.dish = texts.items[index]
}).appendTo(contentView);

contentView.apply(texts);

class MenuCell extends Composite {

  constructor(properties) {
    super(properties);
    new TextView({
      id: 'priceText',
      top: 8, right: 16,

import {CollectionView, TextView, contentView} from 'tabris';

const SECTION_HEIGHT = 48;
const ITEM_HEIGHT = 32;

let scrollPosition = 0;
const items = createItems();

const floatingSection = createSectionView();
floatingSection.text = 'Section 1';

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: items.length,
  cellType: index => items[index].type,
  cellHeight: (index, type) => type === 'section' ? SECTION_HEIGHT : ITEM_HEIGHT,
  createCell: (type) => type === 'section' ? createSectionView() : createItemView(),
  updateCell: (cell, index) => cell.text = items[index].name
}).onScroll(({target, deltaY}) => {
  scrollPosition += deltaY;
  const firstVisibleItem = target.firstVisibleIndex;
  floatingSection.set({
    text: getCurrentSection(firstVisibleItem).name,
    transform: {translationY: getSectionTranslationY(firstVisibleItem)}
  });
}).appendTo(contentView);

floatingSection.appendTo(contentView);

import {CollectionView, TextView, contentView} from 'tabris';

const items = [];

const view = new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  cellHeight: 25,
  refreshEnabled: true,
  createCell: () => new TextView(),
  updateCell: (cell, index) => cell.text = items[index]
}).on('refresh', loadItems)
  .appendTo(contentView);

loadItems();

function loadItems() {
  view.refreshIndicator = true;
  view.refreshMessage = 'loading...';
  setTimeout(() => {
    createNewItems(25);
    view.insert(0, 25);

constructor(properties: Properties) {
    super();
    this._cv = new CollectionView({
      layoutData: 'stretch',
      cellType: index => this._items[index].type,
      cellHeight: (_, type) => type === 'section' ? 48 : 32,
      createCell: this.createCell,
      updateCell: (cell, index) => cell.text = this._items[index].name
    }).onScroll(this.updateFloatingSection)
      .appendTo(this);
    this._floatingSection = this.createCell('section').set({
      left: 0, height: 48, right: 0
    }).appendTo(this);
    this.set(properties);
  }