Tutorial #iOS 2 – Hello World

Padrão

Olá pessoal! No tutorial anterior, conhecemos superficialmente o iOS, bem como a linguagem Objective C e a IDE Xcode. No post de hoje, vamos colocar a mão na massa e criar o famoso Hello World, um aplicativo simples pra conhecermos um pouco mais a IDE, linguagem e o estilo de desenvolvimento. Todos prontos? Pra começar, abra o Xcode.

Eu ainda estou com a versão 4.3.3 (pois ainda não atualizei para o Mountain Lion) mas, caso você atualize, pode encontrar pequenas diferenças na interface (nada que prejudique o tutorial). 🙂

Clique em Create a new Xcode project ou selecione o menu File -> New -> Project. Serão exibidos vários tipos de projetos, tanto pra iOS quanto para Mac OS. Como o nosso foco aqui é o iOS, vamos selecionar para este tutorial a opção Single View Application. Clique em Next.

Na tela seguinte, vamos inserir algumas informações sobre o nosso projeto, como o nome, o identificador do desenvolvedor (um namespace), além dos prefixos de classe e o “destino” do nosso aplicativo (que para este exemplo será o iPhone). Preencha estas informações e clique em Next novamente.

Por fim, selecione o local onde seu projeto será salvo. Clique, então, no botão Create. Será então criado o projeto e você visualizará a área de trabalho do Xcode.

(clique para aumentar)

Por enquanto, ainda não temos nenhum interface criada no nosso aplicativo. Isso pode ser visto se executarmos agora nosso aplicativo (Command + R ou menu Product -> Run).

Bom, como uma interface vazia não é interessante pra nós, vamos tratar de criar alguma coisa nela. Na lista de arquivos, você verá um chamado HelloWorldViewController.xib, que representa o projeto de interface do nosso projeto. Dê um duplo clique sobre ele e será aberta a janela do Interface Builder.

Na parte inferior direita da nossa janela, temos a biblioteca de componentes. Clique no ícone do cubo para exibir a Object Library que possui os componentes visuais que utilizaremos em nosso aplicativo.

Primeiramente, vamos adicionar um item Label. Selecione-o e arraste para a área que representa a tela do iPhone. Após adicionar o componente, vá até o Attributes Inspector, do lado direito da tela, e entre com Olá Mundo no campo Text. Aproveite também para alinhá-lo e editar a fonte, por exemplo.

Em seguida, vamos adicionar um TextField e um Round Rect Button. Lá no Attributes Inspector, modifique o atributo Title do botão e coloque o texto Clique aqui!

Certo. Vamos agora começar a mexer um pouco com código-fonte pra criarmos uma lógica simples nesse aplicativo. Abra o arquivo HelloWorldViewController.h e adicione a declaração da ação btnClicked.

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController

-(IBAction) btnClicked:(id) sender;

@end

Este evento cria uma ação, também conhecida como event handler, chamada de btnClicked. Salve o arquivo e retorne ao HelloWorldViewController.xib. No lado esquerdo da área de edição, você verá três ícones. São eles: File’s OwnerFirst ResponderView. Segure o Control e clique sobre o nosso botão e arraste-o para o cubo sem preenchimento (File’s Owner). Um pequeno pop-up contendo a ação btnClicked vai aparecer. Selecione esta opção.

Agora, abra o arquivo HelloWorldViewController.m para implementarmos a lógica. Insira o código referente ao método btnClicked conforme o código a seguir:

#import "HelloWorldViewController.h"

@interface HelloWorldViewController ()

@end

@implementation HelloWorldViewController

-(IBAction)btnClicked:(id)sender {
    //--- Display an alert view---
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello World!"
                                                    message:@"Aqui estamos para mais uma série de tutoriais!"
                                                   delegate:self
                                          cancelButtonTitle:@"OK, tá bom...	"
                                          otherButtonTitles:nil];
    [alert show];
    [alert release];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

Neste trecho de código, criamos e exibimos uma janela pop-up (UIAlert), definindo como título Hello World, com a mensagem Aqui estamos para mais uma série de tutoriais! e um botão de confirmação (ou cancelamento) com os dizeres OK, tá bom…. Em seguida, exibimos o pop-up chamando o método show e em seguida o desalocamos, chamando o método release. Para executar, basta clicar sobre o Play no canto superior esquerdo da janela do Xcode. Ao executar, deverá aparecer o seguinte ao clicar no botão.

Então, é isso! Fizemos nosso primeiro aplicativo!!! 😀

Aguardem pelo próximo post! Até lá!

Deixe uma resposta