Corona SDK: Working with Alerts

10/11/13 11:57 AM

Advertise Here

Corona SDK: Working with Alerts

Carlos Yanez on Oct 11th 2010 with 1 Comment

Tutorial Details
Technology: Corona SDK Difficulty: Beginner Completion Time: 15 - 30 Minutes View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network. 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, well discover how to implement those Alerts, youll also learn how to create basic buttons and open a URL in Safari. Keep reading!

Alert Application Overview

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 1 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

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

Select Target Device

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 2 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

The first thing you have to do is select the platform you want to run your app, this way youll 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 well be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.

Interface
Well 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 PNGs
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.

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 3 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

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 wont 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. 1. display.setStatusBar(display.HiddenStatusBar)

Background
Now we add the app background. view plaincopy to clipboardprint? 1. 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.

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 4 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

view plaincopy to clipboardprint? 1. 2. 3. 4. 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). view plaincopy to clipboardprint? 1. local function onClick(e) 2. if e.action == "clicked" then 3. if e.index == 1 then 4. -- Some Action 5. elseif e.index == 2 then 6. system.openURL( "http://mobile.tutsplus.com" ) 7. end 8. end 9. 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. view plaincopy to clipboardprint?

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 5 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

1. function alertButton:tap(e) <br> local alert = native.showAlert("MobileTuts+", "Mobile Development Tutorials", {"OK", "Learn More"}, onClick) <br>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 buttons 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: view plaincopy to clipboardprint? 1. 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 its 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 doesnt need to have the rounded corners or the transparent glare, iTunes and the iPhone OS will apply that for you.

Conclusion
With this tutorial youve 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 youve found it useful!
Like One person likes this. Be the first of your friends.

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 6 of 7

Corona SDK: Working with Alerts

10/11/13 11:57 AM

advertise advertise here here

By Carlos Yanez
Carlos Yanez is a freelance software developer/interface designer that enjoys the use of different technologies for creating content. When he is away from the keyboard he plays guitar/bass and runs a local social website.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-working-with-alerts/

Page 7 of 7