Projeto 16 - Ambiente de desenv. rápido no Python

No projeto anterior Projeto 15 – Componentes gráficos em Python apresentei como utilizar componentes gráficos no Python de forma bem manual utilizando a biblioteca gráfica tkinter. Agora, para o mesmo projeto, utilizaremos um ambiente de desenvolvimento rápido com Glade que utiliza GTK.

Neste caso, o processo de desenvolvimento de aplicativos em python ficará bem mais interessante.

Para utilizarmos o Glade, precisamos do GTK. E para utilizar o GTK, precisamos antes instalar o “msys installer” que pode ser encontrado em: https://www.msys2.org/

Depois de instalado o msys. Iremos instalar o GTK. Abra o shell Msys2 e execute:

pacman -S mingw-w64-x86_64-gtk3

Agora instalaremos o Glade. Execute no shell o seguinte comando:

pacman -S mingw-w64-x86_64-glade

E por fim:

pacman -S mingw-w64-x86_64-python3-gobject

Execute no shell mingw64.exe o comando:

glade

Já deverá abrir o ambiente de desenvolvimento rápido do Glade.

Agora iremos desenvolver um programa de cálculo de média de 5 notas, com o seguinte resultado final:

Vá para o lado superior esquerdo e clique em Criar novo projeto, conforme figura abaixo.

Clique em Niveis superiores e escolha GtkWindow

Na aba Geral, em ID, digite: Form1

Em Contêineres, clique 2x em gtkBox

Clique novamente em Contêineres-> GtkBox e clique no meio da tela, de forma que fique conforme a figura abaixo:

Em Geral, número de itens, mude de 3 para 6:

Clique novamente em Contêineres-> GtkBox e clique na primeira linha da tela, conforme a figura abaixo:

Em geral, mude a orientação de Vertical para horizontal e o número de itens de 3 para 2.

Repita o processo de adicionar o Contêineres-> GtkBox e clique na próxima linha da tela mais 5x, conforme a figura abaixo:

Agora iremos adicionar os Labels.

Clique em Exibição->GtkLabel.

Adicione 8 labels, conforme a figura abaixo:

Clique sobre o label superior e em Geral, em Rótulo digite: Cálculo de médias

Clique sobre o segundo label do canto superior esquerdo e altere o rótulo para Nota 1:

Repita o processo para os outros label, como: “Nota 2:”, “Nota 3”, “Nota 4”, “Nota 5”.

E os dois últimos labels como: “A média é” e “0”, conforme a figura abaixo:

Agora iremos adicionar as caixas de entrada de dados.

Clique em Controle->GtkEntry.

E clique na linha do lado direito de Nota1. Em geral, ID altere para nota1Caixa.

Repita o processo para todas as outras caixas com os repectivos IDS: “nota2Caixa”,  “nota3Caixa”, “nota4Caixa”, “nota5Caixa”. E no label “0”, o ID será lb_media. As caixas ficarão conforme abaixo:

Vamos agora adicionar um botão.

Clique em Controle->GtkToggleButton. E clique na parte inferior da tela.

Conforme figura abaixo:

Com o botão selecionado, vá em geral->Rotulo com imagem opcional, digite Calcular:

Em Sinais->GtkButton. Clicked na coluna Manipulador, digite: calcularMedia

e pressione Enter.

Clique na linha em que se encontra Nota 1, e clique em Homogêneo.

Repita o processo até a linha da média.

Pressione CTRL + S para salvar o projeto. Coloque o nome de interface

Pronto! Finalizamos a interface.

Minimize o Glade e abra outro shell mingw64.exe:

Digite: idle

No Idle, clique em File->New.

Digite o seguinte código:

import gi

gi.require_version("Gtk", "3.0")

from gi.repository import Gtk

builder = Gtk.Builder()

builder.add_from_file("interface.glade")

class Handler:

    nota1Caixa = builder.get_object("nota1Caixa")

    nota2Caixa = builder.get_object("nota2Caixa")

    nota3Caixa = builder.get_object("nota3Caixa")

    nota4Caixa = builder.get_object("nota4Caixa")

    nota5Caixa = builder.get_object("nota5Caixa")

    lb_media = builder.get_object("lb_media")

    def onDestroy(self, *args):

        Gtk.main_quit()

    def calcularMedia(self, button):

        nota1 = float(self.nota1Caixa.get_text())

        nota2 = float(self.nota2Caixa.get_text())

        nota3 = float(self.nota3Caixa.get_text())

        nota4 = float(self.nota4Caixa.get_text())

        nota5 = float(self.nota5Caixa.get_text())       

        media = (nota1 + nota2 + nota3 + nota4 + nota5)/5

        self.lb_media.set_text(str(media))

builder.connect_signals(Handler())

window = builder.get_object("Form1")

window.show_all()

Gtk.main()

Clique em File->Save. Salve o arquivo na mesma pasta que salvou a interface. E coloque o nome de Principal.

Pressione F5 para rodar o código.

Deverá abrir a Janela. Coloque as notas 1,2,3,4,5 e pressione Calcular. Deverá apresentar a média no valor de 3.0.

Vamos agora melhorar um pouco o visual acrescentando uma imagem.

Volte para o Glade.

Clique no GtkBox logo abaixo do label.

Em Geral, número de itens, mude de 6 para 7. Assim estaremos acrescentando uma linha entre “A média é” e o botão calcular. Neste espaço colocaremos a imagem.

Clique em Exibição->GtkImage.  E clique no novo espaço mencionado.

Salve a figura abaixo na pasta do projeto com o nome fig.png

Clique com o botão direito sobre GtkImage e escolha: Editar separadamente.

Clique no Em Geral, Nome do arquivo. Procure pela figura fig.png.

Pressione Ctrl + S para salvar o projeto.

Feche a janela de “editar separadamente”

Clique com o botão direito em Form1 e escolha “Visualizar Captura de Tela”

Temos agora um novo visual do programa de calcular médias.

Feche-o.

Para testar o mesmo, vá para o Idle e pressione F5.

Sites recomendados:

https://python-gtk-3-tutorial.readthedocs.io/pt_BR/latest/index.html#

https://www.gtk.org/docs/installations/windows/

Se gostou do artigo, deixe seu comentário!

Artigo Completo em DOCX:  download