Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

UI Framework
Started by Maciej Czekala Dec 13 2016 01:14 AM

25 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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



[TOPIC: post.html]
#2

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

Hi,

 

I have update the plugin with new controls:

  • slider
  • progress
  • switch
  • framew
  • card

 

android%20ui.png

ui%20ios.png



[TOPIC: post.html]
#3

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 132 posts
  • Corona SDK

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)



[TOPIC: post.html]
#4

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

looking into it. Will let you know asap.



[TOPIC: post.html]
#5

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.



[TOPIC: post.html]
#6

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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:

  • navbar
  • row for table view
  • toPx function which calculates screen points to pixels. This is very useful if we want to have fully harp app which will be as close to native look as possible.

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



[TOPIC: post.html]
#7

ktvman

[GLOBAL: userInfoPane.html]
ktvman
  • Observer

  • 1 posts
  • Corona SDK

It doesn't work on the iPhone real device(iphone6s) .The simulator works well.

yrXAWO6.jpg

 

-- 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'}
}


[TOPIC: post.html]
#8

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.


  • lsoaresesilva7 likes this

[TOPIC: post.html]
#9

lsoaresesilva7

[GLOBAL: userInfoPane.html]
lsoaresesilva7
  • Observer

  • 24 posts
  • Corona SDK

Thanks!



[TOPIC: post.html]
#10

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.


  • evpadallas likes this

[TOPIC: post.html]
#11

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

Just updated ui framework. You can build icons based buttons now. It's usefull for navbar icons for example. Have a look.



[TOPIC: post.html]
#12

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.


  • roaminggamer likes this

[TOPIC: post.html]
#13

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.



[TOPIC: post.html]
#14

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.



[TOPIC: post.html]
#15

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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)


[TOPIC: post.html]
#16

theblueman82

[GLOBAL: userInfoPane.html]
theblueman82
  • Observer

  • 6 posts
  • Corona SDK

Is this project dead or currently being worked on?



[TOPIC: post.html]
#17

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.



[TOPIC: post.html]
#18

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

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.



[TOPIC: post.html]
#19

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

Added gridPanel example. This component helps to organize I elements on the screen.



[TOPIC: post.html]
#20

thedavebaxter

[GLOBAL: userInfoPane.html]
thedavebaxter
  • Contributor

  • 559 posts
  • Corona SDK

Downloaded from gitHub but getting errors when click button, switch and slider control.

 

Dave



[TOPIC: post.html]
#21

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

Please let me know which one id you download. 

https://github.com/maciej-czekala/corona_business_app_base_template this one I just tested and all works fine. Please send me link to the project.



[TOPIC: post.html]
#22

thedavebaxter

[GLOBAL: userInfoPane.html]
thedavebaxter
  • Contributor

  • 559 posts
  • Corona SDK

It was the one in the first post on this thread.

 

https://marketplace.coronalabs.com/corona-plugins/ui-framework

 

Which then links to this -

 

https://github.com/maciej-czekala/corona_ui_framework

 

I run main.lua and click on switch and get the error "Attempt to index a string value", in function newToast main.lua:36, touchCallback

 

Same when I click the Flat button, also all the images are ? with a spare around.

 

Cheers,

 

Dave



[TOPIC: post.html]
#23

Maciej Czekala

[GLOBAL: userInfoPane.html]
Maciej Czekala
  • Enthusiast

  • 74 posts
  • Corona SDK

Just uploaded fix. Toast  has  old syntax. Added font for icons so you can see  icons as well. Let me know if all works for you now. 



[TOPIC: post.html]
#24

harrison.minibucks

[GLOBAL: userInfoPane.html]
harrison.minibucks
  • Observer

  • 6 posts
  • Corona SDK

Are there any documentations for setting the default Font size?

Because my screen width and height settings are quite huge and the buttons and toasts are awfully small.



[TOPIC: post.html]
#25

harrison.minibucks

[GLOBAL: userInfoPane.html]
harrison.minibucks
  • Observer

  • 6 posts
  • Corona SDK

So I found out that you can include the fontSize when declaring a newButton

local btn_fill = ui.newButton({ config = { style = "raised" }, label = { text = "Start", fontSize = 72 } })

 

But the Font is starting to be larger than it's own background, do I have to always specify the height to make it work?

And somehow the "raised" style isn't working on some of the screens like iPhone presets and Nokia

 

HjRCKbR.png




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]