Getting Data into Table Views

In the previous chapter, you learned about the Model-View-Controller (MVC) design pattern and table views. You also reviewed the table view in the Journal List screen. At this point, the Journal List screen displays cells that do not contain any data. As shown in the app tour in Chapter 10, Setting Up the User Interface, it should display a list of journal entries.

In this chapter, you’re going to implement the model objects for the Journal List screen to make it display a list of journal entries. You’ll start by learning about model objects that you will use. Next, you’ll create a Swift class that can store journal entry instances. After that, you’ll create a structure with an array property containing sample journal entry instances. This array will then be used as the data source for the table view in the Journal List screen.

By the end of this chapter, you’ll have learned how to create model objects, how to...

Technical requirements

You will continue working on the JRNL project that you modified in Chapter 13, Modifying App Screens. The resource files and completed Xcode project for this chapter are in the Chapter15 folder of the code bundle for this book, which can be downloaded here:

https://github.com/PacktPublishing/iOS-17-Programming-for-Beginners-Eighth-Edition

Check out the following video to see the code in action:

https://youtu.be/P9waTuikjeA

Let’s start by examining the model objects required to store journal entry data in the next section.

Understanding model objects

As you learned in Chapter 14, Getting Started with MVC and Table Views, a common design pattern for iOS apps is Model-View-Controller, or MVC. To recap, MVC divides an app into three different parts:

• Model: This handles data storage, representation, and data processing tasks.
• View: This is anything that is on the screen that the user can interact with.
• Controller: This manages the flow of information between the model and the view.

Let’s revisit the design of the Journal List screen that you saw during the app tour, which looks like this:

Figure 15.1: Simulator showing the Journal List screen from the app tour

Build and run your app, and the Journal List screen will look like this:

Figure 15.2: Simulator showing the Journal List screen from your app

As you can see, all the cells currently display placeholders. Based on the MVC design pattern, you have partly completed the implementation of...

Creating a class to represent a journal entry

To create a model object that can represent a journal entry in your app, you will add a new file to your project, JournalEntry.swift, and declare a JournalEntry class that has the required properties for a journal entry. Follow these steps:

1. In the Project navigator, right-click on the JournalListViewController file and select New Group from Selection:

Figure 15.3: Pop-up menu with New Group from Selection selected

2. Type in the name Journal List Screen and press Return:

Figure 15.4: Project navigator showing the Journal List Screen group

3. Right-click the Journal List Screen group and choose New Group:

Figure 15.5: Pop-up menu with New Group selected

4. Type in the name Model and press Return:

Figure 15.6: Project navigator showing the Model group

5. Create another group by repeating Step 3 and typing in the name View. The Project navigator...

Creating sample data

As you saw in Chapter 14, Getting Started with MVC and Table Views, you can use an array as the data source for a table view. You will now create a structure that has an array property containing three sample journal entries.

Click the JournalEntry file in the Project navigator, and type in the following after the JournalEntry class declaration:

// MARK: - Sample data
struct SampleJournalEntryData {
  var journalEntries: [JournalEntry] = []
  mutating func createSampleJournalEntryData() {
    let photo1 = UIImage(systemName: "sun.max")
    let photo2 = UIImage(systemName: "cloud")
    let photo3 = UIImage(systemName: "cloud.sun")
    guard let journalEntry1 =  JournalEntry(rating: 5, title: "Good", body:
    "Today is a good day", photo: photo1) else {
      fatalError("Unable to instantiate journalEntry1")
    }
    guard let journalEntry2 = JournalEntry(rating: 0, title: "Bad", body...

Displaying data in a table view

In Chapter 14, Getting Started with MVC and Table Views, you used a table view cell configuration to set the data to be displayed by the table view cells. You will not be able to do the same here because you are using a custom table view cell that you implemented in Chapter 13, Modifying App Screens.

So far in this chapter, you’ve implemented a structure that creates three JournalEntry instances and assigns them to the journalEntries property. You will now modify the JournalListViewController class to use that array as the data source for the table view on the Journal List screen. To do so, you will do the following:

• Create a custom UITableViewCell instance and assign it as the identity for the journalCell table view cells.
• Modify the JournalListViewController class to get sample data from an instance of the SampleJourneyEntryData structure.
• Modify the data source methods in the JournalListViewController class to populate...

Summary

In this chapter, you implemented the model objects for the Journal List screen to make it display a list of journal entries. You learned about the model objects that you will use, created a Swift class that can be used to store journal entry instances, and created a structure containing sample journal entries. You then created a custom instance of UITableViewCell for your table view and used the structure containing sample journal entries as the data source for the table view in the Journal List screen.

You now know how to create model objects, how to create sample data, and how to configure view controllers to populate table views using that sample data. This will be useful should you wish to create your own apps that use table views.

In the next chapter, you’ll learn how to add and remove journal entries from the Journal List screen. You’ll also learn how to pass data between view controllers.

Learn more on Discord

To join the Discord community...