GUI com Tkinter em Python

from tkinter import Tk
root = Tk()
root.title("Janela simples")
root.mainloop()

from tkinter import Tk, Label
root = Tk()
root.title("Exemplo Label")
rotulo = Label(root, text="Olá, classe!")
rotulo.pack()
root.mainloop()

from tkinter import Tk, PhotoImage, Label
root = Tk()
root.title("Imagem Gif")
img = PhotoImage(file="computer.gif").subsample(5)
logo = Label(root, image=img)
logo.pack()
root.mainloop()

from tkinter import Tk, Label, PhotoImage
root = Tk()

img = PhotoImage(file="computer.gif").subsample(5)
photo = Label(root, image=img)
photo.pack(side="top")

text = Label(root, text="Olá, alunos!")
text.pack(side="bottom")

root.mainloop()

from tkinter import Tk, Label

root = Tk()
root.title("Teclado numérico")

chars = [
    ['1','2','3'],
    ['4','5','6'],
    ['7','8','9']
]

for r in range(3):
    for c in range(3):
        Label(root, text=chars[r][c], width=4, height=2, borderwidth=1, relief="solid").grid(row=r, column=c)

root.mainloop()

Texto original

O texto original pode conter falhas de gramática ou de concordância, isso ocorre porque ele foi obtido por um processo de extração de texto automático.

Texto extraído do video Algoritmos e Programação de Computadores II - Interfaces Gráficas em Python I

O nosso nosso disciplinário de algoritmos e programação de computadores para o universo.
Esse é a continuação do curso 1 que vocês viram do primeiro chemistry.
Nesta visuala que é de número de 18, a gente vai aprender agora um novo conceito, uma nova maneira de implementar programas, que é com o uso de interfaces gráficas.
Então a gente vai ter duas aulas sobre esse assunto.
Eu vou mostrar para vocês algumas fostos narridades e alguns conceitos relacionados com a programação de programas que utilizam interfaces gráficas, como botões, janelas e etc.
Então para a gente poder implementar programas que se utilizam de interfaces gráficas, que é o que a gente chama de gui, Gui, que é a sigla para graphical user interface, é necessário fazer o uso de certas APIs, que as linguagens de programação nos oferecem, e que permitem que o programador cria os seus programas mais facilmente e essas APIs disponibilizam funções e bibliotecas para criar botões, janelas, gráficas, entre várias outras fostos narridades que são específicas de interfaces gráficas.
Neste curso, como a gente está aprendendo com uma linguagem Python, a gente vai utilizar o módulo T-50, que é uma biblioteca padrão da linguagem Python, que oferece funcionalidades de desenvolvimento de interfaces gráficas, incluindo diversas funcionalidades e características para poder criar essas interfaces.
Então, a gente vai começar com um primeiro exemplo, que é criar o exemplo mais simples possível, que é um programa que vai abrir uma janela sem nada ali dentro, e sem nenhuma fostos funcionalidade.
Então para isso vamos aqui para minha tela, eu vou inicialmente importar a biblioteca T-50, então, front-tec-kinder, eu vou importar esta classe TK, que é específica para a gente poder fazer, então, a criação dessa janela.
Depois, eu vou criar um objeto chamado de root, que é um objeto da classe TK, e depois eu chamo o método main-loop, que vai fazer a chamada, uma função, que é responsável por criar esta janela para a gente.
Então, executando aqui o nosso programa, o nosso programa foi criado, aqui está a janela, reparem que essa janela não tem nenhuma, nada ali dentro, apesar de a gente conseguir fazer ressais em ela, não tem nada, nenhum conteúdo ali naquela janela.
Bom, vamos começar a adicionar algumas funcionalidades nesta janela, então a primeira coisa que a gente pode fazer é adicionar um texto dentro desta janela.
Então, para isso, a gente vai utilizar alguns componentes da biblioteca, a gente que a gente chama de Weighget, e um desses componentes é o label, então, label é uma classe que permite que você adicione um texto em uma janela gráfica.
Então, eu vou aqui em cima importar agora, além da biblioteca TK, eu vou importar a classe label.
Aqui é feito também a criação do object root, depois a gente pode criar um outro objeto que é da classe label, dentro da construção desse objeto, a gente pode passar alguns parâmetros.
O primeiro dele é o parâmetro master, onde a gente indica qual é a janela na qual este texto vai ser inserido.
Então, aqui a gente coloca o object root, que a gente acabou de criar, que é a janela.
E uma outra tributo que a gente pode também especificar aqui nesta construção desse objeto é o próprio texto que vai ser inserido lá na janela.
Então, aqui eu posso adicionar, por exemplo, um texto, Olá, classe.
Um outro método que é importante, a gente adiciona, a gente chamar, é o método pek, que vai fazer de fato o empacotamento de todos os componentes dentro daquela janela que a gente criou.
E depois disso, a gente pode chamar o método Menlup como a gente fez no exemplo anterior.
Então, vamos executar, reparem que aqui a gente tem agora o a janelinha, que foi criado, essa janela agora contém o texto que a gente especificou.
Um outro exemplo que eu quero mostrar para vocês é adicionar uma imagem agora nesta janela.
Então, para isso a gente vai utilizar uma outra classe, que é o foto imãs, e aí a partir dela a gente consegue inserir uma imagem naquela janela também.
Então, primeiramente, a gente tem que saber qual é a imagem que a gente vai querer adicionar na nossa janela.
Então, eu já coloquei aqui um arquivo chamado computer.
gif, essa extensão ela é importante, tá pessoal, porque essa classe que a gente vai utilizar é a sua aceita.
Nativamente, imagens com o formato gif, se você quiser utilizar uma imagem, outro formato com JPEG, PNG, entre outros, você vai precisar trabalhar com uma outra classe.
Então, eu baixei essa imagem da internet, e coloquei ela na mesma pasta do meu projeto, na mesma pasta onde está um meu programa com extensão.
px, tá certo? Então, o que a gente vai fazer no nosso programa? A gente vai importar agora a classe, foto e imagem.
Também é feita a instanciação da janela principal root, depois a gente vai criar um objeto foto, que é desta classe, foto e imagem.
Ali dentro, a gente passa com o parâmetro, o arquivo que contém aquela imagem, então computer.
gif.
Aqui, pessoal, é interessante a gente chamar o método sub-sempel, porque a imagem, nesse caso, ela é bem grande, e o método sub-sempel realiza uma amostragem, ela diminui de tamanho essa imagem para poder caber na nossa janela, tá? Então, a gente passa esse valor 5, então, esse 5 tem de dizer que a cada 5 pixels, ele vai pegar um pixel da imagem original e vai construir uma imagem de menor tamanho, de menor resolução para a gente.
Uma outra coisa também que eu vou fazer é criar o objeto relou como a gente estava fazendo aqui, com o attribute master recebendo a janela.
Agora, aqui, eu vou colocar a imagem, então, e a gente passa aquele objeto que a gente acabou de criar.
Uma outra coisa também que é importante fazer é especificar a largura da nossa imagem, que eu vou colocar aqui 300 e a altura, eu vou colocar 180.
Esses valores, pessoal, eu já encontrei eles, então vocês utilizaram uma outra imagem, vai ser importante vocês testarem com outros valores para que a imagem não fique distorcida.
E por fim, a gente chama o método PEC para poder empacotar todo o conteúdo na janela, e aí a gente chama o método MainLoop para mostrar a janela na matela.
Então executando, a gente tem aqui agora a janela criada com a imagem ali dentro, tá legal? Bom, isso eu tive mais do que um componente nesta janela.
Então, a importante a gente entender como que os componentes devem ser colocados nesta janela, como que esses componentes vão ser organizados naquela janela de modo que fique uma coisa agradável de ser visualizada.
Então, esta organização é feita ou é gerenciada por um módulo da biblioteca, que é chamado de GeometryManager.
E aí, esse gerenciamento é feita a partir de certas diretivas que são definidas pelo próprio programador.
Para a gente poder especificar essas diretivas ao GeometryManager, a gente precisa passar isso para informar isso ao nosso programa.
E uma das maneiras de se fazer isso é por meio do próprio método PEC que a gente já utilizou anteriormente.
Então, vamos ver um exemplo agora onde a gente vai adicionar tanto texto como também a imagem que a gente acabou de criar.
E então, o resultado final seria isso, a imagem e o texto, e vamos ver então como a gente faz para organizar esses dois componentes na janela.
Então, a primeira coisa que eu vou fazer é importar além do leibio e do foto imagina, dasquelas duas classes.
Eu vou importar também mais duas diretivas que eu vou chamar de top e de bottom, que na verdade são diretivas para a gente saber em que posição aquele componente vai ser inserido na tela.
A gente vai criar um objeto root, da mesma maneira, a gente vai criar também o objeto foto da classe foto imagina, do mesmo maneira que está aqui.
Agora, eu vou colocar um outro, vou criar uma outra objeto chamado de imagina, que vai acontecer este que vai acontecer o texto.
Então, esse texto aqui, eu vou colocar aqui no objeto, o objeto imagina.
Neste leibio, a gente também vai passar o root e o imagino vai receber o objeto foto.
E aqui, nesse caso, a gente não vai precisar especificar a largura e a altura da janela.
Uma vez que a gente criou este objeto imagino, a gente pode especificar onde essa imagem deve ser inserida na janela.
E aí, a gente vai utilizar aquela direitiva top que a gente especificou ali em cima, no import.
Está legal? Então, a gente vai utilizar a janela que vai ser inserida na janela.
E aí, a gente vai utilizar aquela direitiva top que a gente especificou ali em cima, no import.
Está legal? Depois disso, eu vou criar um texto.
Então, esse texto vai ser da classe label.
Passando também o master igual ao root, que quer dizer o texto, ele vai ser inserido dentro da janela principal.
Eu vou também colocar uma fonte para esse texto.
Então, eu vou especificar dessa maneira.
Então, aqui eu posso colocar o nome da fonte como o courier.
E o tamanho dessa fonte com o tamanho da fonte 18.
E mais o texto aqui que a gente pode colocar com o lá alunos da Universo.
E a mesma maneira que a gente fez com a imagem, a gente pode fazer com esse texto, quer dizer, chamar o método PEC, passando aqui em qual posição esse texto vai ser inserido.
Então, a gente quer colocar na posição BOTOM, BOTOM quer dizer na parte de baixo da janela.
Então, a imagem vai ser inserida no top e o texto vai ser inserido na parte de baixo da janela principal.
E, por fim, a gente chamou método MENLUT.
Está legal? Então, está aqui, o execução, a imagem ele colocou em cima e o texto ele colocou em baixo.
Está joia? A gente tem outras opções para o método PEC.
A gente usa essa opção SIDE, que a gente especifica a em que o lugar da janela coloca como top, BOTOM, LAST, RIDE.
Existem outras opções também, como o FIL, e o EXPEND.
Estou direto que vocês veiam uma estudada, eles também para entender.
E uma outra opção também para fornecer essas direitivas ao Jmm é por meio do método GRID.
Então, esse GRID vai transformar a nossa janela como se fosse numa matriz de linhas e colunas.
E, a partir dessa matriz, a gente pode especificar em qual célula dessa matriz a gente vai inserir aquele componente.
Então, isso é útil quando você tem vários componentes, esses componentes devem ser organizados nesta janela, de modo manter uma linearidade de linhas ou de colunas.
Aqui, eu tenho um exemplo que vou deixar como exercício para vocês testarem, que é criar um tecladinho desse, com a numeração de 1 a 9, a mais 0, mais asterisco e o CRT-1.
Aqui está o código correspondente a este programa.
Reparem que eu criei uma matriz de labels onde eu tenho os caracteres que devem ser colocados nesta janela.
E eu tenho dois laços, um que vai percorrer as linhas e outro que vai percorrer as colunas.
E eu utilizo esses dois ínsis R e C, aqui na chamada Almetro do Grid, que vai especificar exatamente em qual linha, em qual coluna, um determinado componente, que, no caso, é um desses rótulos, devem ser inseridos.
Então, eu sugiro que vocês tentem fazer este rodar, este exemplo, também, no computador de vocês.
Muito bem, gente.
Então, essa foi a nossa videoaula, a primeira videoaula sobre interfaces gráficas em Python.
Espero que vocês possam ter entendido essa parte mais inicial de interfaces gráficas.
E na aula que vem, a gente continua com esse assunto com coisas um pouco mais avançadas.
Obrigado pela atenção de vocês e a gente se vê lá.