Native UI

Status: Experiment

Version: 0.8

Supported platforms:

       

Forum thread

What's new?

version 0.8
Fixed Android rendering issue (Android Bridge)

About Native UI

In this project we will try to implement native UIs of all supported platforms, while abstracting them in same or similar Lua wrapper, so you could use it seamlessly (if possible) between different platforms.
As some classes already exist to address UI needs, so not to confuse existing classes with Native UIs, all native UI classes are put under ui namespace.

Code example:

local toast = ui.Toast.new("test", 100)

--button widger

--Timer.delayedCall(1000,function()
local button = ui.Button.new("Text")
button:show()

button:setWidth(100)
button:setHeight(100)
button:setPosition(100, 100)

button:addEventListener("onClick", function(self)
	print("showing toast")
	ui.Toast.new("Test")
end, button)

--checkbox widget

local chk = ui.CheckBox.new()
chk:show()
chk:setPosition(300, 100)

chk:addEventListener("onStateChange", function(e)
	print(e.state)
end)

--checkbox widget

local toggle = ui.ToggleButton.new()
toggle:show()
toggle:setPosition(400, 100)

toggle:addEventListener("onStateChange", function(e)
	print(e.state)
end)

--slider widget

local slider = ui.Slider.new()
slider:show()

slider:setWidth(200)
slider:setMaxValue(100)
slider:setMinValue(-100)
slider:setStepValue(5)
slider:setPosition(200, 200)

slider:addEventListener("onChange", function(self, e)
	print(e.value)
end, slider)

slider:setValue(0)


--progress bar widget

local progress = ui.ProgressBar.new()
progress:show()

progress:setWidth(200)
progress:setStepValue(5)
progress:setPosition(200, 250)

progress:setValue(10)
progress:addValue(10)


--activity indicator widget
local activity = ui.ActivityIndicator.new()
activity:setPosition(10, 10)
activity:show()

--text input widget
local textinput = ui.TextInput.new()
textinput:setWidth(200)
textinput:setPosition(10, 300)
textinput:show()
textinput:setSecure(true)
textinput:setText("aaa")
print("Getting text: "..textinput:getText())

textinput:addEventListener("onTextChange", function(e)
	print(e.text)
end)
]]
--webview widget
--[[local web = ui.WebView.new()
web:setWidth(300)
web:setHeight(300)
web:setPosition(200, 300)
web:show()
web:loadUrl("http://google.com/")]]
--web:loadData("some html code")
--web:evalJS("alert('me');")

--alert dialog
local alert = ui.AlertDialog.new()
alert:addEventListener("onButtonClick", function(e)
	print(e.buttonIndex, e.buttonText)
end)
alert:setTitle("Title")
alert:setMessage("Message")
alert:setMiddleButton("Middle")
alert:setRightButton("Right")
alert:setLeftButton("Test")
alert:show()
alert:setLeftButton("Left")

--options dialog
local opt = ui.OptionsDialog.new({"Option1", "Option2", "Option3"}, true)
opt:setTitle("Select: ")
opt:addEventListener("onOptionClick", function(e)
	print(e.optionIndex, e.optionText, e.optionSelected)
end)
opt:addEventListener("onButtonClick", function(e)
	print(e.buttonIndex, e.buttonText)
end)
opt:setRightButton("Right")
opt:show()


--time picker dialog
local tp = ui.TimePicker.new()
tp:setTitle("Select: ")
tp:addEventListener("onTimeSet", function(e)
	print(e.hour, e.minute)
end)
tp:addEventListener("onButtonClick", function(e)
	print(e.buttonIndex, e.buttonText)
end)
tp:setRightButton("Cancel")
tp:show()
tp:setTime(0,0)


local dp = ui.DatePicker.new()
dp:setTitle("Select: ")
dp:addEventListener("onDateSet", function(e)
	print(e.year, e.month, e.day)
end)
dp:addEventListener("onButtonClick", function(e)
	print(e.buttonIndex, e.buttonText)
end)
dp:setRightButton("Cancel")
dp:show()
						

Native UI video