/
collectionview.js
42 lines (38 loc) · 1.24 KB
/
collectionview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var IMAGE_PATH = "images/";
var 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(function(element) {
return {firstName: element[0], lastName: element[1], image: IMAGE_PATH + element[2]};
});
var page = new tabris.Page({
title: "Collection View",
topLevel: true
});
new tabris.CollectionView({
layoutData: {left: 0, top: 0, right: 0, bottom: 0},
items: people,
itemHeight: 256,
initializeCell: function(cell) {
var imageView = new tabris.ImageView({
layoutData: {top: 16, centerX: 0, width: 200, height: 200}
}).appendTo(cell);
var nameTextView = new tabris.TextView({
layoutData: {left: 30, top: [imageView, 16], right: 30},
alignment: "center"
}).appendTo(cell);
cell.on("change:item", function(widget, person) {
imageView.set("image", {src: person.image});
nameTextView.set("text", person.firstName);
});
}
}).on("select", function(target, value) {
console.log("selected", value.firstName);
}).appendTo(page);
page.open();