How to use the tabris.CheckBox function in tabris

function test_CheckBox() {
  var widget: CheckBox = new CheckBox();
  widget.set("foo", 23);
  widget.set({
    selection: true,
    text: "foo"
  });
}

const markup = '<b>bold</b>, <i>italic</i>, <big>big</big>, <small>small</small>, ' +
  '<ins>ins</ins>, <del>del</del>, <a href="http://tabrisjs.com">link</a>';

new TextView({
  left: 16, top: 16, right: 16,
  text: 'TextView with markup:\n' + markup
}).appendTo(contentView);

const markupTextView = new TextView({
  left: 16, top: 'prev() 16', right: 16,
  text: 'TextView with markup:\n' + markup,
  markupEnabled: true
}).onTapLink(({url}) =&gt; console.log(`tab link ${url}`))
  .appendTo(contentView);

new CheckBox({
  left: 16, top: 'prev() 16', right: 16,
  text: 'Render markup',
  checked: markupTextView.markupEnabled
}).onCheckedChanged(({value: markupEnabled}) =&gt; markupTextView.markupEnabled = markupEnabled)
  .appendTo(contentView);

function createCheckBox(text, listener, checked = true) {
  return new CheckBox({
    left: MARGIN, top: ['prev()', MARGIN_SMALL], right: MARGIN,
    text,
    checked
  }).on('checkedChanged', listener)
    .appendTo(controls);
}

const {Canvas, CheckBox, Page, device} = require('tabris');

const CANVAS_WIDTH = 210;
const CANVAS_HEIGHT = 300;
const ARC_RADIUS = 20;

const page = new Page({
  title: 'Arcs',
  autoDispose: false
});

const canvas = new Canvas({
  centerX: 0, top: 32, width: CANVAS_WIDTH, height: CANVAS_HEIGHT
}).appendTo(page);

new CheckBox({
  centerX: 0, top: [canvas, 16],
  text: 'Counterclockwise'
}).on('checkedChanged', ({value}) => {
  clearCanvas();
  drawArcs(value);
}).appendTo(page);

const scaleFactor = device.scaleFactor;
const context = canvas.getContext('2d', CANVAS_WIDTH * scaleFactor, CANVAS_HEIGHT * scaleFactor);
context.scale(scaleFactor, scaleFactor);
context.textAlign = 'center';
context.textBaseline = 'top';

clearCanvas();
drawArcs(false);

_createUI() {
    this.append(
      new Button({id: 'drawChartButton', text: DRAW_CHART_BUTTON_TEXT})
        .on('select', () => this._drawChart()),
      new CheckBox({id: 'animateCheckBox', text: ANIMATE_CHECKBOX_TEXT}),
      new Composite()
        .append(new Canvas())
        .on({resize: (event) => this._layoutCanvas(event)})
    );
  }

}).appendTo(refreshComposite);

new TextView({
  left: 0, right: 0, top: 32,
  alignment: 'centerX',
  font: 'black 24px',
  text: 'pull to refresh'
}).appendTo(scrollView);

const textView = new TextView({
  left: 0, right: 0, top: 'prev() 32',
  alignment: 'centerX',
  lineSpacing: 1.4
}).appendTo(scrollView);

new CheckBox({
  left: 16, right: 16, bottom: 16,
  text: 'Enable pull to refresh',
  checked: true
}).onCheckedChanged(({value: checked}) => refreshComposite.refreshEnabled = checked)
  .appendTo(contentView);

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();
    }
  }).appendTo(contentView);
  return true;
}

text: 'Luggage:'
  })
).append(
  new TextView({
    id: 'luggageWeight',
    text: '0 Kg'
  })
).append(
  new Slider({
    id: 'luggageSlider'
  }).on('selectionChanged', ({value}) => {
    scrollView.find('#luggageWeight').set({text: value + ' Kg'});
  })
).appendTo(scrollView);

new CheckBox({
  id: 'veggieChoice',
  text: 'Vegetarian'
}).appendTo(scrollView);

new Composite({
  id: 'milesPanel'
}).append(
  new TextView({
    id: 'milesLabel',
    text: 'Redeem miles:'
  })
).append(
  new Switch({
    id: 'milesSwitch'
  })
).appendTo(scrollView);

title: 'Animation',
  autoDispose: false
}).on('disappear', () => {
  page.children('#animateCheckBox').set({checked: false});
});

new Canvas({
  left: 10, top: 10, right: 10, bottom: '#animateCheckBox 10'
}).on('resize', ({target, width, height}) => {
  const scaleFactor = device.scaleFactor;
  const ctx = target.getContext('2d', width * scaleFactor, height * scaleFactor);
  ctx.scale(scaleFactor, scaleFactor);
  animationExample.draw(ctx, width, height);
}).appendTo(page);

new CheckBox({
  centerX: 0, bottom: 10,
  text: 'Animate',
  id: 'animateCheckBox'
}).on('checkedChanged', ({value: checked}) => animationExample.animating = checked)
  .appendTo(page);

module.exports = page;