Three20 by Gustavo Ambrozio - 3º iphonedevbr

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 cache

Estilo (Objective-CSS)

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 interna
imitando web via Utilitários
“URLs”

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

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];

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;
}
}

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); 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

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

bold text,

italic text,

colored text,

font sizes,

spans with backgrounds,

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

- (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"]

TTButton
- (TTStyle*)dropButton:(UIControlState)state {
if (state == UIControlStateNormal) {
return
[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:
[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"]

Tabs
_tabBar1 = [[TTTabStrip alloc] initWithFrame:CGRectMake(0, 0, 320, 41)];
_tabBar1.tabItems = [NSArray arrayWithObjects:
[[[TTTabItem alloc] initWithTitle:@"Item 1"] autorelease],
nil];
[self.view addSubview:_tabBar1];

Tabs
_tabBar2 = [[TTTabBar alloc] initWithFrame:CGRectMake(0, _tabBar1.bottom, 320, 40)];
[[[TTTabItem alloc] initWithTitle:@"Banana"] autorelease],
[[[TTTabItem alloc] initWithTitle:@"Cherry"] autorelease],
[[[TTTabItem alloc] initWithTitle:@"Orange"] autorelease],
[[[TTTabItem alloc] initWithTitle:@"Grape"] autorelease],
nil];
_tabBar2.selectedTabIndex = 2;

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];
[[[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];

Tabs
@protocol TTTabDelegate <NSObject>

- (void)tabBar:(TTTabBar*)tabBar tabSelected:
(NSInteger)selectedIndex;

@end

TTNavigator

href do Three20

Automagicamente cria os ViewControllers e os
coloca no stack

Pode guardar todo o estado e depois restaura

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];

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 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”]

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.

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;

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 forks
http://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

Meus contatos

http://twitter.com/iphonebrazuca

gustavo@iphonebrazuca.com.br

Three20 by Gustavo Ambrozio - 3º iphonedevbr

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Three20 by Gustavo Ambrozio - 3º iphonedevbr

Semelhante a Three20 by Gustavo Ambrozio - 3º iphonedevbr (20)

Último

Último (20)

Three20 by Gustavo Ambrozio - 3º iphonedevbr