The concept is simple: find the closest open liquor store to you, anywhere in BC instantly. Open the app and see a list of BC Liquor stores near you, how far they are away from you and whether they’re still open. A complete listing of each and every store’s hours are just a click away from their, not to mention a map view of all BC Liquor Stores.

itms://itunes.apple.com/ca/app/bc-liquor-locator/id368167119?mt=8

For you iPhone Devs out there: This app was built using several components of the Three20 iPhone Library.

Here is a bunch of good links related to Three20

GitHub: http://github.com/facebook/three20

Google Group: http://groups.google.com/group/three20/

Documentation: http://three20.info/

And I even have some Three20 tutorials on my own site, checkout the Three20 section of my blog

—

Say Hello to Three20 TTTableItemCells

Over the last couple of months I’ve shown you how to use Joe Hewitt’s Three20 iPhone library to create css-like stylesheets for your iPhone Apps, as well as custom table cells for your iPhone Apps.

But a while ago Joe changed up the way we make custom table cells. Instead of using TTTableField and TTTableFieldCell we now use TTTableItem and TTTableItemCell to accomplish custom table cells.

So today I am going to show you how to create an iPhone App using Three20′s TTTableItem and TTTableItemCell.

Lets start the show

Here’s our game plan for creating our custom cells:

1. Setup our App, create some necessary files, etc
2. Make our own TableItems by subclassing TTTableItem
3. Make our own TableItemCells by subclassing TTTableItemCell
4. Instantiate our new TableItems in our DataSource
5. Make the App render the correct TableItemCell for each TableItem we just made
6. Finally when we’ve done all the other stuff, we’ll have a sexy new app with sexy custom table cells

1. Setup the App

I think the easiest way to learn how to do this is too follow along step by step with this tutorial (i’ve created a three20 App template that works great for this)

1. Download or Clone my Three20 Tutorial repository from github
2. When my repo is downloaded or cloned open it and copy and past the basic-navigation-app-template somewhere else on your computer (if you want)The three20-iPhone-tutorials folder should now look like this:
3. 
4. Rename basic-navigation-app-template copy folder to something like tableitem-tutorial-working
5. Open the Xcode Project file inside of your new folder (again we’re using a template App that I created)
6. Now we need to create some new classes inside of XCode:
   1. We need a new class that will subclass TTTableItem. Go File >> New File >> Objective-C Class >> Name it BNTableItem (following Joe’s naming conventions). Make sure “Also create BNTableItem.h” is checked.
   2. We also need a new class where we will sublclass TTTableItemCell. Go File >> New File >> Objective-C Class >> Name it BNTableItemCell (following Joe’s naming conventions). Make sure “Also create BNTableItemCell.h” is checked.
7. Now that our all of our files are created let’s give our App a title. Go into RootViewController.mand change the lineself.title = @”Tutorial Title”;toself.title = @”TableItem Tutorial”;.RootViewController.mshould now look like this:

   #import "RootViewController.h"
   
   #pragma mark import dataSource
   #import "RootViewDataSource.h"
   
   # pragma mark import table cells
   
   @implementation RootViewController
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // UIViewController
   
   - (void)loadView {
       [super loadView];
   
       self.tableView = [[[UITableView alloc] initWithFrame:self.view.bounds
                                                      style:UITableViewStyleGrouped] autorelease];
       self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth
       | UIViewAutoresizingFlexibleHeight;
       self.variableHeightRows = YES;
       self.title = @"TableItem Tutorial";
       [self.view addSubview:self.tableView];
   }
   
   //////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewController
   
   - (id)createDataSource {
       return [RootViewDataSource rootViewDataSource];
   }
   
   @end

8. Make sure that you have selected Device 3.0 or Simulator 3.0 to run the app
9. Open the App and see what happens. Click Build and Go (or Build >> Build and Go (Run)).The App should look like this (nothing special yet, but just you wait):
10. 

2. Subclass TTTableItem

Now we need to make our TableItem. To do this we are going to subclass TTTableCaptionedItem.

TableItems hold the data, TableItemCells actually display the data.

Sink that into your head, it’s important:

TableItems holds the data, TableItemCells display.

Do the following steps, once they are done I will explain what was accomplished.

1. Go into BNTableItem.h and delete everything
2. Go into BNTableItem.m and delete everything
3. Now we need to subclass TTTableCaptionedItem because it’s quite similar to what we are trying to accomplish, but needs some enhancements. Copy and paste this code into the empty BNTableItem.hfile:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelow  /////
   ////////////////////////////////////////////////////////
   
   @interface BNTableCaptionedItemWithThreeImagesBelow : TTTableCaptionedItem {
   
   }
   
   @end

4. Now copy and paste this code into BNTableItem.m:

   #import "BNTableItem.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelow  /////
   ////////////////////////////////////////////////////////
   
   @implementation BNTableCaptionedItemWithThreeImagesBelow
   
   @end

We just created a subclass of  TTTableCaptionedItem which we named BNTableCaptionedItemWithThreeImagesBelow.

But we haven’t changed anything in our class yet, let’s do that now:

1. Go back to BNTableItem.hand modify it so the file looks exactly like this:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelow  /////
   ////////////////////////////////////////////////////////
   
   @interface BNTableCaptionedItemWithThreeImagesBelow : TTTableCaptionedItem {
   	NSString* _image1;
   	NSString* _image2;
   	NSString* _image3;
   	TTStyle* _imageStyle;
   }
   
   @property(nonatomic,copy) NSString* image1;
   @property(nonatomic,copy) NSString* image2;
   @property(nonatomic,copy) NSString* image3;
   @property(nonatomic,retain) TTStyle* imageStyle;
   
   + (id)itemWithText:(NSString*)text caption:(NSString*)caption image1:(NSString*)image1 image2:(NSString*)image2 image3:(NSString*)image3;
   
   @end

2. Go to back to BNTableItem.m and modify itso the file looks exactly like this:

   #import "BNTableItem.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelow  /////
   ////////////////////////////////////////////////////////
   
   @implementation BNTableCaptionedItemWithThreeImagesBelow
   @synthesize image1 = _image1, image2 = _image2, image3 = _image3, imageStyle = _imageStyle;
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // class public
   
   + (id)itemWithText:(NSString*)text caption:(NSString*)caption image1:(NSString*)image1 image2:(NSString*)image2 image3:(NSString*)image3 {
   		BNTableCaptionedItemWithThreeImagesBelow* item = [[[self alloc] init] autorelease];
   		item.text = text;
   		item.caption = caption;
   		item.image1 = image1;
   		item.image2 = image2;
   		item.image3 = image3;
   		return item;
   	}
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // NSObject
   
   - (id)init {
   	if (self = [super init]) {
   		_image1 = nil;
   		_image2 = nil;
   		_image3 = nil;
   		_imageStyle = nil;
   	}
   	return self;
   }
   
   - (void)dealloc {
   	TT_RELEASE_MEMBER(_image1);
   	TT_RELEASE_MEMBER(_image2);
   	TT_RELEASE_MEMBER(_image3);
   	TT_RELEASE_MEMBER(_imageStyle);
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // NSCoding
   
   - (id)initWithCoder:(NSCoder*)decoder {
   	if (self = [super initWithCoder:decoder]) {
   		self.image1 = [decoder decodeObjectForKey:@"image1"];
   		self.image2 = [decoder decodeObjectForKey:@"image2"];
   		self.image3 = [decoder decodeObjectForKey:@"image3"];
   	}
   	return self;
   }
   
   - (void)encodeWithCoder:(NSCoder*)encoder {
   	[super encodeWithCoder:encoder];
   	if (self.image1) {
   		[encoder encodeObject:self.image1 forKey:@"image1"];
   	}
   	if (self.image2) {
   		[encoder encodeObject:self.image2 forKey:@"image2"];
   	}
   	if (self.image3) {
   		[encoder encodeObject:self.image3 forKey:@"image3"];
   	}
   }
   
   @end

Finished? Awesome. I am not going to explain everything that we did there, but I will give an overview.

• We added 3 new properties to our class (one for each image)
• We made a method called + (id)itemWithText:(NSString*)text caption:(NSString*)caption image1:(NSString*)image1 image2:(NSString*)image2 image3:) which accepts the addresses for each of the 3 images as well as our text content
• We added the 3 image properties to the init method, the initWithCoder method, and encodeWithCoder method.

The BNTableItem part of this tutorial is now finished.

The next part of our tutorial deals with displaying the data from our TableItem (the labels, images, etc), lets get started

3. Subclass TTTableItemCell

Subclassing TTTableCaptionedItemCell (itself a subclass of TTTableItemCell) will be similar to the subclassing we just did of TTTableCaptionedItem.

1. Go into BNTableItemCell.h and delete everything
2. Go into BNTableItemCell.m and delete everything
3. We should now have NOTHING in either BNTableItemCell.h or BNTableItemCell.m
4. Now subclass TTTableCaptionedItemCell. Go into and BNTableItemCell.hand make it look like this:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelowCell     //
   ////////////////////////////////////////////////////////////
   
   @interface BNTableCaptionedItemWithThreeImagesBelowCell : TTTableCaptionedItemCell {
     TTImageView* _imageView1;
     TTImageView* _imageView2;
     TTImageView* _imageView3;
   }
   
   @end

5. Then go into BNTableItemCell.mand make it look like this:

   #import "BNTableItemCell.h"
   #import "BNTableItem.h"
   #import "BNDefaultStylesheet.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   static CGFloat kHPadding = 10;
   static CGFloat kVPadding = 15;
   static CGFloat kImageWidth = 80;
   static CGFloat kImageHeight = 80;
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   //////////////////////////////////////////////////////////////
   //////   BNTableCaptionedItemWithThreeImagesBelowCell     ////
   //////////////////////////////////////////////////////////////
   
   @implementation BNTableCaptionedItemWithThreeImagesBelowCell
   
   + (CGFloat)tableView:(UITableView*)tableView rowHeightForItem:(id)item {
   	BNTableCaptionedItemWithThreeImagesBelow* captionedItem = item;
   
   	CGFloat maxWidth = tableView.width - kHPadding*2;
   
   	CGSize textSize = [captionedItem.text sizeWithFont:TTSTYLEVAR(myHeadingFont)
   					   constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX)
   					   lineBreakMode:UILineBreakModeWordWrap];
   	CGSize subtextSize = [captionedItem.caption sizeWithFont:TTSTYLEVAR(mySubtextFont)
   						  constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX) lineBreakMode:UILineBreakModeWordWrap];
   
   	return kVPadding*2 + textSize.height + subtextSize.height + kImageHeight + kVPadding;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString*)identifier {
   	if (self = [super initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:identifier]) {
   		_item = nil;
   
   		_imageView1 = [[TTImageView alloc] initWithFrame:CGRectZero];
   		[self.contentView addSubview:_imageView1];
   
   		_imageView2 = [[TTImageView alloc] initWithFrame:CGRectZero];
   		[self.contentView addSubview:_imageView2];
   
   		_imageView3 = [[TTImageView alloc] initWithFrame:CGRectZero];
   		[self.contentView addSubview:_imageView3];
   
   	}
   	return self;
   }
   
   - (void)dealloc {
   	TT_RELEASE_MEMBER(_imageView1);
   	TT_RELEASE_MEMBER(_imageView2);
   	TT_RELEASE_MEMBER(_imageView3);
   	[super dealloc];
   }
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // UIView
   
   - (void)layoutSubviews {
   	[super layoutSubviews];
   
   	[self.detailTextLabel sizeToFit];
   	self.detailTextLabel.top = kVPadding;
   
   	self.textLabel.height = self.detailTextLabel.height;
   
   	_imageView1.frame = CGRectMake(20, self.detailTextLabel.bottom + kVPadding, kImageWidth, kImageHeight);
   	_imageView2.frame = CGRectMake(_imageView1.right + kHPadding, self.detailTextLabel.bottom + kVPadding, kImageWidth, kImageHeight);
   	_imageView3.frame = CGRectMake(_imageView2.right + kHPadding, self.detailTextLabel.bottom + kVPadding, kImageWidth, kImageHeight);
   
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewCell
   
   - (id)object {
   	return _item;
   }
   
   - (void)setObject:(id)object {
   	if (_item != object) {
   		[super setObject:object];
   
   		BNTableCaptionedItemWithThreeImagesBelow* item = object;
   
   		self.textLabel.textColor = TTSTYLEVAR(myHeadingColor);
   		self.textLabel.font = TTSTYLEVAR(myHeadingFont);
   		self.textLabel.textAlignment = UITextAlignmentRight;
   		self.textLabel.contentMode = UIViewContentModeCenter;
   		self.textLabel.lineBreakMode = UILineBreakModeWordWrap;
   		self.textLabel.numberOfLines = 0;
   
   		self.detailTextLabel.textColor = TTSTYLEVAR(mySubtextColor);
   		self.detailTextLabel.font = TTSTYLEVAR(mySubtextFont);
   		self.detailTextLabel.textAlignment = UITextAlignmentLeft;
   		self.detailTextLabel.contentMode = UIViewContentModeTop;
   		self.detailTextLabel.lineBreakMode = UILineBreakModeWordWrap;
   
   		_imageView1.URL = item.image1;
   		_imageView1.style = item.imageStyle;
   
   		_imageView2.URL = item.image2;
   		_imageView2.style = item.imageStyle;
   
   		_imageView3.URL = item.image3;
   		_imageView3.style = item.imageStyle;
   
       }
   }
   
   @end

Awesome, we’re on a roll, we just subclassed TTTableCaptionedItemCell, then modified it so that it has 3 image views underneath the heading and caption.

• In the rowHeightForItem method we made our cell adjust it’s size to the text content AND our new images.
• In the initWithStyle method we allocated 3 TTImageViews (to hold our images) and added the TTImageViews as subviews of our main view.
• in the layoutSubviews method we  made the textLabel (the heading label) and the detailTextLabel (the subtext label) fit together nicely, as well as sizing all three images and making them fit nice and centered underneath the text.
• Finally in the setObject method we set the textColor, the font, and a few other important properties of our textLabel, and detailTextLabel, and we gave each of our 3 TTImageViews the URL of the image their supposed to display (the URL of each TTImageView should match the corresponding URL given for each address we are fed to our TTTableItem).

Now we need to put our feed our TableItems to our TableView datasource

4. Add Our TableItems to the DataSource

Now what we’re going to do is instantiate and feed BNTableCaptionedItemWithThreeImagesBelow into our DataSource a few times while feeding it some text content and image addresses.

1. To instantiate and feed our Tableitem into our datasource (twice), make RootViewDataSource.mlook exactly like this:

   #import "RootViewDataSource.h"
   #import "BNTableItem.h"
   #import "BNTableItemCell.h"
   
   @implementation RootViewDataSource
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public
   
   + (RootViewDataSource*)rootViewDataSource {
   	RootViewDataSource* dataSource =  [[[RootViewDataSource alloc] initWithItems:
   										[NSMutableArray arrayWithObjects: [BNTableCaptionedItemWithThreeImagesBelow itemWithText:@"These are some pictures of me (Matt) doing different stuff"
   																									caption:@"Matt"
   																									image1:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/boating.jpg"
   																									image2:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/cooking.jpg"
   																									image3:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/surfing.jpg"],
   																		 [BNTableCaptionedItemWithThreeImagesBelow itemWithText:@"These are some pictures of Vancouver, BC"
   																									caption:@"VanCity"
   																									image1:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Vancouver_Aerial.jpg"
   																									image2:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Coast-Mountains-BC.jpg"
   																									image3:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Vancouver_Aerial_2.jpg"],
   																		 nil]] autorelease];
   	return dataSource;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)dealloc {
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewDataSource
   
   - (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {
   
   	if ([object isKindOfClass:[BNTableCaptionedItemWithThreeImagesBelow class]]) {
   		return [BNTableCaptionedItemWithThreeImagesBelowCell class];
   	} else {
   		return [super tableView:tableView cellClassForObject:object];
   	}
   }
   
   - (void)tableView:(UITableView*)tableView prepareCell:(UITableViewCell*)cell
   forRowAtIndexPath:(NSIndexPath*)indexPath {
   	cell.accessoryType = UITableViewCellAccessoryNone;
   }
   
   @end

2. Now try launching the App again.

Looks kinda weird doesn’t it? That’s because we need to do one last thing which is to tell our App which kind of TableItemCell to render for our TableItems.

Right now the App is just rendering the closest matching TableItemCell it could find, but not the one that we want (which is the one we just created).

5. Render the correct TableItemCell for our TableItems

This part is very simple, and I probably could have combined it with the last step, but it is something that is quite vital and I think deserves its own step.

1. Add the following code to RootViewDataSource.m, underneath the rootViewDataSource, and dealloc methods:

   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewDataSource
   
   - (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {
   
   	if ([object isKindOfClass:[BNTableCaptionedItemWithThreeImagesBelow class]]) {
   		return [BNTableCaptionedItemWithThreeImagesBelowCell class];
   	} else {
   		return [super tableView:tableView cellClassForObject:object];
   	}
   }

2. Now RootViewDataSource.mshould look exactly like this:

   #import "RootViewDataSource.h"
   #import "BNTableItem.h"
   #import "BNTableItemCell.h"
   
   @implementation RootViewDataSource
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public
   
   + (RootViewDataSource*)rootViewDataSource {
   	RootViewDataSource* dataSource =  [[[RootViewDataSource alloc] initWithItems:
   										[NSMutableArray arrayWithObjects: [[BNTableCaptionedItemWithThreeImagesBelow itemWithText:@"These are some pictures of me (Matt) doing different stuff"
   																									caption:@"Matt"
   																									image1:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/boating.jpg"
   																									image2:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/cooking.jpg"
   																									image3:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/surfing.jpg"] autorelease],
   																		 [[BNTableCaptionedItemWithThreeImagesBelow itemWithText:@"These are some pictures of Vancouver, BC"
   																									caption:@"VanCity"
   																									image1:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Vancouver_Aerial.jpg"
   																									image2:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Coast-Mountains-BC.jpg"
   																									image3:@"http://mattvague.com/wordpress/wp-content/uploads/2009/08/Vancouver_Aerial_2.jpg"] autorelease]
   																			,nil]] autorelease];
   	return dataSource;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)dealloc {
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewDataSource
   
   - (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {
   
   	if ([object isKindOfClass:[BNTableCaptionedItemWithThreeImagesBelow class]]) {
   		return [BNTableCaptionedItemWithThreeImagesBelowCell class];
   	} else {
   		return [super tableView:tableView cellClassForObject:object];
   	}
   }
   
   - (void)tableView:(UITableView*)tableView prepareCell:(UITableViewCell*)cell
   forRowAtIndexPath:(NSIndexPath*)indexPath {
   	cell.accessoryType = UITableViewCellAccessoryNone;
   }
   
   @end

6. Run the App

Run our App by clicking on “Build and Go”

It should look like this:

Download the working version

If you are having trouble or just want to checkout the source code, the final working version of my tutorial is availbile on github. Download or clone my repo and then open the tableitem-tutorial folder and open its Xcode Project.

—

Introduction to custom three20 cells

In my last tutorial I showed you how to use CSS-like stylesheets in your iPhone Apps. Although I did make a custom cell I didn’t really show how this is done, and I’ve decided to go into a bit more detail.

In this tutorial I am going to show you how to make custom table cells in your iPhone Apps using Joe Hewitt’s Three20 library.

Custom cells are very useful, they let you do things like this:

But it’s worth mentioning that i’m not going show you how to make a complete iPhone App, nor install the Three20 library in your Apps (there is already a guide on how to do this on the three20 github page).

I am going to assume that you either cloned my three20 tutorial repository from github and are following along in my Three20 stylesheets tutorial, or that you already have an app using three20 with a working tableview and datasource similar to mine (there are several ways to do this, but I am going to assume you’re using my way).

By the way, all my Three20 tutorials are available on gitHub.

So lets get started:

First things first, There are cells, and there are fields.

• Cells control the labels, images, interface elements, etc that are actually displayed when a table cell is rendered.
• Fields control the actual data that is fed into each label, image, interface element, etc when the table cell is rendered.

But although they usually go together, you don’t always HAVE to make a new field type for every new cell type. As long as all the data that the new cell needs is provided by an existing field, you need not make another.

For cells like the one below with a title and subtext, the data is fed by a field which holds 2 strings: one for the title and one for the subtext.

The code that styles the above cell (BNSubtextTableFieldCell) looks like this:

And the field that feeds that cell looks like this (in the Three20 source code):

JUST changing a cell’s appearance.

To change the colors, font sizes, etc in a particular cell, all you need to do is subclass that cell (in this case BNSubtextTableFieldCell), and change it’s label’s properties.

1. To subclass BNSubtextTableFieldCell, make BNCell.h looks like this:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////
   //////   BNSubtextTableFieldCell     ////
   /////////////////////////////////////////
   
   @interface BNSubtextTableFieldCell : TTSubtextTableFieldCell {
   
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleTableFieldCell     ////
   /////////////////////////////////////////////////////
   
   @interface BNSubtextWithRedTitleTableFieldCell : BNSubtextTableFieldCell {
   
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

2. Then make BNCell.m look like this:

   #import "BNCell.h"
   #import "BNDefaultStylesheet.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////
   //////   BNSubtextTableFieldCell     ////
   /////////////////////////////////////////
   
   @implementation BNSubtextTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		TTSubtextTableField* field = object;
   
   		_label.text = field.text;
   		_label.font = TTSTYLEVAR(myFirstFont);
   		_label.textColor = TTSTYLEVAR(myFirstColor);
   		_label.adjustsFontSizeToFitWidth = YES;
   
   		_subtextLabel.text = field.subtext;
   		_subtextLabel.font = TTSTYLEVAR(mySecondFont);
   		_subtextLabel.textColor = TTSTYLEVAR(mySecondColor);
   	}
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleTableFieldCell     ////
   /////////////////////////////////////////////////////
   
   @implementation BNSubtextWithRedTitleTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		_label.textColor = [UIColor redColor];
   	}
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

   All we did there was change the textColor property of the cell’s _label to an ugly ass red color.

3. Next we change the cellForClassObject method in RootViewDataSource.m to point to your new BNSubtextWithRedTitleTableFieldCell cell type.

   Make the RootViewDataSource.m look like this:

   #import "RootViewDataSource.h"
   #import "BNCell.h"
   
   @implementation RootViewDataSource
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public
   
   + (RootViewDataSource*)rootViewDataSource {
   	RootViewDataSource* dataSource =  [[[RootViewDataSource alloc] initWithItems:
   									 [NSMutableArray arrayWithObjects:
   									 [[[TTSubtextTableField alloc] initWithText:@"Video" subtext:@"Now you can shoot video, edit it, and share it — all on your iPhone 3G S."] autorelease],
   									 [[[TTSubtextTableField alloc] initWithText:@"3-Megapixel Camera" subtext:@"The new 3-megapixel camera takes great still photos, too, thanks to built-in autofocus."] autorelease],
   									 [[[TTSubtextTableField alloc] initWithText:@"Search" subtext:@"Find what you’re looking for across your iPhone, all from one convenient place."] autorelease],
   									 [[[TTSubtextTableField alloc] initWithText:@"Compass" subtext:@"With a built-in digital compass, iPhone 3G S can point the way."] autorelease],
   									 [[[TTSubtextTableField alloc] initWithText:@"Cut, Copy & Paste" subtext:@"Cut, copy, and paste words and photos, even between applications."] autorelease],
   									 nil]] autorelease];
   
   	return dataSource;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)dealloc {
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewDataSource
   
   - (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {
   
   	if ([object isKindOfClass:[TTSubtextTableField class]]) {
   		return [BNSubtextWithRedTitleTableFieldCell class];
   	} else {
   		return [super tableView:tableView cellClassForObject:object];
   	}
   }
   
   - (void)tableView:(UITableView*)tableView prepareCell:(UITableViewCell*)cell
   forRowAtIndexPath:(NSIndexPath*)indexPath {
   	cell.accessoryType = UITableViewCellAccessoryNone;
   }
   
   @end

You should end up with something like this when you run your app:

Changing a cell’s appearance AND data.

What if we want to add another piece of data to the cell like a URL? Right now the cell can only be fed a title, and subtext because that is all that the cell’s field contains (2 NSStrings).

What we have to do is subclass Three20′s existing TTSubtextTableField (which currently feeds both BNSubtextTableFieldCell and BNSubtextWithRedTitleTableFieldCell) to make a new field which will hold a new piece of data (a NSString for the URL we will add).

But before we make a new field, let’s make a new cell that subclasses our last cell with the addition of a new UILabel for the URL.

1. To make a new sub-classed cell, change BNCell.h to look like this:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////
   //////   BNSubtextTableFieldCell     ////
   /////////////////////////////////////////
   we
   @interface BNSubtextTableFieldCell : TTSubtextTableFieldCell {
   
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleTableFieldCell     ////
   /////////////////////////////////////////////////////
   
   @interface BNSubtextWithRedTitleTableFieldCell : BNSubtextTableFieldCell {
   
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ///////////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleAndURLTableFieldCell     ////
   ///////////////////////////////////////////////////////////
   
   @interface BNSubtextWithRedTitleAndURLTableFieldCell : BNSubtextWithRedTitleTableFieldCell {
     UILabel* _featureURLLabel;
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

2. And change BNCell.m to look like this:

   #import "BNCell.h"
   #import "BNField.h"
   #import "BNDefaultStylesheet.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////
   //////   BNSubtextTableFieldCell     ////
   /////////////////////////////////////////
   
   @implementation BNSubtextTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		TTSubtextTableField* field = object;
   
   		_label.text = field.text;
   		_label.font = TTSTYLEVAR(myFirstFont);
   		_label.textColor = TTSTYLEVAR(myFirstColor);
   		_label.adjustsFontSizeToFitWidth = YES;
   
   		_subtextLabel.text = field.subtext;
   		_subtextLabel.font = TTSTYLEVAR(mySecondFont);
   		_subtextLabel.textColor = TTSTYLEVAR(mySecondColor);
   	}
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleTableFieldCell     ////
   ////////////////////////////////////t/////////////////
   
   @implementation BNSubtextWithRedTitleTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		_label.textColor = [UIColor redColor];
   	}
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ///////////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleAndURLTableFieldCell     ////
   ////////////////////////////////////t//////////////////////
   
   @implementation BNSubtextWithRedTitleAndURLTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   + (CGFloat)tableView:(UITableView*)tableView rowHeightForItem:(id)item {
   	CGFloat maxWidth = tableView.width - 20;
   	BNSubtextWithRedTitleAndURLTableField* field = item;
   
   	CGSize textSize = [field.text sizeWithFont:TTSTYLEVAR(tableSmallFont)
   					   constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX)
   					   lineBreakMode:UILineBreakModeWordWrap];
   	CGSize subtextSize = [field.subtext sizeWithFont:TTSTYLEVAR(font)
   						  constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX) lineBreakMode:UILineBreakModeWordWrap];
   	CGSize featureURLSize = [field.featureURL sizeWithFont:[UIFont systemFontOfSize:12]
   						  constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX) lineBreakMode:UILineBreakModeWordWrap];
   
   	return 20 + textSize.height + subtextSize.height + featureURLSize.height;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString*)identifier {
   	if (self = [super initWithFrame:frame reuseIdentifier:identifier]) {
   		_featureURLLabel = [[UILabel alloc] initWithFrame:CGRectZero];
   		_featureURLLabel.font = [UIFont systemFontOfSize:11];
   		_featureURLLabel.textColor = [UIColor grayColor];
   		_featureURLLabel.backgroundColor = [UIColor clearColor];
   		_featureURLLabel.highlightedTextColor = TTSTYLEVAR(highlightedTextColor);
   		_featureURLLabel.textAlignment = UITextAlignmentLeft;
   		_featureURLLabel.contentMode = UIViewContentModeTop;
   		_featureURLLabel.lineBreakMode = UILineBreakModeWordWrap;
   		_featureURLLabel.numberOfLines = 0;
   		[self.contentView addSubview:_featureURLLabel];
   	}
   	return self;
   }
   
   - (void)dealloc {
   	[_featureURLLabel release];
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // UIView
   
   - (void)layoutSubviews {
   	[super layoutSubviews];
   	CGFloat maxWidth = self.contentView.width - 20;
   	CGSize featureURLSize = [_featureURLLabel.text sizeWithFont:_featureURLLabel.font
   						  constrainedToSize:CGSizeMake(maxWidth, CGFLOAT_MAX) lineBreakMode:_featureURLLabel.lineBreakMode];
   	_featureURLLabel.frame = CGRectMake(10, _subtextLabel.bottom + 5, featureURLSize.width, featureURLSize.height);
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewCell
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		BNSubtextWithRedTitleAndURLTableField* field = object;
   
   		_featureURLLabel.text = field.featureURL;
   	}
   }
   
   @end

Then we need to feed data into this new cell by sub-classing TTSubtextTableField.

1. Make a new file called BNField.m (check YES to “Also create BNField.h”).
2. Then make your new BNField.h file look like this:

   #import "Three20/Three20.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleAndURLTableField  /////
   /////////////////////////////////////////////////////
   
   @interface BNSubtextWithRedTitleAndURLTableField : TTSubtextTableField {
   	NSString *_featureURL;
   }
   @property(nonatomic, retain) NSString *featureURL;
   - (id)initWithText:(NSString*)text subtext:(NSString*)subtext featureURL:(NSString*)featureURL;
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

3. And make your BNField.m file look like this:

   #import "BNField.h"
   #import "BNCell.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   ////////////////////////////////////////////////////////
   //////   BNSubtextWithRedTitleAndURLTableField     /////
   ////////////////////////////////////////////////////////
   
   @implementation BNSubtextWithRedTitleAndURLTableField
   
   @synthesize featureURL = _featureURL;
   
   - (id)init {
   	if (self = [super init]) {
   		_featureURL = nil;
   	}
   	return self;
   }
   
   - (id)initWithText:(NSString*)text subtext:(NSString*)subtext featureURL:(NSString*)featureURL {
   	if (self = [super initWithText:text subtext:subtext]) {
   		self.featureURL = featureURL;
   	}
   	return self;
   }
   
   - (void)dealloc {
   	[_featureURL release];
   	[super dealloc];
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

Then we have to make some changes to RootViewDataSource.m
We will:

• Include BNField.h
• Change our datasource method calls from TTSubtextTableField to BNSubtextWithRedTitleAndURLTableField and pass a URL to this new field
• Change the cellClassForObject method to look for our new cell type (I should note that we have to change the IF statement so that our newest class is on top otherwise it won’t be found).

1. Make your RootViewDataSource.m look like this:

   #import "RootViewDataSource.h"
   #import "BNCell.h"
   #import "BNField.h"
   
   @implementation RootViewDataSource
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public
   
   + (RootViewDataSource*)rootViewDataSource {
   	RootViewDataSource* dataSource =  [[[RootViewDataSource alloc] initWithItems:
   									 [NSMutableArray arrayWithObjects:
   									 [[[BNSubtextWithRedTitleAndURLTableField alloc] initWithText:@"Video" subtext:@"Now you can shoot video, edit it, and share it — all on your iPhone 3G S." featureURL:@"http://www.apple.com/iphone/iphone-3gs/video-recording.html"] autorelease],
   									 [[[BNSubtextWithRedTitleAndURLTableField alloc] initWithText:@"3-Megapixel Camera" subtext:@"The new 3-megapixel camera takes great still photos, too, thanks to built-in autofocus." featureURL:@"http://www.apple.com/iphone/iphone-3gs/photos.html"] autorelease],
   									 [[[BNSubtextWithRedTitleAndURLTableField alloc] initWithText:@"Search" subtext:@"Find what you’re looking for across your iPhone, all from one convenient place." featureURL:@"http://www.apple.com/iphone/iphone-3gs/search.html"] autorelease],
   									 [[[BNSubtextWithRedTitleAndURLTableField alloc] initWithText:@"Compass" subtext:@"With a built-in digital compass, iPhone 3G S can point the way." featureURL:@"http://www.apple.com/iphone/iphone-3gs/maps-compass.html"] autorelease],
   									 [[[BNSubtextWithRedTitleAndURLTableField alloc] initWithText:@"Cut, Copy & Paste" subtext:@"Cut, copy, and paste words and photos, even between applications." featureURL:@"http://www.apple.com/iphone/iphone-3gs/cut-copy-paste.html"] autorelease],
   									 nil]] autorelease];
   
   	return dataSource;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)dealloc {
   	[super dealloc];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // TTTableViewDataSource
   
   - (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {
   
   	if ([object isKindOfClass:[BNSubtextWithRedTitleAndURLTableField class]]) {
   		return [BNSubtextWithRedTitleAndURLTableFieldCell class];
   	} else if ([object isKindOfClass:[TTSubtextTableField class]]) {
   		return [BNSubtextWithRedTitleTableFieldCell class];
   	} else {
   		return [super tableView:tableView cellClassForObject:object];
   	}
   }
   
   - (void)tableView:(UITableView*)tableView prepareCell:(UITableViewCell*)cell
   forRowAtIndexPath:(NSIndexPath*)indexPath {
   	cell.accessoryType = UITableViewCellAccessoryNone;
   }
   
   @end

Once you’re done changing RootViewDataSource.m……

Boom! Your app should look like this when launched:

—

Introduction to Three20 Stylesheets

In this tutorial, I am going to show you how to use CSS like stylesheets in your iPhone Apps.

If (like me) you’re coming to the iPhone platform from a Web Design perspective, you should be very familiar with CSS and external stylesheets. Unfortunately right now, there is no built-in equivalent to CSS for building iPhone apps.

Lucky for us Joe Hewitt has created a way with his Three20 iPhone Library. With Three20, you can easily change something like this:

To something like this:

Using this stylesheet:

Although I am going to show you some cool features of Three20, I’m NOT going to show you how to install Three20 in your Apps, nor build a complete App with Three20. Nope, today I’m only going to show you how to use Three20′s stylesheet capabilities.

I’m assuming a basic knowledge of Three20 and an intermediate knowledge of Cocoa and iPhone Dev. I’m also assuming you already have a UILabel or something to that you want to change the font of.

If you want to get your hands dirty, there is a sample app using this same code on my GitHub Three20 tutorial repository.

Let’s start the show

First things first, create your stylesheet.

1. Create a new blank file. Do this by going File >> New File, then clicking NSObject Subclass. Name the file “BNDefaultStylesheet” (i like sticking to Three20′s naming conventions by replacing the abbreviation TT with the abbreviation BN for “Basic Navigation”).

   Copy the following code into BNDefaultStylesheet.h:

   #import "Three20/TTStyleSheet.h"
   #import "Three20/TTDefaultStyleSheet.h"
   
   @interface BNDefaultStyleSheet : TTDefaultStyleSheet
   
   @end

   Then copy the following into BNDefaultStylesheet.m:

   #import "BNDefaultStyleSheet.h"
   #import "Three20/TTStyle.h"
   #import "Three20/TTShape.h"
   #import "Three20/TTURLCache.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   @implementation BNDefaultStyleSheet
   
   @end

2. Register the new stylesheet into the app delegate. Do this by making BasicNavigationAppDelegate.m look like this:

   #import "BasicNavigationAppAppDelegate.h"
   #import "RootViewController.h"
   #import "Three20/Three20.h"
   #import "BNDefaultStyleSheet.h"
   
   @implementation BasicNavigationAppAppDelegate
   
   @synthesize window;
   @synthesize navigationController;
   
   #pragma mark -
   #pragma mark Application lifecycle
   
   - (void)applicationDidFinishLaunching:(UIApplication *)application {
   
       // Override point for customization after app launch
   
   	[TTStyleSheet setGlobalStyleSheet:[[[BNDefaultStyleSheet alloc]
   										init] autorelease]];
   
   	[window addSubview:[navigationController view]];
       [window makeKeyAndVisible];
   }
   
   - (void)applicationWillTerminate:(UIApplication *)application {
   	// Save data if appropriate
   }
   
   #pragma mark -
   #pragma mark Memory management
   
   - (void)dealloc {
   	[navigationController release];
   	[window release];
   	[super dealloc];
   }
   
   @end

3. Make your first font style. Add a new font style and color by making BNDefaultStylesheet.h look like this:

   #import "Three20/TTStyleSheet.h"
   #import "Three20/TTDefaultStyleSheet.h"
   
   @interface BNDefaultStyleSheet : TTDefaultStyleSheet
   
   @property(nonatomic,readonly) UIColor* myFirstColor;
   @property(nonatomic,readonly) UIFont* myFirstFont;
   
   @end

   And making BNDefaultStylesheet.m look like this:

    

   #import "BNDefaultStyleSheet.h"
   #import "Three20/TTStyle.h"
   #import "Three20/TTShape.h"
   #import "Three20/TTURLCache.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   @implementation BNDefaultStyleSheet
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // styles
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public colors
   
   - (UIColor*)myFirstColor {
   	return RGBCOLOR(80, 110, 140);
   }
   
   - (UIColor*)mySecondColor {
   	return [UIColor grayColor];
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   // public fonts
   
   - (UIFont*)myFirstFont {
   	return [UIFont boldSystemFontOfSize:15];
   }
   
   - (UIFont*)mySecondFont {
   	return [UIFont systemFontOfSize:14];
   }
   
   @end

4. Use your new style. Change the font to point to the font style by making BNCell.m look like this:

   #import "BNCell.h"
   #import "BNDefaultStylesheet.h"
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   /////////////////////////////////////////
   //////   BNSubtextTableFieldCell     ////
   /////////////////////////////////////////
   
   @implementation BNSubtextTableFieldCell
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////
   
   - (void)setObject:(id)object {
   	if (_field != object) {
   		[super setObject:object];
   
   		TTSubtextTableField* field = object;
   		_label.text = field.text;
   		_label.font = TTSTYLEVAR(myFirstFont);
   		_label.textColor = TTSTYLEVAR(myFirstColor);
   		_label.adjustsFontSizeToFitWidth = YES;
   
   		_subtextLabel.text = field.subtext;
   	}
   }
   
   @end
   
   ///////////////////////////////////////////////////////////////////////////////////////////////////

Voila! You should now have your first App using Three20 Stylesheets. Your App should now have blue labels instead of black ones like so:

I’ll be refining this tutorial in the future, but if you find any glaring omissions please point em out.

AND To people following my tutorials: … DON’T BE SO PROUD. Ask questions if you have em, I’m cool with helping you get this stuff working in your Apps.