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
