How to use the tabris.Composite function in tabris

Constraint,
  Widget,
  Composite,
  SiblingReference,
  SiblingReferenceValue,
  ConstraintValue,
  ConstraintArray,
  ConstraintLikeObject
} from 'tabris';


// Related types
let num: number = 23;
let percent: Percent = new Percent(0);
let reference: SiblingReference|Percent = new Composite();
let widget: Widget = new Composite();
let percentValue: PercentValue = {percent: 50};

let siblingReferenceValue: SiblingReferenceValue = (x: Widget) => true;
let constraintArray: ConstraintArray = ['50%'];
constraintArray = ['50%', 0, 1];
let constraintLikeObject: ConstraintLikeObject = {};
constraintLikeObject = {reference: 10};
constraintLikeObject = {percent: 10};

// Constructor
let constraint: Constraint = new Constraint(new Percent(0));
constraint = new Constraint();
constraint = new Constraint(new Percent(0), 0, 0);
constraint = new Constraint(null, null);
constraint = new Constraint(undefined, undefined);
constraint = new Constraint((x: Widget) => true, 23);

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,

function compositeSnippet(parent) {
  dimen(parent, small, small);
  new Composite({left: 16, top: 16, right: 16, bottom: 16, background: 'white', elevation: 8}).appendTo(parent);
}

_createUI() {
    this.append(
      new Composite({id: 'inputContainer'}).append(
        new TextInput({id: 'chatInput', message: 'Enter chat message...', text: 'Hello Chat!'}),
        new Button({id: 'sendButton', text: 'Send'})
          .on('select', () => this._sendMessage())
      ),
      new ScrollView().append(
        new TextView({id: 'chatTextView', markupEnabled: true})
      )
    );
  }

import {Composite, TextView, contentView} from 'tabris';

const composite = new Composite({
  left: 16, right: 16, top: 16,
  background: 'gray',
  padding: 8
}).appendTo(contentView);

new TextView({
  left: 0, top: 0,
  text: 'Tabris.js'
}).appendTo(composite);

private createHeader(text: string, tabIndex: number) {
    let container = new Composite({top: 0, left: 0, right: 0, height: HEADER_HEIGHT});
    let background = new Composite({
      top: 0, left: MARGIN, right: MARGIN,
      background: HEADER_BOX_COLOR
     }).appendTo(container);
    new TextView({
      centerY: 0, centerX: 0,
      text,
      textColor: HEADER_TEXT_COLOR,
      font: BIG_FONT
    }).appendTo(background);
    if (tabIndex !== 0) {
      this.createArrowImage('left').appendTo(background);
    }
    if (tabIndex !== this.weatherData.days.length - 1) {
      this.createArrowImage('right').appendTo(background);
    }

function createLayout(depth) {
  const composite = new Composite({
    left: MARGIN, top: ['prev()', MARGIN], right: MARGIN,
    background: '#f3f3f3'
  });

  const imageView = new ImageView({
    left: MARGIN, top: MARGIN, width: 56,
    image: 'resources/target_200.png',
    background: '#aaaaaa'
  }).appendTo(composite);

  const innerComposite = new Composite({
    left: imageView, right: MARGIN, centerY: 0
  }).appendTo(composite);

  new TextView({
    left: MARGIN, right: 0,
    text: 'Title Text',
    font: 'bold 16px'
  }).appendTo(innerComposite);

  new TextView({
    left: MARGIN, right: 0, top: 'prev()',
    text: 'Body Text'
  }).appendTo(innerComposite);

  if (depth > 0) {
    createLayout(depth - 1).appendTo(innerComposite);

private createDayInformationBox(dayIndex: number) {
    let dayForecasts = this.days[dayIndex];
    let container = new Composite({
      top: this.children().length === 0 ? 0 : 'prev()',
      left: MARGIN,
      right: MARGIN,
    });
    let infoBox = new Composite({
      top: MARGIN,
      left: MARGIN,
      right: MARGIN,
      background: INFO_BOX_COLOR,
      highlightOnTouch: true
    }).on({
      tap: () => this.trigger('daySelect', {dayIndex})
    }).appendTo(container);
    let minTemp = Math.min(...dayForecasts.map((forecast) => forecast.temperature));
    let maxTemp = Math.max(...dayForecasts.map((forecast) => forecast.temperature));
    this.createDayText(dayForecasts[0]).appendTo(infoBox);

private createForecastBox(forecast: WeatherDatum) {
    let container = new Composite({ top: 'prev()', left: 0, right: 0, height: FORECAST_BOX_HEIGHT});
    let forecastBox = new Composite({
      top: MARGIN, left: MARGIN, right: MARGIN,
      background: INFO_BOX_COLOR
    }).appendTo(container);
    this.createTimeText(forecast.date).appendTo(forecastBox);
    this.createWeatherText(forecast.weatherDetailed).appendTo(forecastBox);
    this.createTemperatureText(forecast.temperature).appendTo(forecastBox);
    this.createWeatherIcon(forecast.weatherIcon).appendTo(forecastBox);
    return container;
  }

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({
  left: 0, right: 0, height: 78,
  id: 'titleComposite',
  background: rgba(255, 152, 0, INITIAL_TITLE_COMPOSITE_OPACITY)
}).appendTo(scrollView);

new TextView({