The Flying Jalapeño Lives

I’m currently involved in a project where I need to load some photos from the web and I need a UITableview with some thumbnails and with Photo.app navigation.

Enter Three20. Three20 is a framework written by Joe Hewitt that abstracts much of the functionality of UITableViews, UITableViewCells, and networking away from the programmer. The way the components are abstracted is clearly MVC, but done in a more “web application” way. I believe Joe commented in his recent interview on the Mobile Orchard podcast.

When you download Three20, there is a nice sample app included with just about everything you can create. This provides a great overview of what is included within the framework.

The functionality of the UIKit classes has been abstracted to the point that you never really touch the usual delegate and datasource methods. You create view and controller objects through a completely different programmatic interface.

You can create tableviews and photo galleries very easily by just adding creating a data source array and the view classes basically take care of themselves. This was very cleanly done. For instance, to determine the type of cell that will appear in your table, you populate your datasource with a specific type of *Field object. A TTTextTableField produces a text cell, a TTSwitchTableField yields a cell with a switch, etc…

To create a Photo Browser View and/or a Photo Thumb View is slightly more difficult. You will need to define your own Photo Datasource class. In the example code, there is a mock photosource class setup that provides a good starting framework.

Unfortunately, the requirements for my current project didn’t allow me to use the Three20 classes as is. I had to dig a little deeper into the framework and modify it to suit my needs.

When you dive into the code, you quickly find all the Cocoa classes have not been merely subclassed, but have had there behaviors completely altered. I could use the basic, high-level classes, but I could not understand exactly how they worked behind the scenes. I needed to subclass the TTThumbViewController and I had to understand what I needed change to make it work for me.

To be frank, it is complicated. So complicated, I considered giving up subclassing it several times during my adventure. As I began to decipher the interconnections and roles of different objects, some design patterns began to fall out. An interesting note is Three20’s use of delegates. There are many delegates and controllers and controller delegates and datasource delegates, etc…  This was one of the main reasons it was hard for me to fully comprehend the framework. I literally had to pull a notebook out and start drawing the connections between the classes.

After a few hours,  I felt I had a decent understanding of the underpinnings of the relevant classes which I needed to alter. I began to make my construct my classes and finally accomplished my goal of customizing the thumbs view to the following:

I know, not very impressive on the surface. What I managed to do was add section support to the TTThumbsViewController. The stock class only supports a single section with no division between the rows of photos. Also, it only supports one photo source per view. I have changed it to allow a photo source per section (Even though it looks like one source, it’s actually 2 sources with the same data).

It’s not bug free yet, and [redacted] betas are a little picky. When I get a little more solid, I’ll see if I can get a fork going on GitHub and upload my additions there.

In the end, I think it was worth getting intimate with Three20 to get all of the networking and photo browsing goodness for free.

I encourage everyone to check out Three20. It works great for just about anything you want to do. If it was my decision, I would have just changed my design to accommodate the framework and save myself a weekend.

Let me know if any of you have used Three20 and what your experiences were.