Using the Corona SDK Widget Library for Fun and Profit!

The widgets library (buttons, scrolling lists, etc.) can be used for both games and business apps in Corona SDK.
5.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
64 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 35
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 English

Course Description

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)

What are the requirements?

  • Have a copy of Corona SDK (yes, even the free version)
  • Have a basic understanding of programming with Corona SDK.

What am I going to get from this course?

  • Use widgets to create business-type apps in Corona SDK.
  • Use the widgets to make your Corona SDK game development faster and easier.

What is the target audience?

  • This course is designed for Corona SDK developers who want to use the widget library for games and business apps.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

01:09

Just a quick look at what widgets are and what they can be used for.

Section 1: Introduction to Widgets
03:44

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. ;)

01:27

The Outlaw IDE can be used completely free. It can be downloaded from this page:


http://outlawgametools.com/download/


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 ;)
02:09
Section 2: The TabBar Widget
05:31

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
09:25
The TabBar - Part 2 of 2
05:41
Section 3: The Button Widget
09:17

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
06:56
Creating a Graphical Push Button
04:17
Section 4: The TableView Widget
07:12

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
05:34
Scrolling Lists with TableView: Part 3 of 3
07:43
Breaking Up the List with Categories
11:13
Wait, Some Data is Missing!
08:50
04:46

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
06:37
Adding Graphics to a Row, Part 2 of 2
04:02
Drilling Down into a Row
05:27
Deleting TableView Rows
06:11
Section 5: The Picker Wheel Widget
07:13

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
05:47
Multiple-Column Picker Wheels
07:08
Picker Wheel Misc
03:58
Section 6: The ScrollView Widget
10:09

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
02:33
Section 7: The Switch Widget
04:59

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
05:27
Using Radio Buttons
05:46
Section 8: The Segmented Control Widget
08:25

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
05:53

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
06:34

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
04:46

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
08:56

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
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

J. A. Whye, Course Instructor

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.

Ready to start learning?
Take This Course