Computação II
MAB 225 - EE2/ET2/ER2
Interface Gráfica - Tkinter
Brunno Goldstein
[email protected]
www.lam.ufrj.br/~bfgoldstein
Ementa
● Programação Orientada a Objetos
● Tratamento de Exceções
● Módulos
● Manipulação de Arquivos
● Interface Gráfica (Tkinter)
● Biblioteca Numérica (Numpy)
2
Ementa
● Programação Orientada a Objetos
● Tratamento de Exceções
● Módulos
● Manipulação de Arquivos
● Interface Gráfica (Tkinter)
● Biblioteca Numérica (Numpy)
3
Conceitos Básicos
GUI - Graphical User Interface
● Interface gráfica;
● Programa que facilita a iteração do usuário com outros
programas;
● Fica em 'loop' infinito:
○ Até o usuário clicar em algum widget da interface;
4
Exemplo de GUI
Exemplo de GUI
5
Tkinter
● Ferramenta em Python para desenvolvimento de GUIs;
● Termos que devemos conhecer:
○ Widget;
○ Event;
○ Event handler;
○ Binding;
○ Container;
○ Pack.
6
Widget
● Qualquer componente da nossa interface gráfica;
● No nosso exemplo nós temos 4 widgets:
○ Janela principal;
○ Campo do texto;
○ Botão "Clique!";
○ Botão "Resetar!".
7
Widget
● Qualquer componente da nossa interface gráfica;
● No nosso exemplo nós temos 4 widgets:
○ Janela principal;
○ Campo do texto;
○ Botão "Clique!";
○ Botão "Resetar!".
8
Widget
● Qualquer componente da nossa interface gráfica;
● No nosso exemplo nós temos 4 widgets:
○ Janela principal;
○ Campo do texto;
○ Botão "Clique!";
○ Botão "Resetar!".
9
Widget
● Qualquer componente da nossa interface gráfica;
● No nosso exemplo nós temos 4 widgets:
○ Janela principal;
○ Campo do texto;
○ Botão "Clique!";
○ Botão "Resetar!".
10
Event
● Interação do usuário com a interface;
● Eventos podem vir de:
○ Clique dos botões do mouse;
○ Pressionar uma ou várias tecla do teclado;
○ Clique em alguma área específica da interface:
■ Ex.: Clicar no botão "Clique!" ou "Resetar";
11
Event Handler
● Função/Método que são executados ao ocorrer um evento;
● No nosso exemplo:
○ Apertar o botão "Clique!" chama função que incrementa o contador;
○ Apertar o botão "Resetar!" chama função que zera o contador;
12
Binding
● Evento precisa saber qual seu event handling;
● Com isso, o evento sabe "o que fazer" quando ocorrer;
● Bind = Ligar/Associar um event a um event handling;
13
Container
● Elementos que dividem nossa interface ;
● Utilizado para dispor os widgets da melhor forma;
● Vamos utilizar o container da classe Frame;
14
Container
Texto
Frame 2
Botão 1
Frame 1
Top-level Top-level
(Top-level)
Frame 3 Botão 23
Frame
Clicou 0 vezes.
Frame 1 Frame 1
(Top-level) Frame
Clique! 3
(Top-level)
Resetar!
15
Pack
● Método dos widgets;
● Indica em que posição o widget irá aparecer no container:
○ Sem parâmetro = TOP
○ Outras opções são LEFT, RIGHT, BOTTOM
Texto
Frame 2
Botão 1
Frame 1
Top-level Top-level
(Top-level)
Frame 3 Frame
Botão 23
16
Como programar?
● Primeiros passos:
○ Importar os módulos Tkinter
○ Instanciar um objeto Tk;
○ Executar método mainloop do objeto.
from Tkinter import *
janela = Tk()
janela.mainloop()
17
Como programar?
● Frames e widgets são representados por classes:
○ Janela/Frame - > Frame
○ Botão - > Button
○ Texto - > Label;
○ Lista -> List;
○ etc
● Parâmetros:
○ Objeto referente ao seu container (frame) pai;
○ Parâmetros específicos do widget:
■ Ex.: Button - > text, color, etc
■ E.: Label -> text, color, height, weight
18
Como programar?
● Criar a interface (basicamente):
○ Instanciar classes (widgets);
○ Setar seus atributos;
○ Criar métodos para eventos (ações dos widgets);
○ Usar o bind e pack;
19
Como programar?
● Vamos aos códigos de exemplo...
20
