mab224 – programação de computadores iifranklin/xbt246/04-introducao-tkinter.pdf ·...

51
MAB224 – Programação de Computadores II Prof. Franklin Marquezino Universidade Federal do Rio de Janeiro

Upload: hanhi

Post on 30-Sep-2018

216 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

MAB224 – Programaçãode Computadores II

Prof. Franklin MarquezinoUniversidade Federal do Rio de Janeiro

Page 2: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Parte V

Introdução ao Tkinter

Page 3: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Bibliografia recomendada

● Steve Ferg, “Pensando em Tkinter”PDF disponível gratuitamente na web

● Consultem sempre, na página do nosso curso, versões atualizadas destes slides

● Consultem também os slides do curso do Prof. Claudio Esperança. Há um link na página do nosso curso.

Page 4: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Interfaces gráficas

● Também chamadas de Graphical User Interfaces (GUI)

● Usadas em aplicações modernas que requerem uma interação constante com o usuário

– Maior usabilidade e naturalidade do que interfaces textuais

Page 5: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Interfaces gráficas● Aplicação apresenta uma ou mais janelas com

elementos gráficos que servem para comandar ações, especificar parâmetros, desenhar e exibir gráficos, etc.

● Algumas bibliotecas (toolkits) para construção de interfaces:

– Qt

– Gtk

– wxWindows

– Tk

Page 6: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Interfaces gráficas

● Python permite usar várias bibliotecas de construção de GUI. Exemplos:

– PyQt → usa Qt

– PyGtk → usa Gtk

– wxPython → usa wxWindows

– Tkinter → usa Tk

● Multiplataforma, ou seja, funciona em Windows, Linux, Mac, etc.

Page 7: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando Tkinter

● Vamos começar por um programa mínimo:

from Tkinter import *

root = Tk()

root.mainloop()

● O que aparece na tela?

Page 8: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando Tkinter

● Vamos definir tamanho e título para a janela:

root.geometry("400x200+100+100")

root.title("Aula de Tkinter")● Objetos da classe Tk possuem muitos

outros métodos interessantes.

Page 9: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Elementos de interface● Elementos de interface (widgets)

correspondem a objetos de diversas classes. Por exemplo:

– Label

– Button

– Entry

– Menu

– Spinbox

– etc.

Page 10: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando rótulos

● Por exemplo:

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.pack()

Page 11: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Outras opções de Labels: definindo a fonte

● Por exemplo:

mlabel1 = Label(root,text="Um rótulo qualquer",

font = (“Times”, 20, “italic”) )

mlabel1.pack()

Page 12: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Outras opções de Labels: definindo cor

● Por exemplo:

mlabel1 = Label(root,text="Um rótulo qualquer",

fg=”blue”, bg=”white” )

mlabel1.pack()

Page 13: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Outras opções de Labels

● Também funciona:

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.configure(fg=”blue”)

mlabel1.configure(bg=”white”)

mlabel1.configure(font = (“Times”, 20, “italic”) )

mlabel1.pack()

Page 14: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Gerentes de geometria

● Posição e tamanho dos elementos controlados por gerentes de geometria

– pack

– grid

– place

● Atividade: vamos criar mais labels e testar todos os gerentes de geometria

Page 15: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando pack

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.pack()

mlabel2 = Label(root,text="Um outro rótulo")

mlabel2.pack()

mlabel2 = Label(root,text="Mais um rótulo")

mlabel2.pack()

Page 16: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Opções do pack

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.pack(side=LEFT)

mlabel2 = Label(root,text="Um outro rótulo")

mlabel2.pack(side=LEFT)

mlabel2 = Label(root,text="Mais um rótulo")

mlabel2.pack(side=LEFT)

Page 17: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando grid

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.grid(row=0, column=0)

mlabel2 = Label(root,text="Um outro rótulo")

mlabel2.grid(row=1, column=0)

mlabel2 = Label(root,text="Mais um rótulo")

mlabel2.grid(row=1, column=1)

Page 18: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando place

mlabel1 = Label(root,text="Um rótulo qualquer")

mlabel1.place(x=50, y=20)

mlabel2 = Label(root,text="Um outro rótulo")

mlabel2.place(x=100, y=60)

mlabel2 = Label(root,text="Mais um rótulo")

mlabel2.place(x=150, y=100)

Page 19: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando botões

● Experimentem:

mbutton1 = Button(root,text="OK")

mbutton1.pack()

● O que acontece? O que o botão faz?

Page 20: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Programação com eventos

● Diferente da programação convencional● O programa não está sob controle 100%

do tempo– Programa entrega controle ao sistema

– Em Tk: método (função) mainloop

Page 21: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Programação com eventos

● Interação gera eventos– Acionamento de um menu ou de um

botão

– Mouse arrastado sobre uma janela

– Uma caixa de texto teve seu valor alterado

● O tratamento de um evento é feito por uma rotina callback

Page 22: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

A opção command● Voltando ao exemplo do botão: queremos executar uma

função (rotina, método) quando clicarmos!

● Experimentem:

def ok():

mlabel2 = Label(root, text="Você clicou em OK!")

mlabel2.pack()

mbutton1 = Button(root,text="OK", command=ok)

mbutton1.pack()

Page 23: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Exercício

● A partir do exemplo anterior, crie um botão para sair do programa

● Dica: use o método destroy() da classe Tk– Exemplo: root.destroy() fecha a janela

Page 24: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Quatro questões básicasna programação de GUIs

● Como a interface vai se parecer?● O que a interface vai fazer?● Como associar o parecer ao fazer?● Como escrever um código que espera a

interação do usuário?

Page 25: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Jargão básico de programação de GUIs

● Widgets (elementos de interface): servem para especificarmos como a interface vai se parecer

● Event handler, callback: o que a interface vai fazer

● Binding: associação de um event handler a uma widget. Ou seja, associar o parecer ao fazer.

● Event loop: espera interação do usuário

Page 26: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Contêineres

● Além das widgets visíveis, o Tkinter também oferece alguns contêineres, como Frame e Canvas

● Frame é um painel invisível e elástico, onde você pode colocar outras widgets

● Canvas é uma tela onde você pode desenhar

Page 27: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando o contêiner Canvas

● O Canvas precisa ser associado a um mestre

● Exemplo:

root = Tk()canvas = Canvas(root, height=400, width=400)canvas.pack()

● Até aqui, note que não aparece nada.

Page 28: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando o contêiner Canvas

● Você pode desenhar em cima do Canvas

● Exemplo:

root = Tk()canvas = Canvas(root, height=400, width=400)

can.create_line(305,200,400,200)can.create_oval(100,100,300,300, fill='yellow')

canvas.pack()

Page 29: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando o contêiner Frame

● O Frame precisa ser associado a um mestre

● As widgets são colocadas no Frame● Exemplo:

root = Tk()frame = Frame(root)frame.pack()

Page 30: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Como fica isso no programa?

● Exemplo:

from Tkinter import *

root = Tk()

frame1 = Frame(root)frame1.pack()

root.mainloop()

Page 31: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

E se tiver Label, Button, etc?● Exemplo:

from Tkinter import *

def ok(): print 'OK'

root = Tk()frame1 = Frame(root)frame1.pack()button_ok = Button(frame1, text='OK', command=ok)button_ok.pack()root.mainloop()

Page 32: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

O programa está crescendo...Qual a melhor forma de lidar com isso?● Nós já aprendemos: CLASSES!

● Por exemplo:from Tkinter import *

class MyApp: def __init__(self, master): self.frame1 = Frame( master ) self.frame1.pack() self.button_ok = Button(self.frame1, text='OK') self.button_ok.pack()

root = Tk()app = MyApp(root)root.mainloop()

Page 33: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Agora só falta definir o que o botão vai fazer!● Isso é fácil:

from Tkinter import *

class MyApp: def __init__(self, master): self.frame1 = Frame( master ) self.frame1.pack() self.button_ok = Button(self.frame1, text='OK', command=self.ok) self.button_ok.pack()

def ok(self): print 'OK, botao foi pressionado!'

root = Tk()app = MyApp(root)root.mainloop()

Page 34: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando caixas de entrada

● Experimentem:

entry1 = Entry(root)

entry1.pack()

● O que acontece? Não seria legal poder usar o valor digitado para alguma coisa?

Page 35: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Usando caixas de entrada

● Experimentem:

def ok():

val = entry1.get()

mlabel2 = Label(root, text="Li o valor %s na caixa" % val)

mlabel2.pack()Lembram desse tipo de

comando? Trata-se de formatação de strings! Nesse caso, %s é

substituído pelo conteúdo de val. Há outras formas de formatar

strings, consulte o site do curso.

O principal desse exemplo é o método get da classe Entry!

Page 36: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

● Vamos fazer um programa como esse abaixo

– Eu ajudo, mas quero participação!

Exercício

Page 37: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Caixas de diálogo● No caso de uma exceção, como poderíamos fazer

aparecer uma mensagem de erro?

● Inclua:

from tkMessageBox import *

● Experimente:

except ZeroDivisionError:

mlabel_resdiv.configure(text="erro")

showerror("Erro", "Divisão por zero!")

return

Page 38: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Caixas de diálogo

● Além de showerror, temos:– showinfo()

– showwarning()

● Experimentem!

Page 39: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Caixas de diálogo

● Quando o usuário clicar em “Sair”, vamos perguntar se ele tem certeza

def sair():

certeza = askyesno("Sair da calculadora",

"Tem certeza que deseja sair?")

if certeza:

mGui.destroy()

Page 40: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Seleção de cor● No Tkinter também temos caixas de

diálogo específicas para diversas atividades avançadas. Por exemplo:

from tkColorChooser import *

(rgb,hx) = askcolor( )

label.configure(fg=hx)

Page 41: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Outros diálogos simples

● Experimentem também:

from tkSimpleDialog import *

…x = askstring('Titulo', 'Peça uma string pro usuário')y = askinteger('Titulo', 'Peça um inteiro pro usuário')z = askfloat('Titulo', 'Peça um float pro usuário')

Page 42: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Abrindo outras janelas● Use a widget Toplevel

root = Tk()…

top = Toplevel()top.title('Titulo da janela secundaria')

lab = Label(top, text='Testando...')lab.pack()

…root.mainloop()

Page 43: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando menus● Vamos criar um menu em cascata● Vamos usar um processo “de fora para

dentro”● Começamos com

menubar = Menu(root)

root.configure(menu=menubar)● Mas só isso ainda não faz nada.

Precisamos acrescentar os ítens do menu.

Page 44: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando menus● A partir dos comandos anteriores, acrescente mais um

nível:

menubar = Menu(root)

arqmenu = Menu(menubar)menubar.add_cascade(label="Arquivo",menu=arqmenu)

ajumenu = Menu(menubar)menubar.add_cascade(label="Ajuda",menu=ajumenu)

root.config(menu=menubar)

Page 45: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando menus● A partir dos comandos anteriores, crie mais um nível:

arqmenu = Menu(menubar)menubar.add_cascade(label="Arquivo",menu=arqmenu)

arqmenu.add_command(label="Abrir")arqmenu.add_command(label="Salvar")arqmenu.add_command(label="Sair")

● Esse menu ainda não faz nada. Tem que colocar comandos!

Page 46: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Criando menus● Experimentem:

arqmenu = Menu(menubar, tearoff=0)

arqmenu.add_command(label="Abrir",command=self.abrir) arqmenu.add_command(label="Salvar",command=self.save)arqmenu.add_command(label="Sair",command=self.sair)

menubar.add_cascade(label="Arquivo", menu=arqmenu)

● Notaram alguma diferença com tearoff=0? Olhem bem!

● Exercício: acrescentem mais menus!

Parecido com o que fazíamos com Button

Page 47: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Mais eventos

● É possível tratar muitos eventos interessantes, além de cliques em botões e menus!

● Por exemplo, posso fazer algo quando uma label for clicada com o botão direito, ou quando der dois cliques numa parte da tela, etc!

● Pra isso usamos o método bind

Page 48: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Mais eventos

● Experimentem:

def ajuda_num(self, evento):

showinfo("Ajuda", "Parte de cima da fração.")

return

mlabel_num.bind("<Button-3>", self.ajuda_num)

Precisa de argumento na função callback,mesmo que não

seja usado

Page 49: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Mais eventos

● Experimentem:

def ajuda_num(self, evento = None):

showinfo("Ajuda", "Parte de cima da fração.")

return

mlabel_num.bind("<Button-3>", self.ajuda_num)

É sempre bom colocar None como default

Page 50: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Outros eventos● Testem também os seguintes eventos:

– <B1-Motion>

– <ButtonRelease-1>

– <Double-Button-1>

– <Enter>

– <Leave>● Eventos do teclado (associem à janela principal):

– <Return>, <BackSpace>, <Tab>, <Escape>, etc

– <F1>, <F2>, etc

– <Shift-Up>, <Control-Shift-Down>, etc

Page 51: MAB224 – Programação de Computadores IIfranklin/xbt246/04-Introducao-Tkinter.pdf · Bibliografia recomendada Steve Ferg, “Pensando em Tkinter” PDF disponível gratuitamente

Veja também...

● Slides do curso de Python do Cláudio Esperança, da UFRJ: http://orion.lcg.ufrj.br/python/

● Se não tiverem problemas com inglês, podem olhar aqui também: http://zetcode.com/gui/tkinter/ (Está num nível um pouco mais avançado. Podem olhar os exemplos, mas não se preocupem com os detalhes. Podem tirar as dúvidas comigo na aula.)