Primeiro projeto iOS: Single View Application
16/05/2012
Vamos começar e criar nossa primeira aplicação, como sempre um Hello World. O bom é que conseguiremos ver diversas coisas novas com este simples exemplo e com isso vamos começar a nos acostumar/aprofundar no iOS. (confira todos os posts sobre iOS)
Criando o projeto
Assumo que você já instalou o XCode (no momento estou usando o 4.3.2). Abra o mesmo e crie um novo projeto. Para iniciarmos vamos começar um um dos templates que o XCode já fornece, neste caso o Single View Application para iOS.
Após termos o projeto criado vamos nos deparar com uma tela como esta:
Não se desespere. Nesta tela temos algumas informações sobre o projeto como por exemplo: Supported Device Orientations e outras. Futuramente investigaremos isso melhor.
Do lado esquerdo temos os arquivos que fazem parte do nosso projeto e aqui já podemos perceber uma coisa: para toda classe teremos 2 arquivos: um .h e um .m
- .h são Header Files. Eles contém classes, tipos, funções e constantes.
- .m são Source Files. Nestes arquivos temos a maioria do nosso código objective-c ou mesmo c.
Esse é um conceito bastante simples: a interface de uma classe é separada de sua implementação. A interface da classe (no arquivo .h) contém as variáveis e métodos que essa classe possui. A implementação da classe, o corpo dos métodos, etc, está contido nos arquivos .m
Vejamos um simples exemplo de declaração de uma classe em um arquivo .h que a Apple disponibiliza aqui:
AppDelegate
Voltando para o nosso projeto vamos primeiro ver os arquivos AppDelegate.h e AppDelegate.m
Este AppDelegate servirá para a função main da nossa aplicação. Um objeto deste tipo será utilizado para controlar algumas coisas do ciclo de vida da nossa aplicação.
Este delegare é informado sobre eventos de inicialização, término (e outros) dentro da nossa aplicação. Confira a referência completa de UIApplicationDelegate
O ponto principal aqui é o método abaixo (dentro de AppDelegate.m):
1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2 {
3 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
4
5 // Override point for customization after application launch.
6 self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
7 self.window.rootViewController = self.viewController;
8 [self.window makeKeyAndVisible];
9
10 return YES;
11 }
Este método na linha 3 está criando uma window para nossa aplicação. Na linha 6 está criando um ViewController (que está na nossa lista de arquivos) e informando que a view deste ViewController é uma view com o mesmo nome. Na linha 7 é informado que o rootViewController é o ViewController que acabou de ser criado. E na linha 8 tudo é exibido :D Este código todo foi gerado pelo template do XCode e com o tempo vamos compreender melhor cada um dos pontos aí.
UIViewController
UIViewController é o tipo base que a classe ViewController (.h e .m) implementa. UIViewController fornece um mecanismo base para a manipulação de views no iOS. Uma classe que herda de UIViewController manipulará uma ou mais views e estas views irão compor a interface da sua aplicação iOS. Desta forma essas classes ViewController manipulam views, models e se comunicam também com outros view controllers. (Veja a referência completa para UIViewController)
Na nossa aplicação temos um view controller chamado ViewController (nos arquivos ViewController.h e ViewController.m).
Arquivos nib(.xib)
O arquivo ViewController.xib é a nossa view. Ela poderia ter qualquer outro nome, como por exemplo "TelaInicial". Estes arquivos é que contém nossa interface gráfica. Se você clicar sobre ele, verá algo parecido com isso:
Se observarmos lá do lado direito, na parte inferior temos uma lista com os controles que podemos colocar na nossa view. Vamos então começar a brincar e fazer nosso hello world. Vamos adicionar um label e um botão, como abaixo:
Mais sobre Nib/.xib files veja aqui
Executando a aplicação
Já podemos executar nossa aplicação, clique no botão Play/Run ou ⌘+R. O simulador do iOS iniciará e veremos nossa primeira app rodando:
Se você reparou clicar no botão não faz nada, então vamos exibir um alerta quando o botão for tocado (lembre que não são cliques e sim toques).
Exibindo um alert no toque do botão
Para isso vamos adicionar um método no nosso ViewController.h que ficará como abaixo:
1 #import <UIKit/UIKit.h>
2
3 @interface ViewController : UIViewController
4
5 -(IBAction)showMessage:(id)sender;
6 @end
Adicionamos a linha 5 (não se preocupe com tudo neste momento, falaremos sobre Actions e Outlets futuramente). Apenas precisamos entender que nossa view controller agora possui um método. Vamos então implementar este método no ViewController.m:
1 -(IBAction)showMessage:(id)sender{
2 UIAlertView *alert = [[UIAlertView alloc]
3 initWithTitle: @"Hi iOS folks!"
4 message: @"oh... Hello World!"
5 delegate:nil
6 cancelButtonTitle: @"Bye!"
7 otherButtonTitles:nil];
8
9 [alert show];
10 }
Bem tranquilo esse código né? Criamos um objeto do tipo UIAlertView, iniciamos o objeto com seus valores e depois enviamos a mensagem show para ele.
Agora precisamos vincular esse método com o botão. Isso é um pouco estranho a princípio, mas começaremos fazendo desta forma: clique no botão, segure a tecla control e arraste até o File's Owner como mostra a imagem abaixo:
Feito isso uma lista com as actions disponíveis aparecerá, clique na nossa action showMessage.
Pronto! Rode a aplicação novamente e teremos nosso botão exibindo um alerta:
Bacana hein?
Resumo
Há um monte de coisas novas que precisamos estudar mais e nos aprofundar, mas sem dúvida fizemos algo bacana (ainda que simples) com praticamente nenhum esforço.
Tudo que precisamos nesse momento é manter a calma e entender cada um dos passos que estamos dando. Alguns conceitos eu deixei para explicar depois pois acredito que se eu despejar mais um monte de informações aqui mais vou atrapalhar do que ajudar.
Tente criar uma outra applicação, simples como essa, mas do zero, sem seguir o blog. Veja o quão longe você consegue ir e vá se acostumando :)
O código completo deste exemplo você encontra aqui: https://github.com/vquaiato/ios-blog-samples/tree/master/HelloWorld
Abraços e até o próximo.
Vinicius Quaiato.
