Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
Buttons, checkboxes, scrolling lists — those are all examples of widgets.
While widgets are always used in business-type apps, some of them are often used in games as well.
This video course shows how to use the widgets in Corona SDK. And while most of the videos show use in a business-type app, they're created the exact same way in a game.
Corona SDK is the best framework I've found for quickly creating 2D mobile games. With the creation of their widget library a while back it became possible to create business-type apps as well.
I've chosen to use Corona for both games and business apps because every bit of skill I gain with one will help me out immediately in the other.
(Promo picture courtesy Joseph Morris via flickr CC2.0)
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
Just a quick look at what widgets are and what they can be used for.
|Section 1: Introduction to Widgets|
There are two versions of the v2 widget library — the first is built into Corona SDK and the second is a library you can download from Github and require into your project.
In the following videos I decided to use the latter method in all the projects because at the time of these recordings it was more stable. That's no longer the case and so it's safe to use the built-in library.
In the following videos when you see this:
local widget = require("widgetLibrary.widget")
...it's okay to replace it with this:
local widget = require("widget")
...and you don't need to copy in the external widget library downloaded from Github.
If you follow the videos exactly it will still work, so don't fret about getting confused. ;)
The Outlaw IDE can be used completely free. It can be downloaded from this page:
The links for the free version are in the lower-right part of that page.
If you'd like to use a different IDE that's fine -- see the next video for info about that,
Working Widgets with a Lesser IDE ;)
|Section 2: The TabBar Widget|
I found a great place for tab bar (and toolbar) icons: http://Glyphish.com
Not only are the icons nice, but they are very inexpensive. In fact, there's a whole set that are licensed under Creative Commons so all you have to do is attribute where you got them and you can use them free. Yes, even in commercial apps. Grab the free set for use with these videos.
The only “downside” to those icons is that for the Corona SDK tabbar widget, you need two icons — one normal, and one in the selected state. The free Glyphish icons only come in one state.
If you already have icons for your tabbar you can skip this video. But if you'd like to use the Glyphish icons and would like to see how I solved the problem, watch this:
The TabBar - Part 1 of 2
The TabBar - Part 2 of 2
|Section 3: The Button Widget|
The button widget is one of the easiest to implement and also one of the handiest — after all, it's not very often you create an app without needing someone to tap a menu button, etc. Plus, the button widget is also a great help in creating games and not just business apps.
It's an all-purpose widget!
Be sure and download the sample code for this section before watching the videos.
Changing the Button's Visual Properties
Creating a Graphical Push Button
|Section 4: The TableView Widget|
The TableView widget is used in a lot of (maybe most) business-type apps. It's the the thing that gives you scrolling rows of data.
And when you first look at the tableView documentation and sample code you can get really confused – for me, at least, it didn't make sense. But spend enough time banging your head against it and you *finally* start to see the light.
I think these videos will help you understand the tableView widget without the pain.
Scrolling Lists with TableView: Part 2 of 3
Scrolling Lists with TableView: Part 3 of 3
Breaking Up the List with Categories
Wait, Some Data is Missing!
As of build 2013.2076 you don't need to use masks to make the tableView smaller — it masks itself. This is good news unless you want to use a mask with rounded corners or an odd-shaped mask. In that case it's been reported that you can set the mask after the table is created by creating it with graphics.newMask() and object:setMask().
This video is mostly obsolete but is being left here in case someone's required to use an older version of Corona SDK for some reason.
Adding Graphics to a Row, Part 1 of 2
Adding Graphics to a Row, Part 2 of 2
Drilling Down into a Row
Deleting TableView Rows
|Section 5: The Picker Wheel Widget|
The picker wheel is a widget that allows the user to choose from multiple options — it's kind of like a window into a tableView widget (and in fact, under the hood where you don't have to worry about it, the scrolling rows of the picker are using the tableView code). One big difference is that you have the ability to use multiple columns in a picker wheel.
Getting Picker Wheel Values
Multiple-Column Picker Wheels
Picker Wheel Misc
|Section 6: The ScrollView Widget|
Probably the main use for the ScrollView widget in business type apps is displaying pictures that are larger than the device screen. The widget allows you to scroll pictures — or really, any other kind of object — vertically and horizontally.
Masking a ScrollView
|Section 7: The Switch Widget|
The switch widget is cool because it's kind of a 1-stop shop for on and off stuff. You get a checkbox, an on/off switch, and radio buttons — all from one widget!
Creating a Checkbox
Using Radio Buttons
|Section 8: The Segmented Control Widget|
A widget that's kind of a cousin to the tab bar, the segmented control allows you to specify a number of options in a row and the user can select one of them at a time.
Depending on which is chosen maybe you change the data shown on the screen, etc. It's just a nice utility widget. Not very exciting, but very useful in the right situation.
|Section 9: The Progress View Widget|
The progress View widget gives you an easy-to-create progress bar. It only comes in a horizontal flavor, but it's one of the easier widgets to create and use.
|Section 10: The Slider Widget|
A slider widget is the digital equivalent of a sliding switch on a stereo equalizer, or the slider on an audio control board. It has a knob that you grab (touch) and slide back and forth. It allows the user to manually select a range from 0 to 100.
|Section 11: The Spinner Widget|
Need to give a visual signal to the user that you're busy doing something in the background? Sorting a table? Downloading new data? Spinner widget to the rescue!
It spins. That's it. But it does it so easily…
|Section 12: The Stepper Widget|
This is a simple little widget that does away with the need for text input when receiving simple numbers from the user. By clicking the plus or minus symbols on the widget a given number goes up or down in increments that you set.
|Section 13: Widget Misc|
Widget Themes - Changing the Look
Jay has been programming professionally since 1988, starting with game programming and then over the years moving to internet programming with a major Seattle telecommunications firm. Jay started programming for mobile devices in 2010 and currently has several games and apps in the Apple App Store with more on the way.
In addition to writing hundreds of technical articles over the years, Jay has recorded dozens of hours of tutorial videos. He's been a speaker at technical conferences and enjoys teaching how to make games and apps almost as much as making games and apps themselves.
Jay is a Certified Developer with Corona SDK, and is also diving into Unity to make 2D games and tutorials.