How to use the tabris.Picker function in tabris

function test_Picker() {
  var widget: Picker = new Picker();
  widget.set("foo", 23);
  widget.set({
    selection: "foo",
    selectionIndex: 23,
    items: ["foo", "bar", "baz"]
  });
}

const AIRPORTS = [
  {
    id: 'SFO',
    name: 'San Francisco'
  },
  {
    id: 'TXL',
    name: 'Berlin Tegel'
  },
  {
    id: 'FRA',
    name: 'Frankfurt'
  }
];

const picker = new Picker({
  left: 20, top: 20, right: 20,
  itemCount: AIRPORTS.length,
  itemText: (index) => AIRPORTS[index].name,
  selectionIndex: 1
}).appendTo(contentView);

picker.onSelect(({index}) => console.log('Selected ' + AIRPORTS[index].id));

function showIntro() {
  Object.defineProperty(global, 's', {get: stop});
  Object.defineProperty(global, 'n', {get: next});
  Object.defineProperty(global, 'p', {get: prev});
  if (localStorage.getItem(KEY_SNIPPET_INDEX)) {
    return false;
  }
  const snippetPicker = new Picker({
    top: 'prev()', left: 10, right: 10,
    selectionIndex: 0,
    itemText: index => typeof snippets[index] === 'string' ? snippets[index] : snippets[index][0],
    itemCount: snippets.length
  }).appendTo(contentView);
  const autoCheckBox = new CheckBox({
    top: 'prev()',
    text: 'auto continue',
    checked: localStorage.getItem(KEY_AUTO_CONTINUE) === 'true'
  }).appendTo(contentView);
  new Button({text: 'Start', top: 'prev()'}).on({
    select: () => {
      localStorage.setItem(KEY_AUTO_CONTINUE, autoCheckBox.checked);
      localStorage.setItem(KEY_SNIPPET_INDEX, snippetPicker.selectionIndex);
      app.reload();
    }

function createColorPicker(text, property) {
  const initialColor = navigationView[property];
  new TextView({
    left: MARGIN, top: ['prev()', MARGIN], width: LABEL_WIDTH,
    text
  }).appendTo(controls);
  new Picker({
    left: ['prev()', MARGIN], baseline: 'prev()', right: MARGIN,
    itemCount: COLORS.length,
    itemText: index => COLORS[index] || initialColor
  }).onSelect(({index}) => navigationView[property] = COLORS[index] || initialColor)
    .appendTo(controls);
}

import {Picker, TextView, contentView, navigationBar} from 'tabris';

const THEMES = ['default', 'light', 'dark'];
const DISPLAY_MODES = ['default', 'float', 'hide'];
const BACKGROUNDS = [navigationBar.background, 'rgba(0, 0, 0, 0.25)', 'red', 'green', 'blue'];

createTextView('Theme', 'theme');
createTextView('Display mode', 'displayMode');
createTextView('Background', 'background');
createTextView('Height', 'height');

new Picker({
  left: '#displayMode 16', baseline: '#theme', right: 16,
  itemCount: THEMES.length,
  itemText: index => THEMES[index]
}).on('select', ({index}) => navigationBar.theme = THEMES[index])
  .appendTo(contentView);

new Picker({
  left: '#displayMode 16', baseline: '#displayMode', right: 16,
  itemCount: DISPLAY_MODES.length,
  itemText: index => DISPLAY_MODES[index]
}).on('select', ({index}) => navigationBar.displayMode = DISPLAY_MODES[index])
  .appendTo(contentView);

new Picker({
  left: '#displayMode 16', baseline: '#background', right: 16,
  itemCount: BACKGROUNDS.length,

{name: 'Small', src: 'resources/landscape.jpg', scale: 3}
];
const SCALE_MODES = ['auto', 'fit', 'fill', 'stretch', 'none'];

const imageView = new ImageView({
  top: MARGIN, width: 200, height: 200, centerX: 0,
  image: IMAGES[0],
  background: 'rgb(220, 220, 220)'
}).appendTo(contentView);

const imageSizeLabel = new TextView({
  left: MARGIN, top: [imageView, MARGIN_LARGE], width: 96,
  text: 'Image'
}).appendTo(contentView);

new Picker({
  right: MARGIN, left: [imageSizeLabel, 0], baseline: imageSizeLabel,
  itemCount: IMAGES.length,
  itemText: index => IMAGES[index].name
}).on({
  select: ({index}) => imageView.image = IMAGES[index]
}).appendTo(contentView);

const scaleModeTextView = new TextView({
  left: MARGIN, top: [imageSizeLabel, MARGIN_LARGE], width: 96,
  text: 'Scale mode'
}).appendTo(contentView);

new Picker({
  right: MARGIN, left: scaleModeTextView, baseline: scaleModeTextView,
  itemCount: SCALE_MODES.length,
  itemText: index => SCALE_MODES[index]

/** @type {Array} */
const BACKGROUNDS = ['initial', 'rgba(0, 0, 0, 0.25)', 'red', 'green', 'blue'];

createTextView('Theme', 'theme');
createTextView('Display mode', 'displayMode');
createTextView('Background', 'background');
createTextView('Height', 'height');

new Picker({
  left: '#displayMode 16', baseline: '#theme', right: 16,
  itemCount: THEMES.length,
  itemText: index => THEMES[index]
}).onSelect(({index}) => statusBar.theme = THEMES[index])
  .appendTo(contentView);

new Picker({
  left: '#displayMode 16', baseline: '#displayMode', right: 16,
  itemCount: DISPLAY_MODES.length,
  itemText: index => DISPLAY_MODES[index]
}).onSelect(({index}) => statusBar.displayMode = DISPLAY_MODES[index])
  .appendTo(contentView);

new Picker({
  left: '#displayMode 16', baseline: '#background', right: 16,
  itemCount: BACKGROUNDS.length,
  itemText: index => BACKGROUNDS[index]
}).onSelect(({index}) => statusBar.background = BACKGROUNDS[index])
  .appendTo(contentView);

new TextView({
  left: '#displayMode 16', baseline: '#height', right: 16,
  text: statusBar.height.toString()

const {Composite, CollectionView, Picker, TextView, contentView} = require('tabris');

const LANGUAGES = [{
  id: 'en',
  name: 'English'
}, {
  id: 'de',
  name: 'Deutsch'
}];
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]

id: 'passphraseLabel',
  text: 'Passphrase:'
}).appendTo(scrollView);

new TextInput({
  id: 'passphraseInput',
  type: 'password',
  message: 'Passphrase'
}).appendTo(scrollView);

new TextView({
  id: 'countryLabel',
  text: 'Country:'
}).appendTo(scrollView);

new Picker({
  id: 'countryPicker',
  itemCount: COUNTRIES.length,
  itemText: index => COUNTRIES[index]
}).appendTo(scrollView);

new TextView({
  id: 'classLabel',
  text: 'Class:'
}).appendTo(scrollView);

new Picker({
  id: 'classPicker',
  itemCount: CLASSES.length,
  itemText: index => CLASSES[index]
}).appendTo(scrollView);