372	CHAPTER 10: Storyboards

First Transition

It’s time to create our first segue. Start by dragging a View Controller from the object library into the layout area, dropping it somewhere to the right of the other views. We’re not going to display any special content here, because we really just want to jump into a segue. That being said, you need to have some way of visually confirming that the correct view is being shown, so drag a UILabel from the object library into the new view, change its text to Single View, and center the label vertically and horizontally in the view.

Now comes the segue-creation magic. Control-drag from the Single view cell in the middle table view controller to the new view you just added. You’ll see the Storyboard Segues popup again, this time without the rootViewController relationship you saw previously. It contains only the three kinds of segues that Interface Builder supports: Push, Modal, and Custom. Choose Push, because here we want to implement the standard navigation controller model involving pushing controllers onto a stack. Once you do this, you’ll see a new connection arrow appear, pointing to our new controller from the root view controller. You’ll also see that the Single view row in the root table view has acquired a disclosure arrow on the right side, to let the user know that there’s something more to be discovered by tapping that cell.

Run your app again, and you’ll see that the top cell now contains the disclosure arrow you just saw, and tapping the row takes you to the new view that you just set up. You’ll see the label you added, the title at the top of screen, and the back button, which is labeled Seg Nav (remember that we configured that a page or two ago). Press the back button to make sure it takes you back to the root view.

So, now we have a fair amount of view navigation going on, without having written any code at all. This elimination of boring glue code is one of the biggest wins involved when using segues. But, of course, you can’t eliminate all your code. Let’s see what it takes to make a GUI that displays a list of items in a normal, dynamically sized table view, and lets you select one of those items to drill down into more detail. Note that this will require a bit of code so the list controller can pass the selected item off to the detail controller. With segues, that sort of thing can be handled a bit more simply than before, as you’ll soon see.

A Slightly More Useful Task List

We’re going to make a slightly more capable version of the task list that we created in the Simple Storyboard example earlier. In this version, you’ll see a list of tasks, and also be able to tap on one to edit it. Fortunately, we can build on what we created earlier to make this go pretty easily.

Open the Simple Storyboard project you created earlier in the chapter, and drag the

BIDTaskListController.h and BIDTaskListController.m files from that project onto the Seg Nav folder in the Seg Nav project. When Xcode asks, make sure you turn on the checkbox telling Xcode to copy the files into the project. This will copy the files from the

www.it-ebooks.info

CHAPTER 10: Storyboards

373

Simple Storyboard project folder on your hard drive into the Seq Nav folder on your hard drive and add the two files to the Seq Nav project.

Next, select the Seg Nav folder in the project navigator, and choose File New New File… to make a new file. Select the Cocoa Touch section on the left, select

UIViewController subclass, and click Next. Name this class BIDTaskDetailController, and choose UIViewController as its superclass. Do not have Xcode create the accompanying nib file. Create this class, but don’t edit it in any way just yet. We’ll get back to it soon enough, after setting up the GUI.

Switch over to MainStoryboard.storyboard. It’s time to create the next scene in our storyboard, which will be the task list display. Drag a UITableViewController from the object library to the layout area, placing it to the right of the other controllers. Use the identity inspector to change the new controller’s class to BIDTaskListController.

In the dock, select the table view associated with the new controller. Now, open the attributes inspector and take a look at the Content popup menu. Since the table view we just added will display a dynamic list of items, we’re going to leave it set to Dynamic Prototypes instead of switching to Static Cells.

We’ll use the same two prototype cells we described earlier in the “Dynamic Prototype Cells” section. Either flip back there to see how those were configured or open Simple Storyboard and copy both cells, pasting them into your new table. To recap, the critical configuration points are making sure that each cell has a label, each label has its tag set to 1, and the cells have plainCell and attentionCell set as their identifiers.

If you want to copy the two cells from Simple Storyboard instead of re-creating them, switch over to the Simple Storyboard project and find the two table view cells in the

Task List Controller Scene. They should be labeled plainCell and attentionCell. Close the disclosure triangles, and select both cells (that way, you get the labels, too). Copy, then switch over to the Seg Nav project, select the new table view, and paste. Your cells and labels should appear in your new controller. Delete the original cell, leaving you with two prototype cells instead of three.

Viewing Task Details

Now, we’re going to add another scene to manage the detail display that’s shown when the user selects a row in the task list. Drag a View Controller (not a Table View Controller) from the object library to the layout area, placing it to the right of the previous scene. Use the identity inspector to change the controller’s class to

BIDTaskDetailController.

This scene is all about editing the details of a chosen task, which in our simple case, means just editing a string. To accomplish this, we’ll use a UITextView, the full-featured multiline text editor employed throughout iOS. Drag one of those from the object library into the new scene. You’ll see that it snaps into place, filling the entire space. Since we want to let users edit this text, filling the screen isn’t what we want. We’ll be better off with a smaller text view that just fills the space that the on-screen keyboard doesn’t cover. Grab the resize handle in the center of the bottom edge, and drag it upward until

www.it-ebooks.info

374	CHAPTER 10: Storyboards

the text view is just 200 pixels tall. A coordinate display appears at the top of the view when you start dragging, to make this easier.

Next, we need to add an outlet to the controller so that it can find this text view to set and retrieve the string it contains. We can create and connect that outlet in one step using Interface Builder’s drag-to-code feature, so let’s do that. First bring up the assistant editor. With the BIDTaskDetailController or any part of its view selected in the layout editor, the assistant editor should show the controller’s header file, BIDTaskDetailController.h. If not, then the assistant editor probably isn’t in automatic mode. You can fix that using the jump bar above the assistant editor, clicking the icon just to the right of the arrows, and selecting Automatic.

Now, select the text view, and control-drag from it to the code, dropping it anywhere between the @interface and @end lines. In the popup that appears, make sure the Connection type is set to Outlet, and name it textView. Also make sure Storage is set to Weak, and then click Connect. This creates a new outlet in the BIDTaskDetailController.h, and synthesizes the getter and setter in BIDTaskDetailController.m.

Make More Segues, Please

With the basic GUIs for our new scenes set up, it’s time to connect them using segues. Start by heading back to our root table view (the one with the Simple View and Submenu cells). Select the Sub-menu cell, and control-drag from it to the task list controller. It is probably easiest to do this in the dock. Note that this control-drag will be skipping over the Single View scene. In the popup that appears, select Push so that the segue will push the task list scene onto the stack when Sub-menu is tapped.

Now, select the first prototype cell in the task list controller scene (it’s called Table View Cell – plainCell in the dock, and you might need to open a disclosure triangle to see it), and control-drag from there to the Task Detail Controller, again selecting Push. Do the same for the second prototype cell (it’s called Table View Cell – attentionCell in the dock), so that both are connected to the Task Detail Controller. This will show up as two arrows pointing from the task list to the task detail. Each arrow represents a segue, and each comes from a specific prototype cell. When you run the app later, all the cells that are created for the task list are duplicated from one of these prototypes, so each of them will have a segue that enables them to create and activate a task detail controller.

At this point, our GUI configuration is complete. All we need to do is implement a few methods to pass the selected task from the list view to the detail view, then back the other way after the user has had a chance to view and edit the task.

Passing a Task from the List

Select BIDTaskListController.m, and add this method to the class at the end of the file, just above the @end:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { UIViewController *destination = segue.destinationViewController;

www.it-ebooks.info

CHAPTER 10: Storyboards

375

if ([destination respondsToSelector:@selector(setDelegate:)]) { [destination setValue:self forKey:@"delegate"];

}

if ([destination respondsToSelector:@selector(setSelection:)]) { // prepare selection info

NSIndexPath *indexPath = [self.tableView indexPathForCell:sender]; id object = [self.tasks objectAtIndex:indexPath.row];

NSDictionary *selection = [NSDictionary dictionaryWithObjectsAndKeys: indexPath, @"indexPath",

object, @"object", nil];

[destination setValue:selection forKey:@"selection"];

}

}

This new prepareForSegue:sender: method is called in our controller whenever our controller’s view is about to be replaced by another controller’s view as a result of a segue being activated. In our case, this means that when any of the cells in our table view is selected, the cell will activate its associated segue, and this method will be called in our controller. This gives us a chance to prepare data to pass along to the next controller. In the past, we did this sort of thing in a table view delegate method that was called when a row was selected, but this new way is a bit more flexible. We could, for instance, replace our table view cells with buttons, and as long as those buttons use segues to launch other view controllers, this method will be called in the same way as it is now.

We have some new things here, so let’s walk through the prepareForSegue:sender: method together. Through the segue parameter that we’re given, we can access the destinationViewController (the one that’s going to be displayed in a moment) and the sourceViewController (the one that’s about to be removed from the display). In this case, we’ll use the destinationViewController property to configure the detail view controller, so we put it into a local variable for easy access:

UIViewController *destination = segue.destinationViewController;

Next, we configure the destination’s delegate, if it has one, to point back at us. That will let the destination send us back data when it’s finished. Right now, our detail display doesn’t have a delegate property, but it will later.

if ([destination respondsToSelector:@selector(setDelegate:)]) { [destination setValue:self forKey:@"delegate"];

}

KEY-VALUE CODING

Instead of calling a setDelegate: method, we’re using something called key-value coding (KVC), which allows us to use getters and setters on any object indirectly, using strings instead of method names. KVC is a core feature of the Cocoa Touch frameworks, and its main methods—setValue:forKey: and valueForKey:—are built into NSObject, so they’re available everywhere. We’re not covering this topic in detail in this book, but are using it briefly here.

www.it-ebooks.info