Three20
Como usar esta biblioteca e facilitar sua vida



Gust av o Am broz io
O que é o Three20

Biblioteca desenvolvida por Joe Hewitt
(Facebook app)

MVC para tabelas e listas

Novos Widgets

Rede e...
Exemplos
Instalação
Baixar do github (git clone git://github.com/uprise78/three20-P31.git)

Nas prefs do Xcode, incluir a pasta de ...
Multifacetado!

              Photo Browser




    TTStyle              Novos Widgets


Navegação interna
imitando web vi...
Photo Browser
Photo Browser
                                                                   Three20 Photo Browsing System            ...
Implementando
                   Subclasse de TTPhotoSource
-   (BOOL)isLoading;
-   (BOOL)isLoaded;
-   (void)load:(TTURL...
TTPhoto
                  Subclasse de TTPhoto

- (NSString*)URLForVersion:(TTPhotoVersion)version {
  if (version == TTPh...
TTStyle

Inspirado no CSS do HTML

Catálogo do Look and Feel do seu app que pode mudar todo o look a
qualquer tempo

Sempr...
Globais
@interface MyStyleSheet : TTDefaultStyleSheet

@property(nonatomic,readonly) UIColor* myFirstColor;
@property(nona...
Estilos complexos

É uma cadeia de TTStyle. Cada TTStyle é uma
“caixa preta” que pode desenhar ou
simplesmente alterar o c...
A cadeia

- (void)draw:(TTStyleContext*)context {

    // Modifica o context
    // Desenha algo usando o context

    // ...
TTStyledTextLabel

- (TTStyle*)smallText {
  return [TTTextStyle styleWithFont:[UIFont systemFontOfSize:12] next:nil];
}

...
TTStyledTextLabel
   NSString* kText = @"
 This is a test of styled labels.   Styled labels support

 <b>bold text</b>,

 ...
TTView




// SpeechBubble
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:290
         ...
TTView




// Badge
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:TT_ROUNDED] next:
[TTInsetStyle ...
TTView

// Mask
[TTMaskStyle styleWithMask:TTIMAGE(@"bundle://mask.png") next:
[TTLinearGradientFillStyle styleWithColor1:...
TTButton
[TTButton   buttonWithStyle:@"toolbarButton:" title:@"Toolbar Button"]
[TTButton   buttonWithStyle:@"toolbarRound...
TTButton

- (TTStyle*)blackForwardButton:(UIControlState)state {
  TTShape* shape = [TTRoundedRightArrowShape shapeWithRad...
TTButton
- (TTStyle*)dropButton:(UIControlState)state {
  if (state == UIControlStateNormal) {
    return
      [TTShapeSt...
TTStyleBuilder
Widgets
Tabs
_tabBar1 = [[TTTabStrip alloc] initWithFrame:CGRectMake(0, 0, 320, 41)];
_tabBar1.tabItems = [NSArray arrayWithObject...
Tabs
_tabBar2 = [[TTTabBar alloc] initWithFrame:CGRectMake(0, _tabBar1.bottom, 320, 40)];
_tabBar2.tabItems = [NSArray arr...
Tabs
_tabBar3 = [[TTTabGrid alloc] initWithFrame:CGRectMake(10, _tabBar2.bottom+10, 300, 0)];
_tabBar3.backgroundColor = [...
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 ...
1 - Registrar as URLs
TTNavigator* navigator = [TTNavigator navigator];
navigator.persistenceMode = TTNavigatorPersistence...
1 - Registrar as URLs
// The ordering controller will appear as a modal view controller, animated from bottom to top
[map ...
2 - Criar Links p/ as URLs

Todo componente tem uma propriedade
URL = @”tt://order/food”

Em qualquer método:
TTOpenURL(@”...
Utilitários
TTURLRequest

Substitui NSURLRequest

Cache automático em disco!

POST usando apenas um dicionário

POST de arquivos!

Fil...
TTURLRequest
TTURLRequest *req = [TTURLRequest requestWithURL:@”http://api.twitter.com/
post.xml” delegate:self];
NSMutabl...
Additions

NSString

NSDate

UIColor

UIImage

UIViewController

UIView

UITableView
Muito mais....
TTModel
Table Views e Table View Cells
Alguns View Controller já prontos:
   TTAlertViewController
   TTAct...
Ainda mais!!!


Text Fields:
  TTTextField
  TTSearchTextField
  TTPickerTextField
TTLauncherView
Cuidado!

Uso de APIs privadas

Arrumado em alguns forks
http://github.com/uprise78/three20-P31

Acompanhar na lista

Mas ...
Links


http://github.com/joehewitt/three20/

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

http://twitter.com/Three20

http://g...
Perguntas ???
Meus contatos



http://twitter.com/iphonebrazuca

gustavo@iphonebrazuca.com.br
Upcoming SlideShare
Loading in …5
×

Three20 by Gustavo Ambrozio - 3º iphonedevbr

5,386 views

Published on

Apresentação de Gustavo Ambrozio
Tema:
Biblioteca Three20 utilizado na aplicação do Facebook

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,386
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
75
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Three20 by Gustavo Ambrozio - 3º iphonedevbr

  1. 1. Three20 Como usar esta biblioteca e facilitar sua vida Gust av o Am broz io
  2. 2. O que é o Three20 Biblioteca desenvolvida por Joe Hewitt (Facebook app) MVC para tabelas e listas Novos Widgets Rede e cache Estilo (Objective-CSS)
  3. 3. Exemplos
  4. 4. 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.
  5. 5. Multifacetado! Photo Browser TTStyle Novos Widgets Navegação interna imitando web via Utilitários “URLs”
  6. 6. Photo Browser
  7. 7. Photo Browser Three20 Photo Browsing System class Data Interfaces protocol The arrows indicate either the message(s) that a class sends *or* how it uses another class. If a class implements a protocol, the protocol will be drawn inside the class's box. scrollView:didMoveToPageAtIndex: scollView:shouldZoom: many other optional methods thumbsViewController:didSelectPhoto: TTScrollView TTScrollView Delegate TTThumbs thumbsViewController:shouldNavigateToPhoto: ViewController TTScrollView Delegate TTThumbsViewController numberOfPagesInScrollView: scrollView:pageAtIndex: DataSource scrollView:sizeOfPageAtIndex: tableView:objectForRowAtIndexPath: many other optional methods load:nextPage: TTPhotoViewController list of "pages" TTTableView displayed horizontally DataSource TTThumbsDataSource TTPhotoSource TTPhotoSource TTThumbsTableView Delegate Delegate CellDelegate TTPhotoView TTPhotoView TTPhotoView thumbsTableViewCell:didSelectPhoto: TTThumbsTableViewCell photoAtIndex: photoAtIndex: each TTPhotoView asynchronously loadPhotosFromIndex:toIndex:cachePolicy: photoSourceDidStartLoad loadPhotosFromIndex:toIndex:cachePolicy: displays a single TTPhoto photoSourceDidFinishLoad: photoSource:didFailLoadWithError: photoSourceDidCancelLoad: TTPhoto TTPhotoSource list of photos Your TTPhoto Your TTPhotoSource Implementation Implementation
  8. 8. Implementando Subclasse de TTPhotoSource - (BOOL)isLoading; - (BOOL)isLoaded; - (void)load:(TTURLRequestCachePolicy)cachePolicy more:(BOOL)more; - (void)cancel; - (NSInteger)numberOfPhotos; - (NSInteger)maxPhotoIndex; - (id<TTPhoto>)photoAtIndex:(NSInteger)index; [_delegates perform:@selector(modelDidFinishLoad:) withObject:self];
  9. 9. TTPhoto Subclasse de 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; } }
  10. 10. 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
  11. 11. Globais @interface MyStyleSheet : TTDefaultStyleSheet @property(nonatomic,readonly) UIColor* myFirstColor; @property(nonatomic,readonly) UIFont* myFirstFont; @end @implementation MyStyleSheet - (UIColor*)myFirstColor { return RGBCOLOR(80, 110, 140); UILabel* label; } label.font = TTSTYLEVAR(myFirstFont); label.textColor = TTSTYLEVAR(myFirstColor); - (UIColor*)mySecondColor { return [UIColor grayColor]; } - (UIFont*)myFirstFont { return [UIFont boldSystemFontOfSize:15]; } - (UIFont*)mySecondFont { return [UIFont systemFontOfSize:14]; } @end http://mattvague.com/three20-stylesheets-tutorial
  12. 12. 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)
  13. 13. A cadeia - (void)draw:(TTStyleContext*)context { // Modifica o context // Desenha algo usando o context // Chama o next! [self.next draw:context]; }
  14. 14. 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]]]]]; }
  15. 15. 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 can actually 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 charactersnnand 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];
  16. 16. 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]]]
  17. 17. 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]]]]]]
  18. 18. TTView // Mask [TTMaskStyle styleWithMask:TTIMAGE(@"bundle://mask.png") next: [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(0, 180, 231) color2:RGBCOLOR(0, 0, 255) next:nil]]
  19. 19. TTButton [TTButton buttonWithStyle:@"toolbarButton:" title:@"Toolbar Button"] [TTButton buttonWithStyle:@"toolbarRoundButton:" title:@"Round Button"] [TTButton buttonWithStyle:@"toolbarBackButton:" title:@"Back Button"] [TTButton buttonWithStyle:@"toolbarForwardButton:" title:@"Forward Button"]
  20. 20. 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"]
  21. 21. TTButton - (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"]
  22. 22. TTStyleBuilder
  23. 23. Widgets
  24. 24. 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];
  25. 25. 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;
  26. 26. 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];
  27. 27. Tabs @protocol TTTabDelegate <NSObject> - (void)tabBar:(TTTabBar*)tabBar tabSelected: (NSInteger)selectedIndex; @end
  28. 28. TTNavigator
  29. 29. TTNavigator href do Three20 Automagicamente cria os ViewControllers e os coloca no stack Pode guardar todo o estado e depois restaura
  30. 30. 1 - Registrar as URLs 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];
  31. 31. 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)];
  32. 32. 2 - Criar Links p/ as URLs Todo componente tem uma propriedade URL = @”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”]
  33. 33. Utilitários
  34. 34. 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.
  35. 35. TTURLRequest TTURLRequest *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;
  36. 36. Additions NSString NSDate UIColor UIImage UIViewController UIView UITableView
  37. 37. 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
  38. 38. Ainda mais!!! Text Fields: TTTextField TTSearchTextField TTPickerTextField TTLauncherView
  39. 39. Cuidado! Uso de APIs privadas Arrumado em alguns forks http://github.com/uprise78/three20-P31 Acompanhar na lista Mas é open source....
  40. 40. Links http://github.com/joehewitt/three20/ http://groups.google.com/group/three20 http://twitter.com/Three20 http://github.com/klazuka/TTStyleBuilder
  41. 41. Perguntas ???
  42. 42. Meus contatos http://twitter.com/iphonebrazuca gustavo@iphonebrazuca.com.br

×