Introdução à programação orientada a eventos em interfaces gráficas utilizando Python. Veremos janelas, botões, caixas de entrada, mensagens e o fluxo de eventos que responde às ações do usuário.
A janela fica ativa esperando ações do usuário; cada ação pode disparar uma função de tratamento de evento.
Nessa abordagem, a aplicação reage a ações do usuário, chamadas de eventos, como cliques, digitação e movimentação do mouse. Em vez de rodar código sequencialmente, o interpretador entra em um loop de eventos (loop de evento) que aguarda por ações e aciona os callbacks (funções de tratamento) associadas a cada evento.
Criação de uma janela com um botão. Ao clicar no botão, uma nova janela é exibida com a data e hora atual. Ao clicar em OK, essa janela se fecha. O fluxo envolve: criação da janela principal, criação de um botão, associação de uma função ao evento de clique (comando), obtenção da data/hora atual usando time.localtime e strftime, e exibição da mensagem com showinfo.
Widgets comuns em GUIs com Python (Tkinter): Tk (janela raiz), Button (botão), Label (rótulo), Entry (caixa de texto simples), Text (editor de texto), entre outros. Existem gerenciadores de geometria como pack e grid. Pack organiza de forma simples, enquanto grid permite posicionamento por linhas e colunas, facilitando alinhamento e centralização.
Para obter a data/hora atual, utiliza-se a função localtime para pegar o horário local estrftime para formatar conforme a máscara desejada, por exemplo: %d/%m/%Y para data e %H:%M:%S para hora. A combinação permite apresentar dia, mês, ano, hora, minuto, segundo e período (AM/PM, se necessário).
Ao acionar o evento de clique, crie um objeto time.struct_time com localtime(), formate com strftime para exibir algo como: "15/10/2020 13:24:15 PM". Em Tkinter, você pode exibir esse texto em uma janela de informação (showinfo).
Entry captura texto digitado pelo usuário. Podemos vincular eventos de teclas ou de foco, usar o grid para posicionamento e, com bind, associar eventos a funções de tratamento. Também é possível ler o conteúdo atual da Entry com o método get().
O usuário digita mês e ano, e o programa imprime a data correspondente ao dia da semana. Usa-se Time/strftime para interpretar a data e calcular o weekday, exibindo o resultado em uma nova janela.
O método bind permite associar diferentes eventos (teclas pressionadas, cliques de mouse com botões esquerdo/direito, etc.) a funções de tratamento. O formato do evento segue padrões que incluem modificadores (Shift, Ctrl, Alt), tipo de evento (tecla, clique) e detalhes (qual tecla ou qual botão do mouse).
Um exemplo de exercício mostra três binds diferentes para tecla pressionada e cliques de mouse, onde cada evento está ligado a uma função distinta para demonstrar a resposta do programa a entradas do usuário.
Resposta correta: B) Reagir a ações do usuário por meio de callbacks
Resposta correta: C) Entry
Resposta correta: B) grid
Resposta correta: A) Dia da semana
O Lá pessoal, bem-vindo novamente na C participlina de algoritmos e programação de computadores 2.
Essa é a continuação da nossa aula de interfaces gráficas.
Na aula passada, a gente viu a parte mais básica de como criar janelas e usar componentes a partir de uma biblioteca disponível da linguagem Python.
A gente viu que naquela visual, a gente simplesmente colocava os componentes na janela, tinha a parte da organização desses componentes também, só que não foi adicionada nenhuma funcionalidade nesses componentes.
Nesta visual, a gente vai dar continuidade em esse assunto.
A gente vai ver como a gente faz para adicionar funcionalidades a os componentes a partir de ações que o usuário realiza ao interagir com a interface.
Então, para isso, a gente vai usar uma abordagem de programação, que é chamada de programação orientada a eventos.
A sua janela vai ficar ali para o usuário e a funcionalidade, as ações que o seu programa vai realizar, só vão ser de fato realizados quando o usuário interagir.
Por isso, a programação orientada a eventos, cada eventos é a uma ação do usuário e cada ação dessa gera uma tarefa, um procedimento que vai ser executado pelo programa.
O que acontece é que quando você chama aquela função, nem loop, que a gente viu na aula passada, que faz com que a janela seja exibida na tela, por baixo dos panos, o interpretador vai iniciar um loop infinito, que é chamado de loop de evento.
O seu do código desse loop é este, que está aqui na tela, então, por que é que é loop infinito? Porque ele fica executando infinitamente.
E dentro desse loop, você vai ter duas ações principais, uma dela é aguardar até que em um evento ocorra, quer dizer, o usuário faça alguma uma ação, como clicar no botão, fechar a janela, ou insere algum texto.
E uma vez que o interpretador detecta, que ocorreu um desses eventos, ele vai executar uma função específica de tratamento do evento que foi associado.
Então, exemplos de possíveis eventos são clicar, então, o usuário clica num determinado componente, movimental mouse, pressional, uma tecla entre várias outras ações que o usuário pode realizar com a janela.
Então, a gente vai ver um primeiro exemplo, que é simplesmente criar uma janela com um botão, e quando o usuário clicar nesse botão vai ser exibida uma outra janela, que vai informar a hora o dia pro usuário.
E quando ele clica em OK, ele fecha essa janela de informação.
Então, o que a gente vai fazer aqui? A gente vai importar o WTKT50, a gente vai importar o A-class CTK para criar a janela principal, a gente vai ter também um botão, e a gente vai ter também um rótulo.
Uma outra coisa que também eu vou importar aqui é da do módulo Message Box.
Do módulo Message Box, a gente vai importar a classe showinfo, que é uma maneira de você exibir aquela janela de informação contendo a data e a hora.
E a gente vai também importar do módulo Time, a gente vai importar as classes STRFTime e localTime, que são classes que a gente vai utilizar para a UBT a hora atual e também formatar essa hora e a data na tela pro usuário.
Então, primeiro a coisa que eu vou fazer é criar a janela principal, então isso é feito por meio da criação de um objeto do tipo TK.
A gente vai criar também um botão, instanciando também a classe botão, passando dentro o qual que a janela principal, o texto, que eu vou colocar aqui clique.
A gente vai chamar o método PEC, que é para poder empacotar a janela junto com o botão.
E daí depois disso a gente mostra na tela essa janela por meio da chamada Almet do Menlup.
Então, isso daqui, pessoal, foi a gente fez até a aula passada, basicamente.
E quando você cria então este roda, esse programa, quando você clicar no botão, não vai ser executado nada, porque a gente não adicionou ainda nenhuma funcionalidade a esse botão.
Então, está aqui o nosso janela criada, aqui está o botão, então, clicar no botão, não acontece nada.
Então, a gente tem que adicionar a funcionalidade relacionada com o clique deste botão.
E isso é feito por meio de um outro atributo aqui da classe botão, que é o atributo comente.
E aqui a gente passa o nome da função correspondente a executar o tratamento deste evento.
E aí a gente vai definir então esta função Cliquet, que eu criei, que eu coloquei aqui como argumento do atributo comente.
Então, a gente vai criar ela aqui Cliquet e ali dentro eu vou instanciar um objeto Time, do tipo STFTime.
Aqui dentro eu vou passar algumas informações como o dia, eu vou colocar por cento d, por cento b e por cento y, um barraênio para poder polar uma linha e eu vou colocar também a hora Time com por cento h, por cento m e por cento s.
Mais um por cento p, barraênio, aqui eu passo a função local Time.
Então, o que está acontecendo aqui? A gente está chamando a função local Time, que vai nos retornar a hora local, de este momento.
E esta hora local vai ser formatada por meio desta função STFTime usando esta máscara que está aqui, que eu especificei.
Então, cada um desses comandos aqui, por cento d, por cento b, por cento y, por cento h, m e s, são referentes a ou ao dia ou a hora ou o minuto.
Então, a gente vai colocar aqui o dia, um mês e o ano, referente aqui a esses três comandos.
E a hora aqui, tem a hora, minuto e segundo, também referente a hora local.
E este P também é em relação a séperil do datarge, o período da manhã, que é AM ou PM na língua inglesa.
Legal? E depois só resta a gente mostrar isso na tela.
E aí a gente chama a função showinfo com a mensagem passando aqui, esta string Time que a gente criou aqui em cima, que contém as informações de dia e hora.
Então, está aqui o nosso janela, agora quando eu clico no botão clique, ele mostra para a gente a janela com o dia 15 de outubro de 2020 e a hora 13, 24, 15 segundos.
E PM, período da tarde.
Tá legal? E aí, vamos ver o nosso componente, que é o componente para a caixa de inserção de texto, que é esse que está aqui, isso aqui é a classe entry, que a gente vai utilizar.
Aí a gente tem aqui mais um label e aqui a gente tem um botão.
E agora é o contrário, o usuário vai digitar o mês e o ano e o programa vai imprimir numa outra janela, a data juntamente com o dia da semana que ocorreu aquela data.
Então, a gente vai começar importando o TK, o botão, o label e agora também o entry.
Além disso, a gente vai importar também o message box e também do timer, a gente vai importar também o STR, FTime.
E aqui, ao invés de pegar o local timer, a gente vai importar o STR, P, Time, também a gente vai utilizar ali para frente.
Então, aqui, eu estou criando a minha janela, vou criar aqui o label.
Aí, eu vou adicionar, por meio do método grid, na linha 0 e coluna 0.
Então, reparem que isso aqui é uma outra maneira de a gente organizar os componentes lá na janela principal.
Aí, eu vou criar uma entrada, que é uma caixa de texto, passando também a janela principal.
Essa janela, nesse componente de inserção de texto, também a gente usa o método grid para especificar que eu quero colocar na linha 0, agora na coluna 1.
E também a gente vai adicionar um botão, está aqui já, um botão.
E aí, eu comando, clicar também.
E aqui, ao invés de a gente usar o pack, a gente vai usar também o grid, agora a gente vai colocar na linha de baixo, na coluna 0.
E a gente vai usar esse atributo columns, columns pan, para falar que a gente está juntando duas colunas em uma só.
Daí com isso, o botão vai ficar centralizado lá na janela.
E aí, aqui em cima na função cliquet, a gente vai, inicialmente, importar o atributo entre que foi criado aqui embaixo.
Então, isso daqui, esse global enter é para a gente poder ter acesso a esse objeto entre que é o texto que o usuário inseriu a data lá na janela principal.
Aí, a gente vai, a partir desse entre obter a data que o usuário digitou.
E depois, a gente pode obter o dia da semana, isso é feito por meio da função STEFTime, onde a gente passa aqui o comando por cento A, que é o dia da semana, e aqui a gente chama a função STEFTime com date.
E aqui a gente passa o formato, que o usuário vai inserir a data que é por cento B de mês, por cento D de dia, vírgula e por cento Y, que é dia, está legal.
E, por fim, a exibida essa mensagem na tela, que vai ter esse formato que é algo assim.
Então, foi por cento Abrefecha Chaves, e aqui ponto Format, Page e Weekly.
Legal? Então, o que acontece? Essa data que foi obtida aqui do usuário vai ser impresso novamente, e aqui esse weekday, que é o dia da semana, que é obtido por meio dessa instrução, vai ser impresso aqui nessa segunda parte aqui da string.
Então, está aqui, reparem que, agora, nossa janela está com três componentes, todos organizados com o método GRID, e aí, quando a gente adiciona uma data, por exemplo, eu vou colocar lá, desembro, que é inglês, né, 5,981, quando eu clicar, ele vai mostrar para a gente aqui a data, junto com o dia da semana que ocorreu aquela data.
E o nosso terceiro exemplo consiste numa outra caixa de texto, só que agora com diferentes tipos de eventos.
Então, quando você vai ter uma caixa de texto, o usuário vai digitar caracteres nesta caixa, e lá no nosso interpretador, na linha de comando, vão ser zibidos os caracteres que o usuário vai estar digitando um teclado, e juntamente, se ele clicar com o botão direito, o esquerdo, ele vai zibir uma string aqui embaixo dizendo que ocorreu esse evento de clique do mouse, lá do teclado.
Então, nesse exemplo, a gente vai usar o component text, que funciona como um editor de texto, e também a gente vai usar o método bind, que faz a associação de diferentes eventos, as suas respectivas funções de tratamento.
E para isso, a gente precisa entender os padrois de evento, que possui um formato parecido como esse que está aqui.
Então, a gente vai ter alguns modificadores, por exemplo, a usuário de texto caracter, com a tecla alt, pressionada ou a tecla contropressionada.
Então, o outro alt, são todos esses modificadores, e aí a gente tem o tipo do evento que ocorreu, por exemplo, clique de um botão, e o detalhe, por exemplo, ao usuário de texto, clicar com o botão do mouse, o botão que foi isso, um, dois ou três.
Aqui, eu tenho alguns exemplos de eventos que podem ocorrer, lá no livro, na nossa referência, tem mais alguns exemplos para vocês, dar uma olhada.
E com isso, a gente tem aqui a implementação desta exemplo, que eu vou deixar como exemplo, como exercício, para vocês fazerem na casa de vocês.
Então, peguei esse código, coloca eles no arquivo, e roda eles para vocês verificarem a execução.
Vocês vão ver que esses três binds que estão aqui embaixo, são os três tipos de eventos que podem ocorrer, que é tecla pressionada, botão esquerdo e botão direito do mouse.
E para cada um desses eventos, a gente tem uma função específica aqui em cima, que vai executar uma tarefa, lá juntamente com o Teo programa.
Tá legal? Então, essa foi a nossa videoaula, pessoal, sobre interfaces gráficas.
Espero que vocês possam ter compreendido pouco sobre manipulação de eventos entre interfaces gráficas.
E a gente se vê, então, na nossa próxima videoaula, na semana que vem.
Obrigado e até lá.