In the book, the Make, Model, and Year of a car are each edited using separate scenes. Make and Model share a text editing scene, and Year uses a picker view. The result is a lot of wasted screen space, and a screen that does not look good. You can give the user a better experience by reducing the number of screens and using space more effectively.

A UITableView provides a way to present a list of attributes. By using custom cells, you can easily edit those attributes, allowing the user to edit in place, or close to in place. As you will see in a later part, items using UIPickerView as the editor, only show the picker when they are being edited. This is similar to the Calendar app. When you are editing an event, the Start and End days/times of the event only show the editing picker when you tap on them. Once you select another attribute, the picker collapses. You will implement this for the Year in Part 4, and for the Fuel in Part 5.

In this Part 1, you add the table view used for editing. This includes changes to the storyboard, and making some changes in ViewCarTableViewController to show the editor.

Adding the Editor

The first step is adding the UITableViewController that will become the editing scene. You make all of the changes to the finished version of the sample code project (all of the sample code from the book is on GitHub.) If you have not already done so, download the sample code, and make a copy of the "CH15 CarValet Finished" project and rename the folder for the copied version to "EC01 CarValet". Open the copied project in Xcode and then follow these steps to add and show the UITableViewController:
1. Show the storyboard editor by selecting "Main_iPhone.storyboard" from the list of files.
2. Drag a UITableViewController below the View Car Table View Controller.
3. Now drag a UIBarButtonItem onto the right side of the navigation bar. When you are done, the scene looks like Figure EC1-1
Stacks Image 14

Figure EC1-1

Showing the Edit Modal

Select the bar button item and use the attributes editor to set the Style to Plain and Identifier to Edit. Now control-drag from the button to the new table view controller and select a modal Action segue.

Run the app in the simulator, navigate to car detail and tap the Edit button. The new table view controller appears, but there is no way to close it. For most of the book you used a push segue. Using a push segue is like sending pushViewController:animated: to a UINavigationController. That takes care of making sure the navigation bar is added to the screen for the new view controller. Using a modal segue is like asking a UIViewController to present another controller (uses presentViewController:animated:completion:.) The navigation controller is not involved.

There are several ways you can deal with this situation. The easiest is to embed the new editing table view controller in its own navigation controller. The new navigation controller takes care of adding the navigation bar:
1. Select the table view controller you added in Step 2 above. Make sure the controller is selected. The best way to do this is to select the black bar below the controller.
2. With the controller selected choose Editor > Embed In > Navigation Controller from the menu.
3. Set the title of the navigation bar in the edit controller to Edit Car

Returning from the Edit Modal

Now the edit controller has a navigation item you can add buttons for completing the edit. you show Cancel and Done buttons, just like the Calendar app event editor. Each one returns to the car detail scene, though only Done will update the car information. You add that functionality in Part 6 of this example.
1. Drag a UIBarButtonItem onto the left side of the menu bar.
2. Drag another bar button onto the right side.
3. Use the Attributes editor to set the Style of the left side button to Plain and the Identifier to Cancel.
4. Set the both Style and the Identifier of right side button to Done. It is important to set the Style to Done. That controls the bolder or emphasized look of the Done button.
Returning to the detail car view requires unwinding the segue. To do that you need to add a segue action method, carEditDone:, in ViewCarTableViewController. Add the following code just below didReceiveMemoryWarning in ViewCarTableViewController.m:
#pragma mark - Unwind Segue Methods

- (IBAction)carEditingDone:(UIStoryboardSegue*)segue

The last piece in returning the the car detail view is connecting the Cancel and Done buttons to the new exit method:
1. Select the new editing scene by clicking in the black bar below the controller.
2. Control-drag from the Cancel button to the Exit segue and choose the carEditingDone: method as the target.
3. Choose the newly added unwind segue from the list to the left of the main IB (Interface Builder) window and give it the identifier CarEditCancelled.
4. Create another exit segue from the Done button and give it the identifier CarEditDone.
Run the app in the simulator. Now you can open the edit dialog and return to car detail using either the Cancel or Done buttons. Of course at the moment, all you see is an empty table view.


In Part 1 of Adding Car Detail editing you added the table view controller for editing the attributes of a car. So far all you have is a button to show the table view controller and a way to get back. In Part 2 you will add a custom class for the new editor, set the car to be edited, and display the values for Make, Model, Year, and Fuel.
1. Show the storyboard editor by selecting "Main_iPhone.storyboard" from the list of files.
2. Drag a UITableViewController below the View Car Table View Controller .
3. Now drag a UIBarButtonItem onto the right side of the navigation bar. When you are done, the scene looks like Figure EC.1