iOS 6 Application Development For Dummies (2013)

Part IV. The Model and Application 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.

imageThe 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

While RTMasterViewController 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 application functionality. Here’s how you’d start things off:

1. In the Project navigator, select MainStoryboard_iPad.

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 were a new feature in iOS 5.0 — 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 (as you will in Chapter 20 where you create cells based on the information for each destination in the Destinations plist), you can format the cells in the storyboard.

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

image

Figure 12-1: You start with static cells.

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.

imageNotice 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.

As I explain in Chapter 20, Table views usually 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.

If you’re using the Table view only as a type of “table of contents” for your application, 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 application is indexed, so it can be a pretty powerful tool.

imageA 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.

imageGrouped 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

Figure 12-2: Static cells and three sections.

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

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.)

7. Select the first Table View Cell in the first Table View Section in the Document Outline in the Master View Controller – Master Scene and, after the Attributes inspector refreshes, scroll down (if needed) to the View section and select Clear Color from the section’s Background drop-down menu, as shown in Figure 12-4.

image

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

image

Figure 12-4: Make the Table View cell background clear.

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-5.

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.)

In Figure 12-6 on the left, I’ve entered Weather in the Text field (remember to press Return) and on the right, I’ve changed the Font from System Bold to just plain System by selecting the Font icon (the little T inside the Font field) and choosing System in the pop-up Font menu.

10. For the Label, select Clear Color from the View section’s Background drop-down menu, as shown in Figure 12-7.

image

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

image

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

image

Figure 12-7: Make the Label Background clear.

11. Finally, and this is the pièce de résistance, select White Color from the Label section’s Text 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-8.

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

You have to treat the Find cell 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 he or she wants to find in the cell, you’ll have to format it on your own.) Continue with the steps that follow.

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

14. With the label selected, go to the Attributes inspector and enter Find: in the Text field, change the font to System (if it’s not already set to System), make the Label and Table View Cell backgrounds Clear Color, and set the text to White Color (if it’s not already set that way), as you did in Steps 7, 10, and 11.

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

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

16. 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.

17. 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.

image

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

image

Figure 12-9: Add a label.

image

Figure 12-10: Add a text field.

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

You can see the results in Figure 12-11.

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

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

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

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-13. 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 Find cell complete.

image

Figure 12-12: The finished Content controller.

image

Figure 12-13: 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 RTMasterViewController.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 RTMasterViewController.m.

Listing 12-1: Updating the RTMasterViewController Implementation

#import “RTMasterViewController.h”

#import “RTDetailViewController.h”

#import “RTAppDelegate.h”

#import “Trip.h”

Now add the bolded code in Listing 12-2 to the viewDidLoad method in RTMasterViewController.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”;

  RTAppDelegate* 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 RTMasterViewController’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 RTAppDelegate, you assigned its pointer to the trip property to make it accessible to the view controllers.

You find RTAppDelegate 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:

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

image destinationName is a Trip method that returns an NSString pointer that contains the destination name. (You added this method in Chapter 11 when you began working with the Trip class.)

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

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-14: 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-15.

image

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