CoronaUI - An amazing step for developers using CoronaSDK

CoronaSDK has a new update, an amazing development that is totally a code based solution that can be added to the project. This brings to the user the ability to create the Native UI that was missing from CoronaSDK for so long. Now developers can make apps that mimic the UI of the iOS devices, including the Switches, the screens, the lists, sliders, etc. This new rich functionality that is added is a boon for many developers that were looking for creating Enterprise / non-gamey apps.

This is the first release and doesn't come 100% and has it's own share of issues. Where on one side it is easy to use, there are a few issues, like for instance, creating an iOS looking screen, the code is

local coronaui = require ("coronaui")

local myScreen = coronaui.newScreen( nil, true, "My Screen", "stripes" )

The output of this two lines of code is this wonderful screen in the simulator

and similar on the Android devices but without a status bar on the top. However on the iPhone4 simulator, you see

Tried the samples in the accompanying PDF file. What one can achieve is amazing, however there are some issues

1. Picker, if you use a

“custom1”

type picker, then adding items using the

addItem

or

addItemFromData

spawn an error.
2. In the Table sample, BTW this is one amazing functionality offered, that can help in creating dynamic forms (Hopefully) [It breaks on iPhone4 and iPad]
The code will break as the dependency of myicon.png is not met, so include a file called myicon.png or update that to the file you add into the folder.

Here is the code from the Sample, this code will break even after you add the myicon.png file as the syntax for a whitebg type of cell requires an image-filename.png or a nil as the next parameter that is missing from the code sample.

This image is from the PDF on page 17 or 25.

3. Tabs, the x and y coordinates are centered so the x,y coordinates are not according to what you want. So on portrait, you might want to make x as 160 (or half of the screen width)

4. This is not exactly a BUG, the Search screen cannot be tested unless installed on a device, so not tested as yet.

5. The transparent areas between the Groups on a table do not allow for scrolling, the scrolling is only possible if you touch an elements like a table cell or group header.

6. the newList does not work for some strange reason..

7. The :insertUnderTItle is a bit of a mystery, it says in the documentation that it requires a grp, but even when a grp is added, it doesn't work as required/expected.

local grp = display.newGroup()
local rect = display.newRect(grp, 0,0,60,10)
rect:setFillColor(0,255,0)
urScreen:insertUnderTitle( rect )

8. Some of the controls break very badly on an iPad and on an iPhone4 as shown below...[Read the Update at the end of the post and the comment by Johnathan of BeeBe games]

Hope that these small issues are fixed by Ansca soon... AND most of all, you have to copy all of the resources (images and .lua files) to include coronaui in your projects, I thought it would have been part of the simulator and be included in the compilation process so would save duplicating the resources over and over again.


Some code snippets to try
BTW, the false in the second line is to say that do not cater for the statusbar's height, so the elements start from the top of the screen and assume there is no status bar.


STEP #1

local coronaui = require ("coronaui")
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )

These two lines create a screen, instead of the nil, try playing with a number, good values are 200 to 320

STEP #2

local coronaui = require ("coronaui")

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
myScreen:slideToLeft(urScreen)

Now you should have two screens, and the screen slides to Your Screen

STEP #3

local coronaui = require ("coronaui")

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 

local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end

urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )

Now you have two screens as before and each has a button, that is Back or Next and on clicking them, you can transition between the two.

STEP #4

local coronaui = require ("coronaui")

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 


local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end


urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )

local datePicker = myScreen:newPicker( "date", nil , 1999, 2011, 12, 25, 2010 )

It shall popup a date picker to choose a date on start up that can be cancelled or selected via Done

STEP #5

local coronaui = require ("coronaui")

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 


local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end


urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )

local tableRows = {
 { "nobg", "First Group:" }, 
 { "whitebg", "noicon", "Date", "12/25/2010", chooseDate }, 
 { "whitebg", "myicon.png", "Example Item" },
 { "nobg" },
 { "centertext", "Example Item #2" }, 
 { "centertext", "Example Item #3" }, 
 { "whitebg", "noicon", "On or Off?","onOff", "on" },
 { "nobg", "Sliders:" }, 
 { "centertext", "Test Slider:" }, 
 { "slider", 75 }, 
 { "whitebg","noicon", "Next Slider:" }, 
 { "slider", 25 },
 { "nobg", "Multiple Selection:" },
 { "multipleitemselection", "noicon","Item 1", "my value","myID" }, 
 { "multipleitemselection", "noicon","Item 2", "my value","myID" }, 
 { "multipleitemselection", "noicon","Item 3", "my value","myID" },
 { "nobg", "Single Selection:" },
 { "singleitemselection", "noicon", "Yes", "yes","myOtherID" },
 { "singleitemselection", "noicon", "No", "no","myOtherID" }
}

myScreen:createTableList( tableRows )

NOTE: remember to place the myicon.png file or it will complain and not work.

This shall present a setting type table with *no* intertia scrolling.
A perfectly fine looking screen that we *MIGHT* have wanted ;)

Do not try this on the iPhone4 or the iPad, these will FAIL and render quite bad :(

STEP #6

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 


local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end


urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )

local firstList = urScreen:newList ( 0,150,true,true,70)
firstList:addItem ({},"Item 1", "Item 1 is Blah", nil, false)
firstList:addItem ({},"Item 2", "Item 2 is Blaw", nil, false)
firstList:addItem ({},"Item 3", "Item 3 is Blow", nil, false)
firstList:addItem ({},"Item 4", "Item 4 is Glow", nil, false)

This gives us a UITableView, now there are some limitations, one the moment you scroll the cell upwards, the moment a part of it is not visible, it disappears. Maybe placing a replacement dummy white cell could fix the odd looking effect.

STEP #7

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 


local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end


urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )


local firstList = urScreen:newList ( 0,150,true,true,70)
firstList:addItem ({},"Item 1", "Item 1 is Blah", nil, false)
firstList:addItem ({},"Item 2", "Item 2 is Blaw", nil, false)
firstList:addItem ({},"Item 3", "Item 3 is Blow", nil, false)
firstList:addItem ({},"Item 4", "Item 4 is Glow", nil, false)

local secondList = urScreen:newList( 150, 0, true, true, 100, false,"E4E4E4" )
local i=0;
for i = 1,10 do
 secondList:addItem ({},"Item "..i, "Subtitle for item " ..i, nil, false)
end

This is a very powerful functionality that you can easily add more than one table on the screen. It would serve no purpose as it will overlap, but if there was a scenario where you wanted two overlapping tables, well you can now do that this easily.

#STEP 8

local urScreen = coronaui.newScreen( nil, false, "Your Screen", "stripes" )
local myScreen = coronaui.newScreen( nil, false, "My Screen", "alarm" )
 myScreen:slideToLeft(urScreen) 


local function show1( event )
 urScreen:slideToRight(myScreen) 
end

local function show2( event )
 myScreen:slideToLeft(urScreen) 
end


urScreen:addBackButton( show1 )
myScreen:addRightButton( "Next", show2 )

local function onFirstTab()
 print ( "First Tab Pressed" )
end

local function onSecondTab()
 print ( "Second Tab Pressed" )
end

local function onThirdTab()
 print ( "Third Tab Pressed" )
end


local tabsTable = { { "First Tab", 110, onFirstTab }, { "Second Tab", 110, onSecondTab }, { "Third Tab", 110, onThirdTab }} 
local tabBar = coronaui.createTabs( tabsTable, 160, 150 )

local textObject = coronaui.newRetinaText( "Hello World!", 100, 150, "Helvetica-Bold", 18, 0, 0, 0, "center", true)

This shall create tabs on screen, These can be placed into a group, otherwise it stays on screen when the screens are scrolled Left or Right.

UPDATES:
Thanks to Jonathan of Beebe games, for the tip
If you want the app to render properly on iPhone4, create a file called config.lua in the same directory and add the following in it.

application =
{
  content =
  {
    width = 320,
    height = 480,
    fps = 60,
    scale = "zoomEven",
    
    imageSuffix =
    {
     ["@2x"] = 2,
    }
  }
}

Then the app works fine on the iPhone. However there is an issue when you run it on the iPad, so it fixes the iPad but breaks the iPad version. :(

If you use Letterbox instead of zoomEven, in the above file, it will work fine on all the three platforms running iOS but on the iPad it will have banding on the sides, like you get with a 70mm/Widescreen movie on a regular TV.

SCREENSHOTS