Home iOS & Swift Books iOS Apprentice

21
The Data Model Written by Eli Ganim

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

In the previous chapter, you created a table view for the high scores and got it to display rows of items. However, this was all done using hard-coded, fake data. This would not do for a real high score screen since your users want to see their own real high scores up there.

To manage and display this information efficiently, you need a data model that allows you to store (and access) the high scores easily. That’s what you’re going to do in this chapter.

This chapter covers the following:

  • Model-View-Controller: A quick explanation of the MVC fundamentals that are central to iOS programming.
  • The data model: Creating a data model to hold the high scores data.

Model-View-Controller

First, a tiny detour into programming-concept-land so that you understand some of the principles behind using a data model. No book on programming for iOS can escape an explanation of Model-View-Controller, or MVC for short.

MVC is one of the three fundamental design patterns of iOS. You’ve already seen the other two: Delegation, making one object do something on behalf of another, and target-action, connecting events such as button taps to action methods.

The Model-View-Controller pattern states that the objects in your app can be split into three groups:

  • Model objects: These objects contain your data and any operations on the data. For example, if you were writing a cookbook app, the model would consist of the recipes. In a game, it would be the design of the levels, the player score and the positions of the monsters.

    The operations that the data model objects perform are sometimes called the business rules or the domain logic. For the high score screen, the high scores themselves form the data model.

  • View objects: These make up the visual part of the app: Images, buttons, labels, text fields, table view cells and so on. In a game, the views form the visual representation of the game world, such as the monster animations and a frag counter.

    A view can draw itself and responds to user input, but it typically does not handle any application logic. Many views, such as UITableView, can be re-used in many different apps because they are not tied to a specific data model.

  • Controller objects: The controller is the object that connects your data model objects to the views. It listens to taps on the views, makes the data model objects do some calculations in response and updates the views to reflect the new state of your model. The controller is in charge. On iOS, the controller is called the “view controller.”

Conceptually, this is how these three building blocks fit together:

How Model-View-Controller works
How Model-View-Controller works

The view controller has one main view, accessible through its view property, that contains a bunch of subviews. It is not uncommon for a screen to have dozens of views all at once. The top-level view usually fills the whole screen. You design the layout of the view controller’s screen in the storyboard.

In the high score screen, the main view is the UITableView and its subviews are the table view cells. Each cell also has several subviews of its own, namely the text labels.

Generally, a view controller handles one screen of the app. If your app has more than one screen, each of these is handled by its own view controller and has its own views. Your app flows from one view controller to another.

You will often need to create your own view controllers. However, iOS also comes with ready-to-use view controllers, such as the image picker controller for photos, the mail compose controller that lets you write an email and, of course, the table view controller for displaying lists of items.

Views vs. view controllers

Remember that a view and a view controller are two different things.

A view is an object that draws something on the screen, such as a button or a label. The view is what you see. The view controller is what does the work behind the scenes. It is the bridge that sits between your data model and the views.

A lot of beginners give their view controllers names such as FirstView or MainView. That is very confusing! If something is a view controller, its name should end with “ViewController,” not “View.” I sometimes wish Apple had left the word “view” out of “view controller” and just called it “controller” as that is a lot less misleading.

The data model

So far, you’ve put a bunch of fake data into the table view. The data consists of a text string and a number. As you saw in the previous chapter, you cannot use the cells to remember the data as cells get re-used all the time and their old contents get overwritten.

The table view controller (data source) gets the data from the model and puts it into the cells
Qqo pamse viat lawjmihzec (cifu xaoqgu) mitn dku zixi rsoc kce kovuw ess junz ig azpo zbu lizws

The first iteration

First, you’ll see the cumbersome way to program this. It will work, but it isn’t very smart. Even though this is not the best approach, you should still follow along and copy-paste the code into Xcode and run the app so that you understand how this approach works.

class HighScoresViewController: UITableViewController {
  let row0name = "The reader of this book"
  let row1name = "Manda"
  let row2name = "Joey"
  let row3name = "Adam"
  let row4name = "Eli"
  let row0score = 50000
  let row1score = 10000
  let row2score = 5000
  let row3score = 1000
  let row4score = 500
  . . .
override func tableView(_ tableView: UITableView, 
      numberOfRowsInSection section: Int) -> Int {
  return 5
}

override func tableView(_ tableView: UITableView,
                        cellForRowAt indexPath: IndexPath)
-> UITableViewCell {
  let cell = tableView.dequeueReusableCell(
    withIdentifier: "HighScoreItem",
    for: indexPath)
  let nameLabel = cell.viewWithTag(1000) as! UILabel
  let scoreLabel = cell.viewWithTag(2000) as! UILabel

  if indexPath.row == 0 {
    nameLabel.text = row0name
    scoreLabel.text = String(row0score)
  } else if indexPath.row == 1 {
    nameLabel.text = row1name
    scoreLabel.text = String(row1score)
  } else if indexPath.row == 2 {
    nameLabel.text = row2name
    scoreLabel.text = String(row2score)
  } else if indexPath.row == 3 {
    nameLabel.text = row3name
    scoreLabel.text = String(row3score)
  } else if indexPath.row == 4 {
    nameLabel.text = row4name
    scoreLabel.text = String(row4score)
  }
  return cell
}

Simplifying the code

Let’s combine the name and score into a new object of your own!

The object

➤ Select the Bullseye group in the project navigator and right-click it. Choose New File… from the pop-up menu.

Adding a new file to the project
Ugvoff u gos beke zi sca rvoxakc

class HighScoreItem {
  var name = ""
  var score = 0
}

Using the object

Before you try using an array, you’ll replace the name and score instance variables in the view controller with these new HighScoreItem objects to see how that approach would work.

class HighScoresViewController: UITableViewController {
  var row0item = HighScoreItem()
  var row1item = HighScoreItem()
  var row2item = HighScoreItem()
  var row3item = HighScoreItem()
  var row4item = HighScoreItem()
var row0item: HighScoreItem

Fixing existing code

Because some methods in the view controller still refer to the old variables, Xcode will throw up multiple errors at this point. Before you can run the app again, you need to fix these errors. So, let’s do that now.

  if indexPath.row == 0 {
    nameLabel.text = row0item.name
    scoreLabel.text = String(row0item.score)
  } else if indexPath.row == 1 {
    nameLabel.text = row1item.name
    scoreLabel.text = String(row1item.score)
  } else if indexPath.row == 2 {
    nameLabel.text = row2item.name
    scoreLabel.text = String(row2item.score)
  } else if indexPath.row == 3 {
    nameLabel.text = row3item.name
    scoreLabel.text = String(row3item.score)
  } else if indexPath.row == 4 {
    nameLabel.text = row4item.name
    scoreLabel.text = String(row4item.score)
  }

Setting up the objects

Remember how the new row0item etc. variables are initialized with empty instances of HighScoreItem? That means that the text for each variable is empty. You still need to set up the values for these new variables!

override func viewDidLoad() {
  super.viewDidLoad()

  // Add the following lines
  row0item.name = "The reader of this book"
  row0item.score = 50000
  row1item.name = "Manda"
  row1item.score = 10000
  row2item.name = "Joey"
  row2item.score = 5000
  row3item.name = "Adam"
  row3item.score = 1000
  row4item.name = "Eli"
  row4item.score = 500
}

Using arrays

With the current approach, you need to keep around a HighScoreItem instance variable for each row. That’s not ideal, especially if you want more than just a handful of rows.

class HighScoresViewController: UITableViewController {
  var items = [HighScoreItem]()
override func viewDidLoad() {
  super.viewDidLoad()
  
  // Replace previous code with the following
  let item1 = HighScoreItem()
  item1.name = "The reader of this book"
  item1.score = 50000
  items.append(item1)
  
  let item2 = HighScoreItem()
  item2.name = "Manda"
  item2.score = 10000
  items.append(item2)
  
  let item3 = HighScoreItem()
  item3.name = "Joey"
  item3.score = 5000
  items.append(item3)
  
  let item4 = HighScoreItem()
  item4.name = "Adam"
  item4.score = 1000
  items.append(item4)
  
  let item5 = HighScoreItem()
  item5.name = "Eli"
  item5.score = 500
  items.append(item5)
}

Simplifying the code — again

Now that you have all your rows in the items array, you can simplify the table view data source and delegate methods once again.

override func tableView(_ tableView: UITableView,
             cellForRowAt indexPath: IndexPath) 
             -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(
                        withIdentifier: "HighScoreItem", 
                                   for: indexPath)
                 
  let item = items[indexPath.row]       // Add this
  
  let nameLabel = cell.viewWithTag(1000) as! UILabel
  let scoreLabel = cell.viewWithTag(2000) as! UILabel

  // Replace everything after the above line with the following
  nameLabel.text = item.name
  scoreLabel.text = String(item.score)
  return cell
}
let item = items[indexPath.row]
override func tableView(_ tableView: UITableView,
      numberOfRowsInSection section: Int) -> Int {
  return items.count
}

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.