Create a new Xcode project. Select the iOS→Application→Single View Application template.
Name the project Quiz, put your name in the Organization Name field, and use your prefix instead of the XXX shown for Class Prefix. I’ll use the prefix BNR to match the book.
Save the project somewhere. We will end up with the following project structure.
Model — View — Controller
This is a very important design pattern that is used extensively in Cocoa.
Model — The data
View — What you see and touch
Controller — What’s in charge
The Model will be the NSMutableArray objects that hold the questions and answers.
The View is the Main.storyboard and all the user interface elements we add to it.
The Controller will be BNRViewController instance.
Open BNRViewController.m. Notice that Xcode has added a class extension to the file.
Add three properties to the class extension.
We’ll be using (assign, nonatomic) for primitive data types.
Create the Interface
Click on the Main.storyboard and the Object Library. The window should look close to like this.
Add two labels and two buttons to the view. The view should look like this.
Make the text in the labels centered.
Clear out the text in the top label and put ??? in the bottom one.
Change the button text to Show Question and Show Answer.
The labels and buttons should be full width except for the normal borders.
Make the height of the labels and buttons 40.
Change the background colors of the labels and buttons to distinguish them.
Wiring the Interface
When our code needs to change something in a UI element, it needs a pointer to the object.
An outlet is marked in our code as an IBOutlet.
When a user touches a UI element we need to run code to respond. An action is how we hook buttons, etc., up to code in Cocoa Touch.
An action is marked with IBAction in our code.
Setting Targets and Actions
Wiring the Labels
Hold down the Option key (⌥) and click on the BNRViewController.m file. This will open the code editor in another panel on the right.
Now hold down the control key, click on the top label and drag over to the code. Drag to the class extension just under the three properties you created earlier.
When you let go of the drag a dialog box will appear. Name the label questionField.
Click on the Connect button and a property will be create in your code.
Control-Click and drag from the other label over to just under the above property. Name it answerField. You should now have two new properties with the little circles and dots over to the left.
Wiring the Buttons
Next we’ll hook up the buttons. First, scroll down in your source, if you need to, so that you can see the @end of the @implementation. Control-click and drag from the Show Question button to just above the @end.
In the resulting dialog box name the Action showQuestion and change the Type to UIButton.
When you let go of the drag a new method will appear in your code.
Wire up the Show Answer button the same way. Name the Action showAnswer and also change the Type to UIButton. You will now have two methods with the same little circles and dots over on the left.
Our user interface is all wired up!
Find the method viewDidLoad. Add the following code after the [super viewDidLoad];.
Since we are using properties instead of instance variables we need to use accessor methods to assign and retrieve values.
Let’s look at some of the lines in more detail.
This line does a lot of work. First it calls the get method for the property. Then it increments that value. Finally, it calls the set method for property. All with just a ++!
The count method is not a property so we have to use a set of , not dot notation.
This is the modern Objective-C syntax for using properties with array access.
Here’s an example of using multiple properties in one statement. We start with self.questionField to get access to the label instance. Then we add the text property of the UILabel class. How do we know it’s a property? We look it up in the docs.