Aula Interface gráfica com Tkinter - Python Computação II - Engenharia Mecânica UFRJ

Prévia do material em texto

Interface Gráfica com Tkinter
 
Tkinter
● Para trabalhar com Tkinter, precisamos importar todo o 
conteúdo deste módulo:
– from Tkinter import *
● A classe Tk também é importada, e contém todos os 
componentes (Widgets) necessários para montar a 
interface gráfica (GUI).
● As interfaces gráficas serão estruturadas em forma de 
classes, e uma instância da classe Tk (que chamaremos 
de raiz), sempre será passada como argumento do 
método construtor.
 
Exemplo
from Tkinter import *
class Janela:
 def __init__(self,instancia_de_Tk):
 pass
● raiz = Tk()
Janela(raiz)
raiz.mainloop()
A GUI fica aberta esperando por acontecimento
de eventos. A janela fica aberta até que ocorra 
algum evento que a “destrua”, como clicar no X 
ou num botão “fechar”.
 
Exemplo
 
Vocabulário
● Widgets – componente qualque da interface gráfica: 
botão, menu, caixa de texto,...
● Contêineres – elementos da GUI aonde são ajeitados os 
widgets.
– O mais comum é o frame
 
Estrutura Hierárquica
mestre
 
Gerenciadores de Geometria
● Indicam em que posição um contêiner ou widget 
aparecerá dentro do seu mestre.
● Três opções: Grid, Pack e Place
 
Exemplo
from Tkinter import *
class Janela: 
 def __init__(self,toplevel):
 self.fr1 = Frame(toplevel)
 self.fr1.pack()
 self.botao = Button(self.fr1, text='Oi!', background='green')
 self.botao.pack()
raiz=Tk()
Janela(raiz)
raiz.mainloop()
toplevel é o mestre de Frame
O pack() torna os componentes visíveis
texto Cor de fundo ou bg
 
Exemplo
 
Sintaxe
● A sintaxe para criar um widget qualquer é:
nome_do_widget(mestre,opções de configuração)
● Os widgets guardam as suas opções de configuração 
em forma de dicionários. Poderíamos ter configurado a 
opção do botão do exemplo anterior como:
self.botao['bg'] = 'green'
self.botao['text'] = 'oi'
 
Tamanho da Janela
Tamanho padrão
Tamanho do frame
Tamanho necessário pra 
Comportar o botão
 
Outras configurações do Button
● height: altura do botão em numero de linhas de texto
● width: largura do botão em quantidade de letras
● font: fonte do texto. Representada pela tupla:
– (“tipo da fonte”, “tamanho”, “negrito”, “itálico”,...)
– Exemplo: font = ('Arial','15','italic','bold')
● fg ou foreground: cor do texto
 
Exercício
● Tente criar a GUI abaixo:
Altura = 3
Largura = 12
 
Resposta
from Tkinter import *
class Janela:
 def __init__(self,toplevel):
 self.fr1 = Frame(toplevel)
 self.fr1.pack()
 self.botao1 = Button(self.fr1,text='Oi!',bg='green',height=3)
 self.botao1['font']=('Verdana','12','italic','bold')
 self.botao1.pack()
 self.botao2 = Button(self.fr1,bg='red',text='Tchau!',width=12,fg='yellow',
 font=('Times','16'))
 self.botao2.pack()
raiz=Tk()
Janela(raiz)
raiz.mainloop()
 
Posição dos Widgets
● O método pack possui um argumento side capaz de 
assumir quatro valores: LEFT(esquerda), 
RIGHT(direita), TOP(em cima), BOTTOM(embaixo), que 
determinam em que lugar o widget deve se posicionar.
 
Posição dos Widgets
● O valor padrão é TOP.
 
Exemplo
● Vamos criar a GUI abaixo:
 
from Tkinter import *
class Janela:
 def __init__(self,instancia_Tk):
 self.container1=Frame(instancia_Tk)
 self.container2=Frame(instancia_Tk)
 self.container1.pack()
 self.container2.pack()
 Button(self.container1,text='B1').pack()
 Button(self.container1,text='B2').pack(side=LEFT)
 Button(self.container1,text='B3').pack(side=LEFT)
 self.b4=Button(self.container2,text='B4')
 self.b5=Button(self.container2,text='B5')
 self.b6=Button(self.container2,text='B6')
 self.b5.pack(side=LEFT)
 self.b4.pack(side=LEFT)
 self.b6.pack(side=LEFT)
 
Exercício
● Tente criar:
 
Widget Label e Entry
● O Label serve para textos na tela.
● O Label possui todas as opções de configuração 
apresentadas para o Button.
● O Entry é um meio de recolher entradas de dados do 
usuário.
● O Entry aceita todas as opções de configuração do 
Label e Button, menos o height, porque a altura dos 
campos de dados é sempre de uma linha)
 
Exemplo
● Como fazer a tela abaixo?
 
Espaçamento
● padx e pady são os espaços extras que damos entre as 
bordas de widgets como Button e Label e o texto 
contido neles.
 
Espaçamento
● Se aplicados a frames, estes parâmetros especificam o 
espaço que deve existir em torno ( do lado de fora) do 
frame. 
● Não especificamos o espaçamento do frame como um 
atributo do frame, mas sim como uma opção que 
fornecemos ao gerenciador de geometria, nesse caso o 
pack.
self.fr1.pack(pady=3,padx=5)
 
Exemplo
 
Espaçamento
● Por fim podemos usar os parâmetros ipadx e ipady para 
adicionar espaçamento interno nos frames. Estes são os 
espaçamentos em torno de cada um dos widgets do frame.
Ipadx = 10 usado para dar espaço
Entre os botões no último frame.
 
Exercício
 
Eventos
● Event handlers (tratadores de eventos): métodos 
programados para serem executados quando um 
evento específico acontece.
– Ex: Ao clicar no botão “Calcular”, o método que 
calcula a soma é o event handler correspondente a 
clicar neste botão.
● Para que o método seja executado no clique do botão, 
é preciso fazer um binding (ligação) do botão com o 
método.
 
Command Binding
● Para associar o clique do mouse sobre um widget a um 
event handler, usamos o comando command.
– widget(mestre,...,command = self.event_handler)
 
Voltando ao exemplo da Soma
self.calc = Button(self.fr5, text="Calcular",font = 
('Arial',10,'bold'),fg = 'red',width=10,pady=5, 
command = self.calcularSoma)
def calcularSoma(self):
print "o botão foi clicado para calcular a soma"
 
Entry
● Os dados informados pelo usuário neste campo são 
captados em forma de string, assim como o raw_input. 
● Através do método get, podemos trabalhar com os 
dados de entrada dentro do código.
 
Voltando ao exemplo da Soma
def calcularSoma(self):
 num1 = float(self.dado1.get())
 num2 = float(self.dado2.get())
 print num1+num2
● Como fazemos para mostrar a resposta da soma? E 
para desabilitar o Entry de resposta de forma que o 
campo não possa ser digitado?
 
Entry de Resposta
● Para desabilitar: 
self.resposta = Entry(self.fr4,width = 10, font = 
('Arial',10), state =DISABLED)
● Se quiser habilitar: state = NORMAL
 
Entry de Resposta
● Para mostrar informação em um Entry é preciso 
vinculá-los a variáveis de controle.
self.resposta = Entry(self.fr4,width = 10, font = 
('Arial',10),state =DISABLED,textvar=tv) 
● Variáveis de controle possuem dois métodos:
– .get(): retorna o valor corrente de uma variável
– .set(value): altera o valor corrente de uma variável.
 
Voltando ao exemplo da Soma
def calcularSoma(self):
 num1 = float(self.dado1.get())
 num2 = float(self.dado2.get())
 tv.set(num1+num2)
 
Variáveis de Controle
● Variáveis de controle devem ser definidas globalmente, 
e deve-se indicar qual o tipo desejado para esta 
variável:
– DoubleVar(): guarda um float, e o valor default é 0.0
– IntVar(): guarda um inteiro, e o valor default é 0
– StringVar(): guarda uma String, e o valor default é ' '
raiz = Tk()
tv = StringVar(raiz) 
Janela(raiz)
raiz.mainloop()
Experimento DoubleVar ou IntVar para 
Ver o que acontece
 
Foco
● Também podemos dar focoa um widget usando a 
opção focus_force().
 
Exercício
● Faça uma tela para verificação de senhas. Caso a senha 
digitada esteja correta, deve-se mostrar “ACESSO 
PERMITIDO”, caso contrário, “ACESSO NEGADO”. Enquanto 
não clicar no Conferir, escreva "AGUARDANDO...". Assuma 
que a senha correta é o que for digitado no campo Nome.
OBS: Para aparecer * no lugar do que for
Digitado, use a opção show = '*' no Entry 
da senha.
 
Binding
● Existem outros eventos além do clique completo de um 
botão, tal como apertar só o botão direito ou esquerdo, 
soltar o botão, passar o mouse, apertar Enter, apertar 
qualquer outra tecla...
● Para vincular um event handler a estes eventos, 
usamos o comando bind:
– widget.bind(evento,event handler)
 
Eventos
● O evento como o clique do mouse ou o pressionamento 
da tecla ENTER é passado como argumento do método 
bind como uma String.
– Clique com botão esquerdo do mouse: "<Button-1>"
– Tecla ENTER: "<Return>"
 
Exemplo
● Suponha a seguinte tela:
● Suponha que um método muda_cor deve ser executado 
quando clicar com o botão esquerdo do mouse no botão 
acima:
self.botao.bind("<Button-1>",self.muda_cor)
Obs: Se fosse o botão direito, 
Usaria <Button-3>
 
Eventos de mouse
● O primeiro argumento do método bind também pode ser 
uma tupla contendo os eventos na ordem em que eles 
devem ocorrer para que o event handler seja desencadeado.
● Se tivéssemos:
self.botao.bind(("<Button-1>","<Button-3>),self.muda_cor)
somente um clique com o botão esquerdo seguido de um 
clique com o botão direito acionaria o método.
● Técnica interessante se quiser associar uma combinação de 
teclas a um evento.
 
Outros eventos de mouse
● "<ButtonRelease-X>": Soltar o botão X do mouse, onde X 
pode ser 1(esquerdo),2(meio) ou 3(direito).
● "<Motion>": evento de mover o ponteiro do mouse sobre o 
widget.
● "<Leave>": evento de retirar o ponteiro do mouse do 
widget.
 
Eventos de Teclado
 
Eventos de Teclado
● "<KeyPress-X>": representa o pressionamento de uma 
tecla X qualquer.
● "<KeyRelease-X>": representa o soltar de uma tecla X 
qualquer.
 
Modificadores de Eventos
● Podemos usar os modificadores Double e Triple para 
representar duas ou três repetições de um evento em 
rápida sucessão.
● "<Double-Button-1>": duplo clique com o botão 
esquerdo do mouse.
● "<Triple-KeyPress-X>": triplo pressionamento 
consecutivo da tecla X.
 
Exercício
● Clique botões:
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46