Setting up outlets for RestaurantDetailViewController

Your app has data in all its screens, except for the Restaurant Detail screen. This screen is accessed either by tapping a restaurant in the Restaurant List screen or by tapping the restaurant annotation's callout bubble button in the Map screen. If you build and run your app, tapping a restaurant in the Restaurant List screen shows the placeholder Restaurant Detail screen, as follows:

Tapping a restaurant annotation's callout bubble button in the Map screen shows the actual Restaurant Detail screen, but it does not contain any restaurant data, as can be seen in the following screenshot:

To fix this, let's start by setting up the outlets for RestaurantDetailViewController. Click RestaurantDetailViewController in the Project navigator. Add the following outlets after the class declaration and before the selectedRestaurant property declaration:

// Nav Bar
@IBOutlet weak var btnHeart:UIBarButtonItem!

// Cell One
@IBOutlet weak var lblName: UILabel!
@IBOutlet weak var lblCuisine: UILabel!
@IBOutlet weak var lblHeaderAddress: UILabel!

// Cell Two
@IBOutlet weak var lblTableDetails: UILabel!

// Cell Three
@IBOutlet weak var lblOverallRating: UILabel!

// Cell Eight
@IBOutlet weak var lblAddress: UILabel!

// Cell Nine
@IBOutlet weak var imgMap: UIImageView!

The outlets that you just set up are as follows: 

  • btnHeart is the outlet for the heart-shaped button in the navigation bar. You won't be implementing it in this book, but it's something that you can work on later on your own.
  • lblName is the outlet for the label that displays the name of the restaurant in the first cell.
  • lblCuisine is the outlet for the label that displays the cuisines offered by the restaurant in the first cell.
  • lblHeaderAddress is the outlet for the label that displays the address of the restaurant in the first cell.
  • lblTableDetails is the outlet for the label that displays the table details of the restaurant in the second cell.
  • lblOverallRating is the outlet for the label that displays the overall rating for the restaurant in the third cell. You will calculate and set this value in Chapter 22, Saving and Loading from Core Data.
  • lblAddress is the outlet for the label that displays the address of the restaurant in the eighth cell.
  • imgMap is the outlet for the image view that displays a location map for the restaurant in the ninth cell. You will write methods to generate this map later in this chapter.

Now that you've created the outlets, you need to connect them to the UI elements in the Restaurant Detail View Controller Scene in RestaurantDetail.storyboard, as follows:

  1. Open the RestaurantDetail folder in the Project navigator. Click RestaurantDetail.storyboard. Then, click the View Controller icon in the Restaurant Detail View Controller Scene. Next, click the Identity inspector. Under Custom Class, confirm that the Class has been set to RestaurantDetailViewController, as shown in the following screenshot:

Note that the name of the View Controller will change to Restaurant Detail View Controller once the Custom Class is set. Unlike the table view that is in the Location View Controller Scene, the table view of Restaurant Detail View Controller Scene has static cells, meaning the number of cells is not dynamically generated based on data from a model object. As can be seen in the document outline, there are nine cells, and each cell has already been configured with the appropriate view objects. Clicking on each table view cell in the document outline will display that cell in the Editing area.

  1. Click the Connections inspector. You'll see all the outlets you added earlier in RestaurantDetailViewController, as follows:


  1. Click and drag from the btnHeart outlet to the heart in the Navigation Bar, as shown in the following screenshot:

  1. Note that the description of the view will change to Btn Heart in the document outline, as follows:


  1. Click on the last Table View Cell in the document outline to see the bottom of the Table View. Click and drag from the imgMap outlet to the Image View in the last cell, as shown in the following screenshot. Note that the description of the Image View will change to Img Map in the document outline, as can be seen here:


  1. Click on the eighth Table View Cell in the document outline. Click and drag from the lblAddress outlet to the Label in the eighth cell, as shown in the following screenshot. Note that the description of the Label will change to Lbl Address in the document outline, as can be seen here:


  1. Click on the first Table View Cell in the document outline. Click and drag from the lblCuisine outlet to the second Label in the first cell, as shown in the following screenshot. Note that the description of the Label will change to Lbl Cuisine in the document outline, as can be seen here:


  1. Click and drag from the lblHeaderAddress outlet to the third Label in the first cell, as shown in the following screenshot. Note that the description of the Label will change to Lbl Header Address in the document outline, as can be seen here:


  1. Click and drag from the lblName outlet to the first Label in the first cell, as shown in the following screenshot. Note that the description of the Label will change to Lbl Name in the document outline, as can be seen here:


  1. Click on the third Table View Cell in the document outline. Click and drag from the lblOverallRating outlet to the Label with the big black 0.0 inside it, as shown in the following screenshot. Note that the description of the Label will change to Lbl Overall Rating in the document outline, as can be seen here:


  1. Click on the second Table View Cell in the document outline. Click and drag from the lblTableDetails outlet to the Label just above the three red buttons in the second cell, as shown in the following screenshot. Note that the description of the Label will change to Lbl Table Details in the document outline, as can be seen here:


Now that all the outlets are connected, let's add some code to RestaurantDetailViewController so that it can populate the outlets, thus displaying the restaurant data in the Restaurant Detail screen. You will do this in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.32.86