PDF - VERSÃO DE IMPRESSÃO

Lição 18 - Uso de controles (eventos e propriedades)

objetivo

Olá, estudante, tudo bem? Na lição anterior, estudamos o paradigma orientado a eventos aplicado especificamente aos formulários. Discutimos como os eventos, por exemplo, cliques e inserções de dados, podem ser capturados e processados em tempo real, para criar interfaces mais interativas e responsivas. Entendemos que esse paradigma melhora a experiência do usuário ao fornecer feedback imediato, ao mesmo tempo que aumenta a eficiência do sistema, ao reduzir erros e melhorar a usabilidade geral.

Hoje, continuaremos nossa jornada explorando um conceito fundamental na programação de interfaces gráficas: o uso de controles, eventos e propriedades. Assim, nesta lição, o objetivo é explorar e entender o uso de controles, eventos e propriedades na programação com Python, especificamente no contexto do desenvolvimento de sistemas.

Você será introduzido aos conceitos fundamentais relacionados a como os controles interagem com eventos e como suas propriedades podem ser manipuladas para criar interfaces gráficas dinâmicas e responsivas. A lição abordará a forma de associar eventos a controles, para que ações do usuário, por exemplo, cliques e inserções de dados, possam ser capturadas e processadas em tempo real. Ao longo da lição, você será guiado por meio de exemplos práticos que demonstram a aplicação desses conceitos na criação de sistemas interativos e funcionais.

Vamos aprender mais?

problematização

No desenvolvimento de sistemas, um problema comum é a dificuldade em criar interfaces de usuário funcionais, intuitivas e responsivas. Muitas vezes, os sistemas enfrentam desafios relacionados à interação entre o usuário e os controles da interface, como botões e campos de entrada, que não respondem adequadamente às ações do usuário, ou que apresentam propriedades estáticas e não adaptáveis às necessidades do sistema. Esse problema pode resultar em experiência de usuário insatisfatória, baixa produtividade e maior risco de erros. Sabendo disso, o que você, futuro(a) Técnico em Desenvolvimento de Sistemas, pode fazer para solucionar esses problemas?

A resposta é: o uso eficaz de controles, eventos e propriedades é fundamental. Aplicar eventos permite que o sistema reaja dinamicamente às ações dos usuários, como cliques e modificações em campos de texto, melhorando a interatividade da interface. Ajustar as propriedades dos controles possibilita personalizar a aparência e o comportamento dos elementos da interface, garantindo que se adaptem às necessidades específicas do sistema e ofereçam uma experiência mais fluida bem como adaptada. Por exemplo, ao associar eventos de validação aos campos de entrada, é possível fornecer feedback imediato e prevenir erros antes que eles impactem o sistema.

Em resumo, a aplicação adequada de controles e eventos resolve os problemas relacionados à interação e à usabilidade, além de contribuir para o desenvolvimento de sistemas mais robustos e eficientes. Com uma interface bem-projetada, mas também responsiva, a satisfação do usuário aumenta, e o sistema torna-se mais eficaz na execução de suas funções, resultando em uma solução mais coesa e confiável!

case

Para ilustrar os conteúdos a serem estudados na lição de hoje, apresento a você um breve relato envolvendo uma empresa fictícia especializada em software financeiro, que enfrentava problemas graves com a interface de seu sistema de gerenciamento de investimentos. Os clientes encontravam dificuldades para navegar e interagir com os controles, como formulários e botões, devido à falta de resposta adequada aos eventos bem como à rigidez das propriedades dos controles, o que comprometia tanto a usabilidade quanto a eficiência do sistema.

Para resolver os problemas de usabilidade, a equipe de desenvolvimento adotou uma abordagem centrada em eventos e propriedades dinâmicas. Foram implementados eventos para capturar ações dos usuários, como cliques e mudanças nos campos de entrada, permitindo respostas imediatas e personalizadas. Foram ajustadas também as propriedades dos controles para adaptar a interface às necessidades específicas dos usuários, como exibição de mensagens de erro em tempo real e atualização automática de informações. Esses ajustes melhoraram significativamente a interação com o sistema, tornando a interface mais intuitiva e responsiva.

Após implementar as melhorias, a empresa observou aumento na satisfação dos clientes, que agora encontraram uma experiência de usuário mais fluida e eficiente. O sistema tornou-se mais ágil, preciso, reduzindo erros e melhorando a produtividade geral. Assim, esse é um ótimo exemplo para demonstrar o quanto o uso de controles, eventos e propriedades é essencial!

Nesse caso, a empresa pôde criar interfaces adaptáveis e eficientes, destacando a importância de considerar tanto a interação quanto a responsividade no desenvolvimento de software. E claro, nem é preciso dizer o quanto esse conhecimento se torna essencial para você, que em breve estará atuando como Técnico(a) em Desenvolvimento de Sistemas, não é mesmo?

Conceitualização

No desenvolvimento de software, a interação com o usuário e a personalização das interfaces são aspectos cruciais para criar aplicações eficazes e intuitivas. Para alcançar essas características, é fundamental entender o papel dos controles, dos eventos e das propriedades. Veremos cada um deles de forma separada, para melhor entendimento!

Controles na programação

Os controles em programação são elementos interativos que compõem a interface gráfica de uma aplicação, possibilitando aos usuários a interação com o sistema, de maneira intuitiva e eficiente. De acordo com MDN Web Docs (UI, c2024a, on-line), os controles são a parte de documentos web na qual os usuários podem interagir com o sistema, ou seja, botões, links, seletores, campos de texto, formulários. Esses elementos são fundamentais para capturar entradas do usuário, desencadear ações e exibir informações, de forma organizada.

Os controles fazem parte da interface gráfica de usuário (GUI) e facilitam a comunicação entre o usuário e o software. Eles são projetados para receber entradas do usuário, como texto e comandos, além de exibir informações de maneira acessível e bem-estruturada. Assim, a função principal dos controles é facilitar a comunicação entre o usuário e o sistema, proporcionando uma experiência de usuário tão amigável quanto intuitiva. Como exemplos de controles mais comuns, temos:

Botões (buttons): são controles interativos que, quando clicados, desencadeiam uma ação específica, como enviar um formulário, iniciar um processo ou abrir uma nova janela. Eles são essenciais para a navegação e execução de comandos na aplicação. De acordo com Roseman (2020), um botão foi projetado a fim de que o usuário interaja com ele e, em seguida, pressione para executar alguma ação.
Campos de texto (text fields): permitem ao usuário inserir e editar texto. São amplamente utilizados em formulários para capturar informações, como nomes, endereços de e-mail e senhas. Campos de texto podem ser de entrada simples, como caixas de texto de uma linha, ou de entrada complexa, como áreas de texto de várias linhas.
Seletores (selectors): são como caixas de seleção (checkboxes), botões de rádio (radio buttons) e menus suspensos (dropdown menus), permitem ao usuário fazer escolhas entre várias opções. Caixas de seleção possibilitam seleções múltiplas, botões de rádio, uma única seleção dentro de um grupo, enquanto menus suspensos apresentam uma lista de opções para escolha.

Cada um desses controles desempenha um papel na construção de interfaces gráficas interativas e responsivas, facilitando a entrada de dados, assim como a execução de ações por parte do usuário. Ao entender e utilizar esses controles de maneira eficaz, os desenvolvedores podem criar aplicações mais amigáveis e funcionais.

Eventos na programação

Os eventos são ações ou ocorrências que acontecem em um sistema e que o software é capaz de detectar e responder. Eles são fundamentais em sistemas interativos porque permitem a aplicação reagir dinamicamente às ações dos usuários, criando uma experiência de uso fluida e responsiva.

Os autores Tucker e Noonan (2010) reforçam que os eventos são iniciados pelo usuário e acionam uma aplicação com os mais variados tipos, os quais incluem eventos do mouse, seleção de botões, entradas em campos de texto e opções em caixas de seleção. Eventos transformam uma interface estática em uma interface interativa, onde as ações do usuário, como clicar em um botão ou mover o mouse, desencadeiam respostas imediatas do sistema. Os tipos mais comuns de eventos incluem:

Cliques (click events): esses eventos são gerados quando o usuário clica em um elemento interativo, como um botão ou link. A detecção de cliques permite a execução de funções específicas, como enviar um formulário, abrir um menu ou iniciar um processo.
Movimentos do mouse (mouse events): são eventos gerados quando o usuário move o cursor sobre a interface. Exemplos incluem mouseover (quando o cursor passa sobre um elemento), mouseout (quando o cursor sai de um elemento) e mousemove (movimento contínuo do mouse). Esses eventos são úteis para criar efeitos visuais e interações dinâmicas.
Alterações de entrada (input events): alterações de entrada ocorrem quando o usuário interage com campos de texto ou outras áreas de entrada de dados. Eventos como change (quando o valor de um campo é alterado) e input (quando qualquer mudança é feita em um campo de texto) possibilitam validar e processar dados em tempo real.

A definição dos eventos, acredito que tenham ficado claras, entretanto ainda precisamos entender como esses eventos são gerados e disparados em resposta às ações do usuário, não é mesmo? Os eventos são gerados e disparados quando o usuário realiza ações específicas na interface da aplicação. Esse processo, geralmente, envolve três etapas principais:

● Detecção da ação:

A interface monitora continuamente as ações do usuário. Quando uma ação relevante, como um clique ou movimento do mouse, é detectada, um evento correspondente é gerado.

● Associação de ouvintes de eventos:

Os ouvintes de eventos (event listeners) são funções ou métodos associados a um elemento da interface para “ouvir” determinados eventos. Quando um evento ocorre, o ouvinte associado é ativado.

● Execução da resposta:

Quando um evento é disparado, a função associada ao ouvinte é executada. Essa função contém o código que define como a aplicação deve responder à ação do usuário. Por exemplo, um ouvinte de evento dá clique em um botão de submissão de formulário e valida os dados do formulário bem como envia uma solicitação ao servidor.

De maneira mais direta e simplificada: eventos são ocorrências, e ouvintes são as funções associadas a esses eventos.

Propriedades de controles

As propriedades de controles são atributos que definem as características visuais e comportamentais dos elementos da interface de usuário (UI). O MDN Web Docs (Propriedade [...], c2024b, on-line) define propriedade como uma característica, digamos que a cor, cujo valor define o aspecto de como o navegador web, por exemplo, deve exibir o elemento. Eles permitem que os desenvolvedores personalizem e ajustem a aparência, mas também a funcionalidade dos controles, para criar interfaces mais intuitivas e eficazes. Exemplos comuns de propriedades de controles incluem:

Cor (color): define a cor de um controle, como a cor de fundo (background color), ou a cor do texto (text color). Por exemplo, button.color = “red” altera a cor de um botão para vermelho.
Tamanho (size): especifica a altura e a largura de um controle. Por exemplo, input.size = “large” pode definir o tamanho de um campo de entrada.
Visibilidade (visibility): determina se um controle está visível ou oculto na interface. Por exemplo, label.visible = False oculta um rótulo na tela.

Manipular e ajustar as propriedades dos controles é essencial para criar uma interface adaptável e responsiva. Isso pode ser feito tanto estática quanto dinamicamente, com base nas interações do usuário.

Além disso, quando pensamos no desenvolvimento de interfaces gráficas, as propriedades de controle são importantes para a personalização e funcionalidade dos elementos que compõem a aplicação. Essas propriedades determinam a aparência e o comportamento dos controles, influenciando diretamente a experiência do usuário.

As propriedades de controle são divididas em duas categorias principais: a definição estática e a alteração dinâmica.

Definição estática

As propriedades de controle podem ser definidas de forma estática, a qual ocorre quando o processo de configurar as propriedades de um controle de interface de usuário acontece diretamente no código, no momento de sua criação. Roseman (2020) explica que as opções de configuração podem ser definidas quando o controle é criado pela primeira vez, transmitindo os nomes e os valores das opções como parâmetros opcionais. Isso significa que as características do controle, como texto, cor, tamanho, entre outros, são especificados de maneira fixa e imutável desde o início, sem depender de condições dinâmicas ou mudanças durante a execução do programa. Por exemplo: button = Button(text=”Submit”, color=”blue”, size=”medium”).

Alteração dinâmica

As propriedades de controle também podem ser definidas de forma dinâmica. Nesse caso, existe a capacidade de ajustar propriedades dos elementos de uma interface em tempo real, adaptando-se às interações do usuário. Isso é possível através da utilização de eventos e ouvintes de eventos que capturam as ações do usuário e executam funções específicas em respostas a essas ações. Roseman (2020) explica que os controles respondem a eventos como mudar a cor de um botão quando ele é clicado. Por exemplo: def on_button_click(event): event.widget.color = “green” button.bind(“<Button-1>”, on_button_click). Nesse caso, é possível alterar a cor do botão, pois a propriedade color não é fixa e/ou estática, então ela pode ser alterada de acordo com o evento.

Técnicas para atualizar dinamicamente as propriedades com base em eventos

Atualizar dinamicamente as propriedades dos controles com base em eventos é uma técnica poderosa para melhorar a usabilidade e a interatividade da interface. Aqui estão algumas técnicas comuns:

1. Uso de ouvintes de eventos: associe ouvintes de eventos a controles, para capturar ações do usuário e ajustar as propriedades em resposta. Por exemplo:

Figura 1 - Ouvintes de eventos
Fonte: o autor.

#PraCegoVer: uma captura de tela que mostra na linha 1 on_hover(event): na linha 2 event.widget.background.color = “lightgray” na linha 4 def on_leave(event): na linha 5 event.widget.background.color = “white” na linha 7 button.bind(“<Enter>”, on_hover) na linha 8 button.bind(“<Leave>”, on_leave). Nas linhas 3 e 6 não há conteúdo escrito.

2. Validação da entrada em tempo real: altere a cor do campo de entrada para vermelho, se a entrada for inválida:

Figura 2 - Validação da entrada em tempo real
Fonte: o autor.

#PraCegoVer: uma captura de tela que mostra na linha 1 def validate_input(event): na linha 2 temos if not event.widget.get().isdigit(): na linha 3 event.widget.background.color = “red” na linha 4 else: na linha 5 event.widget.background.color = “white” na linha 7 entry.bind(“<KeyRelease>”, validade_input). Na linha 6 não há conteúdo escrito

3. Ajuste dinâmico de layout: mude o tamanho de um controle com base no conteúdo inserido:

Figura 3 - Validação da entrada em tempo real
Fonte: o autor.

#PraCegoVer: uma captura de tela que mostra na linha 1 def adjust_size(event): na linha 2 content_length = len(event.widget.get()) na linha 3 event.widget.width = content_length + 2 na linha 5 entry.bind("<KeyRelease>", adjust_size). Na linha 4 não há conteúdo escrito.

Essas técnicas permitem aos desenvolvedores criarem interfaces que se adaptam automaticamente às necessidades e às ações dos usuários, o que melhora a experiência geral de uso e torna o sistema mais intuitivo, assim como eficiente.

Considerando essa gama de recursos, na próxima seção, colocaremos a “mão na massa” e trabalharemos, de forma prática, os conceitos estudados.

saiba aplicar

Querido(a) aluno(a), compreender o uso de controles, eventos e propriedades na programação com Python é essencial para todos os Técnicos em Desenvolvimento de Sistemas, pois possibilita a criação de interfaces gráficas de usuário (GUI) dinâmicas, responsivas e adaptáveis às necessidades dos usuários. Ao dominar como os controles interagem com eventos e como suas propriedades podem ser ajustadas em tempo real, é possível melhorar significativamente a usabilidade e a eficiência dos sistemas desenvolvidos.

Agora, como de costume, vamos praticar! Hoje, você será desafiado a implementar um código para aplicar o uso de controles, eventos e propriedades em Python, utilizando a biblioteca tkinter, que é uma das bibliotecas mais comuns na criação de interfaces gráficas nessa linguagem. Para cumprir esse desafio, você deve seguir o passo a passo:

Passo 1: comece importando a biblioteca tkinter, que será usada para criar a interface gráfica.
Passo 2: crie a janela principal da aplicação onde os controles serão adicionados.
Passo 3: adicione alguns controles, como botões e campos de texto, à janela principal.
Passo 4: crie funções que serão executadas em resposta a eventos, como cliques de botão e alterações de entrada.
Passo 5: associe os eventos aos controles correspondentes.
Passo 6: inicie o loop principal da aplicação para que a janela seja exibida, e os eventos, capturados.

A sequência dos passos está definida na Figura 4, a seguir:

Figura 4 - Passo a passo do “Saiba Aplicar”
Fonte: o autor.

#PraCegoVer: uma captura de tela que mostra na linha 1 #passo 1 na linha 2 import tkinter as tk na linha 3 from tkinter import messagebox na linha 5 #passo 2 na linha 6 root = tk.Tk() na linha 7 root.title("Exemplo de Controles, Eventos e Propriedades") na linha 8 root.geometry("400x300") na linha 10 #passo 3 na linha 11 entry = tk.Entry(root, width=30) na linha 12 entry.pack(pady=10) na linha 14 btn = tk.Button(root, text="Clique-me") na linha 15 btn.pack(pady=10) na linha 17 label = tk.Label(root, text="", fg="blue") na linha 18 label.pack(pady=10) na linha 20 #passo4 na linha 21 def on_button_click(): na linha 22 text = entry.get() na linha 23 if text: na linha 24 label.config(text=f"Você digitou: {text}") na linha 25 else: na linha 26 messagebox.showwarning("Aviso", "Por favor, insira algum texto.") na linha 28 def on_entry_change(event): na linha 29 text = entry.get() na linha 30 if len(text) > 10: na linha 31 messagebox.showinfo("Informação", "Texto muito longo!") na linha 33 #passo 5 na linha 34 btn.config(command=on_button_click) na linha 35 entry.bind("<KeyRelease>", on_entry_change) na linha 37 #passo6 na linha 38 root.mainloop(). Nas linhas 4, 9, 13, 16, 19, 27, 32 e 36 não há conteúdo escrito.

Explicação do código

Nesse exemplo, você criou uma janela com um campo de texto, um botão e um label. Dois eventos foram configurados: um clique no botão e uma alteração no campo de texto. A função on_button_click atualiza o texto do label com o que foi digitado no campo de texto, e a função on_entry_change mostra uma mensagem informativa se o texto no campo de entrada for muito longo.

Esse exemplo simples demonstra como utilizar controles, eventos e propriedades para criar uma interface interativa e responsiva em Python. Agora, chame seus colegas e professores para propor novas validações, novos eventos e novas situações à aplicação dos controles (eventos e propriedades). Preparado(a)? 3, 2, 1. Vamos lá!

REFERÊNCIAS

UI. MDN Web Docs, [s. l.], c2024a. Disponível em: https://developer.mozilla.org/en-US/docs/Glossary/UI. Acesso em: 17 set. 2024.

PROPRIEDADE. MDN Web Docs, [s. l.], c2024b. Disponível em: https://developer.mozilla.org/pt-BR/docs/Glossary/Property. Acesso em: 17 set. 2024.

ROSEMAN, M. Modern Tkinter for busy python developers: Quickly learn to create great looking user interface for Windows, Mac and Linux using Python’s standard GUI toolkit. 3th ed. Edinburgh: Late Afternoon Press, 2020.

TUCKER, A. B.; NOONAN, R. E. Linguagens de programação: Princípios e paradigmas. 2. ed. Porto Alegre: AMGH, 2010.

Page updated

Google Sites

Report abuse