Magic Leap MagicScript Landscape Application. UiTimePicker

magic-script init my-time org.magicscript.time "Time Picker"
cd my-time

import { LandscapeApp, ui } from 'lumin';
const { 
   UiGridLayout
  ,UiText
  ,UiTimePicker
  ,Time
  ,Side
  ,EclipseLabelType
  ,Alignment
  ,HorizontalTextAlignment } = ui;

export class App extends LandscapeApp {
  onAppStart () {
    const prism = this.requestNewPrism([0.5, 0.5, 0.5]);
    const layout = UiGridLayout.Create(prism);
    layout.setAlignment(Alignment.CENTER_CENTER);

    const text = UiText.CreateEclipseLabel(
      prism,
      '',
      EclipseLabelType.kT7
    );
    text.setAlignment(Alignment.CENTER_CENTER);
    text.setTextAlignment(HorizontalTextAlignment.kCenter);

    const time = new Time();
    time.setHour(8);
    time.setMinute(8);
    time.setSecond(0);

    const tp = 
      UiTimePicker.Create(prism, "Start Time", Side.kTop, "hh:mm:ss", time);
    tp.setColor([1.0, 1.0, 0.0, 1.0]);
    tp.setAlignment(Alignment.CENTER_CENTER);
    tp.onTimeChangedSub(function(uiEventData)
    {
      text.setText(tp.getTimeString());
    });
    layout.addItem(tp, [0.03, 0.03, 0.03, 0.03]);
    layout.addItem(text, [0.03, 0.03, 0.03, 0.03]);
    prism.getRootNode().addChild(layout);
  }
}

magic-script build -i

magic-script run --port=10000