Web – Expert – Mão na Massa
Criando um controle personalizado para ASP.NET
Criação de WebControl para controle de CheckBox com 3 estados
|
Do que trata o artigo |
|
·Criação de Web Control; ·Javascript; ·Embedded Resource; ·WebResources. ·Referência de Assemblies no Web.Config. |
|
Para que serve? |
|
Criar um componente web de três estados semelhante ao checkbox, que irá indicar quando seu valor está selecionado, não selecionado ou nulo. |
|
Em que situação o tema é útil |
|
Em todos os projetos que necessitem controlar estados de ativo, inativo ou não definido e exibir isso de uma forma amigável ao usuário. |
Resumo do DevMan
Aqui veremos a criação de um controle web personalizado, baseado no controle CheckBox do ASP.NET que terá por diferencial, gerenciar três estados distintos. Além do selecionado, não selecionado, que já são comuns, irá indicar quando o valor está nulo.
Na grande parte dos projetos que desenvolvemos, sempre nos deparamos com a necessidade de apresentar algum dado com o estado ligado/desligado, verdadeiro/falso ou o básico zero/um, mas e se o valor representado não estiver preenchido. Onde fica o nulo nesta história? Neste artigo veremos a implementação de um controle web, um checkbox, para manutenção deste terceiro estado.
Criando o ambiente
Para criarmos e testarmos o Three State CheckBox (nome dado ao projeto), usaremos dois projetos no Visual Studio, um Class Library e um ASP.NET Web Application, respectivamente DevmediaWebControl e TestCheckBoxControl. O Projeto DevmediaWebControl deve ser configurado conforme mostra a Figura 1, onde é necessário alterar o Assembly name e o Default namespace.
Figura 1. Configuração do projeto DevMediaWebControl
Nota do DevMan
A configuração das propriedades do projeto em relação ao nome do Assembly e Namespace permite fazermos a organização lógica das classes criadas em nossos projetos.
Por padrão, uma aplicação do tipo ClassLibrary não traz a referência do assembly System.Web. Essa referência é necessária para que possamos criar um novo WebControl. Vamos adicionar a referência deste assembly em nosso projeto. Para isso, no Solution Explorer, clique com o botão direito do mouse na pasta References e selecione a opção Add Reference e selecione o assembly necessário, como mostra a Figura 2. Além do System.Web precisaremos também associar as bibliotecas System.Drawing e System.Design.
Figura 2. Associação de Assembly
Para simular o comportamento visual do checkbox padrão Asp.Net serão utilizadas algumas imagens conforme apresentado na Tabela 1, organizadas conforme Figura 3.
|
Imagem |
Nome |
Descrição |
|
|
CI.gif |
Checked Image |
|
|
CID.gif |
Checked Image Disabled |
|
|
CIO.gif |
Checked Image Over |
|
|
UI.gif |
Undefined Image |
|
|
UIO.gif |
Undefined Image Over |
|
|
UNI.gif |
Unchecked Image |
|
|
UNID.gif |
Unchecked Image Disabled |
|
|
UNIO.gif |
Unchecked Image Over |
Tabela 1. Relação de Imagens
Figura 3. Organização das imagens
Nota: As imagens apresentadas neste artigo podem ser encontradas juntamente com o download do código deste componente.
Mão na massa
No nosso projeto estamos utilizando as imagens apresentadas na Figura 3. Como opção, você poderá associar outras imagens em tempo de desenvolvimento, sendo que por padrão o componente terá em sua biblioteca todas essas imagens associadas como recursos web (WebResources).
Para que as imagens sejam compiladas em conjunto com o nosso código elas precisam ser marcadas individualmente como Embedded Resources, para isso, selecione-as no Solution Explorer, abra suas propriedades através da tecla de atalho F4 ou clique com o botão da direita e escolha a opção Properties e, atribua à propriedade Build Action a opção Embedded Resource, como mostra a Figura 4." [...] continue lendo...
