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

Meus contatos

http://twitter.com/iphonebrazuca

gustavo@iphonebrazuca.com.br