How to use the tabris.ScrollView function in tabris

import {Button, ScrollView, TextView, contentView} from 'tabris';

// Create a horizontal scroll view and populate it with text views

const scrollView = new ScrollView({
  left: 0, right: 0, top: '40%', bottom: '40%',
  direction: 'horizontal',
  background: '#234'
}).appendTo(contentView);

for (let i = 0; i <= 50; i++) {
  new TextView({
    left: i * 30 + 20, centerY: 0, width: 30,
    textColor: 'white',
    text: i + '°'
  }).appendTo(scrollView);
}

new Button({
  left: 16, bottom: 16,
  text: 'scroll'

function test_ScrollView() {
  var widget: ScrollView = new ScrollView();
  widget.set("foo", 23);
  widget.set({
    direction: "horizontal"
  });
}

import {ScrollView} from 'tabris';

let widget = new ScrollView();
widget.onDirectionChanged(function() {});

/*Expected
(4,
*/

const {
  Button, CheckBox, Composite, TextView, TextInput, Picker, RadioButton, ScrollView, Slider, Switch, contentView
} = require('tabris');

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

const COUNTRIES = ['Germany', 'Canada', 'USA', 'Bulgaria'];
const CLASSES = ['Business', 'Economy', 'Economy Plus'];

new TextView({
  id: 'nameLabel',
  alignment: 'left',
  text: 'Name:'
}).appendTo(scrollView);

new TextInput({
  id: 'nameInput',
  message: 'Full Name'
}).appendTo(scrollView);

new TextView({

const {Button, Page, NavigationView, ScrollView, contentView} = require('tabris');
const ToastPage = require('./ToastPage');
const SharingPage = require('./SharingPage');
const MotionPage = require('./MotionPage');
const NetworkPage = require('./NetworkPage');
const MediaPage = require('./MediaPage');
const CameraPage = require('./CameraPage');

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

const mainPage = new Page({
  title: 'Cordova Examples'
}).appendTo(navigationView);

const contentContainer = new ScrollView({
  left: 0, top: 0, right: 0, bottom: 0, padding: 16
}).appendTo(mainPage);

[
  SharingPage,
  ToastPage,
  MotionPage,
  NetworkPage,
  CameraPage,
  MediaPage
].forEach(Page => {
  const page = new Page();
  addPageSelector(page);
});

function addPageSelector(page) {

left: 16, right: ['#sendButton', 16], centerY: 0,
  message: 'Enter chat message...',
  text: 'Hello Chat!'
}).appendTo(inputContainer);

new Button({
  id: 'sendButton',
  right: 16, width: 76, centerY: 0,
  text: 'Send'
}).on('select', () => {
  socket.send('<b>' + device.model + '</b>: ' + chatInput.text);
  chatInput.text = '';
  logWebSocketState();
}).appendTo(inputContainer);

let scrollView = new ScrollView({
  left: 0, right: 0, top: 0, bottom: inputContainer,
  background: 'white',
  elevation: 2
}).appendTo(ui.contentView);

let chatTextView = new TextView({
  left: 16, right: 16, top: 16,
  text: 'Connecting to ' + CHAT_SERVER_URL,
  markupEnabled: true
}).appendTo(scrollView);

function appendToChat(text) {
  chatTextView.set('text', chatTextView.text + '<br>' + text);
}

function logWebSocketState() {

import {ScrollView, TextView, contentView, app} from 'tabris';

app.registerFont('pacifico', 'resources/pacifico.ttf');

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

const font = '20px pacifico';
new TextView({
  left: 16, top: 'prev() 24', right: 16,
  text: font
}).appendTo(scrollView);

new TextView({
  left: 16, top: 'prev() 8', right: 16,
  text: 'Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow. Sphinx of black quartz...',
  font
}).appendTo(scrollView);

new TextView({
  centerX: 0, centerY: 0,
  text: 'Page content'
}).appendTo(page);

new Action({title: 'Search'}).appendTo(navigationView);
new Action({
  title: 'Share',
  image: {
    src: device.platform === 'iOS' ? 'resources/share-black-24dp@3x.png' : 'resources/share-white-24dp@3x.png',
    scale: 3
  }
}).appendTo(navigationView);

const controls = new ScrollView({
  left: 0, right: 0, top: 'prev()', bottom: 0,
  background: 'white',
  elevation: 12
}).appendTo(contentView);

createCheckBox('Show toolbar', ({value: checked}) => {
  navigationView.toolbarVisible = checked;
  toolbarHeightTextView.text = `${navigationView.toolbarHeight}`;
});

createCheckBox('Show drawer action', ({value: checked}) => {
  navigationView.drawerActionVisible = checked;
});

createCheckBox('Custom navigation action', ({value: checked}) => {
  if (checked) {

import CurrentWeatherView from './currentWeatherView';
import ForecastOverview from './forecastOverview';
import ForecastTabView from './forecastTabView';
import WeatherGraph from './weatherGraph';
import {pollWeatherData, WeatherData} from './weatherService';

contentView.background = 'rgb(83,100,160)';
contentView.on({
  resize: () => applyLayout()
});

let background = new BackgroundLayer({
  left: 0, right: 0, top: 0, height: contentView.height
}).appendTo(contentView);

let scrollView = new ScrollView({
  left: 0, right: 0, top: 0, bottom: 0
}).on({
  scrollY: ({offset}) => background.scroll(-offset)
}).appendTo(contentView);

let input = new TextInput({
    top: 30, centerX: 0,
    id: 'citySelector',
    message: 'enter city',
    textColor: '#FFFFFF',
    background: 'rgba(255, 255, 255, 0)',
    font: 'normal thin 32px sans-serif'
  }).on({
    focus: () => input.text = '',
    blur: () => input.text = localStorage.getItem('city') || '',
    accept: () => loadCity(input.text)

const TITLE = 'INDIAN SUMMER SALAD';
const SUBTITLE = 'The perfect side dish';
const RECIPE = 'Make a dressing of the yolks of 3 hard-boiled eggs pounded fine, equal ' +
  'quantities of mustard and paprika, a pinch of powdered sugar, 4 ' +
  '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,