CS356 Lab 3: Our First iOS App

Complete the following steps in order. Refer to Tutorial 1 as needed for an example of how to accomplish these steps.

1. Create a new iPhone app project named PrizePickerApp (as per Tutorial 1 steps 1-2).

2. Our model component for this app will consist of the Lab 2 Prize and PrizeChest classes (you may use either my Lab 2 solution or your final Lab 2 files, assuming you are comfortable with them). Locate the files Prize.h, Prize.m, PrizeChest.h, and PrizeChest.m, either in the Finder (the MacOS file system) or in another Xcode project window. Select these files and then drag and drop them into the PrizePickerApp folder on the left-hand side of the Xcode window of your new PrizePickerApp project.

When prompted, check Copy items if needed and Add to targets - PrizePickerApp. Then click Finish.

3. Next we will build our view using StoryBoard. First add a label to the top center of the iPhone screen with the text “Welcome to PrizePicker!”. Create and connect an IBOutlet for this label named statusDisplay.

4. Next we will add some buttons that will allow the user to pick a prize. The six prize buttons will form a 3x2 grid (see picture below). Begin by adding just the upper left button. Change the button text to read “1” (the number one). Add a target-action message named prizePicked to the button (leave the message body blank for now).

5. We want all six buttons to connect to the same action prizePicked; when the message is received by the ViewController the message argument sender will refer to the button that generated the event so we can determine which button it was. We can accomplish this easily by copying-and-pasting our first button five times to create a total of six buttons; the connection to the prizePicked action will also be copied. Arrange the buttons as illustrated and label the new buttons 2 through 6.


Page ��� of ���1 3

6. Add another label “Pick a Prize” below the buttons and connect it to an IBOutlet named prizeDisplay.

7. Add a “reset” button below the label you just created. Create a target-action message reset: for the button, and an IBOutlet with a name of your choice. Disable the reset button initially.

8. Before continuing press the Run button to build and run the app so far. The view you built should be displayed in the iOS Simulator, though at this point pressing on the buttons doesn’t do anything because the action method implementations are empty.

9. Now let’s implement the new actions we just created by doing the following.

a. Add a PrizeChest instance variable (not a property) to PrizePickerViewController.h.

b. Add a getter with lazy instantiation for the PrizeChest instance variable to PrizePickerViewController.m.

c. Implement the prizePicked: method to do the following:

i. Get the text of the sender argument (which will be the UIButton that generated the event) and determine its integer value (hint: how can we can get the integer value of an NSString?).

ii. Get the appropriate Prize from the PrizeChest (hint: what is the integer value of the first button? What is the index of the first Prize?).

iii. Display the Prize’s description in the prizeDisplay label.

iv. Change the statusDisplay label to read “ We have a winner!”.

v. Enable the reset button.

d. Implement the reset: method to do the following:

i. Shuffle the PrizeChest.

ii. Change the statusDisplay label to read “Welcome to PrizePicker!”.

iii. Change the prizeDisplay label to read “Pick a Prize”.

iv. Disable the reset button.

10. Test your application before continuing. In the remaining steps I do not specify outlet/action names; choose any descriptive names. Where to layout buttons and labels is also up to you (though neatness counts).

Page ��� of ���2 3

11. Add a label to the application that outputs whether or not the chosen prize is a jackpot as follows:

a. The label should initially read “Good Luck!”.

b. When a prize is picked, the label should be changed to read either “JACKPOT!” or “No Jackpot” based on whether or not the chosen prize is a Jackpot.

c. Whenever the reset button is pressed the label should be changed to read “Good Luck!”.

12. Finally, add a button to the application that will tell the user where the BOOBY PRIZE is located:

a. The button should be labeled “Hint”.

b. When the button is pressed, the label you created in step 11 should be changed to read “Hint: don’t choose button #”, where “#” is replaced with the button number that corresponds to the BOOBY PRIZE.

13. Test your final app. When finished, compress your entire Xcode project file and submit it via Moodle.

Page ��� of ���3 3