Esta lição fala sobre os controles básico que usamos na web. Como postei no twitter, não deixa de ser interessante, muitas coisas que na prática não observamos, acabamos descobrindo quando pegamos um pouco de teoria.
Esta lição fala sobre alguns dos controles do asp.net, que a cada versão lança mais controles para poder disponibilizar ao usuário final do sistema ou site uma experiência cada vez mais rica.
Os controles do asp.net herdam a classe WebControl, diferente dos controles HTML. Os controles asp.net facilitam a manipulação dos mesmos do lado do servidor, porém o resultado final para o cliente sera sempre html, os controles do asp.net quando renderizados no browser são renderizados como controles html comuns.
Um controle asp.net proporciona mais funcionalidades do que controles html, outra vantagem interessante é que eles tem a capacidade de detectar a capacidade do navegador e renderizar o código ideal para aproveitar o potencial do navegador. Além disso existem controles asp.net que não tem controles correspondente no html, são controles que surgiram para facilitar em algumas tarefas como o Calendar, Wizard, e a GridView.
A lição lista e explica as propriedades que são comuns nos controles asp.net. Não irei explicar cada uma, apenas colocarei aqui as que foram destacadas:
- AccessKey
- BackColor
- BorderColor
- BorderWidth
- BorderStyle
- CssClass
- Style
- Enabled
- EnableTheming
- EnableViewState
- Font
- ForeColor
- Height
- SkinID
- TabIndex
- ToolTip
- Width
A lição fala sobre a atualização de versões anteriores. O engine de renderização do asp.net 3, diferente do asp.net 3.5 e do 4. Claro que o objetivo é sempre melhorar, e fazer com que os códigos htmls renderizados para o usuário final sejam mais rápidos e eficientes. Porém quando migramos uma aplicação/site do asp.net 3.5 por exemplo para o 4, devido essa diferença do engine alguns itens em nossas páginas podem mudar. O que fazer?
Existem duas soluções, a ideal, revisar seu código asp.net e ver o que mudou para ser melhor aproveitado. Porém como sabemos que nem sempre isso é possível, temos a opção de definir que nossa aplicação continuará usando o engine do framework 3.5. Pode fazer isso definindo no arquivo web.config:
<system.web>
<pages controlRenderingCompatibilityVersion="3.5"/>
</system.web>
Outro aspecto que é interessante ressaltar é que os controles do asp.net renderizam códigos html utilizando tabelas, como sabemos que é algo ultrapassado você tem a opção de alterar a propriedade RenderOuterTable para false, onde desta forma tudo sera renderizado conforme você trabalhou na sua folha de estilo.
Vamos aos controles desta lição:
O controle Label
O controle Label é utilizado quando você precisa exibir um texto em um determinado local de sua página, porém só utilize o controle Label do asp.net se precisa que seu valor seja dinâmico, quando é necessário altera-lo em tempo de execução, caso contrário utilize um texto estático do html que irá consumir menos recurso.
O controle Label é muito utilizado em formulários de preenchimento de dados, onde costumamos colocar o label a esquerda e os controles de textbox a direita por exemplo. Como os labels são muito comuns nesses casos, você pode definir teclas de atalhos do teclado para os labels. Por exemplo quando ele pressionar (Alt + U) ir para o textbox "Usuário'. Isto é muito útil com usuário que já tem uma experiências com teclado e não costumam utilizar o mouse, mas principalmente por questão de acessibilidade, pois nem todos os usuário hoje tem capacidade de controlar um mouse.
Para fazer esta associação da label e dos textbox a teclas de atalhos siga os passos:
- Adicione um controle Label e um Textbox;
- Defina a propriedade AccessKey da label para a letra que ativará o atalho, neste exemplo use a letra U;
- Na propriedade Text da label coloque: <u>U</u>suário, desta forma irá renderizar: Usuário;
- Na propriedade AssociatedControlID coloquei o ID do seu Textbox;
O controle Literal
O Literal deve ser utilizado quando deseja adicionar HTML puro em sua página, apesar da idéia parecer semelhante ao Label, o Literal não herda de WebControl e não acrescenta qualquer elemento html a página, onde já o label acrescenta um <span> em sua página.
O Literal contém a propriedade Mode que é especificada a forma com que o conteúdo do Literal será tratado na página web. Existem 3 opções:
- PassThrough: O texto será processado como ele foi passado ao Literal executando códigos htmls e até mesmo scripts que serã processados pelo navegador.
- Encode: O conteúdo do texto é tratado como texto puro e não é processado como html ou scripts.
- Transform: O conteúdo do texto é convertido para a linguagem do navegador podendo ser HTML, XHTML, WML ou cHTML. Onde nesses casos tags inválidas são removidas automaticamente.
protected void Page_Load(object sender, EventArgs e)
{
Literal1.Text =@"This is an <font size=7>example</font>"+
"<script>alert(""Hi from Literal1"");</script>";
Literal2.Text =@"This is an <font size=7>example</font>"+
"<script>alert(""Hi from Literal2"");</script>";
Literal3.Text =@"This is an <font size=7>example</font>"+
"<script>alert(""Hi from Literal3"");</script>";
Literal1.Mode = LiteralMode.Encode;
Literal2.Mode = LiteralMode.PassThrough;
Literal3.Mode = LiteralMode.Transform;
}
Resultado:
O controle TextBox
Este é o que tem menos segredos dos citados pela lição. A lição explica as três propriedades de TextMode, onde a primeira e a padrão é SingleLine, MultiLine (onde conforme for digitando informação o textbox vai aumentado suas linhas e criando uma barra de rolagem) e Password (onde as informações digitadas recebem uma mascara para não exibir o que esta sendo digitado).
O TextBox possui o evento padrão TextChanged que é acionado quando o valor o texto é alterado, porém vale ressaltar que ele so irá executar o evento no servidor se a propriedade AutoPostBack estiver como true ou quando outro controle efetuar o Postback.
O controle CheckBox
O controle CheckBox é utilizado quando queremos disponibilizar ao usuário a escolha ou não de algo. Simplesmente a opção de Sim ou Não. Utilize a propriedade TextAlign para definir em qual lado da caixa de seleção ficará o texto. A propriedade Checked é utilizada para definir e obter o status do checkbox.
Assim como o textBox o CheckBox possui o evento CheckedChanged que é ativado quando seu valor é alterado, vale lembrar a mesma observação da propriedade AutoPostBack.
O controle RadioButton
Pensando que o CheckBox é um controle que da a opção de Sim e Não ao usuário, o controle RadioButton oferece várias opções para o usuário escolher uma sobre determinado grupo de itens. Para agrupar vários RadioButtons e garantir que somente um seja escolhido especifique o nome do grupo para todos eles, usando a propriedade GroupName. Para que exista um padrão, defina a propriedade Checked para true do RadioButton desejado.
Outra opção ao invés de criar vários RadioButton é criar um RadioButtonList e adicionar seus itens.
As duas técnicas mencionadas acima são chamadas de Payment Type quando são usados vários controles RadioButton e Shipping Type quando é implementado um RadioButtonList.
O controle DropDownList
A intenção do DropDownList é a mesma do RadioButtonList, oferecer diversas opções para o usuário, a grande diferente é que o RadioButtonList exibe todas na tela, ja o DropDownList as opções ficam ocultas até que o usuário clique no controle e exiba todas as opções. O DropDownList deve ser escolhido quando existir um grande número de opções.
Caso não defina qual dos itens será o padrão o asp.net automaticamente deixará o primeiro item como padrão e já vira selecionado.
Você pode popular um DropDownList utilizando o método DropDownList.Items.Add passando como parâmetro uma string ou uma instância do objeto ListItem. Veja o exemplo no código abaixo:
for (int i = 1900; i < DateTime.Now.Year; i++)
{
BirthYearDropDownList.Items.Add(i.ToString());
}
if (!IsPostBack)
{
BirthYearDropDownList.SelectedIndex = 85;
}
Manipule o evento SelectedIndexChanged para executar algo quando o usuário selecionar algum item. Para verificar qual item esta selecinado utilize a propriedade SelectedValue.
O controle ListBox
O ListBox é como um CheckBoxList que permite ao usuário selecionar nenhum ou vários itens, assim como o DropDownList sua vantagem é que os dados ficam reduzidos não sendo exibidas todas as opções, ele cria uma barra de rolagem para navegar entre as opções.
Por padrão o ListBox permite ao usuário selecionar apenas uma opção, mas você pode alterar a propriedade SelectionMode para Multiple, permitindo assim selecionar várias opções. A dificuldade é que o usuário entenda como selecionar mais de um item, para isso ele deve manter a tecla Ctrl pressinada e escolher os itens desejados.
O controle Button
O Button renderiza um botão comum na página que serve para executar um postback ao servidor. Existe duas formas de fazer isso, a padrão que é executando um submit, através do evento click do botão, como já foi explicado em lições anteriores. E um botão de comando.
Caso você tenha vários botões na sua página com funções semelhantes ao invés de criar o evento clique para cada botão, pode criar um único evento de comando que será executado por todos os botões. Defina o mesmo evento OnCommand para todos e defina a propriedade CommandName distinta para cada botão, que será a forma de identificar qual foi o botão clicado.
Exemplo:
<asp:Button ID="back" runat="server" oncommand="Button_Command" Text="Back" CommandName="Back" />
<asp:Button ID="up" runat="server" oncommand="Button_Command" Text="Up" CommandName="Up" />
protected void Button_Command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Back":
FeedbackLabel.Text = "Back";
break;
case "Up":
FeedbackLabel.Text = "Up";
break;
}
}
Simples e útil!!
Saindo um pouco dos principais controles do asp.net a lição mostra também como tornar controles html controles de servidor. Em resumo a grande verdade é, basta definir a propriedade ID e adicionar a propriedade runat="server". Mesmo que seja uma simples div html, executando este processo você conseguirá acessar esta div pelo seu código c# e manipula-la pelo servidor.
A lição até mostra uma página asp, migrando para asp.net sem trocar os controles:
Asp:
<html>
<head><title>Customer Page</title></head>
<body>
<form name="Form1" method="post" action="update.asp" id="Form1" >
<input type="text" name="CustomerName"
id="CustomerName" >
<input type="submit" name="SubmitButton"
value="Submit" id="SubmitButton" >
</form>
</body>
</html>
Asp.NET:
<html>
<head><title>Customer Page</title></head>
<body>
<form name="Form1" method="post" id="Form1" runat=”server”>
<input type="text" name="CustomerName"
id="CustomerName" runat=”server” >
<input type="submit" name="SubmitButton"
value="Submit" id="SubmitButton" runat=”server”>
</form>
</body>
</html>
Repare que existe uma mudança na tag form também. Claro que isso limita um pouco sua página, pois o uso de controles asp.net deixará sua aplicação mais rica. Porém como vimos é possível.
Assim fechamos este primeira lição do Capítulo 4.
