The document discusses the Three20 iPhone framework. It provides an overview of Three20 and its features, including its use of URLs for navigation between views, stylesheets for customizing UI, and various UI components like photo viewers and table views. It also covers how to set up a Three20 project, use the launcher for app navigation, and includes examples of common controllers and UI elements provided by Three20.

1. Three20
(@cngump)
cngump@gmail.com
http://www.cngump.com
http://www.techparty.org
2012.02
11 2 27

2. What’s Three20?
• Three20 iPhone 320×480
• Three20 Facebook Joe Hewitt
iOS Lib
11 2 27

3. Three20 Feature
• Router URL
• CSS
• UI
• (pull to refresh,photoviewer)
•
• (json,xml)
11 2 27

4. Three20 Hierarchy
Three20
Launcher
UI
UINavigator Style
UICommon Network
Core
11 2 27

5. Let’s Begin
git source:
git clone git://github.com/facebook/three20.git
git checkout v1.1
11 2 27

6. Template Xcode
Template
>./InstallTemplates3.2.5.Command
Xcode Three20
> python three20/src/scripts/ttmodule.py -p path/to/
myProject.xcodeproj Three20
11 2 27

7. URL-Based Navigation
11 2 27

8. TTNavigator* navigator = [TTNavigator navigator]; // TTNavigator
navigator.supportsShakeToReload = YES; //
navigator.persistenceMode = TTNavigatorPersistenceModeNone;
! //
! // TTNavigatorPersistenceModeNone
! // TTNavigatorPersistenceModeTop !
! // TTNavigatorPersistenceModeAll
TTURLMap* map = navigator.URLMap;!
[map from:@"*" toViewController:[TTWebController class]];
! // Controller
[map from:@"tt://root" toViewController:NSClassFromString(@"RootViewController")];
! //
[map from:@"tt://nib/(loadFromNib:)" toSharedViewController:self];
! // nib
[map from:@"tt://nib/(loadFromNib:)/(withClass:)" toSharedViewController:self];
! //nib class
[map from:@"tt://viewController/(loadFromVC:)" toSharedViewController:self];
! //
[map from:@"tt://modal/(loadFromNib:)" toModalViewController:self];
! // nib view!
if (![navigator restoreViewControllers]) {
! [navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://root"]];
! // URL
}
11 2 27

9. Use URL
- (void)createModel {
self.dataSource = [TTSectionedDataSource dataSourceWithObjects:
@" ",!
! ! ! !
[TTTableTextItem itemWithText:@" " URL:@"tt://nib/DemoTableViewController"],
[TTTableTextItem itemWithText:@"Twitter" URL:@"tt://nib/DemoTableViewController"],!
[TTTableTextItem itemWithText:@"QQ " URL:@"tt://nib/DemoTableViewController"],
nil];
}
@end
11 2 27

10. Style
11 2 27

11. //MyStyleSheet.h
@interface StyleSheet : TTDefaultStyleSheet {
}
@end
//MyStyleSheet.m
#import "StyleSheet.h"
@implementation MyStyleSheet
- (UIFont*)font {
return [UIFont fontWithName:@"Georgia" size:11];
}
- (UIFont*)tableFont {
return [UIFont fontWithName:@"Georgia" size:12];
}
- (UIFont*)tableHeaderPlainFont {
return [UIFont fontWithName:@"Georgia-Bold" size:13];
}
@end
//AppDelegate.m
[TTStyleSheet setGlobalStyleSheet:[[[StyleSheet alloc] init] autorelease]];
11 2 27

12. Controllers
TTViewController
TTTableViewController
TTWebController
TTPhotoViewController
TTThumbsViewController
TTPostController
TTMessageController
TTLauncherViewController
11 2 27

13. UI
11 2 27

14. PhotoView
@interface PhotoTest1Controller : TTPhotoViewController
@end
@implementation PhotoTest1Controller
- (void)viewDidLoad {
self.photoSource = [[[MockPhotoSource alloc]
initWithType:MockPhotoSourceNormal
title:@"Flickr Photos"
photos:[NSArray arrayWithObjects:
[[[MockPhoto alloc]
initWithURL:@"http://farm4.static.flickr.com/
3099/3164979221_6c0e583f7d.jpg?v=0"
smallURL:@"http://farm4.static.flickr.com/
3099/3164979221_6c0e583f7d_t.jpg"
size:CGSizeMake(320, 480)] autorelease],
[[[MockPhoto alloc]
initWithURL:@"http://farm4.static.flickr.com/
3444/3223645618_13fe36887a_o.jpg"
smallURL:@"http://farm4.static.flickr.com/
3444/3223645618_f5e2fa7fea_t.jpg"
size:CGSizeMake(320, 480)
caption:@"This is a caption."] autorelease],
! nil]
! ! ! ! !
photos2:nil
] autorelease];
}
@end
11 2 27

15. TTThumbsView
@interface PhotoTest1Controller : TTThumbsViewController
@end
@implementation PhotoTest1Controller
- (void)viewDidLoad {
self.photoSource = [[[MockPhotoSource alloc]
initWithType:MockPhotoSourceNormal
title:@"Flickr Photos"
photos:[NSArray arrayWithObjects:
[[[MockPhoto alloc]
initWithURL:@"http://farm4.static.flickr.com/
3099/3164979221_6c0e583f7d.jpg?v=0"
smallURL:@"http://farm4.static.flickr.com/
3099/3164979221_6c0e583f7d_t.jpg"
size:CGSizeMake(320, 480)] autorelease],
[[[MockPhoto alloc]
initWithURL:@"http://farm4.static.flickr.com/
3444/3223645618_13fe36887a_o.jpg"
smallURL:@"http://farm4.static.flickr.com/
3444/3223645618_f5e2fa7fea_t.jpg"
size:CGSizeMake(320, 480)
caption:@"This is a caption."] autorelease],
! nil]
! ! ! ! !
photos2:nil
] autorelease];
}
@end
11 2 27

16. TTTableViewDragRefreshDelegate
// in TTTableViewController‘s sub class
- (id<UITableViewDelegate>)createDelegate {
! return [[[TTTableViewDragRefreshDelegate alloc]
initWithController:self] autorelease];
}
11 2 27

17. Launcher
Added in Three20 1.1 version
//BasicLauncherViewController.h
#import <Three20Launcher/Three20Launcher.h>
@interface BasicLauncherViewController : TTLauncherViewController {
}
@end
//BasicLauncherViewController.m
#import "BasicLauncherViewController.h"
@implementation BasicLauncherViewController
- (void)viewDidLoad {
! [super viewDidLoad];!
! TTLauncherItem* item =
[[TTLauncherItem alloc] initWithTitle: @"Item title"
image: @"bundle://Icon.png"
URL: nil];
! [self.launcherView addItem:item animated:NO];
! TT_RELEASE_SAFELY(item);
}
@end
11 2 27

18. More UI in
Three20’s samples
11 2 27

19. Demo Project
MultiWeibo
11 2 27

20. 11 2 27

21. Question?
11 2 27