Hi,
Please find new UI plugin for native look UI components: https://marketplace.coronalabs.com/plugin/ui-framework
This plugin currently supports only buttons and toast but soon there will be many more components.
Please feel free to post request what you would like to see.
Please post any bugs or problems with the plugin.
Thanks
Hi,
I have update the plugin with new controls:
Trying to create a ui.slider I’m seeing:
Corona/Simulator/Plugins/plugin/ui_framework/ui/slider.lua:84: attempt to index local ‘circle’ (a nil value)
looking into it. Will let you know asap.
Please look at additional information here: https://github.com/maciej-czekala/corona_ui_framework/blob/master/README.md
For now some controls require additional images. Right now they can’t be included in plugin and have to be downloaded seperatelly.
Hi,
bug in corona is fixed now, so you can update corona to 3031 and there will be no need to add images manually to your project.
plugin was updated with some new features:
Let me know if you have any comments. Please read notes as there is icon font needed to get navbar fully working. Icon font gives great potential to have our icons always sharp.
Thanks
It doesn’t work on the iPhone real device(iphone6s) .The simulator works well.
– main.lua
display.setDefault( “background”, 1, 1, 1 )
– Load plugin library
local ui = require (“plugin.ui_framework”)
ui:init({screenScale = “manual”})
– ui:init() – default screen sacling. Define your scaling in config.lua file.
– function to calculate dpi points to pixels if we want to have very sharp app which uses full device resolution.
local toPx = ui.screen.toPx
local function touch()
ui.newToast(“my toast!”)
end
local function switchTouch(e)
ui.newToast("is on: "…tostring(e.isOn))
end
local function sliderTouch(e)
ui.newToast("progress: "…e.progress)
end
local x = display.contentWidth*.5
– navbar requires “http://ionicons.com/” font for icons. Just drop the font next to main.lua file in your project.
local navbar = ui.newNavbar({title = “Application”, buttons = {back = {text = “home”, touchCallback = function() print(“back touched”) end}}})
navbar.x = display.contentWidth*.5
– ui.newButton({x = x*.25, y = toPx(50), style = “back”, touchCallback = touch})
ui.newButton({x = x, y = toPx(100), style = “flat”, touchCallback = touch})
ui.newButton({x = x, y = toPx(150), style = “flat_fill”, touchCallback = touch})
ui.newButton({x = x, y = toPx(200), style = “raised”, touchCallback = touch})
ui.newButton({x = x, y = toPx(250), style = “raised_fill”, touchCallback = touch})
ui.newButton({x = x, y = toPx(300), style = “float”, touchCallback = touch})
local switch = ui.newSwitch({x = x, y = toPx(350), touchCallback = switchTouch})
local slider = ui.newSlider({x = x, y = toPx(400), progress = .5, touchCallback = sliderTouch})
local progress = ui.newProgressBar({x = x, y = toPx(450), progress = 0})
progress:setProgress(.5, 500)
local frame = ui.newFrame({x = x, y = toPx(500), width = 320, height = 50})
local function newCard()
local card = ui.newCard({x = 180, y = 350,
title = “halo”, subtitle = “sub”, description = “long description for this cards”, width = toPx(320), height = 150,
buttons = { {text = “action1”, tag = “action1”}, {text = “hi”, touchCallback = function() end} }})
card.buttons[“action1”]:setTouchCallback(function() print(card) card:removeSelf() end)
end
ui.newButton({x = x, y = toPx(500), text = “show card”, style = “raised”, touchCallback = newCard})
local widget = require( “widget” )
local function onRowRender(e)
local row = e.row
– Cache the row “contentWidth” and “contentHeight” because the row bounds can change as children objects are added
local rowHeight = row.contentHeight
local rowWidth = row.contentWidth
–rowRenderer()
row:insert(ui.newRow({title = “halo”…row.params, width = rowWidth}))
print(“row rendered”)
end
local tableView = widget.newTableView(
{
left = 0,
top = display.contentHeight - toPx(100),
height = toPx(100),
width = display.contentWidth,
onRowRender = onRowRender,
–noLines = true,
onRowTouch = function(e) ui.newToast("progress: "…e.row.params) end,
–listener = scrollListener
})
for i = 1, 40 do
– Insert a row into the tableView
tableView:insertRow(
{
isCategory = false,
rowHeight = toPx(48),
rowColor = { default={1,1,1}, over={1,0.5,0,0.2} },
–lineColor = { 0.5, 0.5, 0.5 }
params = i
}
)
end
build.settings
plugins = {
[‘plugin.ui_framework’] = {publisherId = ‘com.skyjoy’}
}
Just uploaded hotfix. I have testet it on iPhone6 and works fine now. Please try within an hour and let me know if it helped.
Thanks!
Hi there,
does anyone have any suggestions or requests regarding the plugin? I would like to add some new options. I know navBar will be updated to support more icons and customizations.
Let me know.
Just updated ui framework. You can build icons based buttons now. It’s usefull for navbar icons for example. Have a look.
Update:
Just added some cool new features!
newStackPanel - it is a group object which works as a ui helper. Each display object you insert into it will be placed under last one. It allows to easly draw UI where you need items one under another.
newGridPanel - this one is more advanced, it allows you to create grid UI to place objects in each cell. Grid can have equal cells, pixel size or %. Ofcourse you can mix all of them in one grid. It has debug mode as well to easly see how cells are being drawn.
final is newTabMenu for android only at this time.
Try it out and let me know if all works for you.
Thanks.
Update:
Just added iOS tab menu support. Now you can build tab menu with icons (fill and outline).
Please let me know if all works fine as I did some refactor.
Update:
Some breaking changes are introduced. Please look at updated documentation: https://github.com/maciej-czekala/corona_ui_framework
Mainly we have changes to structure in button, navbar and tab.
If you don’t want to update to new structure there are available legacy versions for each component which will work just fine without any changes.
newButtonLegacy
newNavbarLegacy
newTabMenuLegacy
I will change rest of the components soon as well to have the same structure everywhere. This is related to new plugin for business apps I have just published.
If something is not working please let me know and I will try to fix it asap.
Happy new year 
I have new controle for you. newInput gives the textField functionality with native look. Have a go.
local input = ui.newInput({ config = { isSecure = false, -- submittedCalllback = function(value) print(value) end, }, placeholder = { text = "login" } }) local input\_2 = ui.newInput({ config = { isSecure = true, -- submittedCalllback = function(value) print(value) end, }, placeholder = { text = "password" } }) input:setSubmittedCallback(function() input\_2:setFocus() end) input\_2:setSubmittedCallback(function() input\_2:removeFocus() end)Is this project dead or currently being worked on?
Hi,
It is alive, updates are not frequent but new things are adder regular and there are bug fixes as well.
If you have any questions or request just let me know.
Please have a look at project template: https://github.com/maciej-czekala/corona_business_app_base_template
Post any request what you would like to see. With help of ui and app framework you can build advanced business apps for Mobile, Tablet and Android TV. I am open to show any examples of deferent screens and logic so you can build your own app.
Added gridPanel example. This component helps to organize I elements on the screen.
Downloaded from gitHub but getting errors when click button, switch and slider control.
Dave