If it’s anything like last year, it’s going to be pretty miserable. 5,000 knowledge-hungry developers from all around the world trying to get to the same sessions as you. There will be lines for everything; bathrooms, presentation rooms, lunch, labs, store, escalators. Pretty much anywhere you want go, there will hundreds of others who want the same thing.

At the end, it’s worth it though. The information presented is very solid. They don’t cover everything but enough to get you started. After you walk out of there, you should be able to build a semi-complex iPhone/iPad app. Not bad for ~4 days of sessions.

For all you first-comers, here are a few words of advice:

1. If you want to see the keynote, count on seeing some hardcore fans camped out in front of Moscone as early as 1-2am. Getting there at 6am will put you somewhere at the end of the North-West side of Moscone West. You will still be able to get inside the keynote room at that point. Once people condense, the line isn’t really as long as it seems at first. I’d pack light, bring snacks and something small to sit on. You will get cold after a while no matter what the predictions say so have a jacket ready.
2. There will be a bunch of companies going around the long line giving away SWAG. Don’t take anything you don’t want because you’ll have to hold it until you get to a trash can. The cute girls giving it away and trying to sign you up for their newsletter aren’t really interested in you, no matter how convincing they are. So don’t be gullible and be strong!
3. Once the line starts moving, don’t get your hopes up just yet. You’ll make several stops inside the building before reaching the presentation room. The good thing is, once you’re deep enough, Apple will provide breakfast pastries, coffee and water. Don’t run to it, there will be plenty of it.
4. The session rooms will fill up rather quickly. Always know what session you want to attend next and where it is. If you screw around for too long, you may not get in.
5. It’s easy to forget about the lunchtime speakers. Don’t waste your time pretending you’re coding in one of the rest areas and go see the lunchtime speakers. They’re really worth seeing. Their success stories are very inspiring and educational.
6. When it’s time for lunch, you don’t have to rush. There is plenty of food and lines are fairly manageable. It’s much better than lines to bathrooms or sessions. The food is made for masses so don’t expect Hubert Keller’s cuisine. A vegetarian dish will always be available so meat-haters need not worry.
7. For all of our sake, please do not type during sessions. Both slides and session videos will become available a couple months after the conference so don’t try to copy all the source code you see on the screen. There is a lot of loud typers out there and there really isn’t anything more annoying then listing someone hammering on their keyboard during a presentation. If a session bores you or you just prefer to IM your buddies instead, please leave the room so that someone who is actually interested can attend.
8. Evening events are fun. I’m not going to go as far as saying they’re unforgettable but they’re fun. Again, it used to be a lot more intimate a few years back but now that everything is being catered to five thousand people, it’s not the same. Stump the experts is one of those events that is highly hyped. It’s full of inside jokes that date all the way back to when WWDC was still in diapers. You may not laugh at them but it’s very intriguing to learn some of the “behind the scenes” tidbits you wouldn’t hear anywhere else. The prizes have been quite substantial too so if you happen to answer a difficult question, you may walk out of there with a Macbook Pro.
9. In general, don’t bring too much with you. You’ll have to carry it around all day long and that’s not fun. The bags and laptop sleeves Apple gives out when you pick up your badge are usually pretty uncomfortable to carry so don’t feel obligated to use them throughout the conference. My bag from last year is still in its plastic cover, untouched. It wanted to be a backpack but it was really a glorified laptop sleeve. Don’t expect to get two free phones like at Google IO.

Among other conferences, like JavaOne, WWDC rates as one of the most exciting ones. The whole thing is designed as any other Apple product – very pretty to look at but it has its share of problems. There was a controversy going on about the cost of admission this year. There was no pre-registration period since Apple knew they would sell out quickly anyway. The price tag of $1,595 is up there but still cheap compared to other conferences. Only, the “other” conferences are usually paid for employers. WWDC attendees are mostly individual contributors who pay for the ticket out of their pockets. Therefore, $1,600 in addition to transportation, room and board for 5 days can be quite an expense.

For those attending, you’re going to have lots of fun and I hope to meet some of you there!

Prerequisites

If you were able to follow my previous tutorials, you’re going to be just fine with this one.  I assume that you have iPhone SDK 3.x downloaded and installed, know how to create an empty project and files in Xcode and know a thing or two about Objective-C and Cocoa touch. While I am using iPhone SDK 3.2 Beta, I compiled this project against version 3.1.3, which is the current live version.

Let’s get started!

1 .Set up your project

In Xcode, go to File -> New Project and choose Navigation-based Application from the iPhone OS tab. Name the application IndexedTable. At this point, you should have a runnable app with an empty table in it.

2. Create a data source

Instead of hardcoding a bunch of values, country names and whatnot, let’s create a simple method that will generate a bunch of strings from the letters of the alphabet so that our UITableView has something to work with.

Create a new class called DataGenerator. Right-click on the Classes group in the project browser and choose New File. Let the file be an Objective-C class (subclass of NSObject) and name it DataGenerator. This class will only have one static method (for now) that will simply return an array of words from letters. As such, we’ll name it wordsFromLetters.

In DataGenerator.h, insert the following code:

@interface DataGenerator : NSObject {
}
 
+ (NSArray *) wordsFromLetters;
 
@end

Now, let’s implement this method. Open DataGenerator.m and put this code in it:

@implementation DataGenerator
 
#define WORD_LENGTH 5
 
static NSString *letters = @"abcdefghijklmnopqrstuvwxyz";
 
+ (NSArray *) wordsFromLetters {
    NSMutableArray *content = [NSMutableArray new];
 
    for (int i = 0; i < [letters length]; i++ ) {
        NSMutableDictionary *row = [[[NSMutableDictionary alloc] init] autorelease];
        char currentWord[WORD_LENGTH + 1];
        NSMutableArray *words = [[[NSMutableArray alloc] init] autorelease];
 
        for (int j = 0; j < WORD_LENGTH; j++ ) {
            if (j == 0) {
                currentWord[j] = toupper([letters characterAtIndex:i]);
            }
            else {
                currentWord[j] = [letters characterAtIndex:i];
            }
            currentWord[j+1] = '\0';
            [words addObject:[NSString stringWithCString:currentWord encoding:NSASCIIStringEncoding]];
        }
        char currentLetter[2] = { toupper([letters characterAtIndex:i]), '\0'};
        [row setValue:[NSString stringWithCString:currentLetter encoding:NSASCIIStringEncoding]
               forKey:@"headerTitle"];
        [row setValue:words forKey:@"rowValues"];
        [content addObject:row];
    }
 
    return content;
}
 
@end

I’m not going to spend a whole of time explaining what’s going on here because this tutorial is really about adding an index bar to your UITableView. But let’s briefly talk what’s it all about. This method loops through an array letters one-by-one. For each letter it then generates a bunch of words to fill up our content. The final structure of the NSArray we’re returning is going to look something like this:

NSArray =>

1. NSDictionary
   • headerTitle => ‘A’
   • rowValues => {”A”, “Aa”, “Aaa”, “Aaaa”}
2. NSDictionary
   • headerTitle => ‘B’
   • rowValues => {”B”, “Bb”, “Bbb”, “Bbbb”}
3. etc.

You’ll see how we’re using this array later on. Also note that this list is implicitly ordered.

3. Fill in UITableView with values from DataGenerator

Next we’re going to populate the currently empty table with data we get from our data generator. Open RootViewController.h and add these two instance variables to the class:

#import "DataGenerator.h"
 
@interface RootViewController : UITableViewController {
    NSArray *content;
    NSArray *indices;
}

content will hold our array of dictionaries while indices will hold all initial letters for each word in the list. Let's fill those up. Open RootViewController.m implementation file and override the method viewDidLoad with the following:

- (void)viewDidLoad {
    [super viewDidLoad];
    content = [DataGenerator wordsFromLetters];
    indices = [[content valueForKey:@"headerTitle"] retain];
}

You can see that we're using [DataGenerator wordsFromLetters] to simply fill in the content variable. The second line of that method returns all keys from the dictionaries in content as an array. So indices now holds all letters of the alphabet.

We next override the two methods that tell our UITableView how many sections it has and how many rows there are in each section.

// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return [content count];
}
 
// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [[[content objectAtIndex:section] objectForKey:@"rowValues"] count] ;
}

The number of sections is equal to the number of letters in our list and the number of rows of each section is equal to the count of each array under its corresponding letter.

Finally, we implement cellForRowAtIndexPath so that it displays words from our list in the table. We handle headers for sections in titleForHeaderInSection. This method queries our content at a particular section and demands a headerTitle to be returned as header of that section.

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:CellIdentifier] autorelease];
    }
    cell.textLabel.text = [[[content objectAtIndex:indexPath.section] objectForKey:@"rowValues"]
                           objectAtIndex:indexPath.row];
 
    return cell;
}

You should be able to run your app now (CMD + R) and see something like this:

4. Add index to the table

There is nothing new in what we've done so far. We simply filled in a UITableView with some data. We're now ready to add our index to it. For that, we'll need to implement two methods: sectionIndexTitlesForTableView and sectionForSectionIndexTitle.

Add this code to RootViewController.m:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
    return [content valueForKey:@"headerTitle"];
}
 
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
    return [indices indexOfObject:title];
}

sectionIndexTitlesForTableView: In order to properly render the index, the UITableView needs to know all index titles to display. This method returns an array of strings containing all indices. In our case, A, B, C, D, etc.

sectionForSectionIndexTitle: When you start scrolling through the index, the table needs to know how far down/up to scroll so that the letter you're touching corresponds the appropriate section in the table. This method returns an index value (integer) of the section you're currently touching in the index.

One more thing we need to do before we run our app is to add titles to each section header in UITableView.

- (NSString *)tableView:(UITableView *)aTableView titleForHeaderInSection:(NSInteger)section {
	return [[content objectAtIndex:section] objectForKey:@"headerTitle"];
 
}

5. Run your app

If everything went well, you should now be able to run your app and see the final product. You'll see the index on the right and scrolling over it will scroll the table appropriately.

Conclusion

Voilà! That wasn't that hard was it? The main get-away from this tutorial are the two methods you need to implement in order for the index to show up and function properly: sectionIndexTitlesForTableView: and sectionForSectionIndexTitle:. In the next tutorial, we'll cover how to add a search bar to this table.

The complete source code for this tutorial can be found here: Indexed UITableView

The way settings are used today is by specifying Settings.bundle and Root.plist files in your project. This lets Settings.app know about your app and its settings. The obvious downside of this approach is that app settings are separated from the app itself.

InAppSettingsKit uses a hybrid approach to this problem. It still uses the same resource files to create your settings bundle. However, your settings will be available both within the app and in Settings.app. This is great because you don’t have to create any additional metadata files to support this feature while still maintaining the existing functionality.

I’ll play around with it a bit and post back with a report. For now, head over to FutureTap’s or Edovia’s blogs for release notes and more information.

The first one of these back in 2007 was still pre-SDK.  It was primarily concentrated around web-based apps. This is when I developed CiUI to serialize production of web-based apps. CNET is still using it (http://reviews.cnet.com/4250-1-0.html) but development of their mobile sites has since been handed over to CBS Mobile.

In any case, if any of you are going to be in attendance this Thursday, hope you come say Hi!

There is a very easy way of creating a tab bar application. In fact, it’s so easy it requires no work whatsoever. When you choose to create a new iPhone application in Xcode, one of the options is Tab Bar Application. Just the bare-bones template provided by Apple gives you a fully-functioning app with two tabs. That is not what this tutorial will be about. We are going to create a tab bar controller programatically. It’s really a lot easier than most people think.

Prerequisites

This tutorial is a continuation of my previous tutorials so if you haven’t followed them, it’s a good time to catch up.

We’re going to be starting off from a slightly modified version of the previous source code. You can download the primer code for this tutorial here: MyDVDLibrary04Primer. The only changes made were some name changes (DetailViewController became DvdInfoViewController) and I organized all classes into groups.

Also, I’ve recently upgraded to OS X Snow Leopard + Xcode 3.2 with iPhone SDK 3.0 (not 3.1 yet) so the project was compiled on that platform.

1. Create DetailViewTabBarController class

We’re going to add a view controller that will create a tab bar controller with three tabs: Info, Stats and Borrowers. Each of the tabs will be a separate, self-contained view controller. We already created one of them, DvdInfoViewController, which was previously called DetailViewController. The reason I renamed it is that the real detail view controller will now be our tab bar controller.

In Xcode, right-click on the View Controllers folder from the the Groups & Files panel on the left and choose Add -> New File. Choose UIViewController subclass from the Cocoa Touch Class section and click Next. Name the file DetailViewTabBarController.

Note: You may be wondering why we didn’t choose a UITabBarController subclass instead. As you can see that option wasn’t even offered. This is because UITabBarController is not meant to be subclassed. Instead, we create a generic view controller to which a tab bar controller will be assigned.

2. Create DvdStatsViewController and DvdBorrowersViewController

These are the new view controllers I mentioned previously. We already have our DvdInfoViewController that will be in the first tab, so let’s create the remaining two.

In Xcode, right-click on the View Controllers folder and choose Add -> New File. Choose UIViewController subclass and name the file DvdStatsViewController.

To create DvdBorrowersViewController do the same thing, only name it DvdBorrowersViewController.

That’s it about those two controllers for now. I’m not going to cover actually filling them with any content since that’s not the point of this tutorial. We will leave them here as placeholders for future tutorials when we cover Core Data and RSS feed processing.

3. Set up DetailViewTabBarController

Since we’re going to be coming to the tab bar controller from the RootViewController, we need to pass it DVD info from the row that was tapped. We can do that in a custom init method in DetailViewTabBarController. You’ll see how it’s used later when we instantiate it in didSelectRowAtIndexPath method of RootViewController.

We’re also going to need a handle on the data about the DVD that was tapped on the front page.

Declare it all in DetailViewTabBarController.h

@interface DetailViewTabBarController : UIViewController {
    NSDictionary *dvdData;
}
-(id)initWithDvdData:(NSDictionary *)data;
@end

Next, let’s define initWithDvdData in DetailViewTabBarController.m

-(id)initWithDvdData:(NSDictionary *)data {
    if (self = [super init]) {
        dvdData = data;
    }
    return self;
}

All we’re doing here is setting local instance variable dvdData to whatever is passed in. We now have a handle on the DVD data and can use it across all the view controllers.

4. Implement loadView method in DetailViewTabBarController

loadView is a method on UIViewController that can be overridden in case you want to build your view from ground up. That’s exactly what we want to do so let’s override loadView now. Let’s discuss it piece by piece;

- (void)loadView {
    UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
	contentView.backgroundColor = [UIColor whiteColor];
	self.view = contentView;
	[contentView release];

Borrowing the biblical line; in the beginning there was nothing, we need a base view to build upon. So we created an empty view with a white background that takes up the whole screen. We will attach all the other views to it.

Now we need to instantiate all three of our controllers. Each one will become one tab in the tab view.

    // Declare all three view controllers
    DvdInfoViewController *dvdInfoController = [[DvdInfoViewController alloc]
                                                initWithDvdData:dvdData
                                                nibName:@"DetailViewController" bundle:[NSBundle mainBundle]];
    DvdStatsViewController *dvdStatsViewController = [[DvdStatsViewController alloc] init];
    DvdBorrowersViewController *dvdBorrowersViewController = [[DvdBorrowersViewController alloc] init];
 
    // Set a title for each view controller. These will also be names of each tab
    dvdInfoController.title = @"Info";
    dvdStatsViewController.title = @"Stats";
    dvdBorrowersViewController.title = @"Borrowers";

You see the dvdInfoController is initialized the same way we did it before in RootViewController. We pass it dvdData that we get from our custom initialization method.

Now the meat of this method, let’s create the actual tab bar controller and give it the three view controllers. You can note that we’re setting the bounding frame to be 320 pixels wide and 460 pixels high. We shave off 20 pixels because the title bar is already taking up, well, 20 pixels.

UITabBarController creates tabs when you call setViewControllers on it and pass it an array with your controllers in it. That’s what’s happening here.

    // Create an empty tab controller and set it to fill the screen minus the top title bar
    UITabBarController *tabBarController = [[UITabBarController alloc] init];
	tabBarController.view.frame = CGRectMake(0, 0, 320, 460);
 
    // Set each tab to show an appropriate view controller
    [tabBarController setViewControllers:
     [NSArray arrayWithObjects:dvdInfoController, dvdStatsViewController, dvdBorrowersViewController, nil]];

And finally, let’s clean up objects we no longer need from memory and add the tab controller view to our parent view so we can actually see it.

    // Clean up objects we don't need anymore
    [dvdInfoController release];
    [dvdStatsViewController release];
    [dvdBorrowersViewController release];
 
    // Finally, add the tab controller view to the parent view
    [self.view addSubview:tabBarController.view];
}

5. Modify RootViewController’s didSelectRowAtIndexPath method to display DetailViewTabBarController

The last step we need to take is to modify didSelectRowAtIndexPath in RootViewController to display our newly created tab bar controller instead of the DvdInfoViewController we showed in the last tutorial.

Open up RootViewController.m and modify didSelectRowAtIndexPath to look like this:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    DetailViewTabBarController *controller = [[DetailViewTabBarController alloc]
                                              initWithDvdData:[dao libraryItemAtIndex:indexPath.row]];
    controller.title = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
    [self.navigationController pushViewController:controller animated:YES];
    [controller release];
}

At this point, you can run your project and tapping on a DVD title should take you to the tab bar controller which has three tabs. The first tab contains the movie info, the remaining two are empty. As I mentioned before, we’ll fill those in in the later tutorials or it can be left as an exercise for the reader.

6. Add icon to tabs

The tabs now only have a textual title. Let’s make it prettier by adding an icon to each of them. I only use one image (included in the project) for demonstration purposes but you can have a different image for each tab. The image should be 32×32 pixels PNG file. You don’t need to to create the pretty, shiny, gray and blue images. Just pass it a normal image and the SDK will do the rest.

Add this in the loadView method in DetailViewTabBarViewController.m implementation file right after we set the titles of the controllers:

    // Set a title for each view controller. These will also be names of each tab
    dvdInfoController.title = @"Info";
    dvdStatsViewController.title = @"Stats";
    dvdBorrowersViewController.title = @"Borrowers";
 
    dvdInfoController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];
    dvdStatsViewController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];
    dvdBorrowersViewController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];

If everything went well, you should see your app looking like this

Conclusion

While it may seem easier to create everything in the Interface Builder, you can see that in this case creating a tab bar controller was a breeze. Adding new tabs/view controllers to it is as easy as adding an object to an array. I hope this tutorial connecting the dots how to go from a table view to a tab bar view in a navigation-based application.

You can download the complete source code to this tutorial here: My DVD Library Tutorial 4

I’m going to build this tutorial on the previous two so if you haven’t checked them out yet, you can see the first one here and the second one here. You can also download the source code on the bottom of each tutorial.

What we’ve done so far

We used UITableViewController to build out our root view controller that lists all the DVDs from our data file. Then we customized each cell by adding a DVD cover and some basic info about each movie. Tapping a row in the table caused the app to go to a detail page which was also a table displaying expanded info about the selected movie. That’s the part we’re going to work on now.

1. Download some source code to get your started

Since we’re going to be completely removing the detail view controller we used in the previous tutorials, let’s just start from there. Instead of walking you through deleting the controller and removing the appropriate functionality, download this source code that will get you started. You’ll get the root view controller with customized cells in it. However, tapping on any of the rows won’t do anything, yet. Download the primer project here: MyDVDLibrary03Primer.

2. Enhance test data file

Since our test data file only contains title, length, image and release date for each movie, that’s not going to cut it when trying to design a detail view page. We’ll at least want to add the description of the movie and maybe also its genre. This can be very tedious to do in a plist like we’re using right now but it will get a lot easier once we start using Core Data that I will cover in later tutorials.

I won’t make you add all the data by hand so for a shortcut, download the completed plist file here and replace your existing one that can be found in Xcode under the Resources folder: TestData.plist.

3. Create new DetailViewController class

In Xcode’s file browser on the left, right-click on the Classes folder and choose Add -> New File… . Under Cocoa Touch Classes group choose UIViewController subclass and make sure to check the With XIB for user interface checkbox. This will not only create our subclass but also the NIB file that we’ll use to layout our UI components.

4. Set up UI outlets

We now need to set up all properties in our controller that will be used on the detail view page. There will be an image view for the DVD cover, a label for the title, release date, length, genre and a text view for the description. Add this to the header file of the DetailViewController (DetailViewController.h):

@interface DetailViewController : UIViewController {
    IBOutlet UIImageView *coverImageView;
    IBOutlet UILabel *titleLabel;
    IBOutlet UILabel *releaseDateLabel;
    IBOutlet UILabel *lengthLabel;
    IBOutlet UILabel *genreLabel;
    IBOutlet UITextView *descriptionTextView;
}
 
@property (nonatomic, retain) UIImageView *coverImageView;
@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UILabel *releaseDateLabel;
@property (nonatomic, retain) UILabel *lengthLabel;
@property (nonatomic, retain) UILabel *genreLabel;
@property (nonatomic, retain) UITextView *descriptionTextView;
 
@end

Synthesize the properties in the implementation file (DetailViewController.m):

@synthesize coverImageView, titleLabel, releaseDateLabel, lengthLabel, genreLabel, descriptionTextView;

5. Lay out and connect UI components in Interface Builder

Before we jump to Interface Builder make sure to save all the changes so that IB can pick up on them.

In Xcode, locate DetailViewController.xib file (it got created this file along with DetailViewController class in Step#3) and double-click on it. Once Interface Builder opens you should see an empty canvas where we’re going to place our UI elements. Lay them out as shown in the screenshot below. Note that you should uncheck Editable checkbox on your text view so that the text is read-only.

Now we need to connect the UI elements to its variable counterparts. I’m not going to cover step-by-step how to do that as it has been discussed in some detail in the tutorial on customizing view cells. Please, review that tutorial if you’re unclear how to follow the next set of instructions.

Click on File’s Owner icon to highlight it. From the file menu choose Tools -> Connections Inspector (Cmd + 2). Under Outlets, you’ll see all of our instance variables we declared in the DetailViewController class. Control-drag from File’s Owner to each UI component in the view to connect coverImageView to Image View, releaseDateLabel to Release Date label, genreLabel to Genre label, etc. Once done, your Connections Inspector should be set up like this:

Save your changes and return back to Xcode.

6. Prepare DetailViewController to read test data

If you recall what we did with the original DetailViewController when it was still a table, in its initialization method we passed in a dictionary containing all the info about our DVD library. This was read in using DvdLibraryDao object that basically took the plist we constructed earlier and put all its content into a dictionary. We’re going to do the same thing in our new DetailViewController, only we’re now adding a couple of properties (genre, description) that we just added in Step#2.

We also add declaration of our custom initialization method here. It’s pretty much just a modified initWithNibName method that adds dvdData into the mix. This method will set the local instance variable dvdData that is also declared here. Change DetailViewController.h header file to look like this:

@interface DetailViewController : UIViewController {
    IBOutlet UIImageView *coverImageView;
    IBOutlet UILabel *titleLabel;
    IBOutlet UILabel *releaseDateLabel;
    IBOutlet UILabel *lengthLabel;
    IBOutlet UILabel *genreLabel;
    IBOutlet UITextView *descriptionTextView;
 
    NSDictionary *dvdData;
}
 
@property (nonatomic, retain) UIImageView *coverImageView;
@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UILabel *releaseDateLabel;
@property (nonatomic, retain) UILabel *lengthLabel;
@property (nonatomic, retain) UILabel *genreLabel;
@property (nonatomic, retain) UITextView *descriptionTextView;
 
- (id)initWithDvdData:(NSDictionary *)dvdData nibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil;
 
@end

Switch over to DetailViewController.m implementation file. Let’s implement the initWithDvdData method:

- (id)initWithDvdData:(NSDictionary *)data nibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        dvdData = data;
    }
    return self;
}

All this is doing is it assigns data that is passed in to our instance variable dvdData.

To read everything in from dvdData to all of the UI elements, we’ll insert a little snippet of code in the viewDidLoad delegate method. As you can see, we assign each value from dvdData to its corresponding UI element.

- (void)viewDidLoad {
    coverImageView.image = [UIImage imageNamed:[dvdData valueForKey:@"coverImage"]];
    titleLabel.text = [dvdData valueForKey:@"title"];
    releaseDateLabel.text = [NSString stringWithFormat:@"%@", [dvdData valueForKey:@"releaseDate"]];
    lengthLabel.text = [NSString stringWithFormat:@"%@ minutes", [dvdData valueForKey:@"featureLength"]];
    genreLabel.text = [dvdData valueForKey:@"genre"];
    descriptionTextView.text = [dvdData valueForKey:@"description"];
    [super viewDidLoad];
}

7. Handle didSelectRowAtIndexPath in RootViewController

Now that we have our detail view controller all ready to go, let’s connect the dots and have the RootViewController go to the detail page when a row is tapped.

In RootViewController.m, locate the didSelectRowAtIndexPath method. Just as we did before, we’ll instantiate DetailViewController here and push it to the controller stack:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    DetailViewController *controller = [[DetailViewController alloc]
                                        initWithDvdData:[dao libraryItemAtIndex:indexPath.row]
                                        nibName:@"DetailViewController" bundle:[NSBundle mainBundle]];
    controller.title = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
    [self.navigationController pushViewController:controller animated:YES];
    [controller release];
}

If everything went well, you should be able to run your project and get something like this:

8. Format the release date field

While something like 2007-07-08 16:32:07 -0700 is completely acceptable by me, many people want to see something a bit more user friendly. Let’s take that date and try to display it as July 8, 2007.  We’re going to achieve that using a nifty utility class called NSDateFormatter. Open DetailViewController.m and change viewDidLoad method to look like this:

- (void)viewDidLoad {
    coverImageView.image = [UIImage imageNamed:[dvdData valueForKey:@"coverImage"]];
    titleLabel.text = [dvdData valueForKey:@"title"];
    lengthLabel.text = [NSString stringWithFormat:@"%@ minutes", [dvdData valueForKey:@"featureLength"]];
    genreLabel.text = [dvdData valueForKey:@"genre"];
    descriptionTextView.text = [dvdData valueForKey:@"description"];
 
    // Format date we get from releaseDate field to more readable form
    NSDate *releaseDate = (NSDate *)[dvdData valueForKey:@"releaseDate"];
    NSDateFormatter *dateFormatter = [[[NSDateFormatter alloc] init] autorelease];
    [dateFormatter setDateFormat:@"MMMM d, YYYY"];
    releaseDateLabel.text = [dateFormatter stringFromDate:releaseDate];
 
    [super viewDidLoad];
}

All we had done is gave our formatter a string representation of the date format we want and then outputted that date to releaseDateLabel.

Conclusion

When customizing your detail views, possibilities are endless. You could add a texture to your background, add more images, maybe a table with some detailed information, or other controls that would take you forward in the controller stack. But I hope this tutorial got you started and showed you some basic techniques and tricks to create a detail page.

You can download the complete source code to this tutorial here: My DVD Library Tutorial 3

What we want is for our home screen to look like this:

We can accomplish that by customizing UITableViewCell. There are 2 ways of going about it:

1. Using Interface Builder
2. Programmatically

In reality, you can also choose a hybrid approach where you create some UI elements in the Interface Builder and some programmatically.

Which option to choose?

The two approaches both bring some advantages and disadvantages with them.

Interface Builder

If you decide to go the Interface Builder route, you’ll find it very easy to create and customize your cells. Any subsequent edits can also be done quite easily since you’re simply rearranging elements visually. The downside is speed and performance since the system needs to render each view in a cell individually. If your table view has thousands of rows in it, this may/may not affect the performance of your app, depending how complicated your cell is.

Programmatically

This one involves a lot more work. You are responsible for creating each UI element by hand in the code. That can be very tedious and any edits you need to make in the future require code changes. Also, you’ll need to set up all the autosizing masks yourself. The upside is performance. Since the system will draw each cell as one view, the performance gain can be very significant.

Ok, let’s get to it…

1. Subclass UITableViewCell

Create a Cocoa Touch Class file and make it a subclass of UITableViewCell. Let’s name it DVDListingViewCell.m. We’ll use this class as a placeholder for our labels and the cover image. In DVDListingViewCell.h add the following code:

@interface DVDListingViewCell : UITableViewCell {
    IBOutlet UILabel *titleLabel;
    IBOutlet UIImageView *coverImageView;
    IBOutlet UILabel *featureLengthLabel;
}
 
@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UILabel *featureLengthLabel;
@property (nonatomic, retain) UIImageView *coverImageView;
 
@end

We use the IBOutlet annotation here to later let Interface Builder know we want to connect these properties with the actual UI elements we’ll lay out.

We also need synthesize the properties we’ve just defined. This will create all setters and getters for us. Add this to DVDListingViewCell.m right below the @implementation directive.

@synthesize titleLabel, featureLengthLabel, coverImageView;

2. Design the cell in Interface Builder

In Xcode, double-click on any of the nib files (they should all be listed under NIB Files magic folder). Once in Interface Builder, choose New… from the File menu. You should be presented a dialog with several templates in it. From the Cocoa Touch category on the left, choose Empty.

You should now see an “Untitled” window with File’s Owner and First Responder in it. One thing missing right now is the actual cell view, let’s add it. From the Library window (Tools -> Library) locate Table View Cell. Drag it to the “Untitled” window. You should now see something like this:

Double clicking on the Table View Cell object will open up the actual cell view where we’re going to add our UI elements. Make the cell 120 pixels in height (you change the dimensions under the size tab in the properties window or by pressing Command  + 3). Drag a couple Lables and an Image View to the cell to lay it out as shown below. Once done, save the file as DVDListingView. Make sure to save the file in your project directory and check the checkbox when prompted if you want to add the file into your project.

3. Prepare the RootViewController

Return back to Xcode and open up your RootViewController.h header file. We will add a cell instance variable of type DVDListingViewCell that we’ve created earlier. We will use this cell to actually draw on the screen. Modify your header file to make it look like this:

@interface RootViewController : UITableViewController {
    DvdLibraryDao *dao;
 
    IBOutlet DVDListingViewCell *_cell;
}

You may notice the IBOutlet annotation again. That is because we will be connecting this variable to the actual cell we created in Interface Builder.

Let’s switch to the implementation file of our RootViewController (RootViewController.m). You may remember the method cellForRowAtIndexPath from the first tutorial. That’s the method that controls what cell is drawn at which row. We’ll want our cell to be a DVDListingViewCell so let’s modify the current version of it to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"LibraryListingCell";
 
    DVDListingViewCell *cell = (DVDListingViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        [[NSBundle mainBundle] loadNibNamed:@"DVDListingView" owner:self options:nil];
        cell = [_cell autorelease];
        _cell = nil;
    }
 
    cell.titleLabel.text = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
    cell.featureLengthLabel.text = [NSString stringWithFormat:@"%@ minutes",
                                    [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"featureLength"]];
    cell.coverImageView.image = [UIImage
                                 imageNamed:[[dao libraryItemAtIndex:indexPath.row] valueForKey:@"coverImage"]];
 
    return cell;
}

There are few things going on so let’s analyze them line by line.

Line #5 was changed to initialize the cell local variable to the DVDListingViewCell instead of the generic UITableViewCell.

Lines #6-#10 contain the meat of the cell creation. It first loads the nib file we created. You can see we’re setting the owner to self. That is because the _cell instance variable will get initialized via the nib file, which I’m going to cover a little later.

And finally, Lines #12-#15 assign proper values to the labels and image view in our custom cell.

4. Connect everything in Interface Builder

Return back to Interface Builder and click on the File’s Owner icon. Open up the Identity Inspector (Tools -> Identity Inspector) and look at the Class drop-down menu. Locate RootViewController and select it. In the same window, you should now see the _cell instance variable that belongs to RootViewController. When the nib file is loaded, we’ll want the cell we designed in Interface Builder to be assigned to our _cell. Let’s do that next.

Open up Connections Inspector (Tools -> Connections Inspector) with File’s Owner icon still selected. You should see our _cell in the Outlets section. Next to it is a little hollow circle that turns into a plus (+) sign when you hover it. Click on the circle and drag over to the Listing View Cell window. When you drag over it, the cell should highlight with a label that says “Listing View Cell.” Release the mouse to complete the connection (the cell will blink).

Note: There is an alternate way of creating the connection; Click on the File Owner’s icon while pressing down the Control key and Ctrl-drag to the Listing View Cell icon. A little black pop-up window “Outlets” will appear. Select _cell and let go of the mouse.

Now let’s connect our two labels and the image view. Highlight the Listing View Icon and open up Identity Inspector (Command+4). Under the Class drop-down find and select our DVDListingViewCell. Once done, you should see all the outlets we defined earlier in the DVDListingViewCell class: coverImageView, featureLengthLabel and titleLabel. Open up Connections Inspector (Command+2) and check out the Outlets section. Just as before, drag a connection from the hollow circle next to titleLabel to the “My DVD” label, featureLengthLabel to the feature length label and finally coverImageView to the UIImageView object in our Listing View Cell.

Alternatively, you can Control-drag from the Listing View Cell icon to the Listing View Cell window and connect the three objects that way.

Save all your changes and return back to Xcode.

5. Set the cell height in RootViewController

After you’ve saved your changes in Interface Builder and return back to Xcode, go ahead and run the project. You’ll see that everything works well except one thing – the cells are all crammed together.

This is because we need to explicitly set the height of cells in each row when it differs from the default. We can correct that by implementing the heightForRowAtIndexPath delegate method in the RootViewController.m file.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 120.0;
}

Rerun your project and you should now see the cells correctly sized and looking good.

Conclusion

Remember that this is just one of a couple ways to customize your cells. You can do all of this by hand, programmatically which is more work but may result in a better performance. We will cover that in the second part of this tutorial.

You can download the complete source code to this tutorial here: My DVD Library Xcode Project 02.

Pre-requisites

I assume you have Xcode and iPhone SDK 3.x already installed (I’m using version Xcode 3.1, with 3.2 being the newest at the time of this writing). I also assume you know how to create a project so I’m not going to cover those little things here. Lastly, I assume you have some knowledge Objective-C, its principles, syntax and paradigms.

1. Set up your project

Create a “Navigation-based Application” and name it “TableViewApp.” Right off the bat, you’ll have an empty app, which is pretty much useless. You can run it using Cmd+R.

2. Create a dummy data set

Right-click on the Resources folder and choose Add -> New File. Under Other category, choose Property List. Name it TestData.plist. This is basically an XML file that will have an empty Dictionary in it by default. Change Dictionary to Array since we’re going to be adding numerous “DVDs” which will be described as individual Dictionaries.

You can add data to it by simply clicking the little button to the right of the Value column. We will be adding information about your DVD collection to it so the schema of your data set could be something like this:

• Title – String
• Cover image – String
• Feature length  - Number (in minutes)
• Release date – Date

Of course, this could be extended to more fields such as director, genre, aspect ratio, etc.

Following this schema, add a few items to your dummy data set. You’ll eventually want to have your file looking something like this:

If you don’t feel like typing all this info in, you can download the file here: TestData.plist.

3. Create a DAO (Data Access Object) to access your data

Right-click on the Classes folder and choose Add -> New File. Under Cocoa Touch Class category choose Objective-C class. Name it DvdLibraryDao.

This will be a very simple class that will take our dummy data file, read it in as a NSArray and provide some utility methods to access the data from the file.

First, let’s define our custom init method and some instance variables that will be needed for our implementation.

// Gets a plist name and reads in its contents as an array
@interface DvdLibraryDao : NSObject {
    NSString *libraryPlist;
    NSArray *libraryContent;
}
 
@property (nonatomic, readonly) NSString *libraryPlist;
@property (nonatomic, readonly) NSArray *libraryContent;
 
- (id)initWithLibraryName:(NSString *)libraryName;
- (NSDictionary *)libraryItemAtIndex:(int)index;
- (int)libraryCount;
 
@end

Next we create a custom initialization method, which will give us the name of the property list we want to read in. This code goes in your DvdLibraryDao.m file.

// Gets a plist name and reads in its contents as an array
 - (id)initWithLibraryName:(NSString *)libraryName {
    if (self = [super init]) {
        libraryPlist = libraryName;
        libraryContent = [[NSArray alloc] initWithContentsOfFile:[[NSBundle mainBundle]
                                                                  pathForResource:libraryPlist ofType:@"plist"]];
    }
    return self;
}

To retrieve information about a particular DVD, we’ll want a method that would access our array at a requested index and then returns the NSDictionary that contains the data we’re after. Add this method to DvdLibraryDao.m.

// [Safely] returns a "DVD" from the plist. Each item in the data source is a dictionary containing data about
// the chosen DVD.
- (NSDictionary *)libraryItemAtIndex:(int)index {
    return (libraryContent != nil && [libraryContent count] > 0 && index < [libraryContent count])
        ? [libraryContent objectAtIndex:index]
        : nil;
}

The last method simply returns the count of DVDs in our data file.

// Returns the count of all DVDs in our library
- (int)libraryCount {
    return (libraryContent != nil) ? [libraryContent count] : 0;
}

4. Make your Table View read from the DAO

Now that we have a data source, let’s make our table read from it.

Add an instance variable to your RootViewController.h called dao of type DvdLibraryDao.

#import "DvdLibraryDao.h"
 
@interface RootViewController : UITableViewController {
    DvdLibraryDao *dao;
}
 
@end

We’ll initialize this variable in the viewWillAppear method that can be found in the implementation file of RootViewController.

- (void)viewWillAppear:(BOOL)animated {
    dao = [[DvdLibraryDao alloc] initWithLibraryName:@"TestData"];
 
}

TestData here is the name of the plist containing our data we created earlier.

To tell our table how many rows it has, we override the delegate method of UITableView called numberOfRowsInSection. All this method does is it returns the number of rows there are in the current section. We’ll cover sections later.

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [dao libraryCount];
}

We’re calling the libraryCount method we’ve implemented earlier to get the number of DVDs in our library.

In the last step before we can run this project and see our records in the table, we tell the table what to display at each row. We do this in the delegate method cellForRowAtIndexPath.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"LibraryListingCell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:CellIdentifier] autorelease];
    }
 
	cell.textLabel.text = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
 
    return cell;
}

One note about line #4 that might not be so obvious  - static NSString *CellIdentifier = @”LibraryListingCell”. Since tables can potentially have thousands of rows, the system memory consumed by creating all the rows at once would in the best case considerably slow down your table’s performance and in the worst case crash your application.

That’s why Apple introduced the concept of cell reuse. Behind the scenes, the system only creates the visible cells (and some) and as you start scrolling, it reuses the cells that are currently off screen to display the content that is on screen. By giving a cell an identifier, you’re basically marking it to be reused over and over again in your view instead of continuously creating new cells.

5. Add a title to the header

To add a title to the header of the table view, we simply add this line to the viewWillAppear method we overrode earlier.

    self.title = @"My DVD Library";

6. See what it looks like so far

Run your project (in the simulator or on the device) and if everything is wired correctly, you should see something like this:

7. Create the Detail View

After a user selects one of the rows, we want them to go to a detail page where more information about the DVD is shown. We could simply use a UIView and add a bunch of UILables to it to achieve this but since we’re covering UITableView in this tutorial, we’ll create another table.

(Note that this NOT how you’d want do it in a real-life app. I’m showing it strictly to demonstrate a grouped style table.)

Right-click on the Classes folder and choose Add -> New File again.  From Cocoa Touch Class category pick the Objective-C class and then choose UITableViewController from the subclass dropdown menu in the lower half of the window. This is different in Xcode 3.1 from previous versions where UITableViewController was simply a part of the presented classes. Name the file DetailViewController.

There are few things we need to do here. We’ll need some place to hold values of the labels used to describe our fields and also the actual values of the fields. For that, let’s create two instance variables of type NSMutableArray which we’ll later fill with appropriate data.

To properly initialize our data in the detail view, we’ll also need a custom init method. It is a modified version of initWithStyle that comes by default with UITableViewController.

@interface DetailViewController : UITableViewController {
    NSMutableArray *labels;
    NSMutableArray *values;
}
 
- (id)initWithStyle:(UITableViewStyle)style andDvdData:(NSDictionary *)dvdData;
 
@end

Let’s implement our custom init method:

- (id)initWithStyle:(UITableViewStyle)style andDvdData:(NSDictionary *)dvdData {
    if (self = [super initWithStyle:style]) {
        labels = [NSMutableArray new];
        values = [NSMutableArray new];
 
        // Set up labels which will become header titles
        [labels addObject:@"Title"];
        [labels addObject:@"Release Date"];
        [labels addObject:@"Length"];
 
        // Add now the values that correspond to each label
        [values addObject:[dvdData valueForKey:@"title"]];
        // We're faking formatting of date and length here simply dumping them as objects.
        // We should really convert the values to proper data types and then display them as strings.
        [values addObject:[NSString stringWithFormat:@"%@", [dvdData valueForKey:@"releaseDate"]]];
        [values addObject:[NSString stringWithFormat:@"%@ minutes", [dvdData valueForKey:@"featureLength"]]];
    }
    return self;
}

Each table header will display the label of our field (e.g.Title or Release Date). To do that, we’ll override UITableView’s delegate method titleForHeaderInSection.

- (NSString *)tableView:(UITableView *)aTableView titleForHeaderInSection:(NSInteger)section {
	return [labels objectAtIndex:section];
}

Now we need to handle header and row counts as well as displaying actual values in our table rows.

The number of headers would correspond to the number of labels we want to display.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return [labels count];
}

We’re going to cheat a little bit here. As I mentioned previously, a table view isn’t exactly the best choice to display this kind of data. The reason we’re going to return 1 as number of rows per section is because if we set it to the count of values, we would get duplicate values per each section. Instead of leaving the value as 1, try setting it to [values count] and see what I mean.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 1;
}

Finally, we set the cell textual value to each corresponding field.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"DetailViewCell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:CellIdentifier] autorelease];
    }
 
    cell.textLabel.text = [values objectAtIndex:indexPath.section];
 
    return cell;
}

8. Modify RootViewController to handle DetailViewController

As the last step, we’ll need to tell RootViewController to actually display DetailViewController when a row is pressed. We do that in the didSelectRowAtIndexPath delegate method.

// Override to support row selection in the table view.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // UITableViewStyleGrouped table view style will cause the table have a textured background
    // and each section will be separated from the other ones.
    DetailViewController *controller = [[DetailViewController alloc]
                                        initWithStyle:UITableViewStyleGrouped
                                        andDvdData:[dao libraryItemAtIndex:indexPath.row]];
    controller.title = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
    [self.navigationController pushViewController:controller animated:YES];
    [controller release];
}

One more detail. When we return back to RootViewController from DetailViewController, we’ll want to deselect the row that had been pressed. To do so, we modify the viewWillAppear method.

- (void)viewWillAppear:(BOOL)animated {
    dao = [[DvdLibraryDao alloc] initWithLibraryName:@"TestData"];
    self.title = @"My DVD Library";
    [self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES];
}

If everything went well, re-running the project and tapping on one of the rows should show you the detail view table that should look like this:

Conclusion

Hopefully this tutorial has given you a good starting point for creating your own app. The next steps could be replacing the static plist file with a Core Data store or maybe pull the data from a remote XML file. Also, the DetailViewController should really be a subclass of UIView that would provide a lot more flexibility in laying out your data.

You can download a finished version of this project here: My DVD Library Xcode Project.

Along with this announcement came another one. Enterprise services are getting a huge boost by supporting the push technology, Cisco IPSec VPN, Certificates and Identities or WPA2, among others. However, the biggest one is support for Active Sync and Microsoft Exchange. These new enterprise features will be available via June’s software update (free for iPhone, paid for iPod touch) and is also available in beta for US-based businesses that qualify.

The SDK is now available for download on ADC.

The technologies used in the SDK are divided into these layers:

• Cocoa Mutlitouch
• Media
• Core Services
• Core OS

Cocoa Touch

Cocoa Touch layer lets you access technologies such as Multi-touch events, Multi-touch controls, Acceleromter, View Hierarchy, Localization, Alerts, Web View, People Picker, Image Picker or Camera

Media

This one will probably get the most attention. Especially with combination with Cocoa Touch. You get your hands on Core Audio, OpenAL, Audio Mixing, Audio Recording, Video Playback, JPG, PNG, TIFF, PDS Quartz, Core Animation and Embedded OpenGL

Core Services

Core services is more lower-level oriented and will make a lot of sense for business-like apps. It includes Collections, Address Book, Networking, File access, SQLite, Core Location, Net Services Threading, Preferences, URL utilities

Core OS

And finally, the OS layer lets you really optimize you app by talking to low-level services such as OS X Kernel, BSD TCP/IP, Sockets, Power Management, Keychain, Certificates, File System, Lib System, Security, Bonjour

Requirements and what you’ll get

You will need to have Leopard 10.2 installed on an Intel machine to use the SDK. It comes complete with enhanced Xcode and an iPhone emulator. I just downloaded it (their site is currently very slow) and will be trying it out. I will write up a post once I play with it a bit. I’m so excited, YAY!!

As an iPhone developer, I want this site to be a good resource for tips, tricks, tutorials, articles and other material that will help all of you interested in iPhone development get started and get developing.