Organizando Layout de Formulários Web com controles ASP.Net

Freqüentemente em nossas aplicações Web ficamos com uma eterna dúvida em como montar e organizar nossas páginas, daí surge a pergunta: Como organizar os controles na página de forma a aproveitar o espaço da melhor forma possível? Nesse artigo veremos alguns controles que podem facilitar e melhor organizar a estrutura de nossas aplicações.

Para começar Inicie o Visual Studio.Net e crie um Novo Web Site ( File -> New Web Site ). O primeiro controle a ser apresentado nesse artigo é o Table Control disponível na aba Standard da Toolbox. No controle Table Control temos a possibilidade de formatação dos texto e cabeçalho da tabela. No formulário Web criado. adicione o controle Table, conforme figura 1 abaixo. Localize a propriedade Rows e clique em Collection para adicionar linhas à table.

Figura 1 – Controle Table

Figura 2 – Propriedade Row

Clique no botão Add para adicionar uma linha e, em seguida será exibida uma propriedade chamada Cells. Clique na mesma para adicionar uma célula a linha criada. Observe que existe a propriedade Text, o qual você pode digitar um texto a ser exibido.

Figura 3 – Adiconando Linhas

Figura 4 – Adicionando Células

Após adicionar as linhas e células, clique em OK até retornar ao design da página. Selecione a tabela e aplica as formatações através das propriedades BackColor (cor de fundo), BorderColor (cor da borda), BorderStyle (estilo da borda)  e BorderWidth (comprimento da borda). Para adicionar um título a tabela, vá até a propriedade Caption e insira um texto.

Figura 5 - Alterando as propriedades de uma tabela

Figura 6 – Tabela Formatada

Com o controle Table, podemos ainda acessar e alterar as propriedades via código. Adicione um botão na página e no evento click insira o seguinte código:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Table1.Rows(0).Cells(1).Text = "Linha 0, célula 1"

        Table1.Caption = "Alterando as propriedades da célula via código"

    End Sub

Listagem 1 – Alterando as propriedades de um TableControl via código

         Um outro controle interessante é o Panel (Aba Standard da ToolBox)  pois você pode organizar a página em vários painéis e para cada painel definir propriedades de formatação.  O Panel é interessante também para agrupar controles. Adicione dois Panel na página e em cada panel adicione uma série de controles conforme a figura 7.

Figura 7 – Controle Panel

Figura 8 – Panel 1 e Panel 2

Adicione agora dois botões.  No evento click dos botões adicione o código conforme a figura 9.

Figura 9 – Botões

No código a ser escrito, programaremos qual panel estará visível quando um botão for clicado. Após escrever o código, execute a aplicação e clique nos botões.

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click

        Panel1.Visible = True

        Panel2.Visible = False

    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click

        Panel1.Visible = False

        Panel2.Visible = True

    End Sub

Listagem 2 – Evento click dos botões

Um outro controle interessante é o FIELDSET. O FIELDSET não é um controle ASP.Net, mas sim um componente HTML. O FIELDSET é semelhante a um GROUPBOX ( componente Windows Forms). Para adicionar um fieldset, vá até o source da página e insira as seguintes Tags HTML.

      <fieldset>

        <legend>Controle FieldSet</legend>

       </fieldset>

A tag <legend> define uma legenda para o FieldSet. Agora volte ao design da página e veja com que ficou. Adicione alguns controles na FieldSet e execute a aplicação

Figura 10 – Controle FieldSet

O último controle a ser apresentado nesse artigo é o MultView. O controle MultiView é uma coleção de controles View, onde podemos adicionar qualquer texto ou controle em  cada View.  Adicione um controle MultiView e três controles View. Adicione dentro de cada View, alguns controles como TextBox, Button, Label.

Figura 11 – Controle MultiView e View

Figura 12 – Formulário com MultiView e View

No código abaixo vamos programar os botões Próximo da View 1, Anterior e Próximo da View 2 e Anterior da View 3. Antes de executar a aplicação altere a propriedade:  ActiveViewIndex para 0 do controle MultiView para definir qual a view que será visível.  Em seguida execute a aplicação.

    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click

        MultiView1.ActiveViewIndex += 1

    End Sub

    Protected Sub Button6_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button6.Click

        MultiView1.ActiveViewIndex -= 1

    End Sub

    Protected Sub Button7_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button7.Click

        MultiView1.ActiveViewIndex += 1

    End Sub

    Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click

        MultiView1.ActiveViewIndex -= 1

    End Sub

Listagem 3 – Evento Click dos Botões

Chegamos ao final do artigo e vimos 4 componentes interessantes para melhor organizar nossos formulários.  Até o próximo