Scripter ui.View example

customUI1.js

const ui = require("ui");



class MyView extends ui.View {
  constructor() {
    super()
    
    //
    // Switch
    //
    this.statusLabel = new ui.Label(new ui.Rect(160, 50, 250, 40));
    this.statusLabel.text = "Switch is off";
    
    this.switchh = new ui.Switch(new ui.Rect(25, 60, 20, 20));
    this.switchh.action = (on) => {
      let status = on ? "on" : "off"
      this.statusLabel.text = `Switch is ${status}`
    };
    this.addSubview(this.statusLabel);
    this.addSubview(this.switchh);
    
    //
    // Segmented control
    //
    this.segmentedControlLabel = new ui.Label(new ui.Rect(160, 145, 250, 40));
    this.segmentedControlLabel.text = "Did select -1";
    this.segmentedControl = new ui.SegmentedControl(new ui.Rect(25, 150, 120, 30), ["First", "Second"]);
    this.segmentedControl.action = (index) => {
      this.segmentedControlLabel.text = `Did select ${index}`;
    };
    
    this.addSubview(this.segmentedControl);
    this.addSubview(this.segmentedControlLabel);
    
    //
    // Stepper
    //
    this.stepper = new ui.Stepper(new ui.Rect(25, 250, 0, 0));
    this.stepper.maximumValue = 100;
    this.stepper.stepValue = 1;
    this.stepper.action = value => {
      this.stepperLabel.text = `Stepper value: ${value}`;
    };
    
    this.stepperLabel = new ui.Label(new ui.Rect(160, 245, 250, 40));
    this.stepperLabel.text = `Stepper value: ${this.stepper.value}`;
    this.addSubview(this.stepper);
    this.addSubview(this.stepperLabel);
    
    //
    // Slider
    //
    this.slider = new ui.Slider(new ui.Rect(25, 350, 120, 30));
    this.slider.action = value => {
      this.sliderLabel.text = `Current value: ${value}`;
    };
    
    this.sliderLabel = new ui.Label(new ui.Rect(160, 345, 300, 40));
    this.sliderLabel.text = `Current value: ${this.slider.value}`;
    
    this.addSubview(this.slider);
    this.addSubview(this.sliderLabel);
    
  }
}

let myView = new MyView();

myView.present();