Quaddro + MacMagazine: criando aplicativos para iOS — trabalhando com IBOutlets e IBActions

Ícone - Xcode

Após o contato inicial com o ambiente gráfico, neste artigo ensinarei a integração da tela com o código.

Requisitos

Chevaliers de Sangreal, do maestro Hans Zimmer

Conceitos

No artigo passado ensinei a abordagem de projetos gráficos para iOS, adicionando aos nossos estudos recursos como o Object Library e o Inspector. Vimos pela primeira vez o Storyboard (documento de interface gráfica) e incluímos alguns elementos na tela, a qual foi apresentada no iOS Simulator.

Tudo muito simples e legal, porém sem ligação e controle do código. Agora vamos dar esse passo adiante e entender como funciona essa ligação — saber o que deve ser criado para que possamos criar aplicativos funcionais.

Mais uma vez, para garantir uma didática legal, vou passar as explicações durante a prática. Então, vamos direto ao nosso projeto.

Prática

Começaremos criando um novo projeto chamado Outlets_Actions, acessando o Storyabord e fazendo a seguinte definição de objetos:

Começando - Storyboard

Percebam que eu arrastei para a tela um Label e um Button (o Button é o item a direita do Label no Object Library). Só com esses dois objetos eu já posso ensinar muita coisa, pois eles nos trazem conceitos bem legais. Vou começar falando da interação de código com o Label já que, pensando em “escada” de aprendizado, isso vai ajudar quando mexermos com o Button.

Vamos fazer uma análise reversa, ou seja, pensar de trás para frente. O que nós queremos? A ideia é controlar o Label via código para definir seu texto de maneira dinâmica. Para isso, precisamos de alguma ligação entre o arquivo de código e o arquivo da interface gráfica. Essa ligação tem nome e sobrenome: propriedade IBOutlet.

Puxando os conceitos de outros textos, uma propriedade é uma “variável” declarada no arquivo “H” de uma classe. No nosso caso, a classe em questão é a ViewController, que já nos é fornecida automaticamente pelo template Single View Application. Então, se por um lado nós já temos o objeto gráfico (Label) na interface, por outro precisamos de uma propriedade que seja ligada a esse objeto.

Nas últimas versões do Xcode — na verdade, de um bom tempo pra cá — este processo de ligação é extremamente simples e fácil. Para ganhar um pouco de espaço no ambiente gráfico do Xcode, oculto o Navigator e o Inspector clicando nos primeiro e terceiro botões dos controles View da barra de ferramentas. Assim, temos o Storyboard ocupando toda a interface do ambiente.

Agora, para criar essa ligação, eu seleciono o segundo botão do controle Editor (eles estão do lado esquerdo dos botões de View) — o ícone dele tem uma “gravatinha” (algum aluno meu lendo este texto :-P).

Gravatinha

Esta operação exibe o modo Assistente do Editor, dividindo a tela em duas partes. A da esquerda exibe o Storyboard; já a da direita carrega o arquivo .H da classe que controla a tela selecionada no Storyboard.

O passo agora para ligar a tela com código não poderia ser mais “Apple-like”: selecionem o Label na tela do Storyboard e na sequência mantenham pressionada a tecla Control. Com ela pressionada, vocês clicam em cima do Label e arrastam o cursor até o arquivo .H da classe na direita. Essa operação gera uma linha representativa como indicado na imagem abaixo:

Ligando outlet

Quando você solta o botão do mouse, um balão para definir o tipo de ligação que você está criando será exibido. No nosso caso será um Outlet, opção que já é a padrão. O que nós precisamos fazer agora é definir o nome — neste caso, labelMensagem.

Nomeando outlet

Ao concluir essa operação o Xcode terá criado uma propriedade do tipo UILabel com o nome labelMensagem, que já está automaticamente ligada ao objeto gráfico da tela.

Outlet criado

Notem que aparece uma “bolinha” no começo da linha da propriedade. Isso acontece pois criamos um IBOutlet. Esse IB (vem de Interface Builder) indica que este elemento de código tem ligação com algum objeto de tela, então toda vez que você ver essa “bolinha” em uma linha de código, pode procurar que terá um IB nela.

Repassando o que fizemos: nós criamos uma propriedade IBOutlet que nos permite controlar, via código, o Label da tela. Tudo o que fizermos no código com a propriedade labelMensagem alterará o objeto gráfico Label da tela.

Para o primeiro teste prático disso eu saio do modo Assistente do Editor clicando no botão da esquerda da gravatinha. Isso volta o Editor para o modo padrão. Também trago de volta o Navigator (com o primeiro botão dos controles de View da barra de ferramentas).

Com isso, acessamos o arquivo ViewController.m no Navigator. Relembrando conceitos: uma tela de aplicativo é controlada por uma classe ViewController e uma classe em Objective-C é composta por um arquivo .H e outro .M. No arquivo .H nós fazemos declarações (foi lá que criamos a propriedade Outlet); já no arquivo .M nós definimos o que acontece com os elementos criados no .H.

Nesse primeiro contato com o arquivo ViewController.m, a proposta é usar o método viewDidLoad. Ele serve como ponto de partida para rodar códigos após o carregamento da tela, então o que colocarmos aqui será mostrado assim que a tela aparecer no Simulator ou no próprio iPhone.

Aqui eu defino um texto para aparecer no nosso Label. Quando nós arrastamos um Label para a tela, criamos um novo objeto da classe UILabel. Desta forma, ele nasce com todos os recursos que foram definidos pela sua classe. Nesse caso o que nos interessa é a propriedade que permite controlar o texto exibido pelo Label — ela se chama text.

Juntando os pontos, eu quero escrever no Label assim que a interface for carregada. A imagem a seguir ilustra esse processo:

ViewDidLoad text

Detalhando o que temos aqui:

  1. O método viewDidLoad roda o código assim que a Interface for carregada.
  2. Para acessar os recursos de uma classe, usamos o elemento self, que faz alusão ao próprio objeto ViewController.
  3. Já que o nosso Outlet, labelMensagem é uma propriedade — acessamos ele a partir de um ponto depois do self.
  4. Esse objeto do tipo Label possui a propriedade text, a qual permite controlar o texto exibido.

Vamos testar?! Pressionem o botão Run no começo da barra de ferramentas — ou usem o atalho Command + R.

ViewDidLoad simulator

Assim que o iOS Simulator terminar de compilar e exibir o seu aplicativo, você perceberá que o que definimos no viewDidLoad apareceu no Label. Amarrando os ensinamentos, só conseguimos esse controle do objeto porque criamos um IBOutlet — primeira etapa concluída!

A segunda etapa existe para permitir que o “toque” no botão altere esse texto e, para isso, vamos ao segundo conceito chave desse artigo: os IBActions. Eu volto ao Storyboard e novamente vou ao modo assistente com a tela dividida (lembram da gravatinha?!).

Aqui o processo de criação será *quase* o mesmo. Selecionem o botão, mantenham pressionado o Control e cliquem/arrastem do botão para o arquivo .H carregado ao lado.

Ligando action

Novamente, quando você completar esta operação, a janela de definição da ligação será exibida. É aqui que entra a diferença em relação ao Outlet anteriormente criado. Você mudar a primeira opção (Connection) de Outlet para Action, também definindo o nome como mudarTexto.

Nomeando action

Feitos esses ajustes você perceberá que, ao concluir a operação, em vez de aparecer uma propriedade no no arquivo .H, o Xcode gerou um método com o tipo de retorno IBAction.

Action criado

Mais uma vez o IB do nome indica que ele interage com elementos da tela (notem a “bolinha” no começo da linha). A diferença na proposta é a seguinte: um Outlet é uma forma de controlar o objeto via código, por isso ele é uma propriedade. Já o Action é uma forma de “disparar” ações, de resgatar interações do usuário e, por isso, é um método.

De uma forma simplificada para os iniciantes, pensem assim: se eu quero controlar no código recursos do objeto (cor, texto…) uso Outlet; se eu quero disparar uma ação quando o usuário interagir com o objeto (botão, slider, switch) uso o Action.

E este é o caso agora. Nós vamos “clicar” no botão e queremos que o texto do Label mude, por isso criamos uma Action no botão, para que pudéssemos agir nessa interação. Mais uma vez nós declaramos elementos no arquivo .H da classe e definimos o que acontece no arquivo .M. Então saiam do modo split do Editor e acessem o arquivo ViewController.m no Navigator.

Vamos localizar a implementação do Action que o Xcode gerou (normalmente embaixo do restante do código) e vamos definir o que esse método fará. Quando clicarmos no botão, o que queremos que aconteça? No caso, vamos alterar o que aparece escrito no Label.

Mudar texto

Com isso, temos dois controles definidos via código: quando o aplicativo abre, ele escreve “Quaddro Treinamentos” no label; e quando clicarmos no botão, escrevemos “Gervásio”. Testem!

Isso abre um outro universo de estudo para vocês pois começamos a usar elementos gráficos e, o mais legal, começamos a controlar esses objetos no código. Façam testes com mais botões, mais labels e assim gerem mais IBOutlets e IBActions. Esse conteúdo será essencial para o avançar dos seus estudos.

Finalizo por aqui com o link do tópico oficial no fórum da Quaddro Treinamentos e aproveito para comunicar uma “pausa” na coluna. Na próxima semana começo a gerenciar novos projetos educacionais na Quaddro, o que me impossibilitará de continuar os artigos, pelo menos por enquanto.

Agradeço ao MacMagazine pelo espaço e a vocês leitores que, com os feedbacks e interesse pelos estudos, me motivaram nos textos. Espero que de alguma forma eu tenha conseguido contribuir um pouco para o aprendizado iOS de vocês. 😉 Neste link vocês conferem todos os textos publicados até aqui.

Termino este texto com uma famosa citação: “There’s one more thing…”

Posts relacionados