Apostila iPhone - Manipulando um Picker View

maio 22nd, 2010

Como já foi falado, precisamos de um elemento NSArray para popular um Picker view, para isso precisamos inicialmente declara-lo. No MainViewController.h, digite o seguinte código:

NSArray *elementos;

NSArray *dataElementos;

@property (nonatomic, retain) NSArray *elementos;

@property (nonatomic, retain) NSArray *dataElementos;

figura-471

No arquivo MainViewController.m, digite o seguinte código:

@synthesize elementos;

@synthesize dataElementos;

figura-48

Agora que já criamos nosso array, vamos popula-lo. Precisamos fazer isso no momento que a aplicação estiver sendo carregada. No método viewDidLoad digite o seguinte código:

elementos = [[NSArray alloc] initWithObjects:@”Olá Usuário”,@”Olá Mindbike”,@”Olá iPhone”, nil];

self.dataElementos = elementos;

[elementos release];

E agora vamos implementar os métodos já mencionados:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

return 1;

}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

return [dataElementos count];

}


- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

return [dataElementos objectAtIndex:row];

}

Execute a aplicação.

(by Ademar Varela)

Apostila iPhone - Picker View

maio 16th, 2010

Agora vamos aprender a implementação de um componente muito interessante e que basicamente só existe no iPhone, o Picker View. Este componente substitui o componente Combo Box disponível nas demais plataformas mobile. A idéia básica deste componente é apresentar uma lista de opções possíveis para o usuário.
Para implementar este componente vamos passar superficialmente pela instrução chamada NSArray. Isto porque esta implementação necessita usar esta instrução, mais adiante falaremos mais profundamente desta instrução, por enquanto bastará sabermos que NSArray permite criar uma array (matriz) de elementos, alfanuméricos ou numéricos.

Criando uma matriz

Sintaxe:

NSArray *elementos = [[NSArray alloc] initWithObjects:@”elemento1”,nil];

Basicamente, estamos criando uma matriz chamada elementos que contém um elemento chamado “elemento 1”. A instrução nil, determina o final da lista de elementos.

Implementando um Picker View

Antes de iniciarmos a implementação, precisamos entender que um Picker View é um componente que precisa ser carregado antes de ser exibido, ou seja, é normal carregarmos a matriz de elementos no momento que a aplicação é inicializada. Para fazermos esta implementação será necessário implementar 3 métodos:

(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
(NSInteger)pickerView:(UIPickerView*)pickerViewnumberOfRowsInComponent:(NSInteger)component
(NSString *)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

O primeiro método retorna a quantidade de colunas que o Picker View vai ter, o segundo a quantidade de elementos e o terceiro retorna os elementos propriamente dito.

Inserindo um Picker View no IB

Vamos abrir o projeto iPhoneHello e abrir o IB pelo arquivo MainView.xib

Na janela Library selecione Data Views e arraste o componente UIPickerView para a view MainView.

figura-45

Depois de arrastar o componente para a view, nós precisamos delegar o controle do mesmo para o controller. Para isso de um click com o botão control pressionado, quando aparecer a janela pop-up selecione a opção Delegate e arraste até o File’s Owner.
Faça o mesmo procedimento para a opção Data Source.

figura-461

Agora você pode fechar o IB e voltar para o XCode.

Declarando componente no XCode

Claro que depois de inserirmos o componente no IB, nós precisamos declara-lo no XCode. O princípio é o mesmo:

IBOutlet UIPickerView *dataPicker;

@property (nonatomic, retain) UIPickerView *dataPicker;

@synthesize dataPicker;

(by Ademar Varela)

Apostila iPhone - Tratando Teclado

maio 2nd, 2010

Você já deve ter percebido que quando usamos o componente UITextField, o teclado virtual aparece e não conseguimos recolher, mesmo pressionando o botão “return”. Isto acontece porque precisamos tratar o comportamento do teclado

Para isto vamos implementar o seguinte método:

    • (BOOL)textFieldShouldReturn:(UITextField *)theTextField {

if (theTextField == variável) {

[variável resignFirstResponder];

}

return YES;

}

Este método irá tratar todos os eventos de teclado, no parâmetro theTextField é recebido o nome do componente que está evocando o tratamento. Perceba que você pode tratar o conteúdo de uma variável no momento que recebe o retorno do teclado, como por exemplo verificar se está o campo está vazio ou não.

Text Input Traits

Existem algumas modificações que podem ser feitas no comportamento do componente UITextField, tais como:

      • Capitalize - Aqui você pode dizer quais os formatos do texto que será digitado, por exemplo, se vai deixar só a primeira letra maiúscula, ou a palavra, ou a sentença, ou mesmo sem nenhuma maiúscula.
      • Correction - Permitie usar o dicionário padrão e ajudar na correção de palavras.
      • Keyboard - Aqui você configura o tipo de teclado que vai utilizar
      • Appearance - Forma de exibição do teclado
      • Return Key - Define qual será a tecla de retorno do teclado.

Exercício

  1. Modifique o projeto iPhoneHello. Insira o componente UITextField. Quando o usuário inserir o texto, a aplicação deverá verificar se o usuário digitou algo. Se não tiver nada no camo de texto, a aplicação manterá o teclado virtual aberto, caso contrário deverá exibir o que o usuário digitou no componente label. Modifique todos os tratamentos do teclado e teste um por um.
  2. Crie uma aplicação chamada iAchou. Esta aplicação deverá gerar um número aleatório  entre 1 e 100 e o usuário deverá advinhar que número é este. Será necessário pesquisar qual a função que gera números aleatórios, no caso é a random().

(by Ademar Varela)

Apostila iPhone - Pasta Resource

abril 25th, 2010

Usando a imagem da pasta Resource no IB

Dê um duplo click no arquivo MainView.xib. Voltamos ao IB. Agora selecione o componente UIView inserido anteriormente, e na janela Inspector/Attributes, no item Image selecione a imagem que você adicionou no projeto.

figura-44


Isto foi bem simples. Está é a forma mais fácil de criar uma imagem relacionada com um resource. Podemos atribuir imagens programaticamente também, é fácil também, mas requer um pouco mais de trabalho.

Atribuindo imagens à componentes

Podemos atribuir imagens adicionadas no resource programaticamente, mas para isso não se esqueça que é pré requisito ter a imagem adicionada na pasta resource.

Para atribuir uma imagem usamos o seguintes comando:

[UIImage imageNamed:@”Green_border.jpg”];

Para fazer este comando funcionar corretamente, você precisa atribuir este comando para uma variável que esteja relacionada diretamente com o componente UIView do IB. O que isto quer dizer? Para este comando funcionar corretamente, você precisar declarar o componente UIView criado no IB no XCode e depois usar esta declaração para atribuir o comando citado. Por exemplo, vamos concordar que o componente que você criou no IB, foi declarado no XCode como “imgPicture”. Para você atribuir uma imagem diretamente para este componente, você usaria:

imgPicture.image = [UIImage imageNamed:@”Green_border.jpg”];

Para finalizar esta explicação, precisamos entender que o “image” que está após a variável imgPicture, é uma propriedade para este tipo de componente. Esta propriedade é a mesma que você usou para relacionar manualmente a imagem sem ser programaticamente.

Exercício

1. Crie um novo projeto chamado iTela. Adicione 3 imagens do tipo background no projeto. Na view principal, crie 3 botões, cada um tendo como imagem as 3 imagens adicionadas. Quando o usuário clicar em um dos botões, a aplicação deverá exibir a imagem que estava no botão selecionado em tamanho real, ou seja, na tela inteira.

(by Ademar Varela)

Apostila iPhone - Imagens na View

abril 18th, 2010

Agora vamos aprender colocar imagens nas views. Como você já deve ter percebido, se vamos mexer com interface gráfica vamos abrir o IB. Abra o projeto iPhoneHello e dê um duplo click no arquivo MainView.xib.

Inserindo o componente Imagem no IB

figura-401

Vamos inserir uma imagem de fundo na view MainView, para isso vamos arrastar o componente UIView que está na janela Library, na pasta Data Views. Click e arraste até a Main View.

Como você vai arrastar um componente novo este componente estará acima dos elementos anteriormente inseridos e como queremos colocar uma imagem de background, teremos que deslocar este componente para atrás dos demais. Para isso vamos até o menu Layout e selecionamos Send to Back após inserir a UIView na Main View.

figura-41

Após fazer isso, vamos escolher uma imagem para ser background da nossa aplicação. Antes porém, precisamos acrescentar esta imagem como resource da nossa aplicação. Feche e salve as informações do IB e retorne para o XCode.

Inserindo uma imagem no projeto

A maneira mais simples de fazer isso, é selecionar uma imagem (que tenha as dimensões de 320×480) que pode ser PNG ou JPG (para background JPG é mais recomendável) e arrastar até a pasta de Resources do projeto.

figura-42

Selecione uma imagem e arraste-a até a pasta Resource, bem tranqüilo. Antes do XCode adicionar realmente a pasta no projeto, ele irá perguntar se você deseja adicionar este elemento como parte integrante do projeto.

Para não ter problemas de referências, nós sempre vamos adicionar qualquer referência no projeto, conforme figura abaixo:

figura-43

Repare que estamos “setando” Copy items into destination group’s folder (if needed), isto fará com que todas as referências a esta imagem estarão no projeto.

Agora já inserimos o componente imagem no IB e já temos uma imagem adicionada, falta relacionarmos esta imagem com aquele componente.

(by Ademar Varela)

Apostila iPhone - Tomando Decisões II

abril 11th, 2010

switch

Outra maneira de programar decisões é utilizar este comando, sua sintaxe:

switch (expressão) {

case constante:

break;

default:

break;

}

Basicamente o switch funciona da seguinte forma: caso (case) a expressão seja igual a uma constante, a aplicação irá executar todo o código até encontrar a instrução break. A instrução default existe para garantir que caso a expressão tenha uma constante não prevista ela receberá um tratatamento.

while

Executa uma série de instruções enquanto uma condições for atendida, sua sintaxe:

while (condição) {

}

for

Assim como o while, executa uma série de instruções até que uma condição seja atendida, sua sintaxe:

for ( inicio ; condição ; incremento) {

}

(by Ademar Varela)

Apostila iPhone - Tomando Decisões

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)

Apostila iPhone - Relacionando Ações: XCode x IB

março 27th, 2010

Volte para o IB, dando um duplo click em cima do arquivo MainView.xib.

Por que precisamos voltar neste arquivo? Porque é necessário criar o relacionamento dos botões e das ações agora criadas. O relacionamento dos botões não vou explicar novamente, vocês já estão cansados de fazer isso, portanto mãos à obra.

As ações também já foram mostrada como se faz, mas vamos dar uma breve relembrada. Dê um click pressionando o botão control em cima do botão Nova (que está na Main View), isto fará uma janela pop-up ser exibida, visualize a opção Touch Down, do lado direito tem um circulo, click e arraste até o File’s Owner, irá aparecer outra janela pop-up, lá estará disponível o método showNew, dê um click em cima desde método. Agora faça o mesmo para o botão Main (que está na NewView), só que escolha o método hideNew.

figura-39Exercício

  1. Ainda utilizando o projeto iPhoneHello, crie mais 2 views e seus respectivos botões que permitam a exibicão destas views.

(by Ademar Varela)


iPad - Sim ele existe

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

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)