Com muita satisfação retorno a publicar no Linha de Código, onde o Márcio sempre me recebeu bem e que por atividades relacionadas ao Doutorado me mantive afastado por um tempo. Retorno agora com um grupo de alunos, onde em cada artigo a ser publicado, apresentarei um deles à vocês. Estes alunos se empenharam e dedicaram-se de forma extremamente comprometida com a pesquisa e aprendizado durante os semestres que mantivemos contato próximo nas disciplinas que a eles eu ministrava. Isso me motivou muito e fazer com que o resultado dos trabalhos deles aparecesse para o mundo e, nada melhor do que o Linha de Código para isso.

Neste primeiro artigo apresento o Jonathan Nascimento Welzel, que pode ser contactado pelo email jnwelzel@gmail.com. O Jonathan está concluindo neste segundo semestre de 2009 suas disciplinas de graduação. Foi meu orientando no processo de estágio supervisionado e agora entra no processo de TCC (Trabalho de Conclusão de Curso). O Jonathan, apesar de ter trabalhado comigo neste artigo sobre .NET tem uma grande experiência no desenvolvimento de aplicações WEB com JSF e Richfaces, além de profundo conhecimento em JPA, Hibernate e Hibernate Search. Desta forma, estejam a vontade em solicitar o curriculum dele.

Este artigo é o resultado de uma pesquisa do Jonathan sobre o uso de Containers em aplicações Windows Forms, para .NET, através do Visual Studio, onde nós procuramos descrever as opções oferecidas pelo Visual Studio, para que você possa ter noção dos mesmos e suas características, subsidiando recursos que o auxiliem em uma tomada de decisão de quando usar qual container.

Introdução

Quando desenvolvemos uma aplicação que faça uso de uma interface gráfica devemos considerar com muita atenção a maneira como os componentes de cada tela são dispostos nelas. Isso é importante porque permite que as funcionalidades da aplicação sejam disponibilizadas para o usuário de maneira intuitiva que simplifique o seu uso.

É para nos ajudar nessa tarefa que o Visual Studio disponibiliza uma série de componentes que se responsabilizam por gerenciar o modo como os componentes são organizados dentro deles. Esses componentes são chamados de Containers e se encontram na Toolbox, a paleta de ferramentas localizada no canto esquerdo da tela, do Visual Studio como ilustrado na Figura 1.

Figura 1 - Os 6 diferentes tipos de containers disponíveis no Visual Studio.

FlowLayoutPanel

A primeira opção mostra o FlowLayoutPanel. Esse container dispõe seus componentes em uma linha horizontal e a partir do momento que o seu espaço se torna insuficiente para abrigar um determinado componente ele é então jogado para a linha de baixo, como ilustrado nas Figuras 2 e 3 logo abaixo:

Figura 2 - Um form em seu estado inicial usando um FlowLayoutPanel com 4 componentes.

Figura 3 - O mesmo form com sua largura reduzida, o que forçou o label2 e seu TextBox para a linha de baixo (isso se o FlowLayoutPanel estiver docado ao form).

Como o tamanho do FlowLayoutPanel pode ser manualmente ajustado e seus componentes são automaticamente dispostos conforme o espaço disponível, ele se torna eficaz na hora de montar painéis que contenham uma estrutura fixa e simples, como o representado acima.

GroupBox

Esse container serve para agrupar componentes que compartilhem alguma semelhança funcional dentro de uma mesma tela. Por exemplo, em uma tela de cadastro de produtos, caso seja necessário especificar dados tanto do produto como do seu fornecedor seria melhor agrupá-los em áreas diferentes da tela, especificando quais campos pertencem a cada área. A Figura 4 ilustra esse exemplo:

Figura 4 - Os campos pertinentes a cada entidade dentro do processo de cadastro de um produto devidamente separados por containers GroupBox.

Panel

O Panel representa a forma mais simples de se agrupar uma coleção de componentes. Ao contrário do GroupBox esse container não possui uma propriedade onde se possa especificar um título para o painel, mas é muito eficiente na hora de delimitar regiões com diferentes funcionalidades que mereçam destaque dentro de uma tela, como ilustrado na Figura 5.

Figura 5 - Um exemplo de como o Panel é usado para agrupar controles e destacar uma determinada área da tela.

SplitContainer

O SplitContainer divide a sua área de visualização em dois, ou mais, painéis cujos tamanhos podem ser ajustados em tempo de execução por um separador. Esse tipo de controle é geralmente associado a telas no estilo Windows Explorer, onde de um lado existe uma árvore de objetos e no outro uma lista de itens que pertencem a esse objeto.

Ele se torna muito útil na navegação e exploração de dados porque consegue facilmente separar os dados de um item de seu item e ao mesmo tempo gerar uma visualização simples desses dados como é mostrado na Figura 6.

Figura 6 - Uma lista de animais é mostrada no painel da esquerda e ao clicar em cada animal sua foto é mostrada no painel da direita.

TabControl

O TabControl é um controle muito útil pois nos permite mostrar vários dialogs em um único form, basta trocar de aba para acessar seu conteúdo, ou seja, ele é capaz de condensar uma grande quantidade de telas em uma única tela. Cada aba pode conter vários controles, de acordo com a sua função, como se fosse um form independente, mas geralmente são usados dentro de um único contexto, simplesmente para facilitar e organizar em categorias ou áreas a visualização dos dados relativos a esse contexto.

Os controles de inserção e remoção de abas podem ser facilmente acionados através da smart tag desse container como ilustrado na Figura 7. já as propriedades de cada uma dessas abas podem ser visualizadas e alteradas através da propriedade TabPages desse container como ilustrado na Figura 8.


Figura 7 - As abas podem ser facilmente adicionadas ou removidas a partir da smart tag do TabControl.	Figura 8 - As propriedades das abas podem ser configuradas a partir da propriedade TabPages do TabControl.

Para inserir controles dentro de cada aba basta selecionar a aba desejada e arrastá-los para dentro dela. Um exemplo de resultado final pode ser visualizado na Figura 9.

Figura 9 - Um exemplo de uso do TabControl com três abas aninhadas, todas relativas ao contexto de configuração representado na figura.

TableLayoutPanel

Como o nome já diz, esse controle dispõe seu conteúdo de forma tabular. Podemos adicionar linhas ou colunas, definir suas dimensões e agrupá-las como em uma tabela qualquer.

Cada célula da tabela pode abrigar um único controle, a menos que um container como um Panel seja adicionado antes, que pode ser posicionado de várias maneiras dentro dela. Uma propriedade interessante desse controle é o AutoSize, que faz com que os tamanhos das células se ajustem automaticamente ao seu conteúdo, independente da configuração feita anteriormente. Essa configuração pode ser feita a nível de linha/coluna, ou a nível de container.

Este container também oferece uma tela de configuração onde os tamanhos das suas linhas e colunas podem ser configurados de maneira individual como a Figura 10 mostra.

Figura 10 - Tela onde são configuradas as colunas e as linhas da tabela.

Esse tipo de layout se encaixa bem em situações onde existe uma entrada grande de dados, como por exemplo em formulários, porque os controles podem ser facilmente alinhados como a Figura 11 ilustra.

Figura 11 - Um formulário de cadastro usando o TableLayoutPanel com sete linhas e duas colunas. O último componente (abaixo do label6) usa um colSpan de 2.

Conclusão

A importância de um visual intuitivo que melhore a usabilidade do sistema é muito grande, assim como a distribuição dos componentes, da mesma maneira, ajuda o usuário a interagir com a aplicação de forma ágil e satisfatória. Isso para os programadores, que geralmente estão mais habituados com a parte da lógica de negócios da aplicação do que com seu visual, pode representar uma tafera um tanto quanto árdua. Porém o Visual Studio oferece várias soluções que facilitam de forma simples a organização dos controles dentro da aplicação através do uso de containers. Fica a encargo do desenvolvedor saber quais componentes agrupar de acordo com a funcionalidade de cada tela ou de acordo com o contexto na qual ela está inserida.

Desenvolvimento - C#

Conclusão

Leia também