Three20 open source Objective C framework06/17/2011
Many ideas came to mind when I decided to create this Three20 Framework blog post. They have so many interesting classes and features that have been quite untouched by the tutorial community it was almost overwhelming. As a iPhone/iPad developer, I decided to write a short blog post to go over the history and the benefits behind the Three20 framework and share my findings at the same time.
Three20 was originally created for the Facebook app by Joe Hewitt in 2009. He named it Three20 after the 320-pixel-wide screen of the iPhone. The code is open source and available on github. Three20 is “modular,” meaning you only have to import the elements from the library you wish to include in your application, allowing the library to be very open to new parts (extensions) created by other developers in the community.
Some of the most well known features include drag-to-refresh, the “launcher,” the photo viewer, and a few behind the scenes features: the URL based navigation, web image views, and my personal favorite, CSS style sheets.
Drag-to-refresh is one of the most brilliant features. It’s such a simple idea. Look at the screen shot of Facebook and imagine the app without drag–to-refresh. Where would you feature a refresh button? There is no real estate space available. You can also use shake to refresh but will users figure this out without instructions? Instructions both consume space and require the user to learn something new. With this feature, your application doesn’t have to send requests to the server as often which increases the speed of the app and the server. Setting up this feature in an app with Three20 library included is very simple. You just need to add the following lines of code in your Three20 table view :
The Launcher view is yet another innovative and easy to use feature in Three20. I think this is a great feature because it allows a clean and well designed menu as well as displaying badges on the views to signal that something has happened.
The Photo Viewer
Much like the launcher view, the photo viewer also closely copies the familiar style from Apple’s pre-installed apps. The main difference between this control and the default photo app is that the Three20 photo viewer allows a data source to be pulled from the Web instead of just your photos local to your phone. The example in the screen shot is taken from a Flickr feed.
URL-based navigation was one of the harder things to learn when I started using Three20 but once I got used to it I found it to be very handy. Instead of the Objective-C standard way of pushing and popping view controllers with the Navigation controller, you map your view controllers to URLs and call them by their own personal URL. You can also use the URLs to send variables to your views. It is a bit confusing but I will try to explain it a little better in a tutorial (in a later blog post).
Web image views (TTImageView)
This view makes it very simple to display an image downloaded from the Web. Just supply the image URL and it loads and caches the image automatically to avoid sending an HTTP request every time the view appears. The TTImageView class also allows you to set a default image that is local to your phone while the image loads. For example in the Facebook application when you are browsing you will sometimes see a picture of a cartoon head instead of your friends’ images for a few seconds while their images load. This is the TTImageView class in action.
CSS Style Sheets
As a Web developer, creating table cells in an iPhone application is a huge pain. Using the extension class extCSSStyle, you can use CSS style sheets to create classes and styles for any view, making it easy to work with font styles. I plan to go into more detail in a future blog post at a later date.
These are just a few of the interesting features of the Three20 framework that I thought were most noteworthy. If you wish to learn more about Three20, visit three20.info/or check at our blog.