Como já sabemos, o Visual Studio tem grande importância dentro de um ambiente de desenvolvimento.NET, isso porque essa IDE traz vários controles que aumentam consideravelmente o ganho de uma equipe no aspecto produtividade, além, é claro, de outras ferramentas que fazem deste um poderosíssimo recurso que estará presente em todas as fases de um projeto de software, desde sua análise à sua concepção.
Este artigo tem como objetivo esclarecer aspectos fundamentais no momento de se criar um controle customizado. É o primeiro de uma série de outros que abordarão o tema. Neste, veremos como estilizar um ASP.NET Server Control.
Implementação
Para criar um projeto de um controle web customizado, basta selecionar a opção ASP.NET Server Control e nomeá-la. Nesse caso, eu optei por chamá-lo de ParentDataControl, trata-se de um controle que deverá ser apresentado no último artigo da série, será uma boa opção para telas CRUD que trabalham com entidades relacionadas em contexto de ORM, o VS já oferece tecnologia para Mapeamento Objecto-Relacional denominada Entity Framework.
O segundo passo é criar uma aplicação web dentro da mesma solução e referenciar o controle para que possamos testar o seu comportamento.
Note que após dar um build solution o seu controle já estará disponível no toolbox da IDE.
Agora é preciso renomear a classe e sua respectiva ToolboxData, de acordo com o formato que você deseja que seja exibido no editor HTML. Dessa maneira, você determinará a TAG padrão que será gerada quando arrastar o seu controle customizado do toolbox para o WebForm.
Ex.: [ToolboxData(“<{0}:MeuControle runat=’Server’
BackColor=’Red’ BorderWidth=’3px’></{0}:MeuControle>”)]
O ToolboxData do controle que estamos criando deve ficar conforme o código abaixo:
Caso você tenha formatado a ToolboxData da mesma maneira que está sendo apresentada acima, irá perceber que quando arrastar o controle para o HTML a TAG gerada será como a abaixo:
Nesse instante, devemos implementar o método CreateChildControls que será responsável pela criação de controles filhos, ou seja, controles que estarão dentro do nosso ASP.NET Server Control. Para começar a brincadeira, irei adicionar um TextBox e um ImageButton dentro de um Panel.
Apesar de funcionar corretamente, o resultado visual é nada satisfatório, é agora que entrará em curso o principal objetivo deste primeiro artigo. Para organizar o projeto, criaremos algumas pastas que irão comportar os resources, veja abaixo:
- Pasta Images – Comporta as imagens utilizadas no projeto.
- Pasta Styles – Comporta os CSS utilizados no projeto.
- Pasta Script – Comporta os scripts que o controle irá utilizar.
Acompanhe como ficou a estrutura de pastas dos resources.
Selecione cada resource (imagens, scripts, estilos), vá até as suas propriedades e altere a opção Build Action para Embedded Resource.
É necessário adicionar os WebResource na AssemblyInfo.cs, devemos ter muito cuidado quando declarar os resources – o namespace deve seguir a estrutura de pastas proposta, conforme a imagem abaixo:
Agora vamos manipular os resources atribuídos à nossa aplicação. Primeiramente, iremos adicionar os CSS e os arquivos scripts. Esse código deve ser implementado dentro do método OnPreRender.
Para que os scripts funcionem corretamente, é preciso adicionar um ScriptManager no WebForm da aplicação web de testes. O resultado deve ser parecido com a imagem abaixo:
Pronto, seus estilos e seus scripts já estão incorporados à aplicação de testes. Está faltando apenas carregar a imagem do ImageButton. Para isso, precisamos adicionar mais algumas linhas de código no método CreateChildControls, veja como ficou o código abaixo.
A essa altura, o seu controle já está devidamente estilizado, vamos partir para o próximo objetivo deste artigo que é o disparo de eventos de um controle que está alojado dentro de um outro controle. Para isso, basta adicionar o evento Click no ImageButton, o resultado está esboçado na imagem abaixo:
Se utilizarmos o debugging, percebemos que o evento Click do botão não está sendo disparado. Para corrigir, basta implementar a interface INamingContainer. Ao invés do debugging, vamos testar o evento através de um alert javascript invocado a partir do Server-Side. Para isso, implemente o código abaixo dentro do método do evento.
Obs.: Toda vez que utilizar o método CreateChildControls, você deve implementar a interface INamingContainer com objetivo de evitar conflitos. Dessa forma, estaremos criando controles únicos dentro de uma hierarquia de controles. possibilitando a utilização de disparo de eventos entre outros recursos.
Conclusão
A atribuição de resources permite que você estilize seu controle através da utilização de folhas de estilos e imagens. Essas opções, além de melhorar o visual dos controles, os enriquecem, como, por exemplo, o javascript que lhe possibilitará criar recursos Client-Side.
É fato que algumas empresas procuram conceber softwares com características homogêneas e por mais retrógrado que isso possa parecer, com o passar dos anos é impossível dizer que a estratégia adotada está incorreta.
Geralmente esses softwares têm normativas de usabilidade definidas, e criar controles para atender a esses padrões pode ser uma boa ideia para aumentar a produtividade do seu trabalho e de seus colegas.
No próximo artigo, incrementaremos esse controle com atributos e coleções.
Referências:
Requisitos
- Visual Studio 2008 SP1
- Framework 3.5 SP1
Segue o código fonte para download.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?