Chapter 4. Writing an app with multiple views


This chapter covers

  • Designing classes to match your sketches
  • Defining your models, views, and controllers
  • Changing views based on user interaction

In the last chapter, you learned the syntax for messages and properties and how you can make them into actions and outlets so that Interface Builder can connect views to them. In this chapter, you’re going to take the sketches for a real application and see how to create all of the various pieces. By the time you’re done, you’ll have made an application to show flashcards, which you can customize with your own content.

Designing a flashcard application

For the content of your flashcards, you’ll use U.S. state capitals. Do you know Juneau from Topeka without peeking? If not, this app will help.

This app is more complex than the ones you’ve seen so far, so it’s even more important that you plan it out a little before starting. So, let’s make some sketches of what you want it to look like. The opening screen is shown at right.

Figure 4.1. Sketch of flashcard start screen

Once you choose which way you want to practice, you’ll see a sequence like this:

Figure 4.2. Sketch of flashcards

The sketches show that you need three different views: one for the opening screen, another that shows text and has three buttons for answers, and another with the final score and a restart button.

Let’s look at how this app flows:

Figure 4.3. Behavior of flashcards

Creating classes to match your designs

Creating the model classes

Connecting code to Interface Builder

Orchestrating your app with controllers

Reflecting on your progress