computação ii - cos.ufrj.brbfgoldstein/python/20162/... · treeview - tabela/lista com colunas...
TRANSCRIPT
![Page 1: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/1.jpg)
Computação II
MAB 225 - EPT/EP1
Interface Gráfica - TkinterBrunno Goldstein
www.cos.ufrj.br/~bfgoldstein
![Page 2: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/2.jpg)
● Programação Orientada a Objetos
● Tratamento de Exceções
● Módulos
● Manipulação de Arquivos
● Interface Gráfica (Tkinter)
● Biblioteca Numérica (Numpy)
Ementa
2
![Page 3: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/3.jpg)
● Programação Orientada a Objetos
● Tratamento de Exceções
● Módulos
● Manipulação de Arquivos
● Interface Gráfica (Tkinter)
● Biblioteca Numérica (Numpy)
Ementa
3
![Page 4: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/4.jpg)
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
![Page 5: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/5.jpg)
Exemplo de GUI
Exemplo de GUI
5
![Page 6: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/6.jpg)
Tkinter
6
● Ferramenta em Python para desenvolvimento de GUIs;
● Termos que devemos conhecer:
○ Widget;
○ Event;
○ Event handler;
○ Binding;
○ Container;
○ Pack.
![Page 7: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/7.jpg)
Widget
7
● 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!".
![Page 8: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/8.jpg)
Widget
8
● 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!".
![Page 9: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/9.jpg)
Widget
9
● 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!".
![Page 10: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/10.jpg)
Widget
10
● 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!".
![Page 11: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/11.jpg)
Event
11
● 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";
![Page 12: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/12.jpg)
Event Handler
12
● 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;
![Page 13: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/13.jpg)
Binding
13
● 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;
![Page 14: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/14.jpg)
Container
14
● Elementos que dividem nossa interface ;
● Utilizado para dispor os widgets da melhor forma;
● Vamos utilizar o container da classe Frame;
![Page 15: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/15.jpg)
Container
15
Frame 1(Top-level) Top-level
Frame 2
Frame 3
Top-level
Frame 3
Botão 1
Botão 2
Texto
Frame 1(Top-level)
Frame 1(Top-level)Frame 3
Clicou 0 vezes.
Clique!
Resetar!
![Page 16: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/16.jpg)
Pack
16
Frame 1(Top-level) Top-level
Frame 2
Frame 3
Top-level
Frame 3
Botão 1
Botão 2
Texto
● 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
![Page 17: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/17.jpg)
Como programar?
17
● Primeiros passos:○ Importar os módulos Tkinter
○ Instanciar um objeto Tk;
○ Executar método mainloop do objeto.
from Tkinter import *
janela = Tk()
janela.mainloop()
![Page 18: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/18.jpg)
Como programar?
18
● 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
![Page 19: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/19.jpg)
Como programar?
19
● Criar a interface (basicamente):
○ Instanciar classes (widgets);
○ Setar seus atributos;
○ Criar métodos para eventos (ações dos widgets);
○ Usar o bind e pack;
![Page 20: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/20.jpg)
Como programar?
20
● Vamos aos códigos de exemplo...
![Page 21: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/21.jpg)
Widget - Parte 2
➔ Vamos ver novos widgets para compor nosso trabalho. São eles:
◆ Entry - Para input de dados;
◆ Listbox - Listar itens (tarefas ou projetos);
◆ ScrollBar - Adicionar opção de scroll na nossa Listbox;
◆ Treeview - Tabela/Lista com colunas
◆ tkMessageBox - Janelas/Pop-ups com avisos;
◆ Exceção no Tkinter - Verificar erros e tratá-los no Tkinter.21
![Page 22: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/22.jpg)
Widget - Entry
● Utilizado para fornecer ao usuário a possibilidade de
inserir dados;
● Campo que captura a String digitada.
22
Campo Entry
![Page 23: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/23.jpg)
Widget - Entry
#Cria o widget Entry no frame1 | bd = largura da linha do box
e1 = Entry(self.frame1, bd =5)
e1.pack(side = TOP)
#Captura a String dentro do campo
tarefa = self.e1.get()
23
![Page 24: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/24.jpg)
Widget - Listbox e Scrollbar
24
● Utilizado para criar uma lista de dados;
● Exibe de forma organizada uma lista de itens;
● Possibilita selecionar item para realizar alguma tarefa;
● Scrollbar utilizado para visualizar uma lista grande;
● Widgets trabalham junto para formar apenas um.
![Page 25: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/25.jpg)
Widget - Listbox
#Cria o scrollbar no frame2
scrollbar = Scrollbar(frame2)
scrollbar.pack(side = RIGHT, fill = Y)
#Cria o widget Listbox no frame2 setando o scrollbar como comando
# de scroll vertical
lb1 = Listbox(frame2, yscrollcommand = scrollbar.set)
lb1.pack(fill=BOTH, expand=1)
#Configura o scrollbar como scroll vertical da Listbox
scrollbar.config(command = lb1.yview)
25
![Page 26: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/26.jpg)
Widget - Treeview
● Formato mais elaborado de lista;
● Funciona como uma tabela;
● Possibilita adicionar colunas;
● Possui "diretórios" que armazenam entradas;
● Necessário importar o pacote ttk ( import ttk );
26
![Page 27: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/27.jpg)
Widget - Treeviewtree = ttk.Treeview(toplevel)
tree["columns"] = ("one","two")
tree.column("one", width = 100 )
tree.column("two", width = 100)
tree.heading("one", text = "Data de Criação")
tree.heading("two", text = "Data Limite")
tree.insert("" , 0, text = "Tarefa 1", values = ("01/04/2016","05/10/2018"))
id2 = self.tree.insert("", 1, "dir2", text = "Projeto 2")
tree.insert(id2, "end", "dir 2", text = "Tarefa 1", values = ("20/05/2016","10/09/2018"))
tree.insert("", 3, "dir3", text = "Projeto 3")
tree.insert("dir3", 3, text = "Tarefa 1",values = ("25/01/2015"," 23/10/2016"))
tree.pack()27
![Page 28: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/28.jpg)
Widget - tkMessageBox
● Widget para exibir mensagens;
● Tkinter criar um pop-up exibindo a mensagem para o usuário;
● O padrão é um pop-up com:
○ Título da janela;
○ Mensagem;
○ Botão de confirmação.
28
![Page 29: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/29.jpg)
Widget - tkMessageBoxdef showMsgBox(self, tarefa):
tkMessageBox.showinfo("Sucesso!", "Você adicionou com sucesso a tarefa: " +
tarefa)
def showErrorBox(self, err):
tkMessageBox.showerror("Erro!", "Você adicionou uma tarefa que já existe! \n Erro:
" + err.message)
29
![Page 30: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/30.jpg)
Widget - Exceção
● Utilizar os conceitos ensinados em aula;
● Utilizar cláusulas try/catch;
● Tratar possíveis erros do usuário;
● Erros de interface:
○ Capturar tkinter.TclError
30
![Page 31: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/31.jpg)
Widget - Exceção
def addList(self, event):
try:
tarefa = self.e1.get()
self.lb1.insert(END, tarefa)
self.addTree()
except tkinter.TclError as err:
self.lb1.delete(END)
self.showErrorBox(err)
else:
self.showMsgBox(tarefa)
31
![Page 32: Computação II - cos.ufrj.brbfgoldstein/python/20162/... · Treeview - Tabela/Lista com colunas ... Verificar erros e tratá-los no Tkinter. 21. Widget - Entry Utilizado para fornecer](https://reader033.vdocuments.net/reader033/viewer/2022060821/6099d0c99af3ae28116dc536/html5/thumbnails/32.jpg)
Juntando tudo...
32