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.