Implementing the Master View Controller - The Model and the App Structure - iOS App Development For Dummies (2014)

iOS App Development For Dummies (2014)

Part IV. The Model and the App Structure

Chapter 12. Implementing the Master View Controller

In This Chapter

arrow Working with custom view controllers

arrow Using the Trip model to get data for a view

With the model in place, you can now return to the Master View controller and transform its view into the user interface you fell in love with way back in Chapter 4. In this chapter, you'll connect the Master View controller for the iPad to the Trip model to create the interface and also to be able to (eventually) respond to user requests. You’ll then repeat the process for the iPhone version.

image The strategy you adopt in this chapter to add the logic to connect the view to the model via the view controller is the same strategy you’ll use for the rest of the view controllers in the storyboard. As always, although you can add the view controllers you’ll need to the storyboard graphically, you’ll still need to add some code to have the controller actually do anything, such as get data from the model and send it to the view.

Setting Up a Custom View Controller for the iPad

Although MasterViewController already actually does something, I want to develop it for use in RoadTrip by customizing its appearance and having it display (through its entries or cells) a table of contents showing the app functionality. Here’s how you’d start things off:

1. In the Project navigator, select Main_iPad.storyboard.

2. In the Document outline, select Master View Controller – Master in the Master View Controller – Master scene, open the disclosure triangle next to the Master View controller in the scene, and select the Table view.

3. Using the Inspector selector bar, open the Attributes inspector in the Utility area.

You’ll notice that, in the Table View section of the Attributes inspector, the Static Cells option is selected in the Content drop-down menu, as shown in Figure 12-1. You changed this Table view to Static cells in Chapter 5.

As I explain in Chapter 5, static cells are used when you know in advance what needs to be displayed in a cell. Instead of having to implement a method in your view controller and return the cell with the text you want, you can format the cells in the storyboard.

image

Figure 12-1: You start with static cells.

4. In the Document outline, open the disclosure triangle next to the Table view, select Table View Section, and delete it.

You could've left that cell and added cells to that section and more sections, but I want to show you what it’s like to start from a clean slate.

image Notice that the segue to the Test Drive controller has been deleted as well. That means you can no longer select Test Drive and have the view slide into place. But you’ll fix that in Chapter 13.

You are now ready to add the text you want displayed to the cells, but before you do, I want to give you some background on how Table views work.

Table views require both a data source as well as a delegate. The data source supplies the content for the Table view and provides the content for each cell (or row). The delegate manages the appearance and behavior of the Table view and determines what to do when the user selects a cell (or row) — it could, for example, push a view controller onto the stack.

image In the template (as is the case with many Table views), the table view itself is assigned to both the data source and the delegate properties. This means that all of the Table view functionality is embodied in the Table view class. However, having the ability to assign other classes to the delegate or the data source property opens up the opportunity for you to share the functionality among several objects. You will find a number of cases in the Cocoa frameworks where an object’s functionality is provided by itself (as in the Table view) as well as by other objects that may from time to time be the same as the primary object. If you’re using the Table view only as a type of table of contents for your app, selecting Static Cells lets you create the cell content in Interface Builder (as I show you how to do next) and use storyboard segues to specify what happens when a user selects a cell — much easier and a lot less work than coding it yourself! I explain more about this in Chapter 20.

The following steps show you how to customize your Table view:

1. Select Table View in the Document Outline in the Master View Controller – Master Scene.

2. Using the Inspector selector, open the Attributes inspector in the Utility area, select Grouped from the inspector’s Style drop-down menu, and then enter 3 in the Sections field.

You see three sections with three rows each, as shown in Figure 12-2.

Note that Table views come in two basic styles:

· Plain: The default style is called plain and looks really unadorned — plain vanilla. It’s a list: just one darn thing after another. You can index it, though, just as the Table view in the Contacts app is indexed, so it can be a pretty powerful tool.

image A plain view can also have section titles (as I describe shortly) and footers.

· Grouped: The other style is the grouped Table view; unsurprisingly, it allows you to lump entries together into various categories.

image Grouped tables can't have an index.

When you configure a grouped Table view, you can also have header, footer, and section titles. I show you how to do section titles shortly.

image The details of what you've just done may change as the storyboard defaults are changed, but you get the picture.

image

Figure 12-2: Static cells and three sections.

3. Open the disclosure triangle next to Table View in the Document outline, check out the Table View sections under it, and select the first section.

The Attributes inspector refreshes to show the attributes of the first Table View section.

4. Change the Rows field in the Attributes inspector to 2 (or delete one of the cells) and enter At My Destination in the Header field.

5. Select the second section and, after the Attributes inspector refreshes, change the Rows field in the Attributes inspector to 2, and enter Getting Around in the Header field.

6. Select the third section and, after the Attributes inspector refreshes, change the Rows field in the Attributes inspector to 2, and enter Planning My Trip in the Header field. (See Figure 12-3.)

image

Figure 12-3: Setting the number of rows and sections with headers that you want.

7. Open the first Table View Section and select the first Table View Cell.

8. Still in the Attributes inspector, choose Basic from the Style menu.

The Style menu provides a number of options for how the cell is formatted. Each one formats the text in the cell a little differently in the label(s) it adds to the cell to display the text. (Or you can leave it as Custom, drag in a label(s), and format the label any way you want.)

When you select Basic, a disclosure triangle gets added next to first Table View Cell in the Document Outline in the Master View Controller – Master Scene. If you open it, you see that a single label has been added for you, as shown in Figure 12-4.

image

Figure 12-4: A basic cell with the supplied label.

9. Select the Label in the Document outline.

The Attributes inspector displays the Label properties — including the text, which you can change to your heart’s content. (Selecting the Text icon in the Font field allows you to change the font as well.)

If you want, you can change the font style by selecting the Font icon (the little T inside the Font field). However, remember that the content of your app should be the centerpiece, so using standard fonts and styles for things such as labels (as opposed to content) is usually a good idea. Set the text for the label to Weather as shown in Figure 12-5.

image

Figure 12-5: The formatted cell of a table.

10. Finally, and this is the pièce de résistance, select White Color from the Label section’s Color drop-down menu.

Yes, it is in fact the case that you won’t be able to see the text very well, as demonstrated by Figure 12-6.

image

Figure 12-6: The first cell and label are done.

11. Repeat Steps 7–10 to format the next two cells, this time entering Events and Map, respectively, in the Text field in the Attributes inspector.

Events is the second cell in At My Destination, and Map is the first cell in Getting Around. You have to treat the Find cell in Getting Around a little differently. Rather than just adding a title to the Table View Cell, you’re going to add a label and input text field inside the table view cell. This is only one example of how you can put almost any view inside a Table View Cell.

Start by leaving the cell type as Custom in the Style menu. (Because you’ll have the user enter the place she wants to find in the cell, you’ll have to format it on your own.) Continue with the steps that follow.

12. Drag a label from the Library pane onto the cell.

As you work, you may notice that Xcode places a Content View object inside the Table View Cell; your new objects such as the label are placed inside the Content View automatically.

13. With the label selected, go to the Attributes inspector and enter Find: in the Text field and set the Label and Table View Cell text to White Color (if it’s not already set that way), as you did in Steps 9–11.

If you select the label, it should look like Figure 12-7.

image

Figure 12-7: Add a label.

14. Drag a Text Field from the Library pane onto the cell and position it as shown in Figure 12-8.

image

Figure 12-8: Add a text field.

15. At the top of the Text Field section of the Attributes inspector, enter Enter address or place in the Placeholder field to help the user understand what this text field is for.

16. In the Attributes inspector, select the first Border Style (No Border) in the Text Field section.

The text field will seem to disappear, but you can always select it again in the Document outline.

17. Using the appropriate drop-down menus, set the background to Clear Color and the text to White Color.

Resize and reshape the text field as desired. You can see the results in Figure 12-9.

Text fields enable the user to enter small amounts of text, which is exactly what you need here.

image

Figure 12-9: The Find cell complete.

18. Repeat Steps 7–10 to format the next two cells, this time entering Destination and Test Drive, respectively, in the Text field in the Attributes inspector.

19. Your Master View controller should look more or less like mine does in Figure 12-10.

Pay particular attention to the document outline at the left to make certain that you have all of the pieces in place.

image

Figure 12-10: The finished Content controller.

If you were to remove the code breakpoint that you set in Chapter 11, and then click the Run button for the iPad version, you would see the screen shown in Figure 12-11. Clicking or tapping in a cell doesn’t get you anything yet, but it soon will.

Of course, this user interface isn't particularly exciting; in fact, it's rather pedestrian. Let’s fix that. Doing that requires doing some coding in the Master View controller.

image

Figure 12-11: The latest additions to the RoadTrip app for iPad.

Adding a Background Image and Title

The type of Table view highlighted in this chapter has static cells that you set up in Interface Builder, as I mention in the previous section. However, in this view, everything isn’t static — including two things based on the destination. Those two things are the background image and the title. You have to set those programmatically.

Start by hiding the Utility area and then show the Project navigator (if you have hidden it) by making the appropriate selections in the toolbar. Then select MasterViewController.m in the Project navigator.

You may recall from Chapter 6 that the View Controller method you’d use to customize a view at launch time is viewDidLoad, which is the method I’ll have you use here as well.

First, import the headers you need by adding the bolded code in Listing 12-1 to MasterViewController.m.

Listing 12-1:  Updating the MasterViewController Implementation

#import "MasterViewController.h"
#import "DetailViewController.h"
#import "AppDelegate.h"
#import "Trip.h"

Now add the bolded code in Listing 12-2 to the viewDidLoad method in MasterViewController.m and delete the commented out code in bold, underline, and italic.

Listing 12-2:  Updating viewDidLoad

- (void)viewDidLoad
{
[super viewDidLoad];

//self.title = @"Road Trip";
AppDelegate* appDelegate = [[UIApplication
sharedApplication] delegate];
self.title = appDelegate.trip.destinationName;
UIImageView* imageView = [[UIImageView alloc]
initWithImage:[appDelegate.trip destinationImage]];
self.tableView.backgroundView = imageView;
_

}

You want to add two features to the MasterViewController’s view. The first makes the title in the Navigation bar the name of the destination, and the second adds a background image to the view. This data is owned by the Trip model, so you’re finally getting to use the model.

To get the information the Master View controller needs from the (Trip) model, it needs to send a message to the Trip object. You may recall that in Chapter 11, when you created and initialized the Trip object in AppDelegate, you assigned its pointer to the trip property to make it accessible to the view controllers.

You find AppDelegate just like you previously did: by sending the class message sharedApplication to the UIApplication class and then sending the delegate message to the UIApplication object.

You use the following two methods to place your background image and display the destination name:

· destinationImage is a Trip method that returns a UIImage pointer.

· destinationName is a Trip method that returns an NSString pointer that contains the destination name.

There’s one final step: Beginning with iOS 7, the background color of all table cells is white (although the Interface Builder interface may lead you to think otherwise). You need to set the background color of the table cells to clear so that your background image will show through. Do this by adding the code in Listing 12-3 to MasterViewController.m.

Listing 12-3:  Setting a Clear Background for the Table Cells

- (void)tableView:(UITableView *)tableView
willDisplayCell:(UITableViewCell *)cell
forRowAtIndexPath:(NSIndexPath *)indexPath
{
cell.backgroundColor = [UIColor clearColor];
}

Run the app now and select Travel. Be prepared to be impressed with your work, as evidenced by what you see in Figure 12-12.

As I mention in the preceding section, because you deleted the Test Drive cell, the segue was deleted as well. That means you can no longer select Test Drive and have the view slide into place. But you’ll fix that in the next chapter.

image

Figure 12-12: The Master View controller user interface for iPad.

Updating the iPhone Storyboard File

You can reuse the iPad code you just developed for the iPhone version, but you will have to update the iPhone storyboard file with the same kind of changes you just did for the iPad storyboard. Remember, both the iPhone and iPad versions are your children, and you don’t want to hurt the iPhone app’s feelings by neglecting it.

The simplest way to update the iPhone storyboard is to review all the directions in this chapter that described how to update the iPad storyboard, and repeat those steps for the iPhone storyboard. But you do not need to repeat the code changes — the ones made in this chapter work fine for both iPad and iPhone.

The iPhone Master View controller interface should now look like Figure 12-13.

image

Figure 12-13: The Master View controller interface for the iPhone.