Three20

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

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

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

Three20 Hierarchy Three20 Launcher UI UINavigator Style UICommon Network Core11 2 27

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

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

URL-Based Navigation11 2 27

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

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]; } @end11 2 27

Style11 2 27

//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

Controllers TTViewController TTTableViewController TTWebController TTPhotoViewController TTThumbsViewController TTPostController TTMessageController TTLauncherViewController11 2 27

UI11 2 27

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]; } @end11 2 27

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]; } @end11 2 27

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

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); } @end11 2 27

More UI in Three20’s samples11 2 27

Demo Project MultiWeibo11 2 27

11 2 27

Question?11 2 27

http://www.cngump.com	1071
http://blog1.cngump.com	182
http://feed.feedsky.com	5
http://static.slidesharecdn.com	2
http://cache.baidu.com	2

Three20

by Gump Law on Feb 26, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,262

Statistics

Three20 — Presentation Transcript