Archive for the ‘XCode’ Category

Apostila iPhone - Table View - Criando Classe

sábado, setembro 4th, 2010

Para criar uma classe, de um click na pasta do grupo CustomCell e em File / File New.

figura-542
Esta ação irá abrir uma nova janela para você selecionar que tipo de arquivo você deseja incluir no projeto.

figura-56

Vamos selecionar Cocoa Touch Class / Objective-C class.

Ao escolher estas opções, o XCode irá perguntar qual o nome que deseja colocar na sua classe. Vamos colocar CustomCell. Observe que quando colocar o nome da classe, você estará criando o header do arquivo, e se observar melhor, perceberá que existe a opção de criar automaticamente a implementação (“.m”).

Agora vamos implementar de fato estas classes. No arquivo CustomCell.h, digite o seguinte código:

@interface CustomCell : UITableViewCell

{

BOOL checked;

NSString *title;

UIButton *checkButton;

}

@property (nonatomic, retain) NSString *title;

@property (nonatomic, assign) BOOL checked;

- (void)checkAction:(id)sender;

@end

No arquivo CustomCell.m digite o seguinte código:

@implementation CustomCell

@synthesize checked, title;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])

{

self.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

// cell’s title label

self.textLabel.backgroundColor = self.backgroundColor;

self.textLabel.opaque = NO;

self.textLabel.textColor = [UIColor blackColor];

self.textLabel.highlightedTextColor = [UIColor whiteColor];

self.textLabel.font = [UIFont boldSystemFontOfSize:18.0];

// cell’s check button

checkButton = [[UIButton buttonWithType:UIButtonTypeCustom] retain];

checkButton.frame = CGRectZero;

checkButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

checkButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

[checkButton addTarget:self action:@selector(checkAction: ) forControlEvents:UIControlEventTouchDown];

checkButton.backgroundColor = self.backgroundColor;

[self.contentView addSubview:checkButton];

}

return self;

}

- (void)layoutSubviews

{

[super layoutSubviews];

CGRect contentRect = [self.contentView bounds];

CGRect frame = CGRectMake(contentRect.origin.x + 40.0, 8.0, contentRect.size.width, 30.0);

self.textLabel.frame = frame;

// layout the check button image

UIImage *checkedImage = [UIImage imageNamed:@"checked.png"];

frame = CGRectMake(contentRect.origin.x + 10.0, 12.0, checkedImage.size.width, checkedImage.size.height);

checkButton.frame = frame;

UIImage *image = (self.checked) ? checkedImage: [UIImage imageNamed:@"unchecked.png"];

UIImage *newImage = [image stretchableImageWithLeftCapWidth:12.0 topCapHeight:0.0];

[checkButton setBackgroundImage:newImage forState:UIControlStateNormal];

}

- (void)dealloc

{

[checkButton release];

[title release];

[super dealloc];

}

// called when the checkmark button is touched

- (void)checkAction:(id)sender

{

// note: we don’t use ’sender’ because this action method can be called separate from the button (i.e. from table selection)

self.checked = !self.checked;

UIImage *checkImage = (self.checked) ? [UIImage imageNamed:@"checked.png"] : [UIImage imageNamed:@"unchecked.png"];

[checkButton setImage:checkImage forState:UIControlStateNormal];

}

Agora, vamos terminar a nossa nova implementação.

Diferentemente do tópico anterior, vamos conhecer mais alguns métodos que podem (e neste caso devem) ser implementados. Porém antes, vamos digitar o seguinte código no arquivo CellsViewController.h:

@interface CellsViewController : UIViewController

<UITableViewDataSource, UITableViewDelegate>

{

NSMutableArray *computers;

}

@property (nonatomic, retain) NSMutableArray *computers;

@end

Vamos ver um novo componente, o NSMutableArray. Este componente tem o mesmo comportamento do NSArray, porém este componente permite mutação, ou seja, conseguimos colocar praticamente qualquer tipo de informação neste array.

No arquivo CellsViewController.m insira o seguinte código:

#import “CellsViewController.h”

#import “CustomCell.h”

#import “CellsAppDelegate.h”

@implementation CellsViewController

@synthesize computers;

- (void)viewDidLoad {

NSString *path = [[NSBundle mainBundle] pathForResource:@”Data” ofType:@”plist”];

self.computers = [NSMutableArray arrayWithContentsOfFile:path];

}

- (void)didReceiveMemoryWarning {

// Releases the view if it doesn’t have a superview.

[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren’t in use.

}

- (void)viewDidUnload {

// Release any retained subviews of the main view.

// e.g. self.myOutlet = nil;

self.computers = nil;

}

- (void)dealloc {

[computers release];

[super dealloc];

}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

return [self.computers count];

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

// find the cell being touched and update its checked/unchecked image

CustomCell *targetCustomCell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath];

[targetCustomCell checkAction:nil];

// don’t keep the table selection

[tableView deselectRowAtIndexPath:indexPath animated:YES];

// update our data source array with the new checked state

NSMutableDictionary *selectedItem = [self.computers objectAtIndex:indexPath.row];

[selectedItem setObject:[NSNumber numberWithBool:targetCustomCell.checked] forKey:@”checked”];

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *kCustomCellID = @”MyCellID”;

CustomCell *cell = (CustomCell *)[tableView dequeueReusableCellWithIdentifier:kCustomCellID];

if (cell == nil)

{

cell = (CustomCell *)[[[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kCustomCellID] autorelease];

}

NSDictionary *item = [computers objectAtIndex:indexPath.row];

NSString* title = [item objectForKey:@"text"];

cell.title = title;

cell.textLabel.text = title;

cell.checked = [[item objectForKey:@"checked"] boolValue];

return cell;

}

- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath

{

// called when the accessory view (disclosure button) is touched

CustomCell *cell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath];

CellsAppDelegate *appDelegate = [UIApplication sharedApplication].delegate;

NSDictionary *infoDict = [NSDictionary dictionaryWithObjectsAndKeys:

cell.title, @"text",

[NSNumber numberWithBool:cell.checked], @”checked”,

nil];

[appDelegate showDetail:infoDict];

}

@end

Observe o método viewDidLoad. Neste momento estamos populando nosso dicionário com o arquivo XML que criamos anteriormente. Alguns métodos vamos estudar no próximo tópico, quando vamos dar ações nas nossas células. Por enquanto compile e execute este código.

Exercício

  1. Modifique o projeto iReceita. Coloque a entrada de dados por meio de XML e modifique a configuração da célula e insira um botão que será para determinar a ação da mesma.

(@AdemarVarela)

Apostila iPhone - Table View - PList

sexta-feira, setembro 3rd, 2010

Acessando uma base de dados XML

No nosso tópico anterior mostramos o uso do componente Table Views usando dados do tipo hardcode (quando os dados são inseridos diretamente no código). Agora vamos mostrar como acessar dados de um arquivo no formato XML. Inicialmente vamos incluir um arquivo XML no projeto.

Selecione File / New File, e escolha a opção Other e Property List.

figura-53

Vamos chamar este arquivo de Data.plist. Estes passos irão criar um arquivo XML na pasta que você tiver selecionado antes de executar File / New File / Other / Property List. No caso vamos criar este arquivo na pasta Resource.

Você deve estar lembrado que no projeto Cells, inserimos as informações diretamente no código, e fazemos isto no instante que a aplicação é inicializada, ou seja, implementamos no método viewDidLoad. Ainda continuamos com a necessidade de popular nossos dados no momento da inicialização da aplicação, mas agora vamos popular através do novo arquivo Data.plist.

Antes porém precisamos preparar nosso arquivo XML. Edite o arquivo Data.plist e digite o seguinte código:

<?xml version=“1.0″ encoding=“UTF-8″?>

<!DOCTYPE plist PUBLIC “-//Apple Computer//DTD PLIST 1.0//EN” http://www.apple.com/DTDs/PropertyList-1.0.dtd>

<plist version=“1.0″>

<array>

<dict>

<key>text</key>

<string>Mac Pro</string>

<key>checked</key>

<true/>

</dict>

<dict>

<key>text</key>

<string>Mac Mini</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>iMac</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>MacBook</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>MacBook Pro</string>

<key>checked</key>

<true/>

</dict>

<dict>

<key>text</key>

<string>MacBook Air</string>

<key>checked</key>

<false/>

</dict>

</array>

</plist>

Reparem que o esquema é praticamente o mesmo que implementamos anteriormente, temos tags para dict, key, string e array.

Mas não veremos somente estas modificações. Vamos criar uma classe para tratar a célula que pretendemos apresentar. Vamos no nome do projeto e vamos criar um novo grupo no projeto. Usamos os grupos para separar as classes que criamos no projeto.

figura-541

Selecione o projeto e em Project / New Group, vamos batizar este grupo de CustomCell. A partir de agora vamos implementar a classe CustomCell. Esta classe terá a configuração da célula que será apresentada ao usuário. Bom, agora vamos incluir a classe propriamente dita dentro do grupo CustomCell.

(@AdemarVarela)

Apostila iPhone - Table View / Custom Cell

quarta-feira, setembro 1st, 2010

Implementando Cells

Vamos agora implementar o código.

No arquivo MainViewController.h, vamos inserir o seguinte código:

#define kNameValueTag 1

#define kColorValueTag 2

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate, UITableViewDataSource, UITableViewDelegate> {

NSArray *computers;

}

@property (nonatomic, retain) NSArray *computers;

@end

O que observamos neste código acima? Reparem na linha em que declaramos a interface, nela informamos quais são as delegações da classe. Para trabalharmos com Cells, nós precisamos haja uma delegação das classes UITableViewDataSource e UITableViewDelegate.

Agora vamos para o MainViewController.m.

Naturalmente que precisamos inicializar a variável computers:

@implementation MainViewController

@synthesize computers;

Agora vamos entender que o nosso objetivo. A nossa proposta é apresentar uma lista com o nome de alguns computadores.

Por isso, vamos criar um array no momento que a nossa aplicação é inicializada.

- (void)viewDidLoad {

NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”MacBook”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”MacBook Pro”, @”Name”, @”Silver”, @”Color”, nil];

NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”iMac”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”Mac Mini”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”Mac Pro”, @”Name”, @”Silver”, @”Color”, nil];

NSArray *array = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil];

self.computers = array;

[row1 release];

[row2 release];

[row3 release];

[row4 release];

[row5 release];

[array release];

[super viewDidLoad];

}

Reparem que estamos usando uma nova instrução, a NSDictionary.

Esta instrução serve para criar estruturas de dados, no nosso caso estamos montando cada linha da nossa lista.

Como no IB nós delegamos o componente UITableView para File’s Owner, nós vamos precisar implementar dois métodos na nossa classe de controle, conforme segue:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return [self.computers count];

}

Precisamos deste método para determinar qual a quantidade de linhas que a nossa tabela possui. Repare que estamos retornando a quantidade de elementos do array computers que foi carregada no momento do viewDidLoad.

Agora vamos terminar a implementação do Cells, escrevendo o seguinte método:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellTableIdentifier = @”CellTableIdentifier “;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier];

if (cell == nil) {

#ifdef __IPHONE_3_0__

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier: CellTableIdentifier] autorelease];

#else

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellTableIdentifier] autorelease];

#endif

CGRect nameLabelRect = CGRectMake(0, 5, 70, 15);

UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect];

nameLabel.textAlignment = UITextAlignmentRight;

nameLabel.text = @”Name:”;

nameLabel.font = [UIFont boldSystemFontOfSize:12];

[cell.contentView addSubview: nameLabel];

[nameLabel release];

CGRect colorLabelRect = CGRectMake(0,26, 70, 15);

UILabel *colorLabel = [[UILabel alloc] initWithFrame:colorLabelRect];

colorLabel.textAlignment = UITextAlignmentRight;

colorLabel.text = @”Color:”;

colorLabel.font = [UIFont boldSystemFontOfSize:12];

[cell.contentView addSubview: colorLabel];

[colorLabel release];

CGRect nameValueRect = CGRectMake(80, 5, 200, 15);

UILabel *nameValue = [[UILabel alloc] initWithFrame:nameValueRect];

nameValue.tag = kNameValueTag;

[cell.contentView addSubview:nameValue];

[nameValue release];

CGRect colorValueRect = CGRectMake(80, 25, 200, 15);

UILabel *colorValue = [[UILabel alloc] initWithFrame:colorValueRect];

colorValue.tag = kColorValueTag;

[cell.contentView addSubview:colorValue];

[colorValue release];

}

NSUInteger row = [indexPath row];

NSDictionary *rowData = [self.computers objectAtIndex:row];

UILabel *name = (UILabel *)[cell.contentView viewWithTag:kNameValueTag];

name.text = [rowData objectForKey:@"Name"];

UILabel *color = (UILabel *)[cell.contentView viewWithTag:kColorValueTag];

color.text = [rowData objectForKey:@"Color"];

return cell;

}

Reparem mais duas novas instruções para nós:

#ifdef, #else e #endif

Estas instruções são executadas no momento da compilação, no nosso caso, no momento da compilação do código o compilador verifica se a variavél macro __IPHONE_3_0__ está válida.

Além desta intrução vimos a instrução CGRet. Esta instrução monta uma retângulo em torno de algumas informações, no nosso caso, cada informação do nosso array receberá um retângulo em torno.

Exercício

  1. Crie um projeto chamado iReceitas. Na tela Main View coloque um botão (que deverá habilitado com um componente Switch) que inicialize uma segunda view que tenha as seguintes linhas: “Bobó de Camarão”, “Canjiquinha”, “Feijoada”, “Polenta”, “Picanha” e “Frango Assado”.

(@AdemarVarela)

Apostila iPhone - Table View - XML

domingo, agosto 29th, 2010

Acessando uma base de dados XML

No nosso tópico anterior mostramos o uso do componente Table Views usando dados do tipo hardcode (quando os dados são inseridos diretamente no código). Agora vamos mostrar como acessar dados de um arquivo no formato XML. Inicialmente vamos incluir um arquivo XML no projeto.

Selecione File / New File, e escolha a opção Other e Property List.

figura-53

Vamos chamar este arquivo de Data.plist. Estes passos irão criar um arquivo XML na pasta que você tiver selecionado antes de executar File / New File / Other / Property List. No caso vamos criar este arquivo na pasta Resource.

Você deve estar lembrado que no projeto Cells, inserimos as informações diretamente no código, e fazemos isto no instante que a aplicação é inicializada, ou seja, implementamos no método viewDidLoad. Ainda continuamos com a necessidade de popular nossos dados no momento da inicialização da aplicação, mas agora vamos popular através do novo arquivo Data.plist.

Antes porém precisamos preparar nosso arquivo XML. Edite o arquivo Data.plist e digite o seguinte código:

<?xml version=“1.0″ encoding=“UTF-8″?>

<!DOCTYPE plist PUBLIC “-//Apple Computer//DTD PLIST 1.0//EN” http://www.apple.com/DTDs/PropertyList-1.0.dtd>

<plist version=“1.0″>

<array>

<dict>

<key>text</key>

<string>Mac Pro</string>

<key>checked</key>

<true/>

</dict>

<dict>

<key>text</key>

<string>Mac Mini</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>iMac</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>MacBook</string>

<key>checked</key>

<false/>

</dict>

<dict>

<key>text</key>

<string>MacBook Pro</string>

<key>checked</key>

<true/>

</dict>

<dict>

<key>text</key>

<string>MacBook Air</string>

<key>checked</key>

<false/>

</dict>

</array>

</plist>

Reparem que o esquema é praticamente o mesmo que implementamos anteriormente, temos tags para dict, key, string e array.

Mas não veremos somente estas modificações. Vamos criar uma classe para tratar a célula que pretendemos apresentar. Vamos no nome do projeto e vamos criar um novo grupo no projeto. Usamos os grupos para separar as classes que criamos no projeto.

figura-54

Selecione o projeto e em Project / New Group, vamos batizar este grupo de CustomCell. A partir de agora vamos implementar a classe CustomCell. Esta classe terá a configuração da célula que será apresentada ao usuário. Bom, agora vamos incluir a classe propriamente dita dentro do grupo CustomCell.

(@AdemarVarela)

Twitter

sábado, agosto 28th, 2010

Pessoal,

Para facilitar e para acompanhar os avanços da tecnologia da comunicação, (rs), estou disponibilizando o meu twitter para vocês fazerem perguntas referentes a programação iPhone. Segue: @AdemarVarela

Abs

Apostila iPhone - Table View

sábado, agosto 28th, 2010

Em algumas situações é necessário disponibilizar as informações para o usuário em forma de uma lista, e ainda quer permitir ao usuário efetuar alguma ação com esta informação. Para conseguir isso, é necessário montar uma tabela. O componente usado para isso é o Table View.

Inserindo uma Table View no IB

Vamos abrir um novo projeto, vamos chama-lo de Cells. Guarde este projeto pois iremos usa-lo mais para frente. Dê um duplo click no arquivo MainView.xib

figura-52
Arraste o componente UITableView para a janela Main View.

Neste exemplo iremos aprender que alguns componentes não precisam ser declarados no XCode. Faremos apenas informar a delagação e o datasource da TableView. Com o botão control pressionado, de um click no componente, ao aparecer uma janela pop-up arraste a delegação e o datasource para File’s Owner.

Feche o IB e vamos voltar para o XCode.

Implementando Cells

Vamos agora implementar o código.

No arquivo MainViewController.h, vamos inserir o seguinte código:

#define kNameValueTag 1

#define kColorValueTag 2

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate, UITableViewDataSource, UITableViewDelegate> {

NSArray *computers;

}

@property (nonatomic, retain) NSArray *computers;

@end

O que observamos neste código acima? Reparem na linha em que declaramos a interface, nela informamos quais são as delegações da classe. Para trabalharmos com Cells, nós precisamos haja uma delegação das classes UITableViewDataSource e UITableViewDelegate.

Agora vamos para o MainViewController.m.

Naturalmente que precisamos inicializar a variável computers:

@implementation MainViewController

@synthesize computers;

Agora vamos entender que o nosso objetivo. A nossa proposta é apresentar uma lista com o nome de alguns computadores.

Por isso, vamos criar um array no momento que a nossa aplicação é inicializada.

- (void)viewDidLoad {

NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”MacBook”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”MacBook Pro”, @”Name”, @”Silver”, @”Color”, nil];

NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”iMac”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”Mac Mini”, @”Name”, @”White”, @”Color”, nil];

NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys:

@”Mac Pro”, @”Name”, @”Silver”, @”Color”, nil];

NSArray *array = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil];

self.computers = array;

[row1 release];

[row2 release];

[row3 release];

[row4 release];

[row5 release];

[array release];

[super viewDidLoad];

}

Reparem que estamos usando uma nova instrução, a NSDictionary.

Esta instrução serve para criar estruturas de dados, no nosso caso estamos montando cada linha da nossa lista.

Como no IB nós delegamos o componente UITableView para File’s Owner, nós vamos precisar implementar dois métodos na nossa classe de controle, conforme segue:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return [self.computers count];

}

Precisamos deste método para determinar qual a quantidade de linhas que a nossa tabela possui. Repare que estamos retornando a quantidade de elementos do array computers que foi carregada no momento do viewDidLoad.

Agora vamos terminar a implementação do Cells, escrevendo o seguinte método:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellTableIdentifier = @”CellTableIdentifier “;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier];

if (cell == nil) {

#ifdef __IPHONE_3_0__

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier: CellTableIdentifier] autorelease];

#else

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellTableIdentifier] autorelease];

#endif

CGRect nameLabelRect = CGRectMake(0, 5, 70, 15);

UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect];

nameLabel.textAlignment = UITextAlignmentRight;

nameLabel.text = @”Name:”;

nameLabel.font = [UIFont boldSystemFontOfSize:12];

[cell.contentView addSubview: nameLabel];

[nameLabel release];

CGRect colorLabelRect = CGRectMake(0,26, 70, 15);

UILabel *colorLabel = [[UILabel alloc] initWithFrame:colorLabelRect];

colorLabel.textAlignment = UITextAlignmentRight;

colorLabel.text = @”Color:”;

colorLabel.font = [UIFont boldSystemFontOfSize:12];

[cell.contentView addSubview: colorLabel];

[colorLabel release];

CGRect nameValueRect = CGRectMake(80, 5, 200, 15);

UILabel *nameValue = [[UILabel alloc] initWithFrame:nameValueRect];

nameValue.tag = kNameValueTag;

[cell.contentView addSubview:nameValue];

[nameValue release];

CGRect colorValueRect = CGRectMake(80, 25, 200, 15);

UILabel *colorValue = [[UILabel alloc] initWithFrame:colorValueRect];

colorValue.tag = kColorValueTag;

[cell.contentView addSubview:colorValue];

[colorValue release];

}

NSUInteger row = [indexPath row];

NSDictionary *rowData = [self.computers objectAtIndex:row];

UILabel *name = (UILabel *)[cell.contentView viewWithTag:kNameValueTag];

name.text = [rowData objectForKey:@"Name"];

UILabel *color = (UILabel *)[cell.contentView viewWithTag:kColorValueTag];

color.text = [rowData objectForKey:@"Color"];

return cell;

}

Reparem mais duas novas instruções para nós:

#ifdef, #else e #endif

Estas instruções são executadas no momento da compilação, no nosso caso, no momento da compilação do código o compilador verifica se a variavél macro __IPHONE_3_0__ está válida.

Além desta intrução vimos a instrução CGRet. Esta instrução monta uma retângulo em torno de algumas informações, no nosso caso, cada informação do nosso array receberá um retângulo em torno.

Exercício

  1. Crie um projeto chamado iReceitas. Na tela Main View coloque um botão (que deverá habilitado com um componente Switch) que inicialize uma segunda view que tenha as seguintes linhas: “Bobó de Camarão”, “Canjiquinha”, “Feijoada”, “Polenta”, “Picanha” e “Frango Assado”.

(by Ademar Varela)

(@AdemarVarela)

Apostila iPhone - Tomando Decisões

sexta-feira, abril 2nd, 2010

Agora vamos deixar nossa aplicação um pouco mais inteligente, vamos aprender como permitir que a aplicação tome decisões de acordo com uma determinada situação. Geralmente para que isto seja possível, nós utilizamos variáveis para determinar o caminho que a aplicação irá seguir.

if

Toda linguagem que se preze, tem a instrução if. Conforme o conteúdo de uma ou mais variáveis é possível permitir a aplicação decidir qual o caminho a ser seguido.

Sintaxe:

Comparação entre variáveis:

if (variavelA == variavelB) {

//faz alguma coisa;

}

Uma nota importante. Assim como a linguagem C, o ObjC considera como operador de igualdade 2 sinais de “=”. Se você usar somente 1 sinal de “=” ele tentará atribuir o conteúdo da variavelB para a variavelA.

operador ação
== igualdade
!= diferente
>= maior igual
<= menor igual
> maior
< menor

Comparação Booleana:

if (variavelC) {

//faz alguma coisa;

}

Se variavelC for TRUE, faz alguma coisa.

if (!variavelC) {

//faz alguma coisa;

}

Se variavelC for FALSE, faz alguma coisa.

Exercício

  1. Modifique o projeto iPhoneHello, para que ele permita o usuário digitar um número de 1 a 3 em uma textbox. De acordo com a escolha do usuário, ao pressionar um botão uma das 3 views criadas anteriormente deverão ser exibidas.

(by Ademar Varela)

iPad - Sim ele existe

terça-feira, março 23rd, 2010

Depois de vários meses de especulações, boatos, divagações e premonições, eis que o nosso guru master lança mais um dos seus brinquedinhos. E que brinquedinho! Muitos vão falar que ainda falta a câmera, possibilidade de trocar bateria, não roda Flash, e que o negócio é caro. Tá, aviso que inveja também mata!

Assim que saiu o iPad, entrei no portal de desenvolvedores e baixei o SDK 3.2 (ainda na versão beta) e já mexi com algumas funcionalidades disponibilizadas para o iPad. Fiquei satisfeito com o que vi, pois foi mantida toda compatibilidade com o desenvolvimento para iPhone.

Vejamos alguns pontos que sofreram mudanças:

    • A tela de abertura do XCode mudou, agora quando vamos abrir um novo projeto temos um template especialmente desenvolvido para o iPad, o Split View-based Application.

figura-01

    • Isto não quer dizer que só temos esta possibilidade. Nas opções OpenGL ES Application, Tab Bar Application, View-based Application e Window-based Application também temos a opção de escolher entre iPhone e iPad.

figura-02

    • Outra modificação é no momento que estamos criando um arquivo do tipo XIB (que cuida das views de uma aplicação). Temos agora a possibilidade de criar um XIB próprio para o iPad

figura-03

Vocês devem estar se perguntando, mas se o iPad não foi lançado no mercado, como eu vou testar as minhas aplicações? Simples, assim como no iPhone, já temos o simulador para o iPad. Bom, no simulador do iPad eu vi algumas mancadas da Apple. Reparem na figura, que o título do simulador está como iPhone Simulator e não iPad Simulator, claro nada que comprometa o que realmente interessa, que é testar a sua aplicação, mas o esmero pelo lançamento do iPad foi tamanho, que esperava que este pequeno detalhe não fosse passar desapercebido.

figura-04

Enfim, gostei do que vi, e espero que a Anatel não enrosce em sua burocracia para liberar o iPad aqui no Brasil, e que a Apple consiga traze-lo por um preço acessível.

(by Ademar Varela)


Apostila iPhone - Views

domingo, março 21st, 2010

A principal regra para o desenvolvimento para iPhone é: Uma janela e muitas views. Se você manter isto em mente, desenvolver a interface gráfica é muito simples. No SDK 3.0 este conceito é bem marcante. Como já foi dito anteriormente, toda interface é desenvolvida usando o IB. Observando nossa aplicação iPhoneHello, na pasta Resource existem 3 arquivos com extensão .xib. FlipsideView, MainView e MainWindow. Internamente, é a MainWindow que controla a exibição das views que no caso são a FlipsideView e a MainView. Você pode colocar várias views dentro de um mesmo arquivo de view. O que isto quer dizer? Dentro do MainView, por exemplo, nós podemos ter mais de uma view, e podemos navegar por elas. Outra maneira de termos mais views é criarmos classes separadas para elas, como foi feito para o FlipsideView e o MainView. Particularmente, prefiro criar várias views dentro de um único arquivo.

Criando uma view no IB

Para criar uma view, vamos até o IB. Para isso dê um duplo click no arquivo MainView.xib.

figura-31

Na janela Library, selecione Windows, Views & Bars. Arraste o componente View para dentro da janela MainView.xib. Fazendo isto você já terá inserido uma nova view dentro do formulário MainView.xib.

Após ter feito esta operação, convém batizarmos esta nova view, para que seja mais compreensivo nossa tarefa de programar. Vamos chamar esta nova view de NewView. Para isso de um duplo click em cima da nova view, isto fará com que esta view seja aberta, vá até o Inspector, selecione a opção Identity e no item Name (que deve estar vazio) digite NewView.

figura-32

Após ter feito esta operação, arraste o componente label para esta nova view, e altere o texto dele para “Nova View”. Estamos fazendo isso, apenas para ter uma referência visual quando executarmos esta nova view.

Depois de criado, feche o IB, salve as modificações e retorne para o XCode.

Vamos tratar as views como componentes, até porque de fato são componentes, logo temos que declarar da mesma forma que declaramos o label e o botão anteriormente criados. Como criamos esta nova view dentro da MainView, iremos controlar o seu funcionamento dentro da MainViewController (da mesma forma que controlamos o label e o botão).

Declarando uma view no XCode

Vamos até o arquivo MainViewController.h e acrescente o seguinte código:

IBOutlet UIView *mainView;

IBOutlet UIView *newView;

e

@property (nonatomic, retain) UIView *mainView;

@property (nonatomic, retain) UIView *newView;

Você deve estar perguntando. Mas nós criamos somente uma view (newView), por que estamos declarando duas? A resposta é a seguinte, para manipular a newView, vamos precisar ter uma view de referência. A exibição ou não da newView, sempre terá como referência a mainView. O código na MainViewController.h, deverá ficar assim:

figura-33Da mesmo forma que fizemos para um label e para um botão, vamos inserir as seguintes linhas na MainViewController.m:

@synthesize mainView;

@synthesize newView;

O código na MainViewController.m ficará desta forma:

figura-34Compile o código para garantir que fizemos tudo certo.

Vamos voltar para o IB, dê um duplo click no arquivo MainView.xib.

Relacionando views entre o XCode e IB

Assim como fizemos com o label e o botão, precisamos informar para o IB que declaramos duas views, e precisamos criar o relacionamento entre as views do XCode e as views do IB.

Vamos fazer o mesmo procedimento, vamos dar um click pressionando o botão control em cima do controller File’s Owner. Isto fará com que uma janela pop-up seja aberta e possamos visualizar as views mainView e newView. Da mesma forma que relacionamos o label e o botão faremos o mesmo com as views, vamos até o circulo do lado direito da mainView, clicamos e arrastamos até a view chamada Main View. Vamos fazer o mesmo procedimento para newView, só que vamos arrastar para NewView.

figura-35

Terminado o relacionamento, vamos aproveitar que já estamos no IB e vamos criar um botão na Main View e um botão na NewView. Arraste um componente UIButton para cada uma das views.

No botão criado na Main View, coloque o texto “Nova” e no botão da NewView, coloque o texto “Main”, conforme a figura abaixo:

figura-36

Por que criamos estes dois botões? Porque será através deles que vamos trocar a exibição de views. Quando o usuário pressionar o botão Nova, a aplicação irá para a NewView e quando o usuário pressionar Main, a aplicação irá retornar para Main View. Claro que para isso vamos precisar declarar estes botões no XCode também e depois criar o relacionamento entre o XCode e IB.

Feche o IB e salve suas modificações.

Criando ações para manipular as Views

No arquivo MainViewController.h (sim, ainda estamos manipulando o MainView) insira as seguintes linhas:

IBOutlet UIButton *btnNew;

IBOutlet UIButton *btnMain;

@property (nonatomic, retain) UIButton *btnNew;

@property (nonatomic, retain) UIButton *btnMain;

-(IBAction)showNew:(id)sender;

-(IBAction)hideNew:(id)sender;

O código ficará desta forma:

figura-37

Com este código, já estamos declarando os botões que vamos utilizar e também estamos montando as assinaturas dos métodos que vamos usar para fazer a troca de views. Na verdade, com o método showNew, iremos exibir a newView e com hideNew iremos ocultar newView. Quando ocultarmos newView a MainView ficará exposta mais uma vez. Ou seja, sempre teremos Main View exposta.

Agora vamos inserir as seguintes linhas na MainViewController.m:

@synthesize btnNew;

@synthesize btnMain;

- (IBAction)showNew:(id)sender {

[mainView addSubview:newView];

}

- (IBAction)hideNew:(id)sender {

[newView removeFromSuperview];

}

O código ficará da seguinte forma:

figura-38Vamos observar o código digitado no método showNew:

[mainView addSubView:newView];

Quando colocamos um comando entre colchetes, estamos encapsulando todas as ações que desejamos de uma única vez, neste caso temos somente a ação de addSubView em cima da mainView. Como o bom senso já deve ter percebido, estamos inserindo uma view (a newView) em cima da mainView. Esta ação fará com que newView sobreponha a mainView.

Agora vamos observar o código da hideNew:

[newView removeFromSuperview];

Neste momento nós vamos desfazer o comando anteriormente descrito, ou seja, vamos retirar a newView de cima da mainView, isto fará com que a mainView volte a ficar visível para o usuário.

Compile o projeto para se certificar que tudo foi digitado corretamente.

(by Ademar Varela)

Treinamento para plataforma iPhone - Introdução

terça-feira, fevereiro 2nd, 2010

Pessoal, andei desenvolvendo uma apostila para um treinamento de desenvolvimento para iPhone que ministrei para uma empresa. Neste treinamento, eu sugiro alguns exercícios para que vocês possam praticar  Como todos da empresa gostaram do treinamento, resolvi disponibilizar o treinamento aqui no blog, espero que aproveitem e qualquer comentário sempre será bem vindo.

Introduzindo o SDK

Bom, vamos iniciar o nosso treinamento. Primeiramente vamos entender quais são os pré-requisitos para desenvolver uma aplicação para o iPhone. O primeiro e mais importante é possuir o Apple’s iPhone Software Developer Kit (SDK). Sem este SDK, é impossível desenvolver uma aplicação para o iPhone, pois ele contém todas as diretrizes de funcionamento para a plataforma. E aonde podemos encontrar este SDK. Para fazermos o download deste SDK acessamos: http://developer.apple.com/iphone, e acredite, existem coisas importantes que são de graça, esta é uma delas.

Outro pré-requisito que é muito importante é conhecer alguma linguagem de programação de preferência Objective-C (ObjC para os mais íntimos), ou C, ou C++. Se você não conhece nenhuma linguagem de programação, você terá um pouco mais de dificuldade em compreender, mas nada que um esforço dobrado não resolva.

Ambiente de Desenvolvimento

Para desenvolver uma aplicação usaremos as seguintes ferramentas:

. XCode - Esta é a mais importante ferramenta no desenvolvimento para iPhone, pois ela fornece uma amigável interface de desenvolvimento para o usuário, contemplando documentação e modo de debug

. Simulador - É aonde vamos executar nossos projetos antes de colocá-los no aparelho. O simulador do iPhone é bem completo e podemos encontrar vários problemas de código antes de instalar no aparelho

. Interface Builder - Este é a ferramenta que vai nos ajudar no design dos nossos projetos. Esta ferramenta interage diretamente com o XCode e seu funcionamento é bem intuítivo.

Exceto o Simulador, as demais ferramentas já estão instaladas no seu MAC OS X, e elas também vieram gratuitamente na sua máquina, já o Simulador, vem com a instalação do SDK que descrevemos brevemente acima.

Montando Projetos

Vamos montar o nosso primeiro projeto, que será um projeto bem simples e que irá servir para você começar entender o funcionamento de um projeto. Vamos iniciar abrindo o XCode. Claro que estamos partindo do princípio que já fizemos a instalação do SDK. Quando abrir o XCode após a instalação do SDK teremos a seguinte tela:

figura-01

Observem que agora temos um painel que introduz o XCode. Neste painel temos links para vídeos, exemplos de código e bibliotecas do iPhone. Eu considero uma ótima referência para estudar a plataforma. Pesquisem estes links, aprendi e ainda aprendo muito com eles.

Você vai perceber também que existe um link para Apply to the iPhone Developer Program. O que é este programa? Se você deseja desenvolver comercialmente para iPhone, você vai precisar colocar o seu projeto no aparelho, e só existem duas maneiras de fazer isso, ou através de uma distribuição AdHoc, ou através da Apple Store. Mais adiante falarei destas duas distribuições, porém para fazer qualquer uma das duas, você precisa fazer parte deste programa, no site da Apple você encontra os preços e as modalidades deste programa. Caso queira apenas aprender desenvolver, não precisa entrar para nenhum programa, basta usar o simulador para testar as suas idéias.

Mas vamos ao que interessa, feche este painel e vá até o menu File e escolha New Project, você terá a seguinte tela:

figura-02

Observe que temos 6 templates de projetos para iPhone, vamos escolher o template Utility Application e depois vamos selecionar a opção Choose do lado direito do painel de templates. Assim que você pressionar o botão Choose, o XCode ira solicitar que você batize o seu projeto. Vamos chamar este primeiro projeto de Projeto1.

Entendendo a Área de Trabalho

Vamos começar entendendo nossa área de trabalho. Observe o painel do lado esquerdo da janela do XCode.

screen-shot-2010-02-02-at-84618-pm

Objective-C

Como disse anteriormente, a linguagem de desenvolvimento para iPhone é a Objective-C, ou ObjC. Esta linguagem é um superset da poderosa linguagem C, os comandos básicos advém desta linguagem, porém ObjC é uma linguagem orientada à objetos (OOP). Caso você não saiba o que é uma linguagem orientada à objetos, recomendo procurar uma literatura para compreender melhor, não entender o que isso significa pode comprometer o bom entendimento deste curso. Como ObjC é uma evolução da linguagem C, absorveu todas estruturas primárias de sua antecessora. Se você conhece a linguagem C, achará muito familiar na estrutura demonstrada anteriormente nos arquivos com extensão “.h”. Arquivos com estas extensões são chamados de header (como no C), a diferença está nos seu par, enquanto no C seu par tem extensão “.c”, no ObjC o seu par tem extensão “.m”. Observe, por exemplo, MainView.h e MainView.m. No arquivo header possuímos todas as declarações de variáveis e funções que serão implementadas no arquivo com extensão “.m”. Será um bom execício de observação, verificar os conteúdos de cada arquivo “.h” e “.m” correspondente.

Uma pergunta muito comum quando começamos desenvolver para iPhone, é tentar saber se existe outra linguagem para o desenvolvimento de aplicações nativas. A resposta é não. A Apple disponibilizou somente o ObjC no SDK. Você pode desenvolver uma página web para iPhone, ai você usa outra linguagem, porém por não ser uma aplicação nativa, você perde muitas funcionalidades nativas do aparelho.

Executando o Projeto

Como já vimos, montar um projeto foi bem tranqüilo. Agora vamos executar o projeto. Com o Projeto1 aberto, vamos compilar o projeto e verificar se existem erros no projeto. De um click no botão Build que fica na parte alta, ou vá até o menu Build e escolha Build, ou ainda tecle command+B.

figura-03

Claro, não vai dar erro algum, quem montou este código foi o próprio XCode, não tem erro e já poderemos executar o programa no simulador.

Para executar a aplicação no simulador, podemos executar clicando no botão Build and Go, ou vá até o menu Build e selecione Build and Run, ou ainda tecle command+R.

figura-04

Observe que o XCode compila o código novamente, este é um comportamento esperado de todo ambiente de desenvolvimento, primeiro compila e depois executa. Quando o XCode executa o simulador, ele está na verdade chamando outro programa, ou seja, o simulador deve ser encerrado quando acabarmos de observar o código. Veremos também que será possível fazer Debug do nosso código. Quem ainda não é um desenvolvedor, deve estar se perguntando o que é um Debug. Quando um desenvolvedor disser que está “debugando” um código, ele quer dizer que está executando um código e ao mesmo tempo está verificando qual linha de código está sendo executada. Quando queremos fazer um Debug de um código, colocamos um breakpoint no código, e quando o simulador passar por esta linha, ele para a execução para que possamos verificar se o conteúdo de todas as variáveis estão de acordo com que estávamos imaginando, e se os caminhos que imaginamos que o simulador ia seguir está de fato sendo seguido. Usa-se muito esta funcionalidade de Debug para localizar erros de um código, pois é sem dúvida a melhor maneira de encontrá-los.

Porém, antes de aprendermos mexer com o Debug, vamos observar o simulador funcionando.

figura-05Como podemos observar, o simulador é uma cópia fiel de um iPhone. Com o simulador temos a possibilidade de efetuar quase todas as funcionalidades que um aparelho como o iPhone possui.

Assim que o simulador estiver funcionando, vamos pressionar o ícone “i”. Veremos a tela efetuar uma efeito chamado de flipview (figura 05). Depois de efetuar o efeito, teremos outra tela disponível, se você pressionar o botão Done, teremos novamente o efeito flipview e voltaremos para a tela principal da nossa aplicação. Antes de fecharmos o simulador, vamos fazer uma rotação do iPhone.

figura-06Para efetuar a rotação do iPhone, de um click na opção Hardware e depois selecione Rotate Right. Pronto conseguimos simular a rotação do iPhone. Como podemos observar é possível simular a rotação do iPhone, veremos um pouco mais adiante como podemos modificar o comportamento da nossa aplicação de acordo com a rotação do aparelho.

Pronto, vamos terminar a nossa primeira incursão no simulador, para fecha-lo vá até o menu iPhone Simulator e escolha a opção Quit.

Breakpoint, Run e Debug

Como dito anteriormente, usamos o Debug quando queremos localizar um comportamento não esperado da nossa aplicação. Para podermos trabalhar corretamente com o Debug, temos que inicialmente incluir um breakpoint no nosso código. O que vem a ser este breakpoint. Como o próprio nome diz, é um ponto onde queremos que a execução da aplicação pare. Quando o simulador encontra um breakpoint, ele suspende a execução da aplicação, sem encerrá-la, e permite o acesso ao conteúdo das variáveis naquele momento do código.

figura-07

De um click no arquivo RootViewController.m, do lado direito vai aparecer o código que este arquivo contém. Perceba que este código é numerado, e para inserir um breakpoint, nós vamos dar um click em cima do número da linha que desejamo que o simulador pare, no caso mostrado na figura 07, foi executado um click em cima da linha 25. Quando inserimos um breakpoint, a linha fica com uma seta azul. Para remover um breakpoint, click novamente em cima da linha, mas com o botão control pressionado, irá aparecer um menu popup com uma opção para remover breakpoint.

Mas antes de remover vamos executar o simulador com este breakpoint ativo. Basta dar um click no botão Build and Go.

figura-08Assim que você executar o simulador através do botão Build and Go, o simulador será executado, e antes que possa aparecer algo na tela do simulador, ele volta para o ambiente do XCode e naquele breakpoint que colocamos na linha 25, agora temos uma seta vermelha. Isto ocorreu, porque no momento que o simulador foi executar esta linha, ele encontrou um breakpoint, e com isso ele suspendeu a execução do código e retornou para o XCode.

A primeira coisa que aprendemos, (sim, já aprendemos algo agora) é que antes de exibir o conteúdo de uma tela, a função viewDidLoad é carregada primeiro. Repare que antes de exibir qualquer coisa, o simulador tentou passar pela linha 25, que faz parte desta função. Primeira lição, se você deseja que a sua aplicação execute algo algo de extrema importância antes de sair executando qualquer tela, a função viewDidLoad é um bom local para colocar este código. Veremos mais para frente o que podemos fazer, mas é bom já ir prestando atenção neste comportamento.

Eu disse antes que quando estamos “debugando”, podemos conferir o conteúdo das variáveis que estamos usando. No momento que o simulador volta para o XCode é o momento ideal para validarmos estes conteúdos.

Para checarmos estes conteúdos, vamos clicar no menu Run e selecionar a opção Debugger.

figura-091Vamos observar que uma nova janela aparece, e nela podemos validar o conteúdo de variáveis, do lado direito da janela temos 3 colunas, a primeira variable, a segunda value e a terceira summary. Como nosso bom inglês já explicou, na coluna value teremos o conteúdo da variável neste exato momento que o simulador suspendeu a execução da aplicação e retornou para o XCode.

Com isso terminamos nosso primeiro capítulo. Ainda não colocamos nenhum código no projeto, mas já tivemos o primeiro contato com o ambiente de programação, já vimos como usar o simulador e até como efetuarmos um Debug no código. Vamos agora consolidar nossos conhecimentos, para poder ir mais adiante. Vamos aos exercícios!

Exercícios

  1. O que encontramos na pasta Resource de um projeto iPhone?
  2. Quais os comandos procedimentos para fazer a rotação do aparelho no simulador?
  3. Qual é uma das primeiras funções (métodos) executados no momento que um código do iPhone é executado?
  4. Defina breakpoint e Debug.
  5. Crie um projeto do tipo Utility, chamado iPhoneHello. Execute o projeto e veja o conteúdo da variável $st6.

(by Ademar Varela)