Three20 framework for iOS development

李致緯 Chih-Wei LeeGoogle Summer of Code Student 2010

Email: dlackty@gmail.com Twitter/Facebook/GitHub: @dlackty

Google Summer of Code 2010

Why you should know more about mobile apps?

Lots of new startups build their own mobile app first!

Web giants also build wonderful mobile apps.

Luke WroblewskiSource : http://www.lukew.com/ff/entry.asp?933

1. Mobile is exploding

2. Mobile forces you to focus

3. Mobile extends your capabilities

Mobile first, web second.

Connected to Internet

90% apps has data transmission to server

•Push notifications

•Member system

•Data display/browse

•Online ranking

•Search

Cocoa touch aren’t optimized as a web client

•No simple mechanism to manipulate online objects

•Need to make lots of caches of online resource

•Some UI components are missing

•Navigation between view controllers are trivial

•There’re event no built-in JSON parsers!

Three20

Three20

•Originally developed by Joe Hewitt at Facebook

•Used to build official Facebook app

•Similar to many web frameworks

•Now an most popular Objective-C project on GitHub

More on http://three20.info/

Three20 modules

Three20 Core

Three20 Core provides a basic set of tools useful for debugging your applications, dealing with standard data structures, and doing basic text manipulation.

Examples:

•TT_RELEASE_SAFELY(POINTER);

•NSString* TTPathForDocumentsResource(NSString* relativePath);

•(NSDictionary*)queryDictionaryUsingEncoding:(NSStringEncoding)encoding;

•NSArray - (void)perform:(SEL)selector;

•NSData - (NSString*)md5Hash;

Three20 Network

Three20 Network mainly provide TTURLRequest, compared to NSURLRequest, it provides more features.

Features

•HTTP methods support (POST/GET/PUT)

•Simple post parameters

•File-based cache

•Automatically parse downloaded data an validate

•Handle cookies

Three20 UICommon

Three20 UICommon provides basic UI utilities for construction of higher level UI modules.

Examples:

•float TTOSVersion();

•BOOL TTIsPad();

•BOOL TTIsKeyboardVisible();

•void TTAlert(NSString* message);

•- (UIView*)findFirstResponderInView:(UIView*)topView;

Three20 UINavigator

Three20 UINavigator makes iPhone apps like web apps based on URL-mapping mechanism.

The URLs are mapped into Objective-C view controllers, and the parameters are passed to init method.

Features:

•TTBaseNavigator - The main url handler to open urls

•TTURLAction - Action to open url with some option parameters

•TTURLMap - Map URLS to view controllers

TTURLMap* map = navigator.URLMap;[map from:@"*" toViewController:[TTWebController class]];[map from:@"tt://catalog" toViewController:[CatalogController class]];[map from:@"tt://photoTest1" toViewController:[PhotoTest1Controller class]];[map from:@"tt://photoTest2" toViewController:[PhotoTest2Controller class]];[map from:@"tt://imageTest1" toViewController:[ImageTest1Controller class]];[map from:@"tt://tableTest" toViewController:[TableTestController class]];

URL-Mapping examples

TTOpenURL(@"tt://launcherTest");

then, you can simply:

LauncherViewTestController *viewController = [[LauncherViewTestController alloc] init];[self.navigationController pushViewController:viewController animated:YES];[viewController release];

Instead of

Three20 Style

Three20 Style make developers to style UIs with a main stylesheets, instead of manually set each UIs style.

Also it provides some utilities to cope with UIs and do images manipulations.

Examples:

•- (UIImage*)transformWidth:(CGFloat)width height:(CGFloat)height rotate:(BOOL)rotate;

•- (void)drawInRect:(CGRect)rect radius:(CGFloat)radius;

Three20 UI

Three20 UI is the most wonderful part of the framework, includes enhancements of UIKit, new view controllers and new UI components

TTImageView examples

Instead of

TTImageView *imageView = [[TTImageView alloc] initWithFrame:frame]; [imageView setUrlPath:@"http://www.foo.com/bar.jpg"];

UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame]; NSURL *url = [NSURL URLWithString:@"http://www.foo.com/bar.jpg"]; NSData *data = [[NSData alloc] initWithContentsOfURL:url]; [imageView setImage:[UIImage imageWithData:data]];

and with additional asynchronous loading, and disk cache

TTPhotoViewController

TTMessageController

TTLauncherView

Three20 extensions

Three20 Extensions

extCSSStyleThis extension provides support for reading Three20 style sheets from CSS files.

extXMLThree20 XML Extension for parsing XML objects into Objective-C NSObjects.

extJSONThree20 JSON Extension for parsing JSON objects in to Objective-C NSObjects.

Check out http://three20.info/

New official website with docs and tutorials

Reference

Official website http://three20.info

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

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