wrapping grid

collectionview-autowrap.js

import {TextView, CollectionView, Slider, ui, Composite} from 'tabris';

const items = [
    'One', 'Two', 'Three', 'Four', 'Five', 'Six',
    'Seven', 'Eight', 'Nine', 'Ten', 'Foo', 'Bar', 'Hello World'
]

const MARGIN = 10;
const BORDER = 2;
const TILE_HEIGHT = 128;
const TILE_MIN_WIDTH = 128;

class Cell extends Composite {

    constructor() {
        super();
        const border = new Composite({
            left: MARGIN, top: MARGIN, right: MARGIN, bottom: MARGIN,
            background: 'black', 
        }).appendTo(this);
        new TextView({
            left: BORDER, top: BORDER, right: BORDER, bottom: BORDER,
            background: 'white', font: 'bold 32px', textColor: '#555555', 
            alignment: 'center'
        }).appendTo(border);
    }

}

const collectionView = new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: items.length,
  cellHeight: TILE_HEIGHT + MARGIN + MARGIN,
  createCell: () => new Cell(),
  updateCell: (cell, index) => cell.find(TextView).set({text: items[index]})  
}).on({resize: handleResize})
  .appendTo(ui.contentView);

function handleResize(event) {
    collectionView.columnCount = Math.floor(event.width / TILE_MIN_WIDTH);
}