Criando uma calculadora com o Glade

Autor: Iuri Cernov <icernov at yahoo.com.br>

Data: 15/03/2005

Introdução

Neste artigo vou mostrar como se faz uma calculadora com o Glade. Será uma calculadora
simples, mas poderá dar uma introdução à quem quer programar em GTK+.

Os programas necessários são:

 Glade 2.0
 GTK+ 2.0
 gcc 3.3.3 (não testei com outras versões)

Apresentando o Glade
O Glade é um programa usado para criar interfaces gráficas para os programas feitos em
GTK+. Ele funciona da seguinte forma: primeiro se cria a interface do programa, depois gera o
código e então termina programando as ações dos botões, etc.

Geralmente nas distribuições mais completas, o Glade já vem junto, mas caso não venha,
você pode baixar em http://www.glade.org.

A aparência dele é assim:

Tente criar algumas interfaces com ele e quando estiver bem familiarizado passe para a
próxima página...

Criando a interface do nosso programa

Nossa calculadora será bem simples e funcionará da seguinte forma: coloca-se um número no
primeiro campo, outro número no segundo campo e depois escolhe a operação que quer
fazer (somar, multiplicar etc). O resultado aparecerá no primeiro campo e o segundo campo
ficará vazio.

Ok, então vamos começar!

Primeiro crie um projeto novo:

 Clique em "Novo";
 Escolha "Novo projeto GTK+".

Depois crie uma janela:

Clique em "Janela" na paleta.

Na janela "Propriedades", coloque:

 Nome: calculadora (em minúsculo mesmo);

 título: Calculadora - Por (Seu nome aqui!);

Na aba "Comum" da janela "Propriedades", coloque:

 Largura: 250
 Altura: 255

Na aba "Sinais" da janela "Propriedades", coloque:

  Sinal: destroy
 Manipulador: gtk_main_quit

Clique em "Adicionar".

Essa última ação é pra quando clicar no "Xizinho" da janela ela fechar.

Agora clique em "Posições fixas" da Paleta (a que tem um quadrado grande com três
quadradinhos espalhados) e clique na janela depois. Não será preciso mudar nada nas
propriedades.

Salve o projeto em ~/calculadora.

Crie então a seguinte interface o mais parecido possível:

E então mude as propriedades de cada um:

ATENÇÃO: Respeite as maiúsculas e minúsculas!!!

-- entry1
- Widget
- Nome: enPrimeiro
- Comum
- Largura: 112
- Altura: 24
- Dica de ferramenta: Digita um número aí
-- entry2
- Widget
- Nome: enSegundo
- Comum
- Largura: 112
 - Altura: 24
- Dica de ferramenta: Digita outro aí
-- button1
- Widget
- Nome: btMais
- Etiqueta: _Somar
- Comum
- Largura: 128
- Altura: 26
- Sinais
- Clique em "..."
- Escolha "clicked"
- Clique em "Adicionar"
-- button2
- Widget
- Nome: btMenos
- Etiqueta: S_ubtrair
- Comum
(mesmo de button1)
- Sinais
(mesmo de button1)
-- button3
- Widget
- Nome: btVezes
- Etiqueta: _Multiplicar
- Comum
(mesmo de button1)
- Sinais
(mesmo de button1)
-- button4
- Widget
- Nome: btDiv
- Etiqueta: _Dividir
- Comum
(mesmo de button1)
- Sinais
(mesmo de button1)
-- button5
- Widget
- Nome: btSair
- Etiqueta: Sai_r
- Icone: Sair
- Comum
(mesmo de button1)
- Sinais
- Digite "clicked" em Sinal
- Em Manipulador digite "gtk_main_quit"
- Clique em "Adicionar"

Ok, finalmente terminamos! Vamos agora criar o código fonte:

 Salve o projeto;
 Clique em "Construir" na janela "Glade: calculadora";
 Aparecerá na barra de status: "código fonte gravado".

Vamos agora para a próxima parte...

Analisando o código-fonte

Agora a interface do nosso programa está criada. Vamos ver na pasta ~/calculadora. Existe
um monte de arquivos e dois diretórios, po/ e src/. Entre então no diretório "src" e verá 8
arquivos:

 interface.c
 interface.h
 callbacks.c
 callbacks.h
 main.c
 Makefile.am
 support.c
 support.h

O arquivo Makefile.am não será necessário nesse projeto. Pode apagar ele se quiser.

Os arquivos interface.[ch] são para definir a interface do programa.

Os arquivos callbacks.[ch] são as funções dos botões. Muito importante!

O arquivo main.c é a entrada do programa, ou seja, aonde o programa vai começar.

Os arquivos support.[ch] define algumas coisas do Glade. Não mexa!

Abra o arquivo main.c e procure uma linha igual à esta (em torno da 29):

add_pixmap_directory(PACKAGE_DATA_DIR "/" PACKAGE "/pixmaps");

Então comente ela. Para comentar basta colocar um "//" no começo dela:

// add_pixmap_directory(PACKAGE_DATA_DIR "/" PACKAGE "/pixmaps");

Agora vamos colocar o código-fonte do nosso programa.

Criando as funções do programa

Estamos prontos então para fazer o código-fonte do nosso programa. Abra o arquivo
callbacks.c com seu editor preferido (eu uso o Emacs) e adicione as seguintes linhas:

#ifdef HAVE_CONFIG_H
# include <config.h>
#endif
#include <gtk/gtk.h>

#include "callbacks.h"
#include "interface.h"
#include "support.h"

void on_btDiv_clicked (GtkButton *button, gpointer user_data)

{
GtkWidget
*calc, // A janela
*prim, // O campo "enPrimeiro"
*seg; // e o campo "enSegundo"
int n1, n2; // n1 e n2: primeiro e segundo numero
char n3[30]; // resultado em formato string
calc = gtk_widget_get_toplevel(GTK_WIDGET(button));
prim = lookup_widget(calc, "enPrimeiro");
seg = lookup_widget(calc, "enSegundo");
n1 = atoi(gtk_entry_get_text(GTK_ENTRY(prim)));
n2 = atoi(gtk_entry_get_text(GTK_ENTRY(seg)));
if (n2 == 0) return; // Não dividir por 0...
sprintf(n3, "%d", n1 / n2); /* Essa é a única parte que vai *
* mudar nas outras funções */
gtk_entry_set_text(GTK_ENTRY(prim), n3);
gtk_entry_set_text(GTK_ENTRY(seg), "");
}

void on_btVezes_clicked (GtkButton *button, gpointer user_data)

{
GtkWidget
*calc,
*prim,
*seg;
int n1, n2;
char n3[30];
calc = gtk_widget_get_toplevel(GTK_WIDGET(button));
prim = lookup_widget(calc, "enPrimeiro");
seg = lookup_widget(calc, "enSegundo");
n1 = atoi(gtk_entry_get_text(GTK_ENTRY(prim)));
n2 = atoi(gtk_entry_get_text(GTK_ENTRY(seg)));
sprintf(n3, "%d", n1 * n2);
gtk_entry_set_text(GTK_ENTRY(prim), n3);
gtk_entry_set_text(GTK_ENTRY(seg), "");
}

void on_btMenos_clicked (GtkButton *button, gpointer user_data)

{
GtkWidget
*calc,
*prim,
*seg;
int n1, n2;
char n3[30];
calc = gtk_widget_get_toplevel(GTK_WIDGET(button));
prim = lookup_widget(calc, "enPrimeiro");
seg = lookup_widget(calc, "enSegundo");
n1 = atoi(gtk_entry_get_text(GTK_ENTRY(prim)));
n2 = atoi(gtk_entry_get_text(GTK_ENTRY(seg)));
sprintf(n3, "%d", n1 - n2);
gtk_entry_set_text(GTK_ENTRY(prim), n3);
gtk_entry_set_text(GTK_ENTRY(seg), "");
}

void on_btMais_clicked (GtkButton *button, gpointer user_data)

{
GtkWidget
*calc,
*prim,
*seg;
int n1, n2;
char n3[30];
calc = gtk_widget_get_toplevel(GTK_WIDGET(button));
prim = lookup_widget(calc, "enPrimeiro");
seg = lookup_widget(calc, "enSegundo");
n1 = atoi(gtk_entry_get_text(GTK_ENTRY(prim)));
n2 = atoi(gtk_entry_get_text(GTK_ENTRY(seg)));
sprintf(n3, "%d", n1 + n2);
gtk_entry_set_text(GTK_ENTRY(prim), n3);
gtk_entry_set_text(GTK_ENTRY(seg), "");
}

Demorou mas terminamos. Salve o arquivo e feche seu editor.

Compilando e rodando o programa

Bom, temos o código fonte, só falta o programa em si. Para compilar o programa digite:

$ gcc $(pkg-config --libs --cflags gtk+-2.0) callbacks.c interface.c support.c main.c

O $(pkg-config --libs --cflags gtk+-2.0) tem o mesmo efeito de `pkg-config --libs --cflags gtk+-
2.0` para quem não sabe.

Então teremos um arquivo novo chamado a.out. É o seu programa! Vamos ver ele rodando
então:

$ ./a.out

Conclusão

Pareceu difícil? Realmente não é muito fácil não, mas com um pouco de prática montar um
programa com o Glade vai se tornando fácil e legal.

Para programar em GTK você pode baixar as documentações e os tutoriais em

http://www.gtk.org.