Make your own free website on Tripod.com

Criando os formulários do caso de uso

Para elaborar os formulários do sistema, não será usado o KDevelop, pois ele não fornece uma ferramenta para desenho. É possível, com o Kevelop, gerar os formulários (como o KVendas criado pelo KDevelop), mas será via código fonte, o que torna o desenvolvimento mais lento. Ao invés de trabalhar nos fontes, é mais fácil e intuitivo elaborar o desenho da interface visualmente usando o Designer. Depois de desenhados os formulários, o KDevelop os incorpora ao projeto restando apenas a tarefa de fazer as devidas chamadas para que ele seja exibido na tela.

Conforme a modelagem do sistema, duas classes fazem a interface com o usuário no cadastro de formas de pagamento: KListaFormaPagto e KFormaPagto. KListaFormaPagto é a primeira classe com a qual o usuário vai interagir, e através dela, será invocada a outra classe. Mas se os formulários não serão gerados no KDevelop, porque as classes foram criadas? Na verdade, KListaFormaPagto e KFormaPagto serão sub-classes de classes geradas a partir dos formulários desenhados no Designer. Posteriormente esse processo será explicado em mais detalhes. Portanto, para o cadatro de formas de pagamento, será preciso criar dois formulários.

Para criar um formulário, deve ser selecionado o menu Arquivo->Novo ou clicar no botão New file da barra de ferramentas. Uma caixa de diálogo como a da Figura 8 se abre para que seja escolhido o tipo de arquivo que será adicionado ao projeto. O campo Diretório deve estar preenchido com o camninho completo do diretório onde o projeto foi criado. Sem apagar o que está escrito, acrescenta-se src, que é o subdiretório do projeto onde os arquivos com os fontes estão armazenados.

No campo Filename, será informado o nome de qlistaformapagto.ui[1] e posteriormente será explicado porque não foi dado o nome de klistaformapagto (o nome da classe modelada). Na lista que tem abaixo, será usada a opção Widget (.ui) e depois deve-se clicar em Ok. Se o KDevelop perguntar sobre o target, é só aceitar as sugestões que o arquivo será acrescentado ao target atual.

Figura 8. KDevelop - criando um novo arquivo

Nesse momento o Designer deve ser aberto[2] e se ele perguntar novamente o tipo de interface que será criada, deve ser selecionado Widget. Um formulário m branco é aberto para que seja desenhada a nova interface. À esquerda da tela do Designer está a janela Toolbox onde são selecionados os widgets que serão acrescentados ao formulário. À direita estão outras janelas das quais a principal é a Property Editor/Signal Handlers, onde são definidas as propriedades dos widgets. A figura Figura 9 mostra a tela principal do Designer.

Como o aplicativo está sendo desenvolvido para funcionar com o KDE, se estiverem disponíveis, os widgets específicos para o KDE devem ser usados.

Figura 9. Designer - tela principal

Desenhando a tela de cadastro de formas de pagamento

A tela de cadastro de formas de pagamento deve apresentar uma lista, onde serão exibidas as formas de pagamento cadastradas no banco de dados, e alguns botões que permitem ao usuário acrescentar, excluir ou alterar formas de pagamento. Para mostrar a lista de formas de pagamento, será usado o widget KListView. Para criá-lo, deve-se selecionar a guia Views (KDE) e então o elemento KListView. Depois deve-se clicar no meio do formulário em branco. Não é preciso se preocupar com o layout da janela agora, mas apenas acrescentar os seus elementos. O Qt dispõe de widgets especializados em layout e a organização da janela será deixada a cargo desses elementos.

Agora são acrescentados os botões que vão fazer o formulário responder aos comandos do usuário. Para criar os botões, seleciona-se a guia Buttons (KDE) na lista de widgets e e acrescenta-se o widget KPushButton. Deverão ser acrescentados ao formulário cinco botões um abaixo do outro à direita do formulário. Esses cinco botões serão: Adicionar, Modificar, Apagar, Atualizar e Fechar.

Organizando os widgets no formulário

Depois de todos os widgets criados no formulário, deve-se então organizá-los na tela. Nesse ponto, o projetista da interface pode ser tentado a organizar o formulário manualmente, mas dessa forma não é possível garantir que a forma da janela se mantenha caso o usuário decida redimensionar a janela. Ao invés de organizar os widgets manualmente, serão usados widgets próprios para organizar a janela automaticamente. A primeira tarefa é acrescentar dois espaçadores verticais, um acima e outro abaixo do quarto botão (na ordem informada para criação dos botóes, o quarto botão corresponde a Atualizar). Os dois espaçadores criados vão "separar" o botão dos outros. A figura Figura 10 mostra como ficaria o formulário com os widgets criados.

Figura 10. Designer - formulário faltando layout

Depois de acrescentados os espaçadores, todos os botões juntamente com os espaçadores devem ser selecionados e em seguida deve usado o menu Layout->Lay Out Vertically. Depois de informado o layout, os botões ficam organizados. O próximo passo é clicar na área vazia do formulário e selecionar o menu Layout->Lsy Out Horizontally. Agora todo o formulário estará bem organizado. Se o formulário for redimensionado, a organização dos widgets se mantém.

Para ter uma idéia de como o formulário vai ficar no sistema pronto, deve-se abrir o menu Preview e selecionar um dos formatos da lista. Outra opção para previsualizar o formulário é pressionar Control+T. A Figura 11 mostra essa previsualização.

Figura 11. Designer - previsualização no formao Keramik

Alterando as propriedades dos elementos

Agora que o formulário está organizado, os widgets devem ser alterados para que tenham as características desejadas para o sistema. O primeiro passo será alterar o texto dos botões. Para isto, deve-se dar um clique duplo sobre o botão. Uma caixa de diálogo se abre para que seja digitado o texto que vai aparecer no botão. Para que o botão tenha uma tecla de acesso rápido (aquela que aparece sublinhada e que o usuário pressiona Alt+letra para acessá-lo) coloca-se o símbolo "&" antes da letra que deverá ser usada para acesso rápido. Dessa forma o botão Adicionar, por exemplo, terá o texto "&Adicionar".

Em seguida serão definidas as colunas que serão exibidas na lista. No Designer é possível deixar pronto o nome e a ordem em que os campos serão exibidos na lista. Para isso, deve-se dar um clique duplo sobre o widget criado para representar a lista. Uma caixa de diálogo como a da Figura 12 é aberta para que sejam alteradas algumas propriedades da lista. Agora deve ser selecionada a aba Columns para que as propriedades das colunas sejam alteradas. Para criar novas colunas, deve-se clicar em New Column e digitar o seu nome na linha de texto Text.

Figura 12. Designer - Alterando as propriedades das colunas

Existem duas opções abaixo do nome da coluna, onde a primeira (clickable), se for selecionada vai permitir ao usuário clicar no nome da coluna e o ListView vai ordenar a lista por esta coluna. Essa opção deve estar marcada apenas para os campos Código e Descrição. A segunda opção (Resizable) permite ao usuário redimensionar a coluna de acordo com sua vontade. Defindas as propriedades das colunas, deve-se clicar Ok e o KListView deverá ser redesenhado de acordo com as modificações realizadas nas colunas.

Até agora, foi feito apenas o desenho da tela, não houve nenhuma preocupação de como os widgets serão criados ou usados na implementação do sistema. A partir de agora serão trabalhadas as propriedades[3] dos widgets para que eles funcionem de acordo com as necessidades do sistema modelado e que sejam fáceis de identificar na hora de trabalhar com os códigos fonte.

O primeiro widget que será alterado será o próprio formulário. Para trabalhar nas propriedades do formulário, nenhum outro widget pode estar selecionado. A primeira propriedade listada na barra de propriedades é o nome do formulário. O nome mostrado deve ser Form1, que será alterado para QListaFormaPagto. Outra propriedade que deve ser alterada é caption que é o título da janela. Esse valor (que deve estar Form1) deve ser alterado para "Cadastro de formas de pagamento".

Alteradas as propriedades do formulário, serão agora alteradas as propriedades do KListView. O nome do widget será alterado para listaFormaPagto e a propriedade allColumnsShowFocus para true. Esta última propriedade faz com que, ao clicar um elemento na lista, a linha inteira seja selecionada. A última propriedade que será alterada para listaFormaPagto (note que agora a lista tem um nome conhecido, e ele pode ser udaso para referenciar o widget) é whatsThis. Esta propriedade faz com que a função What's this (O que é isto) seja ativada. Logo à direita da linha de texto existe um botão com reticências (...). Ao clicar sobre ele, um editor de texto como o da Figura 13 é aberto para que seja digitado o texto de ajuda para o widget selecionado, no caso listaFormaPagto.

Acima da janela do editor, na barra de ferramentas, existem alguns botões de formatação. Ao clicar em qualquer um deles serão adicionadas ao texto tags HTML correspondente à formatação escolhida. Esse recurso de suportar HTML é muito interessante, pois o texto pode ser formatado como se estivsse sendo montada uma página web.

Figura 13. Designer - Diálogo para digitar o texto What's this

Para os botões, serão alteradas apenas duas propriedades: name e toolTip. A propriedade toolTip faz com que apareça um pequeno texto quando o mouse estaciona sobre o widget. As propriedades para cada botão serão alteradas de acordo com a Tabela 1.

Tabela 1. Propriedades dos botões

BotãonametoolTip
AdicionarbotaoAdicionarCria uma nova forma de pagamento.
ModificarbotaoModificarAltera os dados da forma de pagamento selecionada
ApagarbotaoApagarApaga uma forma de pagamento
AtualizarbotaoAtualizarAtualiza a lista
FecharbotaoFecharFecha esta janela

Agora o formulário está pronto para responder a eventos resultantes da interação com o usuário. A próxima etapa será justamente informar quais os eventos serão tratados pelo formulário.

Interação com o usuário

Depois de pronto o formulário, com layout definido e com todos os widgets nomeados, deve-se pensar nos eventos que deverão ser tratados pelo formulário. Alguns eventos como minimizar, maximizar, redimensionar deverão ser tratados pela própria biblioteca Qt, a não ser que seja necessário algum tratamento especial. Porém, ao clicar no botão Adicionar será necessário ter um código diferenciado para que seja acrescentada uma forma de pagamento à lista. A codificação do evento propriamente, será feita no KDevelop, mas no Designer é possível dizer pelo menos o caminho a tomar quando ocorrer algum evento.

O Qt trabalha com um mecanismo para tratamento de eventos que ele denomina de signal and slot, onde um widget, ao receber um evento, emite um sinal que pode ser interceptado por outros widgets através de um slot. Tanto o signal como o slot são métodos especiais implementados na classe que representa o widget. Na verdade, este mecanismo não serve apenas para tratamento de eventos, mas para fazer uma troca de mensagens entre classes sem que uma conheça a estrutura da outra.

Para fazer com que um widget responda a um sinal emitido por outro, deve ser implementado um slot na classe e, ao instanciar a classe, o signal que deve ser capturado deve ser conectado ao slot criado na classe. É assim que a classe QListaFormaPagto responderá aos cliques nos botões acrescentados na interface. Para maiores informações sobre o mecanismo signal and slot, recomenda-se a leitura de [QTMANUAL]. A partir de agora o Designer será instruído a fazer essas conexões.

Para iníciar, será informado como o formulário irá responder ao clique do botão Fechar. Obviamente, ao clicar no botão fechar, deseja-se que a janela se feche e a escolha por iniciar com este botão foi para mostrar um fato: existem alguns slots implementados internamente pelo Qt para os widgets. Para fazer a primeira conexão (clicar em Fechar = Fechar a janela) deve-se selecionar o menu Edit->Connections. Uma caixa de diálogo como a da Figura 14 é aberta mostrando uma lista com as colunas mostradas na Tabela 2.

Tabela 2. Conexsão signal/slot

ColunaDescrição
SenderIndica o widget que emite o sinal.
SignalQual o sinal deverá ser capturado.
ReceiverIndica qual o widget que vai receber o sinal
SlotQual o slot será processado quando o sinal for capturado

Manipulando a lista de conexões, pode-se perceber que os mesmos sinais podem ser conectados a tantos slots quanto forem necessários. Dessa forma, se houverem vários widgets dependentes de um outro, esse mecanismo pode ser usado para atualizar os diversos widgets dependentes. Primeiramente será feita a conexão do sinal clicked() do widget botaoFechar com o slot close() do widget QListaFormaPagto. Resumindo, está sendo informado que, quando o botão Fechar for pressionado, o método close() do formulário (representado pela classe QListaFormaPagto) deverá ser executado.

Para fazer a conexão, clique no botão New. Na coluna Sender vai ter uma lista com todos os widgets disponíveis no formulário (daí a importância de dar nome a todos os widgets). Na coluna Sender escolhe-se o widget botaoFechar; na coluna Signal é escolhido o sinal clicked(); na coluna Receiver escolhe-se o widget QListaFormaPagto e na coluna Slot, seleciona-se o slot close(). Se o formulário for visualizado agora o botão Fechar vai funcionar corretamente, porque ele está conectado a um slot implementado pelo Qt.

Figura 14. Designer - conectando signal e slot

Para os outros botões, deverá haver um procedimento personalizado, pois o Qt não sabe o que fazer para manipular formas de pagamento. O Designer pode deixar definidos os slots que deverão ser usados ao clicar nos botões do formulário. Agora será mostrado em detalhes a conexão do botão Adicionar. Na coluna Sender escolhe-se botaoAdicionar; na coluna Signal escolhe-se clicked(); na coluna Receiver a opção QListaFormaPagto. Agora vem a personalização: criar um novo slot.

A criação de um novo slot é uma tarefa muito simples. Na janela de conexões, deve-se clicar no botão Edit Slots. Uma segunda caixa de diálogo como a da Figura 15 aparece com uma lista que deverá conter os slots personalizados. Para criar um novo slot, deve-se clicar no botão New Function. Nesse momento, os campos abaixo da tela serão disponibilizados para que sejam digitados os dados do novo slot. No campo Function deve ser digitado adicionar e os outros campos, são deixados como sugerido. Depois clica-se em Ok. Ao voltar, o slot criado vai aparecer na lista e então ele deve ser selecionado para confirmar a conexão.

Da mesma forma, pode-se criar os slots para os outros botões. Deve-se criar então o slot modificar() para associar ao botão botaoModificar, o slot apagar() para associar a botaoApagar e o slot atualizar() para associar a botaoAtualizar.

Figura 15. Designer - incluindo novos slots

Depois de criados os slots pode-se perceber uma particularidade: os seus nomes correspondem às mensagens trocadas pela classe KListaFormaPagto no diagrama de seqüência Manter cadastro de formas de pagamento. Isto porque obviamente deve haver coerência entre o modelo e a implementação. Depois de criados todos os slots deve-se fazer a conexão com os respectivos widgets.

Finalmente, o formulário QListaFormaPagto está pronto para a codificação, ou seja, a interface está pronta, faltando apenas implementar os slots que foram criados.

Notas

[1]

Para este trabalho, convencionou-se que todos os nomes de arquivos serão escritos com caracteres minúsculos, seguindo o padrão Linux.

[2]

Se, ao invés do Designer, uma outra janela aparecer pedindo qual o aplicativo deve ser usado para abir o arquivo, deve ser digitado designer. Para que o KDevelop sempre abra o Designer automaticamente, deve-se clicar na opção Lembrar da associação de aplicativo para este arquivo.

[3]

Se a barra de propriedades não estiver visível, deve-se clicar com o botão direito na barra de ferramentas e marcar a opção Property Editor/Signal Handler.