Investigating the Storyboard

Open Main.storyboard, and you’ll see something like Figure 12-13. The storyboard in this app is very complex, but don’t worry, you’ll get the hang of it by working through apps like this one.

The box on the top left might look familiar—it’s the overall app, with the master view controller docked to the left of the detail view controller. Navigation in the app is controlled through a table view, as shown on the top left, and the navigation controller regulates the contents of the detail view, as shown at the bottom.

The detail view has a label that says “Detail View Content Goes Here.” Before going further and editing the storyboard, consider how that gets updated.

Take a look at DetailViewController.h, and you’ll see this code:

#import <UIKit/UIKit.h>
 
@interface DetailViewController : UIViewController<UISplitViewControllerDelegate>
 
@property (strong, nonatomic) id detailItem;
 
@property (weak, nonatomic) IBOutletUILabel *detailDescriptionLabel;
@end

Note that even though there is only one control on the view, the label, there are actually two properties. One is the outlet for the label (called “detailDescriptionLabel”), and the other is something called “detailItem.” The latter of these is used to help the navigation controller communicate with the view and pass along the content that it wants the view to see.

The user picks the item from the master list, so let’s look at the “MasterViewController.m” file, where the code resides. Selecting an item on a table view fires the didSelectRowAtIndexPath code, so take a look at that. It should look like this:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSDate *object = _objects[indexPath.row];
self.detailViewController.detailItem = object;
}

As you can see, when the user selects an item, the current item on the table view is selected and is set to the detailItem of the detailViewController. This is how the content is passed to the view. When you look at the “detailViewController.m” file, you can see how the detail view controller handles it.

Take a look at its viewDidLoad method. This is called whenever the view is loaded.

- (void)viewDidLoad
{
    [superviewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    [selfconfigureView];
}

Every time you’ve seen that function so far in this book, you’ve probably seen the [super viewDidLoad] call, but the [self configureView] is new. So let’s take a look at it:

- (void)configureView
{
// Update the user interface for the detail item.
 
if (self.detailItem) {
self.detailDescriptionLabel.text = [self.detailItemdescription];
    }
}

As you can see, this function checks to see if something has been passed into it, and if something has been, the function sets the text of the label to the description of the item that was passed in.

Let’s now change the app so that instead of allowing the user to add random times and dates to the master list, you’ll add a static list of people that are characters from a book.

There are a few changes you’ll need to make to MasterViewController.m. First, go to the viewDidLoad method. It should look like this:

- (void)viewDidLoad
{
    [superviewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
self.navigationItem.leftBarButtonItem = self.editButtonItem;
 
UIBarButtonItem *addButton = [[UIBarButtonItemalloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAddtarget:selfaction:@selector(insertNewObject:)];
self.navigationItem.rightBarButtonItem = addButton;
self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllerslastObject] topViewController];
}

Delete all but the first and last lines. The code you are removing provides the user with the ability to add or remove content from the master list. You’re going to provide a static list of names instead. You can initialize that static list in viewDidLoad. When you’re done, your code should look like this:

- (void)viewDidLoad
{
    [superviewDidLoad];
_objects = [[NSMutableArrayalloc] initWithObjects:
@"Fintan",
@"Zack",
@"Ayako",
@"Nizhoni",
@"Sinclair",
@"Iara",
nil];
 
        self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllerslastObject] topViewController];
}

If you run your app on the iPad simulator, you’ll see something like Figure 12-14.

You’ll notice that when you select a character name, the name appears in the detail view. But let’s make that a little more interesting and have it render a picture of that character instead.

As you might recall from earlier in this section, the configureView method in DetailViewController.m executes when someone makes a selection from the list. Select DetailViewController.m from the project navigator and take a look. It sets the text of detailDescriptionLabel based on the description of the navigation item. That’s why it now renders the name of the character instead of the time and date as it did earlier. As a recap, here’s the code:

- (void)configureView
{
// Update the user interface for the detail item.
 
if (self.detailItem) {
self.detailDescriptionLabel.text = [self.detailItemdescription];
    }
}

Let’s update it so that it renders the address of an image instead. The address of the image will be http://ios7developer.com/book/<character name>.jpg, so the code to do that is here:

- (void)configureView
{
if (self.detailItem) {
NSString *imageAddress = [NSStringstringWithFormat:@"http://ios7developer.com/book/%@.jpg", [self.detailItemdescription]];
        imageAddress = [imageAddress lowercaseString];
self.detailDescriptionLabel.text = imageAddress;
    }
}

This builds an NSString called “imageAddress” with the preceding format and then converts it to lower case.

The code then renders the address into the detailDescriptionLabel. See Figure 12-15 for how that will appear at run time.

Of course, it would be much better if the code rendered the image instead of the address, so you’ll do that next.

Go back to your Main.storyboard file and zoom in on the detail view design. See Figure 12-16.

Drag the label toward the bottom of the view and make the font larger. Also add a UIImageView and change the title to read “Picture.” See Figure 12-17.

Using the assistant, CTRL-drag the UIImageView to DetailViewController.h and create an outlet called “imgCharacterPicture.”

Now that you have an outlet for the image, you can use this to load an image from a URL. This was covered in Chapter 11, so review that chapter if you need more detail.

To load the image, go back to the configureView function and add code to have it load the image into imgCharacterPicture, like this:

- (void)configureView
{
// Update the user interface for the detail item.
 
if (self.detailItem) {
NSString *imageAddress = [NSStringstringWithFormat:@"http://ios7developer.com/book/%@.jpg", [self.detailItemdescription]];
        imageAddress = [imageAddress lowercaseString];
NSURL *url = [NSURLURLWithString:imageAddress];
NSData * imageData = [[NSDataalloc] initWithContentsOfURL: url];
_imgCharacterPicture.image = [UIImageimageWithData: imageData];
self.detailDescriptionLabel.text = imageAddress;
    }
}

Now when you run your app, you can browse images of characters. See Figure 12-19.

The app works naturally in portrait mode too, as you can see in Figure 12-20.

And that’s it! You’ve just built your first iPad app, which has some of the same basic functionality as the email app that comes with iOS. Congratulations on taking this step in your journey.