Set up a basic split-view-based application

Question

I am trying to create the base for a split-view-based app, because over the last couple days, I have spent awhile looking at and trying tutorials that did not work, were incomplete, or were out of date.

What are the steps I should follow, and after I have the basics set up:

1. How do I change the name of the button on the toolbar?
2. I want to include a popover menu; how do I change the name at the top of that menu?

Answer 1

This tutorial is intended for beginners. If you have been coding in Objective-c for a while you probably won't learn anything here.

After this tutorial you will have a split-view-based app with three (or more) different views, and the popover menu for navigating your app.

Step 1: Getting some Apple code

Get (download) the MultiDetailsView sample code from Apple. http://developer.apple.com/library/ios/#samplecode/MultipleDetailViews/Introduction/Intro.html

This code provides us with a splitview-based application with 2 different views. Unless you didn't know this sample code existed, then this is no big deal.

---

Step 2: Ensuring everything works

Open up the project in Xcode. Build, then Run the project to insure that everything is working properly. When I tried to build and run the app, I ran into this error:

XCode could not find a valid private certificate/valid key-pair for this profile in your keychain

I realized that my certificate was out of date (I am guessing that this only came to light because the code was directly from apple?). If you happen to run into the same problem, check out this thread. Alternatively you can just download the latest version from Xcode from the app store.

Anyways, if everything is working properly, you should have the following 2 views:

---

Step 3: Adding our own views

Part a: Create the files

Now it is time to add some more views (which is probably what you're looking for).

Go to File -> New File...

If you're using Xcode 4: Select Objective-C Class, then for subclass choose UIViewController, and insure that 'Targeted For iPad' and 'With XIB for user interface' are checked.

If you're using Xcode 3: Select UIViewController subclass, then check 'Targeted for iPad' and 'With XIB for user interface'

The files will appear on your left-hand menu, you can drag them to the appropriate directory if they're in the wrong spots (the .h and .h should be under Classes, and the .xib should be under resources).

First, copy the contents of SecondDetailViewController.h to your .h file, and copy the contents of SecondDetailViewController.m to your .m file. Make sure that wherever it originally said SecondDetailViewController that it now has the name of your file.

my .h file:

my .m file:

---

Part b: RootViewController.m content

Next, open up the RootViewController.m

Currently, the 3 original .h files are being imported. We need to add the one we've just created.

Next, make your way down to the tableView method, and change the return value from 2 to 3. Every time you add a new view, you need to increment this number! (i.e. if you add another view after you're done this tutorial, change it to 4). Essentially, this method just returns how many views you have.

The method right under that handles what will be displayed in your menu. We need to do a few changes here. Since we're adding another option to the if/else statements, the original else must be changed to if else, and we must supply a condition, which in our case is just checking to see if its the second row (at index 1) (indexPath.row == 1)

The next method handles which view to display. Add another if statement. In the first line, where I have YourViewHereViewController in green, you should have the name of your .h / .m file. Then where I have @"YourViewHereViewController" in red, you should have the name of your .xib file.

---

Part c: the xib

Last but not least, we need to go deal with our xib file. First open up SecondDetailView.xib and copy the view. Then paste it in the .xib file you created (delete anything that might be there first). You can change the title of the view by double clicking on the text.

Last thing to do is row connections. Control-Click Files's Owner, and drag it to the toolbar and select toolBar (this is how the RootController button will appear on the toolBar).

Control-Click File's Owner again, then drag it to the view and select view.

---

If you build it run now, everything should work!

---

Here are some questions I had after I was at this point:

Q: How do I change the name of the button on the toolbar? A: The toolbar (and therefor button) is controlled from the RootViewController.m file, look for this method

- (void)splitViewController:(UISplitViewController*)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController:(UIPopoverController*)pc {

    // Keep references to the popover controller and the popover button, and tell the detail view controller to show the button.
    barButtonItem.title = @"Root View Controller";
    self.popoverController = pc;
    self.rootPopoverButtonItem = barButtonItem;
    UIViewController <SubstitutableDetailViewController> *detailViewController = [splitViewController.viewControllers objectAtIndex:1];
    [detailViewController showRootPopoverButtonItem:rootPopoverButtonItem];
}

Note barButtonItem.title = @"Root View Controller";, change the @ to whatever you want! Note: if you leave this field blank then the button will not appear!

Q: How do I change the name at the top of the popover menu?

A: Add the following line to declare/change the name. self.title = @"Menu";, in your RootViewController.m file, in the - (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { method.