UI Components

class Main extends App
{
onStart()
{
// Create a full screen layout.
this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY" )
this.main.setChildMargins(0, "20px", 0, "20px")

// add an appbar
this.apb = ui.addAppBar( this.main, "My App", "menu" )

// some appbar icons
this.search = ui.addButton(this.apb.layout, "search", "icon")
this.more = ui.addButton(this.apb.layout, "more_vert", "icon")

// some text control
ui.addText(this.main, "This is a text control.")

// toggle dark and light theme
this.btn = ui.addButton(this.main, "Toggle Theme", "", 0.7)
this.btn.setOnTouch( this.changeTheme )

// change primary color
this.btn = ui.addButton(this.main, "Set Primary", "Primary", 0.7)
this.btn.setOnTouch( this.changePrimary )

// change secondary color
this.btn = ui.addButton(this.main, "Set Secondary", "Secondary", 0.7)
this.btn.setOnTouch( this.changeSecondary )

// some floating action button
this.fab = ui.addFAB(this.main, "add", "secondary")
}

changeTheme() {
ui.setTheme( ui.theme.dark ? "light" : "dark")
}

changePrimary() {
ui.showColorPicker(null, null, function(value) {
ui.setThemeColor(value)
})
}

changeSecondary() {
ui.showColorPicker(null, null, function(value) {
ui.setThemeColor(null, value)
})
}
}

Copy All Run