Demonstração do evento de clique em botão

Nesta seção vamos adicionar eventos aos botões: ao clicar em um botão, o código executará diversas operações. Vamos demonstrar dois exemplos: alterar o texto do botão ao clicar e fechar o formulário com outro botão.

Criar um novo projeto de interface gráfica

Clique no menu principal superior: Project (Projeto) → New Project (Novo Projeto) → Application (Aplicativo) (também é possível criar via File (Arquivo) → New → Project → Application) para gerar um programa GUI totalmente novo.

Ou então

Após a criação, várias janelas serão abertas: barra de menu principal no topo, o Inspetor de Objetos (Object Inspector) à esquerda e o Editor de Código (Source Editor) que ocupa a maior parte da tela.

Adicionar dois botões no formulário

Abaixo da barra de menu superior está a barra de abas de categorias de controles

O quadrado vermelho acima é a barra de categorias de controles, dividida em abas: a primeira é Standard (Controles Padrão), a segunda Additional…

Se a aba «Standard (Controles Padrão)» não estiver selecionada, clique nela para ativá-la;

Clique no ícone do botão (retângulo com OK), depois clique na parte esquerda do formulário Form1: um botão chamado Button1 aparecerá no formulário;

Clique novamente no ícone de botão da barra Standard e clique na parte direita do formulário para criar o segundo botão Button2.

Se não dominar os passos, consulte o vídeo da aula anterior.

Siga esses passos para adicionar os dois botões

Configurar o texto do Button1 e criar o evento de clique

Clique para selecionar Button1: o inspetor de objetos à esquerda mostrará todas as suas propriedades:

Se esse painel de configurações estiver oculto, clique no botão de seta na barra de controles para exibi-lo (ou use a tecla F12 para alternar entre formulário e código).

Ao selecionar o primeiro botão, a barra da esquerda mostra no topo que o controle ativo é Button1, e na parte inferior há duas abas: Propriedades e Eventos.

A aba Propriedades serve para configurar aparência, estilo, tamanho e outros ajustes visuais do botão.

A aba Eventos serve para vincular ações ao botão: clique, passar o mouse por cima, sair do controle, etc.

• Localize a propriedade superior Caption (Título), substitua o valor padrão Button1 por Press, pressione Enter ou clique em um espaço vazio: o texto do botão será atualizado imediatamente;
• Mude para a aba «Events (Eventos)» no inspetor de objetos: aqui estão listados todos os eventos que o botão pode disparar (clique, passagem do mouse, saída…);
• Encontre OnClick (Evento de clique) e clique no botão de três pontos ... à direita: o editor troca automaticamente para a página de código e gera uma função de clique vazia:

Clique em um espaço vazio para confirmar a alteração, o texto do botão no formulário mudará.

Mantenha o botão selecionado e troque para a aba Events (Eventos)

Esta aba mostra todos os eventos nativos do botão, podemos vincular qualquer ação. Vamos usar o OnClick: quando o usuário clicar com o botão esquerdo do mouse no botão, o método vinculado será executado.

Selecione a linha OnClick e clique no botão ... à direita para criar uma função de evento vazia.

Adicione uma linha de código entre begin e end para alterar o texto do botão ao clicar.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // digite este código
end;   Code language: JavaScript (javascript)

Ao executar o programa, um clique no botão rodará o código do bloco, entrando na lógica Pascal para realizar todo tipo de operações. A maioria dos programas GUI segue esse mesmo modelo de desenvolvimento orientado a eventos.

Tecla de atalho F12 para voltar rapidamente ao editor de formulários.

Configurar o texto do Button2 e o evento de fechar o programa

Selecione Button2 e no inspetor de objetos altere a propriedade Caption para Exit;

Acesse também o evento OnClick, clique em ... para ir ao código e digite o comando de fechamento:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // fecha a janela e sai do programa
end;Code language: JavaScript (javascript)

Salvar o projeto (salve com frequência)

No menu superior escolha Project → Save Project As (Salvar Projeto Como), primeiro salve o arquivo de unidade do formulário (extensão .pas) ;

Depois uma janela pop-up pedirá para salvar o arquivo de configuração do projeto (extensão .lpi).

Aviso: o nome do arquivo de unidade e o nome do projeto não podem ser iguais, senão a compilação retornará o erro «identificador duplicado»

Compilar e executar o programa

Duas formas de executar:

• Caminho no menu: Run (Executar) → Run ;
• Tecla de atalho: pressione diretamente F9. A IDE compila e liga o código automaticamente, se não houver erros de sintaxe abre o programa final.

Ao executar, uma janela limpa será exibida (sem a grade de desenho), essa é a janela principal do software:

• Clique no botão Press: o texto mudará para Press again ;
• Clique no botão Exit: a janela fecha, o programa encerra e você volta automaticamente ao editor de formulários com grade para continuar modificando o código.