three20 by gustavo ambrozio - 3º iphonedevbr
DESCRIPTION
Apresentação de Gustavo Ambrozio Tema: Biblioteca Three20 utilizado na aplicação do FacebookTRANSCRIPT
Gustavo Ambrozio
Three20Como usar esta biblioteca e facilitar sua vida
O que é o Three20
Biblioteca desenvolvida por Joe Hewitt (Facebook app)
MVC para tabelas e listas
Novos Widgets
Rede e cache
Estilo (Objective-CSS)
Exemplos
Instalação
Baixar do github (git clone git://github.com/uprise78/three20-P31.git)
Nas prefs do Xcode, incluir a pasta de src do Three20 como um “Source Tree”
Arrastar o Three20.xcodeproj para o root do seu projeto com o “Reference Type” relativo ao Source Tree que você criou e SEM copiar.
Arrastar o libThree20.a para o link libraries do seu Target.
Configurar o Three20 como dependência do seu Target. Aproveitar e incluir o QuartzCore framework ao Target.
Inclusão do bundle to Three20 no projeto, também sem copiar e relativo ao Source Tree.
Nas propriedades do projeto:
Incluir o Source Tree do Three20 no “Header Search Paths”
Incluir as flags “-ObjC” e “-all_load” no “Other Linker Flags”
Incluir o “Three20/Three20.h” nos seus headers.
Multifacetado!
Photo Browser
TTStyle Novos Widgets
Navegação internaimitando web via
“URLs”Utilitários
Photo Browser
Photo Browser
TTPhotoViewTTPhotoView
class
protocol
TTThumbsDataSource
TTPhotoViewController
TTScrollView TTScrollView
Delegate
TTScrollView
DataSource
TTThumbs
ViewController
Delegate
TTTableView
DataSource
TTPhotoView
Three20 Photo Browsing SystemData Interfaces
TTPhotoSource
DelegateTTPhotoSource
Delegate
TTThumbsTableView
CellDelegate
photoSourceDidStartLoadphotoSourceDidFinishLoad:photoSource:didFailLoadWithError:photoSourceDidCancelLoad:
If a class implements a protocol, the protocol will be drawn inside the class's box.
list of "pages"displayed horizontally
TTPhotoSource
TTThumbsTableViewCell
thumbsTableViewCell:didSelectPhoto:
TTPhoto
Your TTPhoto
Implementation
each TTPhotoView asynchronouslydisplays a single TTPhoto
thumbsViewController:didSelectPhoto:thumbsViewController:shouldNavigateToPhoto:
scrollView:didMoveToPageAtIndex:scollView:shouldZoom:many other optional methods
numberOfPagesInScrollView:scrollView:pageAtIndex:scrollView:sizeOfPageAtIndex:many other optional methods
photoAtIndex:loadPhotosFromIndex:toIndex:cachePolicy:
Your TTPhotoSource
Implementation
The arrows indicate either the message(s) that a class sends *or* how it uses another class.
photoAtIndex:loadPhotosFromIndex:toIndex:cachePolicy:
list of photos
tableView:objectForRowAtIndexPath:load:nextPage:
TTThumbsViewController
Implementando
- (BOOL)isLoading;- (BOOL)isLoaded;- (void)load:(TTURLRequestCachePolicy)cachePolicy more:(BOOL)more;- (void)cancel;- (NSInteger)numberOfPhotos;- (NSInteger)maxPhotoIndex;- (id<TTPhoto>)photoAtIndex:(NSInteger)index;
Subclasse de TTPhotoSource
[_delegates perform:@selector(modelDidFinishLoad:) withObject:self];
TTPhoto
- (NSString*)URLForVersion:(TTPhotoVersion)version { if (version == TTPhotoVersionLarge) { return _URL; } else if (version == TTPhotoVersionMedium) { return _URL; } else if (version == TTPhotoVersionSmall) { return _smallURL; } else if (version == TTPhotoVersionThumbnail) { return _thumbURL; } else { return nil; }}
Subclasse de TTPhoto
TTStyle
Inspirado no CSS do HTML
Catálogo do Look and Feel do seu app que pode mudar todo o look a qualquer tempo
Sempre derivará do TTDefaultStyleSheet
[TTStyleSheet setGlobalStyleSheet:[[[MyStyleSheet alloc] init] autorelease]];
Repositórios de elementos globais como cores e fontes
Estilos complexos
Globais@interface MyStyleSheet : TTDefaultStyleSheet @property(nonatomic,readonly) UIColor* myFirstColor; @property(nonatomic,readonly) UIFont* myFirstFont; @end
@implementation MyStyleSheet - (UIColor*)myFirstColor { return RGBCOLOR(80, 110, 140); } - (UIColor*)mySecondColor { return [UIColor grayColor]; } - (UIFont*)myFirstFont { return [UIFont boldSystemFontOfSize:15]; } - (UIFont*)mySecondFont { return [UIFont systemFontOfSize:14]; } @end
UILabel* label; label.font = TTSTYLEVAR(myFirstFont); label.textColor = TTSTYLEVAR(myFirstColor);
http://mattvague.com/three20-stylesheets-tutorial
Estilos complexos
É uma cadeia de TTStyle. Cada TTStyle é uma “caixa preta” que pode desenhar ou simplesmente alterar o contexto.
O Sample TTCatalog é o mais completo guia de estilos.
TTStyle.h
TTStyleBuilder (http://github.com/klazuka/TTStyleBuilder)
A cadeia
- (void)draw:(TTStyleContext*)context {
// Modifica o context// Desenha algo usando o context
// Chama o next!
[self.next draw:context];}
TTStyledTextLabel
- (TTStyle*)smallText { return [TTTextStyle styleWithFont:[UIFont systemFontOfSize:12] next:nil];}
- (TTStyle*)floated { return [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(0, 0, 5, 5) padding:UIEdgeInsetsMake(0, 0, 0, 0) minSize:CGSizeZero position:TTPositionFloatLeft next:nil];}
- (TTStyle*)blueBox { return [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:6] next: [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -5, -4, -6) next: [TTShadowStyle styleWithColor:[UIColor grayColor] blur:2 offset:CGSizeMake(1,1) next: [TTSolidFillStyle styleWithColor:[UIColor cyanColor] next: [TTSolidBorderStyle styleWithColor:[UIColor grayColor] width:1 next:nil]]]]];}
TTStyledTextLabel NSString* kText = @"\This is a test of styled labels. Styled labels support
<b>bold text</b>,
<i>italic text</i>,
<span class=\"blueText\">colored text</span>,
<span class=\"largeText\">font sizes</span>,
<span class=\"blueBox\">spans with backgrounds</span>,
inline images <img src=\"bundle://smiley.png\"/>, and
<a href=\"http://www.google.com\">hyperlinks</a> you canactually touch. URLs are automatically converted into links, like this: http://www.foo.com\
<div>You can enclose blocks within an HTML div.</div>
Both line break characters\n\nand HTML line breaks<br/>are respected.";
TTStyledTextLabel* label1 = [[[TTStyledTextLabel alloc] initWithFrame:self.view.bounds] autorelease]; label1.font = [UIFont systemFontOfSize:17]; label1.text = [TTStyledText textFromXHTML:kText lineBreaks:YES URLs:YES]; label1.contentInset = UIEdgeInsetsMake(10, 10, 10, 10); [label1 sizeToFit]; [self.view addSubview:label1];
TTView
// SpeechBubble [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:290 pointAngle:270 pointSize:CGSizeMake(20,10)] next: [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next: [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]]
TTView
// Badge [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:TT_ROUNDED] next: [TTInsetStyle styleWithInset:UIEdgeInsetsMake(1.5, 1.5, 1.5, 1.5) next: [TTShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.8) blur:3 offset:CGSizeMake(0, 5) next: [TTReflectiveFillStyle styleWithColor:[UIColor redColor] next: [TTInsetStyle styleWithInset:UIEdgeInsetsMake(-1.5, -1.5, -1.5, -1.5) next: [TTSolidBorderStyle styleWithColor:[UIColor whiteColor] width:3 next:nil]]]]]]
TTView
// Mask [TTMaskStyle styleWithMask:TTIMAGE(@"bundle://mask.png") next: [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(0, 180, 231) color2:RGBCOLOR(0, 0, 255) next:nil]]
[TTButton buttonWithStyle:@"toolbarButton:" title:@"Toolbar Button"] [TTButton buttonWithStyle:@"toolbarRoundButton:" title:@"Round Button"] [TTButton buttonWithStyle:@"toolbarBackButton:" title:@"Back Button"] [TTButton buttonWithStyle:@"toolbarForwardButton:" title:@"Forward Button"]
TTButton
TTButton
- (TTStyle*)blackForwardButton:(UIControlState)state { TTShape* shape = [TTRoundedRightArrowShape shapeWithRadius:4.5]; UIColor* tintColor = RGBCOLOR(0, 0, 0); return [TTSTYLESHEET toolbarButtonForState:state shape:shape tintColor:tintColor font:nil];}
[TTButton buttonWithStyle:@"blackForwardButton:" title:@"Black Button"]
- (TTStyle*)dropButton:(UIControlState)state { if (state == UIControlStateNormal) { return [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:8] next: [TTShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.7) blur:3 offset:CGSizeMake(2, 2) next: [TTTextStyle styleWithFont:nil color:TTSTYLEVAR(linkTextColor) shadowColor:[UIColor colorWithWhite:255 alpha:0.4] shadowOffset:CGSizeMake(0, -1) next:nil]]]]]]]]]; } else if (state == UIControlStateHighlighted) { return [TTInsetStyle styleWithInset:UIEdgeInsetsMake(3, 3, 0, 0) next: [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:8] next: [TTTextStyle styleWithFont:nil color:TTSTYLEVAR(linkTextColor) shadowColor:[UIColor colorWithWhite:255 alpha:0.4] shadowOffset:CGSizeMake(0, -1) next:nil]]]]]]]; }}[TTButton buttonWithStyle:@"dropButton:" title:@"Shadow Button"]
TTButton
TTStyleBuilder
Widgets
Tabs
_tabBar1 = [[TTTabStrip alloc] initWithFrame:CGRectMake(0, 0, 320, 41)]; _tabBar1.tabItems = [NSArray arrayWithObjects: [[[TTTabItem alloc] initWithTitle:@"Item 1"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Item 2"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Item 3"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Item 4"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Item 5"] autorelease], nil]; [self.view addSubview:_tabBar1];
Tabs
_tabBar2 = [[TTTabBar alloc] initWithFrame:CGRectMake(0, _tabBar1.bottom, 320, 40)]; _tabBar2.tabItems = [NSArray arrayWithObjects: [[[TTTabItem alloc] initWithTitle:@"Banana"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Cherry"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Orange"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Grape"] autorelease], nil]; _tabBar2.selectedTabIndex = 2; [self.view addSubview:_tabBar2];
TTTabItem* item = [_tabBar2.tabItems objectAtIndex:1]; item.badgeNumber = 2;
Tabs _tabBar3 = [[TTTabGrid alloc] initWithFrame:CGRectMake(10, _tabBar2.bottom+10, 300, 0)]; _tabBar3.backgroundColor = [UIColor clearColor]; _tabBar3.tabItems = [NSArray arrayWithObjects: [[[TTTabItem alloc] initWithTitle:@"Banana"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Cherry"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Orange"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Pineapple"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Grape"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Mango"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Blueberry"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Apple"] autorelease], [[[TTTabItem alloc] initWithTitle:@"Peach"] autorelease], nil]; [_tabBar3 sizeToFit]; [self.view addSubview:_tabBar3];
Tabs
@protocol TTTabDelegate <NSObject>
- (void)tabBar:(TTTabBar*)tabBar tabSelected:(NSInteger)selectedIndex;
@end
TTNavigator
TTNavigator
href do Three20
Automagicamente cria os ViewControllers e os coloca no stack
Pode guardar todo o estado e depois restaura
TTNavigator* navigator = [TTNavigator navigator]; navigator.persistenceMode = TTNavigatorPersistenceModeAll; navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease]; TTURLMap* map = navigator.URLMap; // Any URL that doesn't match will fall back on this one, and open in the web browser [map from:@"*" toViewController:[TTWebController class]]; // The tab bar controller is shared, meaning there will only ever be one created. Loading // This URL will make the existing tab bar controller appear if it was not visible. [map from:@"tt://tabBar" toSharedViewController:[TabBarController class]]; // Menu controllers are also shared - we only create one to show in each tab, so opening // these URLs will switch to the tab containing the menu [map from:@"tt://menu/(initWithMenu:)" toSharedViewController:[MenuController class]]; // A new food controllers will be created each time you open a food URL [map from:@"tt://food/(initWithFood:)" toViewController:[ContentController class]];
// This is an example of how to use a transition. Opening the nutrition page will do a flip [map from:@"tt://food/(initWithNutrition:)/nutrition" toViewController:[ContentController class] transition:UIViewAnimationTransitionFlipFromLeft];
1 - Registrar as URLs
1 - Registrar as URLs // The ordering controller will appear as a modal view controller, animated from bottom to top [map from:@"tt://order?waitress=(initWithWaitress:)" toModalViewController:[ContentController class]]; // This is a hash URL - it will simply invoke the method orderAction: on the order controller, // and it will open the order controller first if it was not already visible [map from:@"tt://order?waitress=()#(orderAction:)" toViewController:[ContentController class]]; // This will show the post controller to prompt to type in their order [map from:@"tt://order/food" toViewController:[TTPostController class]]; // This will call the confirmOrder method on this app delegate and ask it to return a // view controller to be opened. In this case, it will return an alert view controller. // This kind of URL mapping gives you the chance to configure your controller before // it is opened. [map from:@"tt://order/confirm" toViewController:self selector:@selector(confirmOrder)]; // This will simply call the sendOrder method on this app delegate [map from:@"tt://order/send" toObject:self selector:@selector(sendOrder)];
2 - Criar Links p/ as URLs
Todo componente tem uma propriedadeURL = @”tt://order/food”
Em qualquer método:TTOpenURL(@”tt://food/banana”);
Em Styled Text:<a href=”tt://food/banana/nutrition”>Bananas!</a>
Em TTTableItems:[TTTableTextItem itemWithText:@”Banana” URL:@”tt://food/banana”]
Utilitários
TTURLRequest
Substitui NSURLRequest
Cache automático em disco!
POST usando apenas um dicionário
POST de arquivos!
Fila gerenciada pode ser suspensa a qualquer momento.
TTURLRequestTTURLRequest *req = [TTURLRequest requestWithURL:@”http://api.twitter.com/post.xml” delegate:self];NSMutableDictionary *parameters = req.parameters;[parameters setObject:@”gpambrozio” forKey:@”username”];[parameters setObject:@”senha” forKey:@”password”];
[req addFile:[NSData dataWithContentsOfFile:@”avatar.jpg”] mimeType:@”image/jpg” fileName:@”avatar”];// Pode ser assim tb![parameters setObject:[UIImage imageNamed:@”avatar.png”] forKey:@”avatar”];
req.httpMethod=@”POST”;[req send];
Esperar no delegate por:
- (void)requestDidFinishLoad:(TTURLRequest*)request;
Parando todos os requests:[TTURLRequestQueue mainQueue].suspended = YES;
Additions
NSString
NSDate
UIColor
UIImage
UIViewController
UIView
UITableView
Muito mais....
TTModel
Table Views e Table View Cells
Alguns View Controller já prontos:
TTAlertViewController
TTActionSheetController
TTPostController
TTPopupViewController
TTWebController
TTMessageController (pre 3.0)
Views prontos
TTImageView
TTYouTubeView
Ainda mais!!!
Text Fields:
TTTextField
TTSearchTextField
TTPickerTextField
TTLauncherView
Cuidado!
Uso de APIs privadas
Arrumado em alguns forkshttp://github.com/uprise78/three20-P31
Acompanhar na lista
Mas é open source....
Links
http://github.com/joehewitt/three20/
http://groups.google.com/group/three20
http://twitter.com/Three20
http://github.com/klazuka/TTStyleBuilder
Perguntas ???