How to use the tabris.ImageView function in tabris

PAGE_DATA.map(data =>
        new Composite({class: 'pageEntry', highlightOnTouch: true}).append(
          new ImageView({class: 'image', image: data.drawerIcon}),
          new TextView({class: 'titleLabel', text: data.title})
        ).on('tap', () => this._open(new BooksPage({title: data.title, filter: data.filter})))
      )

function createDetailsPage(data) {
  const detailsPage = new Page({
    background: 'black',
    title: data.title
  }).appendTo(navigationView);
  if (data.url.substr(-4, 4) === '.jpg') {
    new ImageView({
      left: 0, top: 0, right: 0, bottom: 0,
      image: data.url,
      scaleMode: 'fit',
      zoomEnabled: true
    }).appendTo(detailsPage);
  } else {
    new WebView({
      left: 0, top: 0, right: 0, bottom: 0,
      url: data.url
    }).appendTo(detailsPage);
  }
}

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

const MARGIN = 16;
const MARGIN_LARGE = 32;

const IMAGES = [
  {name: 'Large', src: 'resources/salad.jpg', scale: 3},
  {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]

_createUI() {
    this.append(
      new ImageView({id: 'image'}),
      new TextView({id: 'titleLabel', markupEnabled: true}),
      new TextView({id: 'authorLabel'})
    );
  }

'tablespoonfuls of oil, 2 tablespoonfuls of vinegar. Simmer over the fire, ' +
  'but do not allow to boil. Take the white meat of two chickens, and separate ' +
  'into flakes; pile it in the middle of a dish, and pour the dressing over ' +
  'it. Cut up two heads of lettuce, and arrange around the chicken. On top of ' +
  'the lettuce place the whites of the eggs, cut into rings, and lay so as to ' +
  'form a chain.';

let titleCompY = 0;

tabris.statusBar.background = rgba(255, 152, 0, 1);

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

const imageView = new ImageView({
  left: 0, top: 0, right: 0,
  image: 'images/salad.jpg',
  scaleMode: 'fill'
}).appendTo(scrollView);

const contentComposite = new Composite({
  left: 0, right: 0, top: '#titleComposite', height: 1000,
  background: 'white'
}).appendTo(scrollView);

new TextView({
  left: 16, right: 16, top: 16,
  text: RECIPE
}).appendTo(contentComposite);

const titleComposite = new Composite({

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) => {

private createWeatherIcon(icon: string) {
    return new ImageView({
      right: 80, width: WEATHER_ICON_SIZE, height: WEATHER_ICON_SIZE, centerY: 0,
      image: '/icons/' + icon + '.png'
    });
  }

_createUI() {
    this.append(
      new Composite({id: 'detailsView'}).on('tap', () => this._openReadBookPage())
        .append(
          new ImageView({id: 'coverImage', image: this.book.image}),
          new TextView({id: 'titleLabel', text: this.book.title}),
          new TextView({id: 'authorLabel', text: this.book.author}),
          new TextView({id: 'priceLabel', text: PRICE})
        ),
      new TabFolder({id: 'tabFolder', tabBarLocation: 'top', paging: true}).append(
        new Tab({title: RELATED_TAB_TITLE}).append(
          new BooksList()
        ),
        new Tab({title: COMMENTS_TAB_TITLE}).append(
          new TextView({id: 'commentLabel', text: COMMENT})
        )
      )
    );
  }

function createPersonDetail(parent, person, delay) {
  const composite = new Composite({
    left: 0, right: 0, top: 0, height: IMAGE_SIZE + MARGIN_LARGE
  }).appendTo(parent);
  const personImage = new ImageView({
    left: 0, top: 0, width: IMAGE_SIZE, height: IMAGE_SIZE,
    image: {src: person.image, width: IMAGE_SIZE, height: IMAGE_SIZE},
    opacity: 0.0
  }).onResize(() => {
    personImage.transform = {
      scaleX: 0.75,
      scaleY: 0.75
    };
    animateInScaleUp(personImage, delay);
  }).appendTo(composite);
  const nameTextView = new TextView({
    left: [personImage, MARGIN], top: 0,
    text: person.firstName + ' ' + person.lastName,
    font: 'bold 18px'
  }).appendTo(composite);
  const professionTextView = new TextView({

import {ImageView, Slider, contentView} from 'tabris';

const imageView = new ImageView({
  left: 20, top: 20, width: 100, height: 250,
  image: 'resources/target_200.png',
  background: '#aaaaaa',
  scaleMode: 'auto'
}).appendTo(contentView);

new Slider({
  left: 20, top: [imageView, 20], right: 100,
  minimum: 50,
  selection: 100,
  maximum: 300
}).onSelectionChanged(({value: selection}) => imageView.set({left: 20, top: 20, width: selection, height: 250}))
  .appendTo(contentView);