Pular navegação

Tag Archives: glade

Neste tutorial irei ensinar como criar uma ListStore em Python, utilizando o criador de interfaces Glade e PyGTK.

Primeiro crie uma interface como esta:

Salve com o nome que você quiser(no meu exemplo, eu salvei como Exemplo1.glade).

Em seguida crie os sinais da interface:

Feito isso, abra seu editor/IDE e insira o código comentado:

#!/usr/bin/env python
#-*- encoding: utf8 -*-

#Criação de uma liststore em Python, com PyGTK e Glade.
#Autor: Philip Sampaio

import gtk
import gtk.glade
import pygtk

pygtk.require("2.0")

class ListStoreSimples(object):
    def __init__(self):
        #Função de início.. é a primeira a ser carregada
        interface             =     gtk.glade.XML("Exemplo1.glade")
        self.winListStoreSimples    =    interface.get_widget("winListStoreSimples")
        self.entNome                =    interface.get_widget("entNome")
        self.entEmail            =    interface.get_widget("entEmail")
        self.trvListStore        =    interface.get_widget("trvListStore")

        #Montando a ListStore(ou tabela, como quiser)
        #A linha abaixo diz cria um modelo de liststore com 2 colunas, ambas sendo strings
        self.mdlListStore = gtk.ListStore( str, str)
        #A linha abaixo configura o modelo da treeview com o modelo acima
        self.trvListStore.set_model(self.mdlListStore)

        #Colocando as colunas
        colunaNome     = gtk.TreeViewColumn("Nome",gtk.CellRendererText(), text=0)
        colunaEmail    = gtk.TreeViewColumn("Email",gtk.CellRendererText(), text=1)
        #Adiciona à nossa treeview (trvListStore)
        self.trvListStore.append_column(colunaNome)
        self.trvListStore.append_column(colunaEmail)

        #Dicionário de conexões
        dic = {
            'on_winListStoreSimples_destroy' : ( self.on_winListStoreSimples_destroy ),
            'on_btnAdicionar_clicked'         : ( self.on_btnAdicionar_clicked)
            }

        #Conecta os sinais
        interface.signal_autoconnect(dic)
    def main(self):
        #Inicia o loop GTK
        self.winListStoreSimples.show_all()
        gtk.main()

    def on_btnAdicionar_clicked(self,widget):
        #Sinal de clique do btnAdicionar
        nome     = self.entNome.get_text()
        email     = self.entEmail.get_text()
        #Preste atenção: você irá adicionar os dados no MODELO
        self.mdlListStore.append([ nome, email])

        #As linhas comentadas abaixo são de exemplo.
        """info = [("Philip Sampaio","philip.sampaio@gmail.com"),
                ("Fulano"         ,"fulano@gmail.com"),
                ("Maria"         ,"Maria@gmail.com"),
                ("João"             ,"Joao@gmail.com")]
        for coluna in info:
            print coluna[0], coluna[1]
        """
    def on_winListStoreSimples_destroy(self,widget):
        #funcao para parar o loop gtk e encerrar o programa
        self.winListStoreSimples.hide_all()
        gtk.main_quit()

if __name__ == '__main__':
    teste = ListStoreSimples()
    teste.main()

O resultado deve ser algo como isto:
Fácil, não?
Teste e estude o código! Pergunte se precisar de ajuda!

Programadores, no passado, tinham o costume de criar o primeiro programa em uma linguagem de programação em estudo que mostrasse de alguma forma a frase “Hello World”(em português: “Olá mundo”). Hoje em dia, pelo menos no meu curso técnico de informática, quebraram este ritual.
Não pretendo cometer esta desonra.

Pois bem, let’s go!

Vou mostrar a construção da interface no Glade, apesar de ser um exemplo simples que podia ser feito via código(com pyGTK direto)…
Antes de prosseguir, leia este site: http://www.cin.ufpe.br/~cinlug/wiki/index.php/Mantendo_A_Sanidade_Com_O_Glade

Abra um novo projeto no Glade e crie um novo widget do tipo janela(window).
glade0011.jpg

Depois crie um Vertical Box com 2 “itens”(clique no botão e em seguida clique na interface).

glade002.jpg

Em seguida crie um Horizontal Box no primeiro item do Vertical Box. Para fazer isso, basta clicar no ícone ao lado esquerdo do Vertical box e em seguida clicar na parte superior do Vbox existente. Escolha 2 itens novamente(mas agora é em horizontal).

Feito isso, crie um “Text Entry”(conhecido como edit em algumas GUIs), um “Button”(botão) e um “Label”(etiqueta de texto) desta forma:glade0031.jpg

OBS.: Eu redimensionei a interface utilizando as bordas do widget window1.

Agora chegou a hora de dar nomes ao widgets..
Clique em cada um e dê os seguintes nomes(claro que você pode definir isto sozinho!):
Ao text entry: entnome;
ao botão: btnok
e ao label: lblresposta.
No label, ative a opção “Usar marcação”, debaixo do rótulo.

glade005.jpg
Salve o projeto em algum diretório(dãr! lógico, né? Na memória vai ficar difícil) .

Agora vem uma parte muito importante!
Definir as ligações entre a interface e o código.. Isso se faz na aba “Signals”(Sinais).
Teremos que ligar o sinal de quando o usuário clicar no botão ok, e de quando o programa for “destruído”(quando clicarmos no fechar da janela).

Definindo o sinal do botão:
glade004.jpg

Não se esqueça de dar um “Enter” para salvar a informação.
Faça o mesmo com o widget “window1”(ficou com o nome padrão mesmo :)), só que em vez de conectar ao evento “Clicked”, conecte com o evento “Destroy” que está em GtkObject(aproveite pra fuçar outros eventos, você vai encontrar eventos diferentes em alguns widgets). Deixe o padrão mesmo: on_window1_destroy.
Agora salve o projeto e feche-o se quiser.

O código

Agora vem a parte interessante.. o código!
Vou sugerir que você sabe o básico(bem básico!) de Python pois postarei o código auto-explicado, com comentários.

Hello_world.py(somente para identificar o código/script):

#!/usr/bin/python
#-*- encoding: utf8 -*-
#Arquivo: Hello_World.py

"""Primeira linha pode ser desnecessária na maioria das ocasiões,
mas diz a algum programa que queira abrir este script/documento, onde está
o interpretador"
""
"""Segunda linha diz ao interpretador para aceitar caracteres como acentos e cedilhas.
É opcional também, mas sem isso você não poderá usar acentos nos comentários"
""

import gtk, gtk.glade
#importa a biblioteca gtk e gtk.glade
import pygtk
#mesma coisa, importa o wrapper pygtk, para que possamos editar os widgets da interface
#podemos até criar toda a interface com o pygtk, mas é muito trabalhoso
pygtk.require("2.0")
#Versão mínima requerida para o código

class Hello_World():
    def __init__(self):
        """Função inicial, carrega a interface e conecta os sinais dos widgets"""
        interface           = gtk.glade.XML("hello_world.glade")
        self.janela         = interface.get_widget("window1")
        self.entnome        = interface.get_widget("entnome")
        self.lblresposta    = interface.get_widget("lblresposta")
        #Define as variáveis dos objetos que utilizaremos.
        #Neste caso são todos, exceto o botão
       
        dic = { "on_btnok_clicked"        : (self.on_btnok_clicked),
                "on_window1_destroy"    : (self.on_window1_destroy)
                }
        #Cria o dicionário com os sinais conectados aos callbacks
       
        interface.signal_autoconnect(dic)
        #Faz a conexão dos sinais com os callbacks
        self.janela.show_all()
        #Exibe a janela
       
        gtk.main()
        #inicia o loop GTK, e faz rodar a interface em loop
        #veja como isto funciona no tutorial "Mantendo a sanidade com o Glade"
        #cujo link postarei no final do tutorial
       
    def on_btnok_clicked(self,botao):
        """Função para quando o botão OK for clicado"""
        nome = self.entnome.get_text()
        #Pega o texto do text entry
        self.lblresposta.set_markup("<big>Hello World!</big> Este programa foi criado por "+nome)
        #Dá a resposta no label. Poderia ser usado o set_text, mas neste caso estamos usando marcação XML no exemplo
       
    def on_window1_destroy(self,janela):
        """Fecha o programa interrompendo o loop GTK"""
        gtk.main_quit()
if __name__ == "__main__":
    Hello_World()
    #roda o programa
 

————————-
Obs: Tive que trocar algumas aspas simples por duplas, mas acho que não há problema aqui.
Com os comentários o programa ficou grande, mas sem eles foram apenas 23 linhas essenciais!
Pouquíssimo código!

Para rodar o programa, digite em um terminal:
$python /caminho/do/script/Hello_World.py
OBS.: O caracter “$” não é para digitar. Ele significa que você está como usuário normal no sistema.

Você também pode rodar diretamente com o SPE ou Eric(os outros IDEs eu não sei), clicando em “Run/Stop”(no SPE).

Programa funcionando:
programa001.jpg

Fiz algumas modificações, como a largura da borda do “window1″(Para isso, vá em Propriedades > Common > Largura da borda: 10 ) e o redimensionamento da janela (Em Propriedades > General > Redimensionável: Não).

Por hora é só. Um programa bem simples, mas deu pra ter uma noção de como a “coisa” funciona.
Por favor, não deixe de postar dúvidas e críticas.

Muitos de vocês, leitores, devem estar acostumados ao modo de desenvolvimento do Windows (VB/Delphi), oque me faz pensar que vocês odiariam ter que desenvolver uma interface gráfica somente em códigos. Pois bem, existem muitos programas que utilizam este método para construir interfaces: somente em código fonte.

Isso pode ser muito bom, devido ao controle sobre o código-fonte, já que foi tudo construído por você mesmo, programador.

Mas, como nem todo mundo tem paciência e disposição suficiente para construir interfaces gráficas via código, a maior parte das interfaces que serão criadas nos tutorias, serão feitas com o Glade.

Mas o que é o Glade?

O Glade é um programa para desenvolvimento de interfaces gráficas para GTK+(The Gimp Toolkit).

Com ele, é possível criar interfaces independentes de códigos, para que possa haver uma separação de códigos e interface. Isso beneficia muito o programador(ou programadores envolvidos no mesmo projeto), já que é muito mais fácil corrigir erros modificando só uma área do programa- interface ou código-fonte. Além disso, não acostuma o programador a mexer nas duas coisas ao mesmo tempo- estética e funcionalidade(design e código).

Acho que um programador não é obrigado a saber desenhar interfaces de usuários, já que o trabalho dele é programar, e não desenhar(desenhar é só um modo de falar, o programador é obrigado a saber várias coisas sobre acessibilidade, cores e etc).
Com o Glade(ou outro GUI deste tipo), o trabalho pode ser muito bem dividido, aumentando a produtividade!

Imagens do software

Tela principal do Glade

Está é a interface do Glade 3.
Do lado esquerdo temos a palheta de widgets(é como se chamam os objetos da interface), a direita temos a treeview dos widgets já criados, e abaixo disso temos as propriedades dos widgets.

Glade em ação.

Um exemplo funcional.

Explicarei mais afundo algumas coisas sobre o Glade, mas basicamente construirei interfaces nele e modificarei em pyGTK.

Primeiro post!

Espero ajudar ao máximo aqueles que desejam aprender a programar em Python – principalmente aplicativos com interfaces gráficas.

Críticas e opiniões seram muito bem vindas.
Os posts serão em grande parte escritos em português do Brasil.

Boa leitura.