Back

UI Components

Version 0.28

A Material UI components crafted from the most popular UI Framework of React. Make Hybrid apps that runs on DroidScript and EnjineIO using these controls.

Properties

Here are the visible properties of the ui object.

theme
libs
version

Methods

The following methods are available on the UI object:

script( path )
setFontFile( path )
setTheme( theme )
setThemeColor( primary, secondary )

Here is an example of a UI theming.

Example - UI Theme

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

Alternative Home Pages

All Components

Dialogs

Pickers

String:
hexadecimal: “#rrggbb” , “#aarrggbb”
colourName: “red”, “green” , ...
String: “relative/...” path to a file
String: “Relative path to your font file.”
String: “Can be Light” or “Dark”
.script
Loads a javascript file.
.setFontFile
Sets the font file for your app.
.setTheme
Sets the ui theme of the app.
.setThemeColor
Sets the primary and secondary ui theme colors.

String
Returns the ui theme.


String
Returns the ui libs path.


Number
Returns the ui version.