Exercício 3: Incluindo o Código do Seu App

Nesse exercício vamos incluir o código necessário para mostrar uma caixa de diálogo apresentando uma saudação. O código necessário é bastante simples e não é necessário para esse momento que você tente compreende-lo, uma vez que o estudaremos com mais profundidade nas próximas disciplinas. O objetivo aqui é produzir um programa funcional ainda que simples.

A primeira coisa que precisamos fazer é vincular a interface do App ao código. No Xcode isso é feito de maneira bastante visual. Literalmente os componentes de tela são arrastados para o código fonte, inserindo uma referência ou uma ação relacionada ao elemento em questão. Essas conexões são chamadas de Outlets (saídas) e Action Methods (métodos de ações).

Com o seu projeto aberto abra o Project Navigator e selecione o arquivo Main.Storyboard. Com o arquivo aberto no Standard Editor, abra o Assistant Editor, clicando no seu botão na barra de tarefas, através do Menu View > Assistant Editor > Show Assistant Editor ou usando o atalho de teclado Cmd + Option + Enter. Isso fará com a área do editor se divida em duas, de forma que o painel esquerdo mostra o arquivo aberto, e o painel do lado direito mostrará o que estiver associado ao arquivo principal.

No caso dos Storyboards, o Assistant Editor mostrará o código fonte associado ao elemento selecionado, que é o View Controller responsável por gerenciar a interface que esta sendo editada.

Não se preocupe em entender agora todos os conceitos envolvidos com a programação da Interface, esses assuntos serão explorados em detalhes nas próximas disciplinas.

Nesse momento sua tela deverá estar semelhante a da screenshot abaixo. Primeiro precisamos criar uma referência para o Text Field, isso será necessário para poder obter seu conteúdo na hora que o usuário clicar no botão. No Storyboard selecione o Text Field de nome, segure a tecla Ctlr clique e arraste para dentro do código fonte no topo, logo abaixo da linha:

class ViewController: UIViewController { ...

O Xcode vai exibir uma caixa de diálogo onde você pode configurar a criação do Outlet ou do Action Method. No caso vamos criar o primeiro, preencha o diálogo conforme a screenshot abaixo:

A seguir vamos criar um Action Method para quando o botão for apertado pelo usuário. Os Action Methods são disparados em resposta a eventos que acontecem com os componentes da tela, no caso do botão o evento de toque é chamado de Touch Up Inside, que significa que o usuário tocou dentro do botão (Touch Inside) e levantou o dedo (Up). O processo é o mesmo, selecione o botão segurando a tecla Control clique e arraste para dentro do código, dessa vez antes do fechamento da última chave (}):

E preencha o diálogo de configuração conforme a screenshot abaixo:

Por fim preencha o Action Method conforme o código abaixo:

    @IBAction func saluteTouched(_ sender: UIButton) {
        // Apresenta uma caixa de diálogo para o usuário
        let alertController = UIAlertController(title: "Meu App!", message: "Olá, \(nameTextField.text!)!", preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "OK", style: .cancel, handler: nil))
        present(alertController, animated: true, completion: nil)
    }