MC102 – Lab 15

Interface Gráfica com GTK+ 2.0

Instituto de Computação — UNICAMP
Prof.: Bruno Cedraz Brandão

Uma Pequena Introdução

As técnicas que aprendemos até o momento são úteis para programar planilhas de cálculo,
ferramentas matemáticas ou gráficas, aplicativos CAD e mais uma infinidade de sistemas.
Usamos apenas dados numéricos ou textuais através da interface teclado/tela na forma de
texto. Normalmente esta é a melhor maneira de desenvolver programas que tratam com
pouca interação com o usuário, como a maioria dos programas cientı́ficos. Entretanto, se
o programa requer muita interação com o usuário, usar uma interface textual pode ser
anti-produtivo. Interfaces gráficas tendem a aproveitar melhor a área da tela para fornecer
informações, por exemplo gráficos, e tornar mais simples a execução de comandos.
A maioria dos sistemas operacionais modernos vêm com uma interface gráfica, a exem-
plo do Windows, distribuições GNU/Linux e o MacOS. O problema é que a programação
destas interfaces não é padronizada, logo, se desenvolvemos uma interface usando a API1 do
Windows, por exemplo, este programa só vai funcionar no Windows2 . Para escrever progra-
mas gráficos que funcionem em vários sistemas, precisamos usar uma biblioteca de funções
gráficas que converta os comandos para o sistema em que o programa está sendo executado.
Uma destas bibliotecas é o GTK+ 2.0.
Neste laboratório, vamos construir um conversor de temperatura usando o GTK+ 2.03 . O
GTK+ normalmente já está presente em sistemas GNU/Linux. Usuários do Windows têm
que baixar e instalar o ambiente de desenvolvimento disponı́vel em http://gladewin32.
sourceforge.net/. Construção de interfaces, em sua essência, é semelhante seja qual for a
biblioteca usada. Então, os conhecimentos adquiridos neste lab. serão úteis, independente
da escolha de usar GTK ou não.
Inicialmente vamos construir uma interface escolhendo alguns widgets 4 de uma paleta,
arrastando-os e colocando-os no lugar mais adequado. Depois adicionaremos o programa de
conversão. A figura abaixo ilustra o resultado final.
1
API - Application programming interface, normalmente é um conjunto de funções que um sistema oferece
para que o controlemos.
2
A menos se executado através de emuladores, como o Wine, Qemu ou VMWare por exemplo.
3
Mais detalhes sobre construção de interfaces usando GTK+ (documentação de todas as funções e tuto-
riais) podem ser encontrados em http://www.gtk.org/.
4
Widgets são componentes de uma interface gráfica como botões, janelas, menus, etc.

1
Parte 1 - Construindo a Interface
A primeira parte deste laboratório consiste em montar a carcaça da interface, isto é, a
parte externa, sem as funcionalidades. Na próxima parte, completaremos a interface com o
programa de conversão de temperatura.
Vamos usar o construtor de interface Glade 2.0. Para rodar este programa no labo-
ratório, basta abrir um terminal e digitar
glade-2
Vão aparecer, pelo menos, três janelas parecidas com as da figura abaixo. É bom se-
lecionar view->widget-tree na janela principal. Isto vai mostrar outra janela, a árvore
de componente, que usaremos em breve. Estas janelas podem variar um pouco a depender
da versão do Glade, ou do sistema operacional. Todas as figuras deste laboratório foram
extraı́das do Glade para o Windows. Isto não é problema, por que vamos usar as funções
que estão disponı́veis em todos os sistemas.

A janela principal permite que você abra projetos, modifique algumas opções internas
(não vamos precisar fazer isto), selecione que janelas do Glade são visı́veis, grave as alterações

2
e, finalmente, construa os arquivos .c referentes à interface. Veremos mais sobre isto adiante.
A janela com a paleta, permite que você escolha que componentes gráficos farão parte da
interface. A janela de propriedades permite alterar as propriedades (tamanho, posição, cor,
fonte, texto, etc) dos componentes gráficos.
Talvez você precise selecionar projeto->novo, na janela principal, para começar a montar
a interface. Neste caso escolha um nome para o projeto quando aparecer a tela abaixo e
aperte ok.

Pronto, agora podemos começar a montar a interface. Na paleta, escolha o ı́cone windows.
É o primeiro, no topo, à esquerda. Assim que você clicar, vai aparecer na tela uma janela
como esta:

Para poder colocar os outros componentes (botão, entradas de texto, etc), precisamos

3
selecionar o modo como os componentes seram arrumados pelo GTK. A opção mais simples
é escolher o componente de posicionamento fixed positions, deve ser o mais a esquerda
da antepenúltima linha. Clique nele, e depois na nova janela. A janela deve ter ficado com
uma grade de pontos:

Agora podemos adicionar os outros componentes: duas entradas de texto (text entries),
um botão (button), um check button e dois rótulos (labels ou etiquetas). Para isto, primeiro
você deve clicar no componente desejado, depois clicar na posição que quer que ele seja
colocado, e, por fim, definir o tamanho e a posição mais precisamente com o mouse. No fim,
a janela deve estar parecida com a imagem abaixo.

A árvore de componentes (widget-tree) deve estar parecida com a imagem abaixo (a ordem
não é importante). Se você não está vendo esta janela, clique em view->widget-tree, ou
equivalente, na janela principal do Glade.
Bem, agora precisamos alterar os textos dos componentes. Para isto vamos usar a janela
de propriedades. Primeiro selecione um componente. Isto pode ser feito tanto pela janela
da interface quanto pela árvore de componentes, a menos da janela principal, que só é
acessı́vel pela árvore. Escolha, por exemplo, window1, e troque a propriedade tı́tulo (title)
de “window1” para “Conversor de Temperatura” (ou Temperature Convetor Plus se preferir).
Faça o mesmo para os rótulos e os botões, de forma que fiquem com textos parecidos
(ou com mesmo significado) da primeira figura. Você provavelmente vai precisar ajustar a
largura e posição dos componentes para ajustar direito o novo texto. É importante para não

4
confundir, que você não mude a propriedade nome (name) de nenhum componente. Após
as alterações, nossa interface deve estar parecida com a figura abaixo.

Parte 2 - Salvando, Construindo, Compilando e Tes-

tando
Nosso programa só tem a interface até momento. Mesmo assim, podemos testá-lo. Realmente
não vai fazer nada de útil, mas pelo menos podemos verificar se está do jeito que queremos.

5
Para fazer isto, primeiro mande salvar o projeto na janela principal (botão com um disquete),
depois mande construir o projeto (pirâmide com uma seta para a esfera). Na construção,
o Glade irá gerar alguns diretórios, em particular o src. Dentro deste, estarão os arquivos
.c e .h que formaram o programa. Os demais são arquivos auxiliares para a compilação do
programa.
Os arquivos são: interface.c e interface.h, que têm todos os comando para efetiva-
mente gerar a interface; main.c que tem a função main, dois comandos de inicialização do
GTK e a chamada para o laço de eventos; support.c e support.h possuem funções úteis para
manipular a interface de dentro do programa; callbacks.c e callbacks.h contém as funções
que serão executadas quando interagimos com a interface. Em particular, callbacks.c será
o único arquivo que iremos editar, mas faremos isto apenas na próxima sessão.
Para compilar o programa: no Windows, abra o arquivo .dev que fica na pasta devcpp
dentro da pasta do projeto; no Linux, vá até ao diretório do projeto abrindo um terminal e
digitando:

cd Projetos
cd projeto1

Estes comandos variam a depender do nome do projeto e do diretório escolhido. Preste

atenção quando as letras são minúsculos ou maiúsculas.
Para compilar, dê dois comandos:

./autogen.sh
make

O primeiro comando testa e prepara um monte de coisas (interfaces gráficas são complicadas
por dentro). O segundo compila todos os arquivos .c e gera o executável.
Para testar, basta dar o comando (na realidade, você pode selecionar o nome do programa,
mas como padrão, coincide com o nome do projeto):

src/projeto1

Se tudo deu certo, este comando deve acionar o nosso programa. Podemos clicar os
botões, maximizar, minimiza, escrever nas entradas de texto, mas apenas isto. Ele não faz
nada de útil ainda. Na próxima sessão colocaremos o código para que ele execute a conversão.
O resultado será parecido com

6
Parte 3 - Convertendo
Para fazer com que o programa converta os valores, precisamos definir a função que será
chamada quando o botão “Converter” for clicado. Para isto, volte ao Glade, selecione o
botão e, na janela de propriedades, escolha a aba “Sinais”. Clique nas reticências e escolha
o sinal clicked. Finalmente clique em adicionar (add ). Então, devemos ficar com

O que fizemos foi definir que a função on button1 cliked será chamada sempre que
clicarmos no botão. Esta função será colocada, pelo Glade, no arquivo callbacks.c.
Agora atualize seu projeto, salvando e construindo novamente. Note que as alterações
feitas manualmente no arquivo callbacks.c não serão desfeitas pela construção, então po-
demos modificar a interface sempre que quisermos sem perder os programas já escritos.
O próximo passo é abrir o arquivo callbacks.c com qualquer editor de sua escolha e
implementar a função. Ao abrir o arquivo, tudo que encontraremos são os #include’s e uma
função vazia:

void
on_button1_clicked (GtkButton *button,
gpointer user_data)
{

Vamos agora completar esta função. Abaixo mostro como acessar as propriedades das
entradas de texto para ler e gravar os valores de temperatura:

void
on_button1_clicked (GtkButton *button,
gpointer user_data)
{

7
 GtkWidget *entry1, *entry2;
char *s1, s2[50];
float num;

// pega refer^
encias para os componentes
entry1 = lookup_widget( GTK_WIDGET(button), "entry1" );
entry2 = lookup_widget( GTK_WIDGET(button), "entry2" );

// pega digitado na primeira entrada de texto

s1 = gtk_entry_get_text( GTK_ENTRY(entry1) );

// converte o texto em número real

sscanf( s1, "%f", &num );

// convers~
ao de temperatura
num = num * 1.8 + 32;

// converte a temperatura em texto novamente

sprintf( s2, "%.2f", num );

// grava o texto na segunda entrada de texto

gtk_entry_set_text( GTK_ENTRY(entry2), s2 );
}

A função lookup widget é definida em support.c e é usada para obtermos uma re-
ferência a qualquer componente da nossa interface pelo nome e qualquer outro componente.
Neste caso usamos o button pois é passado automaticamente para esta função para indicar
qual botão foi clicado. gtk entry set text e gtk entry get text são as funções para ler
e gravar texto nas entradas de texto. A maioria das funções do GTK seque este padrão:
gtk componente função propriedade.
Após modificar o callbacks.c, salve e compile novamente dando o comando make. Então
rode seu programa para testar a conversão.

Parte 4 - Convertendo Ida e Volta (e submissão)

Sabendo que para testar se o check button está marcado, basta usar5

if ( gtk_toggle_button_get_active (GTK_CHECK_BUTTON (check1)) ) { ...

obviamente, depois de um

GtkWidget *check1 = lookup_widget( GTK_WIDGET(button), "checkbutton1" );

5
O correto seria usar o GTK TOOTLE BUTTON, mas, por algum motivo, isto dá problema.

8
 Modifique a função anterior para converter de Celsius para Farenheit quando o check
não estiver marcado, e ao contrário quando estiver. Envie os arquivos projeto1.glade (ou
equivalente) e callbacks.c para o sistema de submissão.
Uma última informação para usuários Windows. GTK usa o padrão UTF-8 para todos
os textos, então todas as cadeias de caracteres do callbacks.c, ou outros arquivos que se
deseje usar, devem estar neste formato para aparecer corretamente. No material do curso
existe um arquivo devgtk.zip, feito às pressas, que contém o programa igcc.exe que faz
esta conversão automaticamente antes de compilar (sem alterar os originais). Para usá-lo
siga um procedimento semelhante ao da aula de cadeia de caracteres.