Widgets para Interfaces Gráficas

Prévia do material em texto

Roteiro da Aula 01b 
Criando Interfaces Gráficas Simples (continuação) 
 
Scale 
O widget Scale permite que o usuário selecione um valor numérico movendo um botão deslizante ao longo 
de uma escala. Você pode controlar os valores mínimos e máximos da escala, bem como a resolução. 
 
Quando usar um widget Scale? 
Você pode usar o widget Scale no lugar de um widget Entry, quando você quer que o usuário insira um 
valor numérico limitado. 
 
 
Padrão: 
w = Scale(from_=0, to=200, bg='white', orient=HORIZONTAL) 
w.pack() 
 
 
 
 
Referência: 
O construtor para a classe Scale tem a forma: 
Scale(master=None, opções) 
As opções mais comuns são: 
bg 
A cor de fundo do Scale. 
command 
A função ou método chamado quando o botão é deslizado. 
font 
A fonte a ser usada no Scale. 
from_ 
Valor inicial da escala. 
lenght 
O valor default é 100. 
orient 
HORIZONTAL ou VERTICAL.O default é VERTICAL. 
state 
O estado do Scale: NORMAL ou DISABLED. O default é NORMAL. 
to 
Valor final da escala. 
width 
A largura do Scale. O valor default é 15. Lembre-se que a orientação default é VERTICAL. 
 
Para consultar o widget, use o método get() 
w = Scale(from_=0, to=200, bg='white', orient=HORIZONTAL) 
w.pack() 
print w.get() 
 
 
 
Label 
Os widgets que você mostra na tela, às vezes não fornecem ao usuário informações suficientes. Em tais 
casos, é útil incluir objetos Label, que aparecem como cadeias de texto na interface do usuário, mas que, no 
entanto, não respondem a nenhum evento. 
Como exemplo, se você quiser marcar um widget Scale de modo que fique claro para o usuário que ele 
controla o tamanho de alguma coisa, você poderia usar o seguinte código para produzir a figura mostrada a 
seguir: 
 
Label(text="Pequeno", bg='white').pack(side=LEFT) 
w = Scale(from_=0, to=200, bg='white', orient=HORIZONTAL) 
w.pack(side=LEFT) 
Label(text="Grande", bg='white').pack(side=LEFT) 
 
 
 
 
Referência: 
O construtor para a classe Label tem a forma: 
Scale(master=None, opções) 
As opções mais comuns são: 
bg 
A cor de fundo do Label. 
font 
A fonte a ser usada no Label. O Label pode conter texto em uma única fonte. 
height 
A altura do Label. Se o Label exibir texto, o tamanho é dado em unidades de texto. Se o 
Label exibe uma imagem, o tamanho é dado em pixels (ou unidades de tela). Se o tamanho 
for omitido, ele é calculado com base no conteúdo do Label. 
padx 
Preenchimento horizontal extra entre o texto e a borda. 
pady 
Preenchimento vertical extra entre o texto e a borda. 
state 
Essa opção controla a aparência do Label. Os valores possíveis são: NORMAL ou DISABLED. 
O default é NORMAL. 
text 
O texto a ser exibido no Radiobutton. O texto pode conter caracteres de nova linha ('\n'). 
width 
A largura do Label. Se o Label exibir texto, o tamanho é dado em unidades de texto. Se o 
Label exibe uma imagem, o tamanho é dado em pixels (ou unidades de tela). Se o tamanho 
for omitido, ele é calculado com base no conteúdo do Label. 
 
 
 
OptionMenu 
Em algumas aplicações, pode ser necessário permitir ao usuário escolher entre um conjunto de opções, o que 
ocuparia muito espaço na tela caso fossem listadas todas elas. Em tais situações, você pode usar a classe 
OptionMenu, que lista as opções disponíveis em um menu pop-up que desaparece assim que a seleção é 
feita. 
Usar uma OptionMenu para selecionar tamanhos de camisetas, poderia se parecer com: 
tamanho = StringVar() 
OptionMenu(root, tamanho, "Selecionar tamanho", "G", "GG", "M", "P"). \ 
 pack() 
# seleciona a opção inicial 
tamanho.set("Selecionar tamanho") 
 
 
 
Do ponto de vista do usuário, uma OptionMenu funciona assim: 
• Pressionar o mouse faz com que apareça um menu pop-up. 
• Arrastar o mouse seleciona uma das diferentes opções. 
• Soltar o mouse define o estado para a opção atual. 
 
Dado que o objetivo do controle é oferecer ao usuário uma escolha de opções, o widget OptionMenu é, às 
vezes, chamado de um seletor. 
Os métodos get() e set() permitem determinar e definir qual item está selecionado. 
De maneira alternativa, as opções em uma OptionMenu podem ser determinadas com a ajuda de um List 
Python: 
tamanho = StringVar() 
listaDeOpcoes = ["Selecionar tamanho", "G", "GG", "M", "P"] 
OptionMenu(root, tamanho, *listaDeOpcoes). \ 
 pack() 
# seleciona a opção inicial 
tamanho.set(listaDeOpcoes[0]) 
 
 
 
Entry 
Embora o conjunto de widgets Tkinter geralmente tornem possível para o usuário controlar um aplicativo 
usando apenas o mouse, há, todavia, algumas situações em que a entrada a partir do teclado é necessária. 
Você pode aceitar a entrada de teclado em uma GUI usando a classe Entry, que oferece ao usuário uma área 
na qual é possível digitar uma única linha de texto. 
O código a seguir ilustra o uso da classe Entry em um programa que imprime uma saudação cada vez que 
um nome é inserido no campo de texto. 
 
 
 
from Tkinter import * 
 
def apertouEnter(e): 
 print "Alô, %s!" % campoNome.get() 
 
root = Tk() 
Label(text="Nome").pack(side=LEFT) 
campoNome = Entry(width=10) 
campoNome.pack(side=LEFT) 
campoNome.bind("<Return>", apertouEnter) 
 
mainloop() 
 
 
Referência: 
O construtor para a classe Entry tem a forma: 
Entry(master=None, opções) 
As opções mais comuns são: 
bg 
A cor de fundo do Entry. 
font 
A fonte a ser usada no Entry. 
state 
Os valores possíveis são: NORMAL ou DISABLED. O default é NORMAL. 
width 
A largura do campo de entrada, em unidades de caracteres. Note que este parâmetro controla 
o tamanho do widget na tela, mas não limita o número de caracteres que podem ser digitados 
no campo de entrada. A largura padrão é de 20 caracteres. 
 
Você pode obter o conteúdo digitado pelo usuário em uma Entry, usando o métodos get(). 
A Entry gera um evento se o usuário pressionar a tecla ENTER quando o controle tem o foco. Se você 
quiser que seu programa responda a esse evento, você precisa registrar um método listener para o campo. No 
exemplo anterior, o listener é registrado pela instrução: 
campoNome.bind("<Return>", apertouEnter) 
 
 
 
Gerenciadores de Layout: Pack 
O gerenciador de layout Pack dispõe widgets linearmente, vertical ou horizontalmente. A característica 
principal deste gerenciador é que o próximo widget a ser “colado” no frame é adjacente ao widget anterior. 
Você pode usar as opções fill, expand e side para controlar esse gerenciador de layout. 
 
Exemplo 1: 
O frame que hospeda os widgets assume o tamanho mínimo necessário para acomodar todos os widgets. 
 
from Tkinter import * 
 
listbox = Listbox() 
listbox.pack() 
 
for i in range(20): 
 listbox.insert(END, str(i)) 
 
mainloop() 
 
 
 
Uma Listbox, por default, mostra apenas 10 itens. Os demais estão lá, mas permanecem invisíveis. O que 
acontece se o usuário, com a ajuda do mouse, expandir a janela do aplicativo? 
 
 
 
Para fazer o widget preencher toda a área da janela, use as opções fill e expand 
from Tkinter import * 
 
listbox = Listbox() 
listbox.pack(expand=YES, fill=BOTH) 
 
for i in range(20): 
 listbox.insert(END, str(i)) 
 
mainloop() 
 
 
 
Exemplo 2: Widgets empilhados 
Para empilhar widgets, basta usar o método pack() sem parâmetros. 
 
from Tkinter import * 
 
w1 = Label(text="Red", bg="red", fg="white") 
w1.pack() 
w2 = Label(text="Green", bg="green", fg="white") 
w2.pack() 
w3 = Label(text="Blue", bg="blue", fg="white") 
w3.pack() 
 
mainloop() 
 
 
 
Você pode usar a opção fill=X para fazer com que todos os widgets ocupem toda a largura da janela. 
from Tkinter import * 
 
w1 = Label(text="Red",bg="red", fg="white") 
w1.pack(fill=X) 
w2 = Label(text="Green", bg="green", fg="white") 
w2.pack(fill=X) 
w3 = Label(text="Blue", bg="blue", fg="white") 
w3.pack(fill=X) 
 
mainloop() 
 
 
 
 
Exemplo 3: Widgets lado a lado 
Para dispor widgets lado a lado, horizontalmente, use a opção side. 
 
 
 
 
from Tkinter import * 
 
w1 = Label(text="Red", bg="red", fg="white") 
w1.pack(side=LEFT) 
w2 = Label(text="Green", bg="green", fg="black") 
w2.pack(side=LEFT) 
w3 = Label(text="Blue", bg="blue", fg="white") 
w3.pack(side=LEFT) 
 
mainloop() 
 
 
 
O primeiro widget da linha tem de ter a opção side=LEFT 
 
Exemplo 4: Criando botões 
 
from Tkinter import * 
 
def btnListener(): 
 print "Alô mundo!" 
 
Button(text ="Olá", command = btnListener, 
 font=('Courier', 24)).pack() 
 
mainloop() 
 
 
 
 
Exemplo 4: Criando botões, um exemplo mais complicado. 
 
from Tkinter import * 
 
def b1Listener(): 
 imprime("Alô mundo!") 
 
def b2Listener(): 
 imprime("A EP1 arrebenta!") 
 
def b3Listener(): 
 imprime("A UFRJ é show!") 
 
def imprime(str): 
 texto.config(state=NORMAL) 
 texto.insert(END, str + '\n') 
 texto.config(state=DISABLED) 
 
Button(text="Olá", command=b1Listener).pack() 
texto = Text(state=DISABLED, width=40) 
texto.pack() 
Button(text="EP1", command=b2Listener). \ 
 pack(side = LEFT, padx = 10) 
Button(text="UFRJ", command=b3Listener). \ 
 pack(side = LEFT) 
 
mainloop() 
 
 
 
 
 
Exemplo 5: Um programa ainda mais complexo: Desenha Carinhas. 
 
 
 
Vamos estudar os widgets que compõe essa aplicação. 
 
Checkbuttons 
frente = IntVar() 
Checkbutton(text="Frente", variable=frente). \ 
 pack(side=LEFT, padx=10) 
# o Checkbutton inicialmente está selecionado 
frente.set(1) 
 
 
Radiobuttons 
tam = StringVar() 
Radiobutton(text="Pequena", variable=tam, value="pequena"). \ 
 pack(side=LEFT, padx=10) 
Radiobutton(text="Média", variable=tam, value="media"). \ 
 pack(side=LEFT, padx=10) 
Radiobutton(text="Grande", variable=tam, value="grande"). \ 
 pack(side=LEFT, padx=10) 
# seleciona o estado inicial do Radionbutton 
tam.set("media") 
 
 
Labels 
Label(text=" Cor:").pack(side=LEFT) 
 
 
OptionMenus 
cor = StringVar() 
OptionMenu(root, cor, "black", "blue", "green", "red"). \ 
 pack(side=LEFT, padx=10) 
# seleciona a cor inicial 
cor.set("black") 
ou, alternativamente: 
cor = StringVar() 
optionList = ["black", "blue", "green", "red"] 
OptionMenu(root, cor, *optionList). \ 
 pack(side=LEFT, padx=10) 
# seleciona a cor inicial 
cor.set(optionList[0]) 
 
 
O programa completo 
# esse programa desenha carinhas no canvas, mas permite ao usuário 
# modificar o tamanho e a cor das carinhas. 
from Tkinter import * 
# constantes 
LARGURA=600 
ALTURA=300 
DIAM_PEQ = 20 
DIAM_MED = 40 
DIAM_GRD = 60 
contaCaras = 0 
 
# desenha uma carinha na posição (0, 0) 
def desenhaCara(largura, altura, tag): 
 L_OLHO = 0.15 
 A_OLHO = 0.15 
 L_NARIZ = 0.15 
 A_NARIZ = 0.10 
 L_BOCA = 0.50 
 A_BOCA = 0.03 
 
 cabeca = canvas.create_oval(0, 0, largura, altura, tags=tag) 
 L = L_OLHO*largura 
 A = A_OLHO*altura 
 olhoEsquerdo = canvas.create_oval( 
 0.25*largura - L/2, 0.25*altura - A/2, 
 0.25*largura + L/2, 0.25*altura + A/2, tags=tag) 
 olhoDireito = canvas.create_oval( 
 0.75*largura - L/2, 0.25*altura - A/2, 
 0.75*largura + L/2, 0.25*altura + A/2, tags=tag) 
 L = L_NARIZ*largura 
 A = A_NARIZ*altura 
 nariz = canvas.create_polygon( 
 0.5*largura-L/2, 0.5*altura+A/2, 
 0.5*largura, 0.5*altura-L/2, 
 0.5*largura+L/2, 0.5*altura+A/2, tags=tag) 
 L = L_BOCA*largura 
 A = A_BOCA*altura 
 boca = canvas.create_rectangle( 
 0.5*largura - L/2, 0.75*altura - A/2, 
 0.5*largura + L/2, 0.75*altura + A/2, tags=tag) 
 
# retorna o diametro correspondente à seleção na radio button 
def getTamanhoEscolhido(): 
 if tam.get() == "pequena": return DIAM_PEQ 
 if tam.get() == "media": return DIAM_MED 
 if tam.get() == "grande": return DIAM_GRD 
 
# esse metodo e chamado sempre que o usuario clica o mouse 
def clicouMouse(e): 
 global contaCaras 
 tag = 'cara' + str(contaCaras) 
 diam = getTamanhoEscolhido() 
 if frente.get() == 1: 
 desenhaCara(diam, diam, tag) 
 else: 
 canvas.create_oval(0, 0, diam, diam, tags=tag) 
 # modifica a cor da carinha baseado na seleção no option menu 
 canvas.itemconfig(tag, outline=cor.get()) 
 canvas.move(tag, e.x, e.y) 
 contaCaras += 1 
 
# esse método é chamado quando o usuário aperta o botão Apaga 
def btnApagaCommand(): 
 canvas.delete(ALL) 
 contaCaras = 0 
 
# programa principal 
root = Tk() 
canvas = Canvas(width=LARGURA, height=ALTURA, 
 bg='white') 
canvas.pack() 
 
# botão para limpar o canvas 
Button(text="Apaga", command=btnApagaCommand). \ 
 pack(side=LEFT, padx=10) 
 
# check button para desenhar a carinha de frente ou de costas 
frente = IntVar() 
Checkbutton(text="Frente", variable=frente). \ 
 pack(side=LEFT, padx=10) 
# a check button inicialmente está selecionada 
frente.set(1) 
 
# radio button para o tamanho da carinha 
# todas as radio buttons são grupadas porque 
# elas usam a mesma variável 
tam = StringVar() 
Radiobutton(text="Pequena", variable=tam, value="pequena"). \ 
 pack(side=LEFT, padx=10) 
Radiobutton(text="Média", variable=tam, value="media"). \ 
 pack(side=LEFT, padx=10) 
Radiobutton(text="Grande", variable=tam, value="grande"). \ 
 pack(side=LEFT, padx=10) 
# seleciona o estado inicial da radion button 
tam.set("media") 
 
# cria um label para o option menu 
Label(text=" Cor:").pack(side=LEFT) 
# cria um option menu com as opções de cores 
optionList = ["black", "blue", "green", "red"] 
cor = StringVar() 
OptionMenu(root, cor, *optionList). \ 
 pack(side=LEFT, padx=10) 
# seleciona a cor inicial 
cor.set(optionList[0]) 
 
# configura o listener do mouse 
canvas.bind("<ButtonPress-1>", clicouMouse) 
 
mainloop()