Capítulo 1

A melhor maneira de fazer com que um programa seja empregado pelo usuário é uma boa interface visual. O usuário definitivamente não gosta de ter que ler várias páginas de um manual antes de começar a usar o seu programa.

Existem inúmeros toolkits para desenvolvimento de uma GUI (interface gráfica para o usuário), mas a maioria destes presume a escrita de um programa numa linguagem de uso geral como C, C++ ou Pascal. Modernamente apareceram alternativas que dão maior flexibilidade à programação de GUIs, principalmente na forma de editores visuais e linguagens de scripting. Conquanto os editores visuais promovam um aumento no nível da codificação, quando eles não nos libertam da linguagem C ou Pascal para a programação dos eventos, relativamente pouco se lucra. O melhor mesmo é a combinação desses dois novos mundos, usando uma linguagem como tcl, python ou perl em combinação com um editor visual simples e eficiente. Estudos mostram que a produtividade em se usar tcl/tk é aproximadamente 5 a 10 vezes maior que programando-se somente com algo como um "visual-qualquer-coisa" tão comumente empregado e codificando em C++, por exemplo.

Mostraremos como podemos ganhar em produtividade com tcl/tk, desenvolvendo aplicações simples mas de uso efetivo na prática. Para esse propósito, lançaremos mão de algumas ferramentas conhecidas como GUI-builders (construtores de GUIs), especificamente do Visual tcl.

barra de ferramentas
O Visual tcl permite-nos construir rapidamente uma interface gráfica simplesmente clicando em botões onde estão desenhados os widgets (elementos de interface) e depois modificando os seus atributos e propriedades. Na barra principal de ferramentas (acima) podemos escolher entre os tres tipos de gerenciamento de geometria disponíveis no tk:
  1. grid, que arruma os objetos em forma matricial, aproximadamente como numa planilha com as bordas de células invisíveis.
  2. pack, que organiza os objetos de forma compacta, respeitando contudo o espaçamento solicitado por cada um dos objetos.
  3. place, que põe os objetos no local exato requerido pelo usuário, sem tentar rearrumar os objetos de acordo com o seu tamanho.
widgets

Por ser bastante intuitivo, o seu aprendizado é bastante rápido. Sugerimos no princípio o uso do place (botão da direita na barra de ferramentas principal, que se encontra pressionado) como gerenciador geométrico.

exemplo de GUI O exemplo ao lado mostra alguns tipos de widgets, arranjados exteriormente com o pack. No terço superior um frame é usado como container para vários labels (textos indicativos), entries (plural de entry, usado para entrada de dados) e checkbuttons à esquerda. No centro temos um canvas, que pode ser usado para apresentar desenhos ou ítens gráficos como linhas, ovais, imagens, etc. Na parte inferior um outro frame (container) é usado para apresentar 3 buttons (botões).

Dentro de cada frame, os objetos foram colocados usando o place. Para se modificar o valor de cada label ou o texto apresentado nos botões, basta editar o texto que será apresentado na parte esquerda da barra de ferramentas principal.

Após a inclusão de um widget, podemos editar seus atributos (propriedades) através deste editor de atributos. Quando o objeto já se encontra na interface sendo desenhada, precisamos primeiramente selecioná-lo, simplesmente clicando neste, o que mostrará vários pequenos retângulos em volta do objeto ao qual nos referimos. Para modificar qualquer dos atributos, simplesmente introduzimos o seu novo valor e teclamos <Return> (<Enter> no linguajar do MS-Windows). O editor de atributos pode ser visualizado/escondido pelo menu window na barra de ferramentas.

A edição de cores pode ser feita introduzindo o nome da cor (constante do arquivo rgb.txt no X-Windows), por um número da forma #RRGGBB ou #RRRGGGBBB,etc, ou ainda interativamente, clicando no botão com a cor correspondente. São definidas cores para o fundo (backgrond) ou texto (foreground) de cada widget, para cada estado:

  • normal
  • ativado, quando o mouse passa sobre o objeto.
  • highlight, que é uma borda adicional, controlada pelo atributo highlightthickness, que define se o focus (foco) está no widget em questão.
editor de atributos

hierarquia dos widgets

Os widgets têm nomes que refletem sua posição numa estrutura hierárquica. A janela é um widget especial chamado de toplevel. Todos os outros tipos de objetos devem ser contidos no interior de algum toplevel. Todos os widgets existentes devem possuir nomes diferentes (duplicatas não são permitidas), formados a partir do nome do toplevel que os contém na forma genérica: .toplevel.container1.container2.....widget , onde os containers são geralmente frames. Isso corresponde aproximadamente à hierarquia de diretórios de um sistema de arquivos, sendo o "." usado no lugar da "/".

widget tree O visual tcl mostra a hierarquia de widgets numa janela chamada widget tree. Pressionando qualquer símbolo de widget aqui, iremos selecionar o objeto correspondente no editor visual. O objeto "vt.tcl" mostrado ao lado é simplesmente a barra de ferramentas principal do visual tcl e, evidentemente, não pode ser editado. Essa árvore corresponde à aplicação mostrada anteriormente.

Observe que o canvas se encontra solitário na última posição, mas a ordem de empacotamento (usando o geometry manager pack) é que determina sua ordem na figura. Se o toplevel desta janela se chamar .top , podemos ter um dos frames chamados por exemplo .top.controle e o outro .top.botoes, poderemos chamar o canvas de .top.tela. Um dos botões de baixo poderia ser chamado de .top.botoes.saida, por exemplo, para indicar que ele finalizaria o programa. O nome dos widgets precisa conter o nome dos seus "pais" na hierarquia, o que estamos mostrando aqui.

criando um programa bastante simples

Iniciaremos com um exemplo de aplicação simplificada. Nossa aplicação deverá mostrar uma mensagem na console que a iniciou quando um botão (mensagem) for pressionado, e deverá ser encerrada quando outro botão (saida) for clicado.

Para programar esta "aplicação" devemos primeiro criar um toplevel (menu File New), modificar o seu tamanho para o desejado a partir do canto inferior direito e depois adicionar 2 botões, movendo-os para as suas posições. O botão mensagem ao lado está selecionado (pequenos retângulos em volta). Depois devemos clicar duplamente (dois cliques rápidos) nos botões e definir a função a ser atribuida a cada um. Clique duplamente no botão mensagem e introduza a linha mostrada na figura ao lado (figura inferior). Este comando:

puts "escrevendo com um botão"

irá mostrar a frase colocada entre aspas na console que foi usada para rodar o programa. Faça o mesmo com o outro botão e introduza o comando exit.

aplicacao simples
editando comando

Poderíamos definir outras funcões além das que serão acionadas por botões, usando a janela de funções do visual tcl. Este editor visual deixa duas funcões pré-definidas, apesar que estas não são necessárias de modo geral com o tcl/tk, mas são úteis quando queremos executar operações (1) no início do programa, mesmo antes de serem criados os widgets da aplicação (função init), (2) logo após serem criadas as aplicações, recebendo os argumentos da linha de comando do shell, onde estamos chamando a aplicação (função main). Estas funções, tanto as pré-definidas quanto as criadas por nós são usadas para melhor estruturar o programa, evitando "spaguetti" no código.

janela de funcoes
pppliga.tcl Vejamos agora um exemplo mais realista. Crie um toplevel como o mostrado ao lado (esta aplicação está disponível na minha home page, http://www.pragana.net/). Para os separadores, use frames com altura 1 ou 2 e relief (relevo) sunken, editando-os na janela de atributos. Troque as cores de alguns labels para ficar mais agradável a visualização. Modifique os fontes de caracteres defaults dos widgets se necessário. Para evitar as linhas que aparecem em volta dos labels, modifique o atributo highlightthickness para 0 (zero). (Observe o checkbutton com "use autenticação PAP" para ver sobre qual linha estou me referindo) Isto melhora a apresentação da GUI.

Não se preocupe por enquanto com a codificação das funções, mas somente com a aparência e atributos dos objetos. Posteriormente veremos como implementar a funcionalidade deste programa. Ou, se você está morrendo de curiosidade, pegue o programa na uri dada acima e veja como é relativamente simples! Não passe adiante sem desenvolver sua própria interface!


rpragana Mon Mar 15 10:21:52 EST 1999