Criando Interfaces Gráficas com Glade e Python

Neste post vou mostrar de uma forma simples, como criar uma interface gráfica funcional em GTK e PyGTK, porém utilizando o Glade para construir a interface.

A grande vantagem de se usar o Glade para construir a interface é que a parte gráfica do nosso programa fica separada do código principal em um arquivo XML, facilitando modificações na interface sem interferir no código fonte funcional do programa.

Obviamente para criarmos uma interface gráfica devemos ter um programa já definido em mente, qual será sua funcionalidade e mais ou menos como ele irá se apresentar para o usuário final (como você espera que a interface seja).

Para o exemplo deste post vou criar um programa bem básico com um único propósito, inverter URLs, simples e objetivo, tão simples de se fazer em python que as linhas abaixo provam que é verdade.


>>> x = "palavra"
>>> x[::-1]
'arvalap'
>>>  
A vantagem da funcionalidade básica do nosso programa ser simples de se fazer é que nos focaremos mais na criação da interface assim no final do tutorial você terá uma base para criar interfaces gráficas para seus projetos.

Agora que definimos o objetivo do nosso programa, devemos imaginar como será a interface gráfica, mais ou menos como queremos que ela se apresente ao usuário final, é uma boa idéia desenhar em um papel ou criar um rascunho em algum editor de imagem para se ter uma noção de como será a interface do seu programa.

Criei no GIMP  um esboço de como eu espero que a interface seja



A interface do programa será assim simples com uma barra de menu com algumas opções básicas onde o usuário poderá copiar, colar ou apagar o conteúdo da área de texto, uma área de texto para que o usuário digite a url e assim que ocorrer a inversão a url já invertida será apresentada nesta mesma área de texto e um botão que ao ser pressionado irá realizar a inversão.

Antes de começarmos a criar a interface no Glade, vamos entender como funciona um programa feito em GTK, basicamente a estrutura do programa é baseado no aspecto de árvore, onde tudo começa com uma janela principal que na figura acima seria apenas as bordas em preto, no caso do nosso programa a janela principal é dividida em 3 partes verticais onde a primeira parte será adicionada a barra de menus, a segunda a área de texto e a terceira o botão. 

Sendo assim a estrutura do programa ficará assim


Janela Principal
   `-----Divisão Vertical
    |
    `-----+ Barra de Menus
    |          ` ---* Items do Menu *
    `----- Área de Texto 
    |
    `----- Botão

Simples não ? sendo assim da a entender que cada parte do programa, desdo menu até um simples botão precisa ser definido em um lugar específico dentro da janela principal, essa idéia ficará mais clara quando a interface estiver sendo construída no Glade, o que iremos fazer agora =D!

Nesse exemplo estou utilizando a versão 3.6.7 do Glade , que apesar de não ser a versão mais atual (no site já está com a versão 3.10) acredito que não terá nenhuma incompatibilidade entre as versões então se quiserem podem usar a versão mais recente mas qualquer problema seguindo as instruções verifique se houve alguma mudança drástica na nova versão.


Ao iniciar o glade a tela principal e uma janela com as preferências de um novo projeto é exibido conforme a imagem abaixo




Preste atenção nesta parte, não feche simplismente a janela de preferências, pois dependendo do projeto que você deseja realizar você pode querer fazer algumas personalizações, no nosso caso o formato do arquivo do projeto será GtkBuilder, com os nomes dos objetos únicos em nosso projeto, os recursos de imagem serão carregados a partir do mesmo diretório do projeto e por último a versão do gtk que utilizaremos será a 2.16, a versão do gtk que se utilizada em qualquer projeto deve ser bem definida por questões de compatibilidade, por exemplo algumas distros que utilizam versões mais antigas, caso seu programa for ser utilizado em uma distra mais antiga leve em consideração a versão do gtk.


Após verificar todas as preferências do projeto, pode clicar no botão fechar da janela de preferências, agora para começar a criar nosso programa devemos criar uma janela de nível superior, ou seja a janela principal do nosso projeto conforme expliquei anteriormente na estrutura do programa. Na janela principal do glade do lado esquerdo veja que as ferramentas são divididas por categoria, então na categoria Níveis Superiores clique no ícone Janela para criar nossa janela principal.


Ao clicar no ícone é nossa janela de nível superior será apresentado na parte central do glade, apenas um fundo cinza onde iremos adicionar os widgets do nosso programa, perceba que ao criar nossa janela de nível superior no painel do lado direito do glade em widgets apareceu nossa janela principal com o nome de window1, esse nome é gerado altomaticamente pelo glade, você pode altera-lo e colocar o nome que desejar, porém lembre-se que quando formos criar o código em python iremos precisar utilizar esse nome, então evite usar nomes com espaço ou de alguma palavra reservada.



Uma dica, veja na imagem acima a segunda parte em vermelho que eu marquei, o glade informa qual é o tipo do nosso wiget em gtk, ou seja nossa janela principal é um GtkWindow
isso é útil para que possamos pesquisar sobre o widget que estamos utilizando facilitando na hora de criar o código base do nosso programa, podemos consultar a própria documentação do PyGTK

 Logo abaixo na aba Geral temos as proriedades da nossa Janela onde podemos definir título, tamanho, ícone etc. 


Na aba geral eu efetuei algumas alterações para nosso programa, em Window Title eu coloquei obviamente o nome do programa que será exibido quando o mesmo for executado, desativei a opção resizable para que o usuário não consiga redimencionar a janela, portanto ela terá uma altura e largura única pré definida, em Window Position eu coloquei centralizar, assim sempre o programa será inicializado no centro da tela, em icon eu escolhi um ícone simples que criei no gimp, esse ícone será apresentado na barra de tarefas sempre que estiver em execução, lembrando que o ícone deve estar no mesmo diretório onde o projeto for salvo. As demais opções eu deixei padrão.


Então o widget window1 na aba geral ficou da seguinte forma


Window Title : Inverter 
Resizable: Não
Window Position: Centralizar
Icon: inverter.png



Como definimos que o usuário não poderá redimencionar a janela do programa, então vamos definir a largura e altura que desejamos, porém não será na opção default width e default height da aba geral, essa definição iremos realização na aba Comum em width request e em height request

 Defina 650 para width e 110 para height




Uma ultima configuração que devemos fazer na nossa janela principal é na aba sinais, antes de realizarmos vou explicar vagamente sobre sinais. 


Em um programa com interface gráfica, o usuário irá interagir de alguma forma com esse programa esperando que na realização de tal ato alguma coisa aconteça, por exemplo digamos que o usuário clique no botão para fechar a aplicação, obviamente ele espera que a aplicação seja encerrada e desapareça da tela, ao clicar no botão para fechar o programa o usuário está emitindo um sinal, porém o que o programa irá realizar ao receber determinado sinal fica por conta do programador definir está ação conectando o sinal do botão de fechamento com a função que irá encerrar o programa. O usuário apenas irá emitir o sinal de alguma forma, ou clicando em um botão ou apertando alguma tecla, e cabe ao programador decidir o que o programa deve fazer ao receber determinado sinal. 


É justamente para esse propósito que serve a aba sinais no glade, para definirmos o que fazer caso determinado sinal seja emitido.


Portanto como última configuração na nossa janela principal, será interligar o sinal Destroy (sinal emitido ao clicar no botão para fechar o programa) a função gtk_main_quit(), que encerra o processo do nosso programa, caso não configuremos esse sinal ao clicar no botão de fechamento do programa, a interface será destruida da tela, porém o processo ainda estará aberto no sistema, consumindo memória e processamento.


Na aba sinais vá até GtkObject e localize o sinal destroy, na frente do sinal destroy em manipulador clique onde está escrito <Digite aqui> 




Perceba que ele apresenta uma seta para baixo clique nela e escolha a opção gtk_main_quit





A configuração da nossa janela principal está concluída, agora vamos dividi-la, lembra-se que eu falei que nossa janela principal seria dividida em 3 partes verticais, para isso iremos utilizar containers.

Na categoria Containers, clique em caixa vertical.




Você vai perceber que o ícone do mouse mudará para o ícone que você clicou com um sinal de mais, agora clique dentro da janela principal onde irá aparecer uma janela perguntando o número de items que desejamos




No nosso caso será apenas 3 , clique em ok e perceba que nossa janela principal será dividida em 3 partes, e que em widgets no lado direito do glade, em uma ramificação dentro de window1 (nossa janela principal) foi criado o vbox1, que é justamente as divisões em nossa janela.




Agora que temos nossa janela principal dividida em 3 partes verticais, vamos começar a deixar o programa mais parecido com o que planejamos. 
Primeiramente vamos adicionar o menu no primeiro container da nossa janela principal, na categoria containers clique em Barra de Menus 


E clique dentro do primeiro container da nossa janela principal, e a barra de menus será aidicionada 




Perceba que nosso menu já veio com alguns submenus criados, porém no programa que estamos criando não iremos utilizar todos os submenus pré determinados portanto iremos exclui-los. Do lado direito do glade na árvore de widgets foi adicionado a menubar1 e seus submenus, infelizmente o glade não renomeia os submenus de acordo com seu propósito ele segue o padrão de nome menu1, menu2, imagemenuitem1, imagemenuitem2, isso dificulta na identificação do menu, principalmente na hora de escrever o código do programa, por isso vamos renomear os menus e excluir os que não iremos utilizar.


Para reconhecermos qual menu estamos editando navegue através dos menus e submenus pela árvore de widgets no lado direito do glade e preste atenção no nome do menu, veja a imagem abaixo por exemplo




Na imagem acima eu selecionei o menuitem1, veja que o Rótulo Consta como _Arquivo e como a setinha em vermelho na imagem mostra o menu selecionado por uma borda preta, fácil identificar que o menuitem1 se trata do menu Arquivo, porém no nosso programa não iremos utilizar esse menu item então podemos exclui-lo, na área de navegação dos widgets clique com o botão direito sobre o menuitem1 e clique em excluir.


Veja que o Item Arquivo foi excluido completamente da menubar




Agora localize o menuitem Ver que também não estará disponível em nosso programa, faça o mesmo procedimento para identifica-lo, navegue pela árvore de widgets e localize pelo rótulo e seleção do menu




No caso o menuitem3 é o menu Ver, clique com o botão direito encima dele e em excluir.

Restando assim somente o menu Editar e o menu Ajuda, serão esses os menus que nosso programa utilizará.




Agora para melhor identificarmos nosso menu, principalmente na hora de criarmos o código em python, vamos renomea-los de acordo com sua função, o menuitem2 por exemplo selecione ele e na aba Geral e em Nome altere para Editar




Mudaremos obviamente os submenus do item Editar também, pois são eles que iremos mais utilizar, com a função, colar, copiar e deletar. 


Preste atenção na árvore de navegação dos widgets, no menu Editar, ele segue com um submenu chamado de menu2 que por sua vez contém as funções do menu, clique em imagemenuitem6 e preste atenção na aba geral conforme a imagem abaixo




Na aba geral do imagemenuitem6 ele vem com a opção item prédefinido marcada, que nos informa exatamente qual a função desse item, no caso está como gtk-cut ou seja é o item Recortar, no nosso programa não iremos utilizar essa função então pode excluí-la, clique com o botão direito em imagemenuitem6 e em excluir.


Agora selecionando o imagemenuitem7 e perceba qual item pré definido ele corresponde




Como o item pré definido é o gtk-copy a função do item é Copiar, então altere o nome para copy ficando assim




Faça o mesmo procedimento com o imagemenuitem8 e imagemenuitem9 de acordo com sua função, no caso o imagemenuitem8 é o item Colar então renomeie para paste e o imagemenuitem9 que é o item Excluir renomeie para delete




Veja que agora ficou mais facil identificar qual item é qual do menu Editar na árvore de widgets.

Agora vamos renomear também o menuitem4 que se refere ao menu Ajuda, efetuando o mesmo procedimento que realizamos no menu editar




E renomeando o imagemenuitem10 que se refere ao item Sobre para about




Pronto agora que todos os menus foram renomeados, falta apenas definir os sinais =D, referente aos menus o único sinal que nos interessa é quando o usuário clicar em algum item do menu, que por sua vez irá chamar a função especifíca que iremos criar no nosso código python. 


Para todos os items dos menus, vamos utilizar o sinal activate do GtkMenuItem, veja na imagem abaixo a aba sinais do item copy do menu Editar




Esse sinal será emitido quando o usuário clicar no item desejado. Clique em <Digite aqui> e selecione a opção on_copy_activate como na imagem abaixo




Perceba que esse sinal será utilizado por uma função que nós iremos específicar no nosso código, ao contrário do sinal destroy que configuramos na janela principal e utilizamos uma função já definida gtk_main_quit().


Essa anotação on_copy_activate (quando copy for ativado faça alguma coisa) será exatamente como iremos utilizar em nosso código, o motivo de eu estar falando isso é que você pode escolher a anotação que desejar nessa parte, desde que você se lembre para que server esse sinal depoise faça algum sentido, você poderia utilizar copy_activate por exemplo.


Eu aconselho a utilizar essa anotação que o próprio glade disponibiliza pois é de fácil entendimento.


Agora devemos configurar o sinal activate dos demais items, paste e delete do menu editar e do item about do menu Ajuda, lembrando que cada sinal tem um nome próprio ou seja o item paste terá o sinal activate com a opção on_paste_activate, delete será on_delete_activate e about no menu Ajuda será on_about_activate.


Siga o mesmo procedimento de configuração do sinal activate do item copy com os demais items antes de continuar o tutorial


Após configurar o sinal activate de todos os items dos menus nós podemos continuar com o restante da interface gráfica.


No segundo container da nossa janela principal nós vamos adicionar a área de texto para que o usuário digite a url que será invertida. Na categoria Controle e Exibição do lado esquerdo do glade, clique no botão Entrada de Texto




Após clicar no botão Entrada de Texto clique dentro do segundo container da janela principal




E agora nós temos uma área para o usuário digitar a url que deseja inverter. Na área de widget foi aidiconado o entry1, altere esse nome para text_entry para ficar mais fácil de ser identificado no nosso código, altere o nome através da aba geral



Na imagem acima eu alterei o nome do widget para text_entry e a opção Text que está disponível na aba Geral deste widget eu coloquei a frase Digite a URL aqui.. essa frase será exibida dentro da área de texto sempre que o programa for iniciado, é apenas uma opção para deixar nosso programa mais amigável para o usuário final deixando uma mensagem ou instrução.



Agora vá para a aba Empacotamento, na opção Padding que está como 0 (zero) coloque 17 e na opção Expand deixe-a marcada como Não essas opções servem para diminuir o espaço que a área de texto que adicionamos ocupe no programa, você pode efetuar testes e utilizar valores que desejar para deixar o tamanho que um widget ocupa na janela principal do seu gosto, um programa com espaço distribuído harmoniosamente entre os widgets na janela principal será mais agradável de ser utilizado para o usuário final.



A configuração do nosso widget de entrada de texto está praticamente concluída, pois sua funcionalidade será apenas receber os dados digitados pelo usuário e exibir os dados já invertidos, a inversão ocorrerá sempre que o usuário clicar no botão que vamos criar daqui a pouco, porém não seria interessante e mais comodo se o usuário tive-se a opção de digitar a url na área de texto e ao apertar enter a inversão da url ocorre-se também ? claro que seria, por esse motivo vamos configurar um sinal para nossa área de texto também, assim sempre que o usuário usar a tecla enter estando dentro da área de texto nós vamos considerar esse sinal para realizar a inversão.


Na aba Sinais do widget de entrada de texto, em GtkEntry nós vamos utilizar o sinal activate que reconhece quando o usuário digita a tecla enter e em manipulador nós iremos selecionar on_text_entry_activate


Quando criarmos o código do nosso programa nós vamos utilizar essa anotação para chamar a função que efetua a inversão do texto, que será a mesma função que vamos utilizar no botão que é a opção principal para realizar a inversão.


Agora falta apenas adicionarmos nosso botão no último container, porém o espaço do container para um único botão é muito grande, e apenas adicionar o botão ocuparia todo o espaço e ficaria um botão gigante no nosso programa, por isso vamo adicionar uma caixa de botões antes de adicionarmos nosso botão.


Na categoria Containers, clique em Caixa de Botões Verticais




Logo após clique dentro do último container da nossa janela principal onde irá aparecer uma janelinha perguntando a quantidade de containers que você deseja para adicionar os botões, no nosso caso será apenas 1




Perceba que a área onde o último container da nossa janela principal foi preenchida deixando apenas um espaço para nosso botão




Agora na categoria Controle e exibição do lado esquerdo do Glade, clique em Botão




E clique dentro do container destinado ao botão o único espaço disponível




E assim o widget do nosso botão foi criado, altere o Nome de button1 para button_invert na aba Geral, localize também na aba Geral a opção Label, e mude para INVERTER, assim o rótulo do nosso botão ficará mais amigável.


 


Agora para finalizar a configuração do nosso botão precisamos configurar o sinal emitido quando o usuário clicar no botão, na aba Sinais em GtkButton nós vamos utilizar o sinal clicked configure para a opção on_button_invert_clicked




Para finalizarmos completamente a interface gráfica do nosso programa falta apenas uma parte, você consegue adivinhar qual é ? 


Na nossa barra de menu temos o Item ajuda, com um subitem chamado Sobre (about) onde irá conter informações referente ao desenvolvedor do programa, o site e a licença do software, uma simples janelinha contendo todas essas informações.


No glade é muito simples criar a janela Sobre, ela praticamente já está pronta bastando adicionarmos os dados necessários. Na categoria Níveis Superiores do lado esquerdo do Glade clique no botão Diálogo Sobre


Assim que clicar no botão uma caixa de Dialógo irá aparece no centro do Glade, mas não se desespere que toda a configuração que você criou não sumiu, está tudo do lado direito na árvore de widgets 


Na aba Geral do widget aboutdialog, nós podemos adicionar as informações sobre o nosso programa, altere as informações que desejar, como Título da Janela, licença do software , nome do Autor etc, efetuei algumas alterações na aba Geral para identificar nosso progrograma, principalmente o nome do wiget , alterei para about_dialog para ficar mais fácil de identificar. Confira as demais configurações nas imagens abaixo



 Adicionei o nome do programa, a versão uma simples descrição sobre o programa, uma licença , o nome do autor e um logo no tamanho de 48x48.


Ainda na aba Geral eu defini um título para a Janela, coloquei a opção resizable como Não para que o usuário não consiga redimencionar a janela e a opção Window Position como Centralizar para que a janela seja exibida no centro da tela.


Agora na aba Comun defina o width request como 320 e o height request como 260 para que nossa janela tenha um tamanho fixo definido




Nossa janela Sobre já está praticamente pronta, não precisamos configurar nenhum tipo de sinal nela, pois os botões que estão contidos nela já estão configurados para exibir as informações que adicionamos, porém perceba na imagem acima que na janela ficou um pequeno container, aquele espaço transparente abaixo do link. Como não iremos adicionar nada nesse espaço vamos apenas removelo. 


Na árvore de navegação dos widgets do lado direito do glade clique em dialog-vbox1 e na aba Geral em número de items, mude para 2 assim removendo esse container sobrando que não utilizaremos




Pronto terminamos a criação de toda a nossa interface gráfica, salve o projeto em um diretório separado apenas para nosso programa, o arquivo será criado com a extensão .glade mas ao abrir o mesmo com um editor de texto você pode verificar que é um arquivo XML com todas informações e configurações da nossa interface




Agora vamos criar o código do nosso programa, basicamente iremos utilizar a classe gtk.Builder para carregar o arquivo XML que foi gerado pelo glade, assim poderemos acessar os widgets como área de texto, botão e menus podendo manipula-los da forma que desejarmos em nosso código. 


Vou colocar o código do programa logo abaixo,comentei cada parte do programa explicando exatamente como funciona as funções e como manipular os widgets do arquivo XML




#!/usr/bin/env python
#-*- coding: utf-8 -*-

import pygtk
pygtk.require("2.0")  #Essa linha define a versão do pygtk a ser importado
import gtk

#Criando a Classe do Programa
class InverterApp(object):
    def __init__(self):
    #Agora como eu havia dito vamos utilizar uma função da classe gtk.Builder 
    #para carregar o arquivo XML gerado pelo Glade.
    
        builder = gtk.Builder() #Primeiramente criamos uma instância da classe
        builder.add_from_file("inverter.glade") #Função para carregar o arquivo
    
    #Agora nós podemos acessar os widgets do arquivo XML, caso você tenha
    #alterado o nome de algum widget e não seguiu o tutorial exatamente como
    #eu fiz, preste atenção e utilize o nome que você definiu.
    #Caso não se lembre os nomes abra o arquivo XML no glade novamente e veja
    #os nomes na ávore de widgets do lado direito.
    #Utilizaremos a função get_object passando como parâmetro o nome do widget.
    
    #Obtendo o widget window1 nossa janela principal
        self.window = builder.get_object("window1")
    
    #Obtendo o widget text_entry (a área de texto do nosso programa) pois
    #iremos utiliza-la nas funções de inversão da URL e para adicionar o a 
    #URL já invertida
        self.text_area = builder.get_object("text_entry")
    
    #Obtendo o widget about_dialog (janelinha com as informações do programa)
        self.about = builder.get_object("about_dialog")
        
    #Exibindo a janela do programa
        self.window.show()
    
    #Agora nós iremos conectar os sinais que definimos para cada widget no 
    #Glade Para isso usamos a função connect_signals(). Se você definiu o nome
    #de algum sinal de um modo diferente dos que eu utilizei preste atenção
    #nessa parte e substitua pelo nome que você definiu.
    
        builder.connect_signals({"gtk_main_quit": gtk.main_quit,
                            #Sinal da janela principal, conectada a função
                            #do gtk que fecha o nosso programa
                            "on_button_invert_clicked": self.invert_url,
                            #Sinal do botão ao ser clicado, o valor é uma 
                            #função que vamos criar mais a frente no código.
                            "on_text_entry_activate": self.invert_url,
                            #Sinal da área de texto ao ser pressionado a tecla
                            #enter, perceba que utilizamos a mesma função que
                            #utilizamos no valor do botão, ou seja se o usuário
                            #clicar no botao ou apertar enter a URL será 
                            #invertida pois os sinais chamam a mesma função de
                            #inversão.
                            "on_copy_activate": self.copy_text,
                            #Sinal do item Copiar do Menu Editar, onde chamamos
                            #a função que copia o texto para o clipboard do
                            #sistema. Essa função nós iremos cria-la ainda.
                            "on_paste_activate": self.paste_text,
                            #Sinal do item Colar do Menu Editar, com a função
                            #paste_text que definiremos mais a frente
                            "on_delete_activate": self.delete_text,
                            #Sinal do item Excluir do Menu Editar, a função
                            #delete_text será definida mais a frente.
                            "on_about_activate": self.about_window,
                            #Sinal do Item Sobre do Menu Ajuda, a função será 
                            #criado ainda.
                                })
                            
#Criando as funções que eu especifiquei como valor no dicionário dos Sinais
    def invert_url(self, widget):
        """Função Principal do programa, irá armazenar a URL que o usuário
        digitar na área de texto e inverte-la"""
        
        #Usando a variável text_area que contém o widget da área de texto
        #usamos a função get_text() para pegar o texto que o usuário digitar
        #essa é uma função de qualquer instância de um objeto gtk.Entry
        #Veja mais a respeito sobre na documentação oficial no final do Post.
        url = self.text_area.get_text()
        
        #Invertendo a URL que foi armazenada na variável text
        url = url[::-1]
        
        #Adicionando a URL já invertida na área de texto, para isso usamos a
        #função set_text() também disponível em objetos do tipo gtk.Entry
        self.text_area.set_text(url)
        
    def copy_text(self, widget):
        """Função para copiar o valor digitado na área de texto para o
        clipboard do sistema"""
        
        #Obtendo o acesso ao clipboard do sistema
        clipboard = gtk.clipboard_get()
        
        #Obtendo a URL digitada na área de texto para que possamos copia-la 
        url = self.text_area.get_text()
        
        #Copiando a URL para o clipboard do sistema
        clipboard.set_text(url)
        
        #Para que a URL permanceça amazenada no clipboard mesmo depois do
        #programa ser encerrado utilizamos a função store() do gtk.clipboard
        clipboard.store()
        
    def paste_text(self, widget):
        """Função para colar o texto armazenado no clipboard na área de texto
        do programa"""
        
        #Obtendo o acesso ao clipboard do sistema
        clipboard = gtk.clipboard_get()
        
        #Obtendo o texto armazenado no clipboard
        url = clipboard.wait_for_text()
        
        #Inserindo o texto obtido do clipboard na área de texto do programa
        self.text_area.set_text(url)
        
    def delete_text(self, widget):
        """Função para apagar qualquer texto que esteja inserido na
        área de texto"""
        
        #Como queremos apagar qualquer texto que se encontra na área de texto
        #apenas inserimos uma stirng vazia na área de texto
        self.text_area.set_text("")
        
    def about_window(self, widget):
        """Função para exibir a Janela Sobre do programa"""
        
        #Executando a Janela Sobre
        self.about.run()
        
        #Ativando a opção fechar da Janela Sobre
        self.about.hide()
        
if __name__ == "__main__":
    #Criando uma instância do Programa
    app = InverterApp()
    
    #Função do GTK que deixa a janela principal do nosso programa em loop para
    #que ela permanceça em execução, sendo encerrada apenas ao chamar a função
    #gtk.main_quit que está configurado no sinal gtk_main_quit, referente ao  
    #botão fechar do programa
    gtk.main() 

Salve o código do programa na mesma pasta em que você salvou o arquivo .glade, aconselho a salvar o arquivo xml gerado pelo glade o arquivo .py com o mesmo nome, no exemplo eu salvei como inverter.glade e inverter.py.

Para executar o programa de permissão de execução ao arquivo .py

 
chmod +x inverter.py

E execute com o comando 

 
./inverter.py

Veja como ficou o programa em execução


Como eu utilize o Global Menu a barra de menus do programa aparece no painel go Gnome, mas o correto seria aparecer logo abaixo dos botões de fechar e minimizar, perceba que como eu tirei a opção de redimencionar a tela no glade o botão de maximizar não aparece.

O programa realizando seu objetivo que é inverter URLs





A janela Sobre com informações sobre a licença e outras informações sobre o programa






Baixe o arquivo .glade e .py que criei para este tutorial aqui 


Referências:

http://www.pygtk.org/
http://www.pygtk.org/docs/pygtk/ (Classes)
http://www.pygtk.org/docs/pygtk/gtk-functions.html (Funções)
http://glade.gnome.org/
http://live.gnome.org/Glade/Tutorials
http://www.micahcarrick.com/gtk-glade-tutorial-part-1.html

Postado em , por Rafael Fernandes dos Santos.

9 Comentário(s) em “Criando Interfaces Gráficas com Glade e Python”

  1. O meu não quer executar,quando executo não acontece nada.
    Eu baixei o que você fez e deu certo,será que tenho que baixar mais alguma coisa para poder executa-lo.
    Minha versão do glade é :3.12.1
    Idle Python 3.2.
    Não fiz o logo tipo.

    [Responder comentário]
  2. Olá Henrique, quando você tenta executar a sua versão ele não retorna nenhum erro através do terminal ? Não se esqueça de colocar a função gtk.main() para que a janela continue em execução, caso essa função não seja especificada a janela irá abrir e fechar no mesmo momento.

    [Responder comentário]
  3. Muito bom, me ajudou muito. Agora empaquei porque preciso mostrar uma tabela do meu banco de dados sqlite3, e não sei como fazer, nem qual widget usar. Tentei com o Visualizar texto, mas não funcionou.

    [Responder comentário]
  4. Olá Volney, fico feliz que esse tutorial tenha te ajudado de alguma forma.

    No seu problema referente a tabela do banco de dados, eu imagino que você queira mostrar as linhas e colunas da tabela com o conteúdo na interface do seu programa. Caso seja esse o caso aconselho usar o widget Gtk.Grid: http://lazka.github.io/pgi-docs/#Gtk-3.0/classes/Grid.html


    Com ele você poderá moldar as linhas e colunas do seu banco sem problema, no link acima na documentação perceba que esse widget contém diversos métodos que podem te ajudar a adicionar ou remover colunas, assim você pode interagir com o widget em tempo de execução expandindo sua tabela se necessário.


    Espero que essas informações sejam uteis.



    Abraço.

    [Responder comentário]
  5. Sim no glade em Containers o segundo icone é o Gtk.Grid, você pode criar ele pelo glade e manipulá-lo no seu código para exibir os dados.
    Criei uma aplicação de testes como exemplo e comentei um pouco o código para você entender melhor como isso funciona, pode baixar a app nesse link: https://dl.dropboxusercontent.com/u/7405217/apps/ler_banco.tar.gz , nele já tem o arquivo.glade, o banco sqlite de teste e o código em python.

    [Responder comentário]
  6. hum, no meu glade não tem, acho q é porq ele é a versão pra gtk2, vou baixar um mais novo pra ver isso, obrigado pela ajuda. Também estava tentando fazer pelo tkinter, mas não achei nada que desse pra imprimir uma tabela.

    [Responder comentário]

Deixe um comentário