Corona SDK: Working with Alerts – Blancer.com Tutorials and projects

Alerts are a predefined system method to show information to the user, they are commonly used to display short messages and can include one or multiple options to determine a posterior action. In this tutorial, we’ll discover how to implement those Alerts, you’ll also learn how to create basic buttons and open a URL in Safari. Keep reading!

Alert Application Overview

Using the Corona native class and the showAlert() method, we’ll display a customized alert using a simple button on stage.

Select Target Device

The first thing you have to do is select the platform you want to run your app, this way you’ll be able to choose the size for the images you will use.

The iOS platform has these characteristics:

iPad: 1024x768px, 132 ppi
iPhone/iPod Touch: 320x480px, 163 ppi
iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

Nexus One: 480x800px, 254 ppi
Droid: 854x480px, 265 ppi
HTC Legend: 320x480px, 180 ppi

In this tutorial we’ll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.

Interface

We’ll create a basic interface featuring a button that will call an alert when pressed. The alert title, message, and button names will be defined in the code.

Exporting PNG’s

Depending on the device you have selected you will need to export the graphics in the recommended PPI, you can do that in your favorite image editor.

I used the Adjust Size… function in the Preview app in Mac OS X.

Remember to give the images a descriptive name and to save them in your project folder.

Code!

Time to write our application!

Open your prefered Lua editor (any Text Editor will work, but you won’t have syntax highlighting) and prepare to write your awesome app.

Hide Status Bar

First, we hide the status bar, this is the bar on top of the screen that shows the time, signal and other indicators.

display.setStatusBar(display.HiddenStatusBar)

Background

Now we add the app background.

local background = display.newImage("background.png")

This line creates the local variable background and uses the display API to add the specified image to the stage. By default, the image is added to 0,0 using the top left corner as the reference point.

Alert Button

Repeat the process with the button image, placing it in the center of the stage. The button function will be created later in the code.

local alertButton = display.newImage("alertButton.png")

alertButton:setReferencePoint(display.CenterReferencePoint)
alertButton.x = 160
alertButton.y = 240

Lister for Alert Clicks

When the user clicks on any of the option buttons in the Alert a clicked event is displatched, we need to check for the index of the clicked button in order to know which option was selected. An alert lets you include up to 6 buttons, its index is defined by the order it was written in the alert call.

The following function handles that process, its listener is created in the alert call (showed in the next step).

local function onClick(e)
	if e.action == "clicked" then
		if e.index == 1 then
			-- Some Action
			elseif e.index == 2 then
				system.openURL( "http://mobile.tutsplus.com" )
		end
	end
end

Display Alert

This function will be executed when the alert button is pressed, it uses the native.showAlert() method to display the alert. The alert will be linked to a variable that will serve as the alert ID, this way it can be located, reused or removed by the native.cancelAlert() method.

function alertButton:tap(e)	local alert = native.showAlert("MobileTuts+", "Mobile Development Tutorials", {"OK", "Learn More"}, onClick)end

This method has four paremeters, lets take a look at them:

native.showAlert(title, message, {buttons}, listener)

title: The text on top of the alert.
message: The body of the alert.
buttons: A table containing the buttons that will be displayed by the alert, you can display up to 6 buttons.
listener: A function that will listen to the alert button’s click events.

Alert Button Listener

The button now has a function to run when pressed, but this function alone will not be able to react without a listener.

The next line of code sets that listener:

alertButton:addEventListener("tap", alertButton)

Icon

If everything is working as expected, we are almost ready to build our app for device testing. Just one more thing: our application icon.

Using the graphics you created before you can create a nice and good looking icon, the icon size for the iPhone icons is 57x57px, but the iTunes store uses a 512x512px so it’s better to create your icon in this size. If you want to optimize your images for the iPhone 4 retina display, you will need a 114x114px version of the app icon as well.

It doesn’t need to have the rounded corners or the transparent glare, iTunes and the iPhone OS will apply that for you.

Conclusion

With this tutorial you’ve learned how to display Alerts to show the user a message and run predetermined code based on the selected option.

Thanks for reading this tutorial, I hope you’ve found it useful!