Tutorial 4: UIAlertView, UIActionSheet and Facebook
Connection
Overview
1. Introduction
2. Two Common UI controls
2.1 UIAlertView
2.1.1 Introduction
2.1.2 Multiple Buttons on UIAlertView
2.1.3 Buttons Pressed Detection: UIAlertViewDelegate
2.1.4 Reset Button Pressed
2.2 UIActionsheet
2.2.1 Introduction
2.2.2 Initialization of a UIActionSheet
2.2.3 Buttons Pressed Detection: UIActionSheetDelegate
3. Facebook Connection
3.1 Facebook Developer Account and Facebook App Setup
3.2 iPhone Facebook SDK Setup
3.3 Facebook Account Login
3.4 Upload of photo to Facebook with a Message
4. Challenges (Optional)
Tutorial 4 Page 1
1. Introduction
In Tutorial 3, we have discussed how to perform a featured input method in iPhone applications –
touches detection. We now further discuss the remaining parts that are necessary in completing the
iPhone game app. In this tutorial, we will know more add-on features that make the game fancier.
The whole lab exercise is divided into two main parts:
1. Two commonly used UI controls to catch the attention of the users and provide more selection
choices to the users.
i. UIAlertView to reset the game
ii. UIActionSheet to provide more selection choices, e.g., login/logout facebook feature,
upload photo to facebook, etc.
2. Facebook connection.
2. Two Common UI Controls
2.1 UIAlertView
If you cannot finish previous tutorial or if you have not attended that, you can download the project
zip file (Part3_VolcanoRockEscaping_3rd_finsh.zip) from our website to continue working on this
lab.
2.1.1 Introduction
Recall that in the tutorial 3 Part 3.3, UIAlertView will be popped up when the game ends as shown
below.
Tutorial 4 Page 2
In fact, when the UIAlertView window is popped up, the user must respond to it. Refer back to the
screen capture shown above. The user must click on the button before
he/she can get back to the original screen view. Due to this property, UIAlertView is generally used
to catch the user attention on the occurrence of some special events.
2.1.2 Multiple Buttons on UIAlertView
Now, we would show you how to display multiple buttons on UIAlertView. Recall that to show up a
UIAlertView, you have to type in the following codes:
NSString * message =
[NSString stringWithFormat:@”You got %d score in %.01f s”, score, timeElapsed];
UIAlertView * av = [[UIAlertView alloc] initWithTitle:@”Game Ended”
message:message
delegate:self
cancelButtonTitle:@”Finish”
otherButtonTitles:nil, nil, nil];
[av show];
[av release];
As shown in the codes above, in the initialization of the UIAlertView, there is a field known as
“otherButtonTitles”. Here, we have put “nil” as the parameter. Therefore, only one button is shown
in the screen capture. To display multiple buttons, we can put in multiple NSString objects as
parameters. For instance:
NSString * message =
[NSString stringWithFormat:@”You got %d score in %.01f s”, score, timeElapsed];
UIAlertView * av = [[UIAlertView alloc] initWithTitle:@”Game Ended”
message:message
delegate:self
cancelButtonTitle:@”Finish”
otherButtonTitles:@”Reset”, nil, nil];
[av show];
[av release];
Tutorial 4 Page 3
Now, you can see that the UIAlertView window will contain two buttons as shown below.
2.1.3 Buttons Pressed Detection: UIAlertViewDelegate
Now, we will discuss how to detect which button has been pressed. To fully understand the
procedures, we must first discuss the “delegate” concept in Objective-C.
A “delegate” of a UI Component can be regarded as a representative, which will handle the
situation, when a certain action on a UI component has been detected (for example, press a button
in the UIAlertView). To be eligible to become a delegate of a UI component, several requirements
have to be satisfied as follows:
i. The UI component can detect certain kinds of actions on it (for example, press a button inside
the UIAlertView). Then, the UI component will forward the detected event to its delegate to
handle.
ii. The delegate registers itself to be the delegate of the UI component. Note that each UI
component can only have one delegated class.
Iii. The delegate has implemented the function to handle delegated event when the event occurs.
Refer \to the case of UIAlertView.
i. The first requirement is satisfied as the system provides that.
ii. For the second requirement, refer \to the codes in initializing the UIAlertView. There is a field
known as “delegate”. Here, we put “self” as the input parameter. In other words, the
“VolcanoRockEscapingViewController” class that we are currently working on is registered to
be the delegate of the UIAlertView object initialized.
Iii. To satisfy the third requirements, you have to:
Tutorial 4 Page 4
In VolcanoRockEscapingViewController.h file, declare that the class has implemented the
function by putting “” next to the UIViewController.
In VolcanoRockEscapingViewController.m file, implement the following function.
Each time when the alert view appears and a button is clicked inside, the above method will be
invoked. We can then distinguish which button is clicked by checking the “buttonIndex” variable.
Now, you can input the following codes inside the function, and see the results.
2.1.4 Reset Button Pressed
In this part, please implement the function such that when the button is clicked,
the game’s states will be reset, similar to that of the shake function in Tutorial 3 Part 3.4.
2.2 UIActionSheet
2.2.1 Introduction
UIActionSheet is generally used to provide more selection choices for the users. The UIActionSheet
window will slide up from the bottom during activation. Similar to that of UIAlertView, when the
UIActionSheet window is popped up, the user must respond to it.
In this part, we would like to implement the function such that when the facebook button is pressed,
the UIActionSheet will be activated with two buttons: “Login Facebook” and “Cancel”, as shown
below.
Tutorial 4 Page 5
2.2.2 Initialization of a UIActionSheet
Similar to that of UIAlertView, you have to allocate memory, initialize a UIActionSheet object, and
then show it up. To do so, you can type in the following codes when you would like to activate a
UIActionSheet:
UIActionSheet * as = [[UIActionSheet alloc] initWithTitle:@”Facebook Feature”
delegate:self
cancelButtonTitle:@”Cancel”
destructiveButtonTitle:nil
otherButtonTitles:@”Login Facebook”, nil];
as.actionSheetStyle = UIActionSheetStyleBlackOpaque;
[as showInView:self.view];
[as release];
Same to that of UIAlertView, you can see the field “otherButtonTitles”. This field determines how
many buttons will be shown on the screen and what will be their corresponding titles. In the codes
above, we only put in @”Login Facebook”. In fact, if you would like to show multiple buttons, you
can input @”a”, @”b”, @”c”, …,etc. However, please be reminded that the last item must be nil. Now,
you can delete the original codes inside the function “facebookButtonPressed:”, and insert the
codes shown above to the function to see the results.
2.2.3 Buttons Pressed Detection: UIActionSheetDelegate
In Section 2.1.3, we have briefly discussed the “delegate” concept and the requirements to become
a delegate of a UIComponent. To fully comply with the requirement, we have to:
Tutorial 4 Page 6
In VolcanoRockEscapingViewController.h file, declare that the class has implemented the
delegated function by putting “UIActionSheetDelegate”.
In VolcanoRockEscapingViewController.m file, implement the following function.
Same to that of UIAlertViewDelegate case, each time the actionsheet window appears and a button
is clicked inside, the above method will be invoked. We can then distinguish which button is clicked
by checking the “buttonIndex” variable. Now, you can input the following codes inside the function,
and see the results.
3. Facebook Connection
This is the final piece that we are going to discuss in this workshop. Nowadays, when we are using
some photo editing iPhone apps, we can combine several photos in the Photo Library into one
image, and then post the combined photo with messages to our own facebook account. In this part,
we are going to discuss the mechanism behind, so that we can post a photo together with a
message to tell your friends that you have completed the HKUEEE iPhone workshop.
Your iPhone Facebook
Facebook
iPhone Facebook User
App
App SDK Account
iPhone Role Facebook Role
The above diagram shows the relationship of the whole mechanism. Basically, this involves two
parties’ roles – The iPhone party’s role and the facebook party’s role. You can consider the whole
situation is like this: the iPhone app makes use of the iPhone Facebook Development Kit to connect
Tutorial 4 Page 7
to a facebook app. The facebook app can then act on behalf of the iPhone app to access the user’s
facebook account information. The information accessed includes post feeds, user’s friends
information, etc. Therefore, the first step that we need to do is to create a facebook developer
account and a facebook app.
3.1 Facebook Developer Account and Facebook App Setup
Note that the main purpose of this part is to create a facebook developer account and a facebook
app, so as to get the App ID. If you do not want to create your own developer account, you can skip
this step, and use our App ID, i.e., 211706648866285, for the next part.
1. You can first login your facebook user account, and then setup the facebook developer account
i. Type in http://www.facebook.com/developers
ii. Allow the developer account to access your basic information
iii. At this moment, your developer account has been created. However, no app has been
created at this moment.
Tutorial 4 Page 8
2. Now, you can create a facebook app through the developer account by pressing the
button or link. Note that your iPhone app needs to post photo
or message through the facebook app created.
i. Fill in the essential information. Note that the App Name will be shown on your facebook
feeds when you post your photo or message through the iPhone app.
ii. After clicking the button, you will be brought to a page to input some
more information. Here, you can input more details about your facebook app. (Note that we
have not input any further information in this page.)
iii. After you have filled in the information, you will be brought to a page as shown below:
Tutorial 4 Page 9
3.2 iPhone Facebook SDK Setup
To continue this part, first of all, please download “facebook_class.zip” from our website, and put
the whole unzipped folder under the class folder of the project.
Please note that “FacebookWrapper.h” and “FacebookWrapper.m” are not included in the original
SDK provided by facebook. These two files are written by us to simplify the usage of this SDK only.
Now, you have to:
i. Modify the value of “kAppId” field inside the “FacebookWrapper.h” file to
@”211706648866285” or the App Id that you have created.
Tutorial 4 Page 10
ii. Modify the “VolcanoRockEscapingViewController.info-plist” file.
a. Add one more row known as “URL Types”
b. Expand the rows and add one more row under the item0, known as “URL Schemes”.
c. Input the value “fb211706648866285” if you are using our provided facebook App Id or
input the value “fb” into this field.
iii. FacebookWrapper Initialization
a. In “VolcanoRockEscapingViewController.h” file:
1. Import “FacebookWrapper.h”
2. Declare “FacebookWrapper” object with the name “facebookWrapper”
3. Put the following statement below any methods declaration, but before “@end”
@property (readonly) FacebookWrapper * facebookWrapper;
b. In “VolcanoRockEscapingViewController.m” file:
1. Put the following statement immediately below “@implementation
VolcanoRockEscapingViewController”
@synthesize facebookWrapper;
2. Initialize the facebookWrapper object declared inside the method “initializeData”
facebookWrapper = [[FacebookWrapper alloc] initializeFacebookWrapper];
c. You have to find a place to insert the following codes inside
“VolcanoRockEscapingAppDelegate.m”. Note that the main aim of this code is to handle
the switching between this iPhone app and the 3rd Party app (Safari or facebook iPhone
Tutorial 4 Page 11
app) during login process.
3.3 Facebook Account Login
Now, we have finished all the necessary setup for making connection to the facebook. The next step
that we would like to do is to link up the action sheet button with the iPhone facebook SDK login
function.
You can insert the following statements inside a place (we intentionally do not discuss where):
[facebookWrapper login];
When this statement is invoked, iPhone facebook sdk will invoke the Safari browser (if facebook app
is installed, facebook app will be invoked instead).
Now, the Safari browser will connect to facebook. The following screen will be shown:
After login, the facebook app will ask for accessing the basic information and the permission of
posting message.
Tutorial 4 Page 12
After you allow the permission, the Safari browser will call back the VolcanoRockEscaping app.
Up to now, if you can come back to your app after logging in through the Safari browser, then you
are on the right track. Your app is now logged in facebook with your account, and can access your
information, and post message.
3.4 Upload of Photo to Facebook with a Message
In the FacebookWrapper class, we have defined a variable known as “isLogin”. You can access this
variable through:
facebookWrapper.isLogin
After initialization of the FacebookWrapper object, this variable will be set to “false”. However, after
you have login successfully, this variable will be set to “true”. Now, we want to change the action
sheet such that:
If facebook is not login,
the action sheet shows up should have a login button
Else if facebook is login,
the action sheet shows up should have a logout button and an upload to facebook button.
Tutorial 4 Page 13
The screen shows up should look like this after login:
Of course, the codes inside the delegated method of the action sheet also need to be changed to
reflect the current facebook login status. Specifically,
If buttonIndex is zero
If facebook is not login
Then, login button is pressed
Else if facebook is login
Then, logout button is pressed
Else if buttonIndex is one
If facebook is not login
Then, cancel button is pressed
Else if facebook is login
Then, upload photo button is pressed
Else if buttonIndex is two
Facebook is login and cancel button is pressed
In fact, FacebookWrapper class has provided two more methods for our convenience.
i. To logout, use the following command.
[facebookWrapper logout];
ii. To upload photo with a message, you can use the following commands.
UIImage * img = [UIImage imageNamed:@”certificate.jpg”];
NSString * msg = [NSString stringWithFormat:@”My Score in HKUEEE iPhone workshop game
App is: %d”, score];
[facebookWrapper uploadPhoto: img: msg];
Tutorial 4 Page 14
The codes in (ii) above make use of the iPhone facebook SDK. The iPhone facebook SDK will then
send request to upload photo and message to the facebook through the facebook app. The
facebook app will then respond to the request to show whether the upload is successful or not.
If successful, you can see a screen capture like this:
Finally, please login your facebook in your web browser to confirm that the upload is really
successful. Hope that you enjoy the whole app development process.
4 Challenges (Optional)
If you have finished all the above parts, congratulations!!! You have finished your first iPhone game
app. Now, you can use it as a framework to implement other special features that you can think of.
Here, we would like to suggest three challenges for you to accomplish:
1. Different VolcanoRock generation patterns
2. Different difficulty levels
3. Keeping best scores
Tutorial 4 Page 15