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

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hello, thanks for the review. There are a few things I should correct though.

    If you look at the included samples that came with CoronaUI, you'll see that everything works fine with iPhone4. As with any iPhone4 project, you must always include a config.lua that specifies a width of 320 and a height of 480 if you want things to display properly. That's not just with CoronaUI, that's with any iPhone4 project.

    If you don't do that, you'll have an app with a native iPhone4 resolution (640x960), and everything will appear tiny as shown in your examples above.

    The other error I see is where you say you need to include a file called 'myicon.png' or the code will break.

    Looking at your table code for tableRows, it shows "myicon.png" in the third line--which is why you needed it. The example shown in the docs was just an example of the syntax and usage; how it *might* be used in real-life... copying/pasting that code would definitely result in an error.

    For a *working* example, please consult the sample apps included with coronaUI.

    As far as using tableViews on the iPad, yes, it appears that there is an issue when using it within a wide-pane. However, it works fine if you keep the tableview in a separate side-pane (see the coffee demo app that shipped with CoronaUI).

    We'll definitely be working on getting the tableView working well with wide-panes for iPad and other wide-resolution devices, so for now, stick to keeping the tableViews in a side-pane.

    Thanks again for the time and effort you put into your review!

    And if you could, I ask that you please retest on iPhone4 with a config.lua to see if your iPhone4 issues still persists

    ReplyDelete
  3. Oz,

    What are your thoughts on Corona for non-game apps now that you've seen Corona UI? I'm interested in your opinion as you have experience with ObjC/Xcode4 AND Corona that a lot of people don't seem to have.

    I have a few non-game app ideas that are still relatively simple and one that would be heavily tableView oriented (basically a language dictionary/translation app for a specific medical field). I have experience with Corona but have struggled with ObjC and Xcode. It just seems overwhelming compared to the directness of Corona, but the interface building aspect of Xcode seems very appealing.

    Thanks,
    -Mark

    ReplyDelete
  4. To follow up my comment, I see my question might be answered by your first statements in this post, that the new UI tools are a boon for non-gamey apps.

    But I'm still interested in your perspective in how using Corona UI would compare and contrast (and pro's and cons) to using ObjC/Xcode to build a non-game app.

    ReplyDelete
  5. Hey Jayant,

    How do you implement this code now, now that OSX Lion has arrived and a new Corona build has come up. The CoronaUI doesnt seem to work in the simulator, is there a new way to implement the same buttons -e.g. the back button, with the new Corona build.

    Benjamin

    ReplyDelete

Post a Comment

Popular Posts